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
ProjectEvergreen · Sep 23, 2021 · 4b2fc8d · 4b2fc8d
1 parent 081b5c7
commit 4b2fc8d
Showing 1 changed file with 17 additions and 3 deletions.
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>/, '');