feat(cxl-ui): migrate to lit

anoblet · Dec 7, 2021 · e13bd37 · e13bd37
1 parent 5e0ebee
commit e13bd37
Show file tree

Hide file tree

Showing 27 changed files with 33 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,6 @@
     "karma-webpack": "^4.0.0-rc.5",
     "lerna": "^3.20.1",
     "lint-staged": "^10.5.3",
-    "lit-html": "^2.0.0-rc.3",
     "mocha": "^6.1.4",
     "node-watch": "^0.7.1",
     "npm-run-all": "^4.1.5",

diff --git a/packages/cxl-lumo-styles/package.json b/packages/cxl-lumo-styles/package.json
@@ -14,7 +14,6 @@
     "@vaadin/polymer-legacy-adapter": "^22.0.0",
     "@vaadin/vaadin-lumo-styles": "^22.0.0",
     "@vaadin/vaadin-themable-mixin": "^22.0.0",
-    "lit-element": "^2.2.1",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.2"
   }
 }
diff --git a/packages/cxl-lumo-styles/src/utils.js b/packages/cxl-lumo-styles/src/utils.js
@@ -1,5 +1,5 @@
 // @see https://github.com/vaadin/vaadin-themable-mixin/blob/v1.5.2/register-styles.html
-import { css, CSSResult, unsafeCSS } from 'lit-element';
+import { css, CSSResult, unsafeCSS } from 'lit';
 import '@vaadin/polymer-legacy-adapter';
 
 let moduleIdIndex = 0;

diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json
@@ -24,8 +24,7 @@
     "@vaadin/tabs": "^22.0.0",
     "@vaadin/vaadin-themable-mixin": "^22.0.0",
     "headroom.js": "^0.12.0",
-    "lit-element": "^2.2.1",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.2"
   },
   "@pika/pack": {
     "pipeline": [

diff --git a/packages/cxl-ui/src/components/cxl-accordion-card.js b/packages/cxl-ui/src/components/cxl-accordion-card.js
@@ -1,4 +1,4 @@
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { AccordionPanel } from '@vaadin/accordion/src/vaadin-accordion-panel';
 

diff --git a/packages/cxl-ui/src/components/cxl-app-layout.js b/packages/cxl-ui/src/components/cxl-app-layout.js
@@ -1,7 +1,8 @@
 /**
  * @todo implement primary action button.
  */
-import { LitElement, html, customElement, property, query } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import normalizeWheel from '@conversionxl/normalize-wheel';

diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js
@@ -1,4 +1,5 @@
-import { customElement, LitElement, html } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlCardGlobalStyles from '../styles/global/cxl-card-css.js';

diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -1,4 +1,5 @@
-import { LitElement, html, customElement, property, query } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import cxlMarketingNavStyles from '../styles/cxl-marketing-nav-css.js';

diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js
@@ -1,4 +1,5 @@
-import { LitElement, customElement, html, svg } from 'lit-element';
+import { LitElement, html, svg } from 'lit';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
 

diff --git a/packages/cxl-ui/src/components/cxl-tabs-slider.js b/packages/cxl-ui/src/components/cxl-tabs-slider.js
@@ -1,6 +1,6 @@
 import '@conversionxl/cxl-lumo-styles';
 import { Tabs } from '@vaadin/tabs';
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 
 @customElement('cxl-tabs-slider')
 export class CXLTabsSliderElement extends Tabs {

diff --git a/packages/cxl-ui/src/components/cxl-vaadin-accordion.js b/packages/cxl-ui/src/components/cxl-vaadin-accordion.js
@@ -1,4 +1,4 @@
-import { customElement } from 'lit-element';
+import { customElement } from 'lit/decorators';
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/accordion';
 import { Accordion } from '@vaadin/accordion/src/vaadin-accordion';

diff --git a/packages/storybook/cxl-lumo-styles/elements.stories.js b/packages/storybook/cxl-lumo-styles/elements.stories.js
@@ -1,7 +1,7 @@
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/button';
 import '@vaadin/notification';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import cxlLoadingStyles from '@conversionxl/cxl-lumo-styles/src/styles/loading-css.js';
 import { CXLAppLayout } from '../cxl-ui/cxl-app-layout/layout=1c.stories';
 

diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -1,7 +1,7 @@
 import '@conversionxl/cxl-lumo-styles';
 import '@vaadin/button';
 import { withKnobs } from '@storybook/addon-knobs';
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
   decorators: [withKnobs],

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-c.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { CXLMarketingNav } from '../cxl-marketing-nav.stories';

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c-w.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { CXLMarketingNav } from '../cxl-marketing-nav.stories';

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=1c.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-l.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import '@conversionxl/cxl-ui/src/components/cxl-app-layout.js';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';

diff --git a/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js b/packages/storybook/cxl-ui/cxl-card/[theme=cxl-testimonial].stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-card.js';
 import '@conversionxl/cxl-lumo-styles';
 

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { useEffect } from '@storybook/client-api';
 import '@conversionxl/cxl-ui/src/components/cxl-marketing-nav.js';
 import { Headroom } from '@conversionxl/cxl-ui';

diff --git a/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js b/packages/storybook/cxl-ui/cxl-tabs-slider/cxl-tabs-slider.stories.js
@@ -1,6 +1,6 @@
 import '@conversionxl/cxl-ui/src/components/cxl-card';
 import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider';
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { CXLTestimonial } from '../cxl-card/[theme=cxl-testimonial].stories';
 import archiveData from '../cxl-vaadin-accordion/theme=cxl-archive.data.json';
 

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/cxl-accordion-card.story.js
@@ -1,5 +1,5 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import '@conversionxl/cxl-ui/src/components/cxl-accordion-card.js';
 import archiveData from './theme=cxl-archive.data.json';

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-faq.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-faq.story.js
@@ -1,5 +1,5 @@
-import { html } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 import faqData from './theme=cxl-faq.data.json';
 

diff --git a/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-minidegree-track.story.js b/packages/storybook/cxl-ui/cxl-vaadin-accordion/theme=cxl-minidegree-track.story.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion.js';
 
 export const CXLVaadinAccordionThemeMinidegreeTrack = () => html`

diff --git a/packages/storybook/cxl-ui/footer-nav.stories.js b/packages/storybook/cxl-ui/footer-nav.stories.js
@@ -1,4 +1,4 @@
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 export default {
   title: 'CXL UI/footer',

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -20,7 +20,7 @@
     "@storybook/web-components": "^6.3.12",
     "@vaadin/button": "^22.0.0",
     "@vaadin/notification": "^22.0.0",
-    "lit-html": "^2.0.0-rc.3"
+    "lit": "^2.0.2"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

diff --git a/yarn.lock b/yarn.lock
@@ -10972,7 +10972,7 @@ listr@^0.14.3:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-lit-element@^2.0.1, lit-element@^2.2.1:
+lit-element@^2.0.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.1.tgz#3fa74b121a6cd22902409ae3859b7847d01aa6b6"
   integrity sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ==
@@ -10999,7 +10999,7 @@ lit-html@^2.0.0, lit-html@^2.0.0-rc.3:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit@^2.0.0:
+lit@^2.0.0, lit@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.2.tgz#5e6f422924e0732258629fb379556b6d23f7179c"
   integrity sha512-hKA/1YaSB+P+DvKWuR2q1Xzy/iayhNrJ3aveD0OQ9CKn6wUjsdnF/7LavDOJsKP/K5jzW/kXsuduPgRvTFrFJw==