upgrade website to lit@2 (#611)

* init commit with website components working use lit 2 * update import node modules spec per new lit packaging * disable SPA mode spec * all specs passing with new lit * update cli devDep * everything working and rebased * restore eve components * add trusted types scaffolding for lit-html * upgrade to latest version of lit-redux-router with lit 2 compat * update specs * update develop specs for lit@2 * upgrade lit rc4 * handling puppeteer serialization issues with lit 2 and Shady DOM (#719) * WIP * revert www changes * apply lit polyfill support * conditially check for lit before using polyfill * upgrade to final stable version * rebased from master but broken??? * bump deps and set lit resolututions * ship lit polyfill for lit and plugin polyfills users
ProjectEvergreen · Oct 6, 2021 · 953286b · 953286b
1 parent 4879ae5
commit 953286b
Show file tree

Hide file tree

Showing 52 changed files with 1,051 additions and 225 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,9 @@
     "lint:css": "stylelint \"./www/**/*.js\", \"./www/**/*.css\"",
     "lint": "ls-lint && yarn lint:js && yarn lint:ts && yarn lint:css"
   },
+  "resolutions": {
+    "lit": "^2.0.0"
+  },
   "devDependencies": {
     "@ls-lint/ls-lint": "^1.9.2",
     "@typescript-eslint/eslint-plugin": "^4.28.2",

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@webcomponents/webcomponentsjs": "^2.4.4",
+    "@webcomponents/webcomponentsjs": "^2.6.0",
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
@@ -50,12 +50,12 @@
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",
-    "@lion/button": "~0.12.0",
-    "@lion/calendar": "~0.15.0",
+    "@lion/button": "^0.14.3",
+    "@lion/calendar": "^0.16.5",
     "@mapbox/rehype-prism": "^0.5.0",
     "@types/trusted-types": "^2.0.2",
-    "lit-element": "^2.4.0",
-    "lit-redux-router": "^0.17.1",
+    "lit": "^2.0.0",
+    "lit-redux-router": "~0.20.0",
     "lodash-es": "^4.17.20",
     "postcss-nested": "^4.1.2",
     "pwa-helpers": "^0.9.1",

diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -197,11 +197,24 @@ const getAppTemplate = (contents, templatesDir, customImports = [], contextPlugi
   return appTemplateContents;
 };
 
-const getUserScripts = (contents) => {
-  // polyfill chromium for WCs support
+const getUserScripts = (contents, context) => {
+  // polyfill chromium for WC support
+  // https://lit.dev/docs/tools/requirements/#polyfills
   if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
+    const { projectDirectory, userWorkspace } = context;
+    const dependencies = fs.existsSync(path.join(userWorkspace, 'package.json')) // handle monorepos first
+      ? JSON.parse(fs.readFileSync(path.join(userWorkspace, 'package.json'), 'utf-8')).dependencies
+      : fs.existsSync(path.join(projectDirectory, 'package.json'))
+        ? JSON.parse(fs.readFileSync(path.join(projectDirectory, 'package.json'), 'utf-8')).dependencies
+        : {};
+
+    const litPolyfill = dependencies && dependencies.lit
+      ? '<script src="/node_modules/lit/polyfill-support.js"></script>\n'
+      : '';
+
     contents = contents.replace('<head>', `
       <head>
+        ${litPolyfill}
         <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     `);
   }
@@ -353,7 +366,7 @@ class StandardHtmlResource extends ResourceInterface {
         }
 
         body = getAppTemplate(body, userTemplatesDir, customImports, contextPlugins);  
-        body = getUserScripts(body, customImports);
+        body = getUserScripts(body, this.compilation.context);
         body = getMetaContent(normalizedUrl.replace(/\\/g, '/'), config, body);
 
         if (processedMarkdown) {
@@ -404,6 +417,7 @@ class StandardHtmlResource extends ResourceInterface {
         if (hasHead && hasHead.length > 0) {
           let contents = hasHead[0];
 
+          contents = contents.replace(/<script src="(.*lit\/polyfill-support.js)"><\/script>/, '');
           contents = contents.replace(/<script src="(.*webcomponents-bundle.js)"><\/script>/, '');
           contents = contents.replace(/<script type="importmap-shim">.*?<\/script>/s, '');
           contents = contents.replace(/<script defer="" src="(.*es-module-shims.js)"><\/script>/, '');

diff --git a/packages/cli/test/cases/build.config.mode-spa/build.config.mode-spa.spec.js b/packages/cli/test/cases/build.config.mode-spa/build.config.mode-spa.spec.js
@@ -48,34 +48,64 @@ describe('Build Greenwood With: ', function() {
   describe(LABEL, function() {
 
     before(async function() {
-      const litElementLibs = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-element/lib/*.js`, 
-        `${outputPath}/node_modules/lit-element/lib/`
+      const lit = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/*.js`, 
+        `${outputPath}/node_modules/lit/`
+      );
+      const litDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/decorators/*.js`, 
+        `${outputPath}/node_modules/lit/decorators/`
+      );
+      const litDirectives = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/directives/*.js`, 
+        `${outputPath}/node_modules/lit/directives/`
+      );
+      const litPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/package.json`, 
+        `${outputPath}/node_modules/lit/`
       );
       const litElement = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-element/lit-element.js`, 
+        `${process.cwd()}/node_modules/lit-element/*.js`, 
         `${outputPath}/node_modules/lit-element/`
       );
       const litElementPackageJson = await getDependencyFiles(
         `${process.cwd()}/node_modules/lit-element/package.json`, 
         `${outputPath}/node_modules/lit-element/`
       );
+      const litElementDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-element/decorators/*.js`, 
+        `${outputPath}/node_modules/lit-element/decorators/`
+      );
       const litHtml = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/lit-html.js`, 
+        `${process.cwd()}/node_modules/lit-html/*.js`, 
         `${outputPath}/node_modules/lit-html/`
       );
       const litHtmlPackageJson = await getDependencyFiles(
         `${process.cwd()}/node_modules/lit-html/package.json`, 
         `${outputPath}/node_modules/lit-html/`
       );
-      const litHtmlLibs = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/lib/*.js`, 
-        `${outputPath}/node_modules/lit-html/lib/`
-      );
       const litHtmlDirectives = await getDependencyFiles(
-        `${process.cwd()}/node_modules/lit-html/directives/*.js`,
+        `${process.cwd()}/node_modules/lit-html/directives/*.js`, 
         `${outputPath}/node_modules/lit-html/directives/`
       );
+      // lit-html has a dependency on this
+      // https://github.com/lit/lit/blob/main/packages/lit-html/package.json#L82
+      const trustedTypes = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@types/trusted-types/package.json`,
+        `${outputPath}/node_modules/@types/trusted-types/`
+      );
+      const litReactiveElement = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/*.js`, 
+        `${outputPath}/node_modules/@lit/reactive-element/`
+      );
+      const litReactiveElementDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/decorators/*.js`, 
+        `${outputPath}/node_modules/@lit/reactive-element/decorators/`
+      );
+      const litReactiveElementPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/package.json`, 
+        `${outputPath}/node_modules/@lit/reactive-element/`
+      );
       const litReduxRouterPackageJson = await getDependencyFiles(
         `${process.cwd()}/node_modules/lit-redux-router/package.json`,
         `${outputPath}/node_modules/lit-redux-router/`
@@ -147,13 +177,20 @@ describe('Build Greenwood With: ', function() {
 
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
-        ...litElementLibs,
-        ...litElement,
+        ...lit,
+        ...litPackageJson,
+        ...litDirectives,
+        ...litDecorators,
         ...litElementPackageJson,
+        ...litElement,
+        ...litElementDecorators,
         ...litHtmlPackageJson,
         ...litHtml,
-        ...litHtmlLibs,
         ...litHtmlDirectives,
+        ...trustedTypes,
+        ...litReactiveElement,
+        ...litReactiveElementDecorators,
+        ...litReactiveElementPackageJson,
         ...litReduxRouterPackageJson,
         ...litReduxRouter,
         ...litReduxRouterLibs,

diff --git a/packages/cli/test/cases/build.config.mode-spa/package.json b/packages/cli/test/cases/build.config.mode-spa/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "lit-element": "^2.4.0",
-    "lit-redux-router": "^0.17.1",
+    "lit": "^2.0.0",
+    "lit-redux-router": "~0.20.0",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"

diff --git a/packages/cli/test/cases/build.config.mode-spa/src/components/footer.js b/packages/cli/test/cases/build.config.mode-spa/src/components/footer.js
@@ -1,4 +1,4 @@
-import { css, html, LitElement } from 'lit-element';
+import { css, html, LitElement } from 'lit';
 
 class FooterComponent extends LitElement {
 

diff --git a/packages/cli/test/cases/build.config.mode-spa/src/index.js b/packages/cli/test/cases/build.config.mode-spa/src/index.js
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit-element';
+import { html, LitElement } from 'lit';
 import { connectRouter } from 'lit-redux-router';
 import { applyMiddleware, createStore, compose, combineReducers } from 'redux';
 import { lazyReducerEnhancer } from 'pwa-helpers';
@@ -16,12 +16,12 @@ class MyApp extends LitElement {
       <div class="app-content">
         <lit-route 
           path="/" 
-          component="app-home"
+          component="app-route-home"
           .resolve="${() => import('./routes/home.js')}"
         ></lit-route>
         <lit-route 
           path="/about" 
-          component="app-about"
+          component="app-route-about"
           .resolve="${() => import('./routes/about.js')}"
         ></lit-route>
       </div>

diff --git a/packages/cli/test/cases/build.config.mode-spa/src/routes/about.js b/packages/cli/test/cases/build.config.mode-spa/src/routes/about.js
@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit-element';
+import { html, LitElement } from 'lit';
 
 class AppAbout extends LitElement {
   render() {
     return html`<h1>About</h1>`;
   }
 }
 
-customElements.define('app-about', AppAbout);
+customElements.define('app-route-about', AppAbout);
diff --git a/packages/cli/test/cases/build.config.mode-spa/src/routes/home.js b/packages/cli/test/cases/build.config.mode-spa/src/routes/home.js
@@ -1,9 +1,9 @@
-import { html, LitElement } from 'lit-element';
+import { html, LitElement } from 'lit';
 
 class AppHome extends LitElement {
   render() {
     return html`<h1>Home</h1>`;
   }
 }
 
-customElements.define('app-home', AppHome);
+customElements.define('app-route-home', AppHome);