all tests passing

ProjectEvergreen · Feb 1, 2024 · 1629fb6 · 1629fb6
1 parent 8a271ce
commit 1629fb6
Show file tree

Hide file tree

Showing 9 changed files with 1,086 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     "lint:js": "eslint \"*.{js,md}\" \"./packages/**/**/*.{js,md}\" \"./test/*.js\" \"./www/**/**/*.{js,md}\"",
     "lint:ts": "eslint \"./packages/**/**/*.ts\"",
     "lint:css": "stylelint \"./www/**/*.js\", \"./www/**/*.css\"",
-    "lint": "ls-lint && yarn lint:js && yarn lint:ts && yarn lint:css"
+    "lint": "ls-lint && yarn lint:js && yarn lint:ts && yarn lint:css",
+    "postinstall": "patch-package"
   },
   "resolutions": {
     "lit": "^3.1.0"
@@ -48,6 +49,7 @@
     "jsdom": "^16.5.0",
     "lerna": "^3.16.4",
     "mocha": "^9.1.3",
+    "patch-package": "^8.0.0",
     "rimraf": "^2.6.3",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
@@ -375,7 +375,9 @@ const getRollupConfigForApis = async (compilation) => {
     plugins: [
       greenwoodJsonLoader(),
       greenwoodResourceLoader(compilation),
-      nodeResolve(),
+      nodeResolve({
+        exportConditions: ['default', 'module', 'import', 'node']
+      }),
       commonjs(),
       greenwoodImportMetaUrl(compilation)
     ]
@@ -397,11 +399,12 @@ const getRollupConfigForSsr = async (compilation, input) => {
     plugins: [
       greenwoodJsonLoader(),
       greenwoodResourceLoader(compilation),
-      // TODO let this through for lit to enable nodeResolve({ preferBuiltins: true })
+      // TODO enable preferBuiltins for lit (do we still need this?)
       // https://github.com/lit/lit/issues/449
       // https://github.com/ProjectEvergreen/greenwood/issues/1118
       nodeResolve({
-        preferBuiltins: true
+        exportConditions: ['default', 'module', 'import', 'node']
+        // preferBuiltins: true,
       }),
       commonjs(),
       greenwoodImportMetaUrl(compilation),

diff --git a/packages/cli/src/lib/resource-utils.js b/packages/cli/src/lib/resource-utils.js
@@ -124,7 +124,8 @@ async function trackResourcesForRoute(html, compilation, route) {
   const scripts = await Promise.all(root.querySelectorAll('script')
     .filter(script => (
       isLocalLink(script.getAttribute('src')) || script.rawText)
-      && script.rawAttrs.indexOf('importmap') < 0)
+      && script.rawAttrs.indexOf('importmap') < 0
+      && script.getAttribute('type') !== 'application/json')
     .map(async(script) => {
       const src = script.getAttribute('src');
       const optimizationAttr = script.getAttribute('data-gwd-opt');

diff --git a/packages/cli/src/lib/templating-utils.js b/packages/cli/src/lib/templating-utils.js
@@ -1,7 +1,7 @@
 import fs from 'fs/promises';
 import htmlparser from 'node-html-parser';
 import { checkResourceExists } from './resource-utils.js';
-import { getPackageJson } from './node-modules-utils.js';
+// import { getPackageJson } from './node-modules-utils.js';
 
 async function getCustomPageTemplatesFromPlugins(contextPlugins, templateName) {
   const customTemplateLocations = [];
@@ -177,7 +177,7 @@ async function getAppTemplate(pageTemplateContents, context, customImports = [],
 }
 
 async function getUserScripts (contents, compilation) {
-  const { context, config } = compilation;
+  const { config } = compilation;
 
   contents = contents.replace('<head>', `
     <head>
@@ -189,18 +189,18 @@ async function getUserScripts (contents, compilation) {
   // TODO get rid of lit polyfills in core
   // https://github.com/ProjectEvergreen/greenwood/issues/728
   // https://lit.dev/docs/tools/requirements/#polyfills
-  if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
-    const userPackageJson = await getPackageJson(context);
-    const dependencies = userPackageJson?.dependencies || {};
-    const litPolyfill = dependencies && dependencies.lit
-      ? '<script src="/node_modules/lit/polyfill-support.js"></script>\n'
-      : '';
-
-    contents = contents.replace('<head>', `
-      <head>
-        ${litPolyfill}
-    `);
-  }
+  // if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
+  //   const userPackageJson = await getPackageJson(context);
+  //   const dependencies = userPackageJson?.dependencies || {};
+  //   const litPolyfill = dependencies && dependencies.lit
+  //     ? '<script src="/node_modules/lit/polyfill-support.js"></script>\n'
+  //     : '';
+
+  //   contents = contents.replace('<head>', `
+  //     <head>
+  //       ${litPolyfill}
+  //   `);
+  // }
 
   return contents;
 }

diff --git a/packages/cli/src/lifecycles/bundle.js b/packages/cli/src/lifecycles/bundle.js
@@ -7,6 +7,28 @@ import { checkResourceExists, mergeResponse, normalizePathnameForWindows } from
 import path from 'path';
 import { rollup } from 'rollup';
 
+async function interceptPage(url, request, plugins, body) {
+  let response = new Response(body, {
+    headers: new Headers({ 'Content-Type': 'text/html' })
+  });
+
+  for (const plugin of plugins) {
+    if (plugin.shouldIntercept && await plugin.shouldIntercept(url, request, response)) {
+      response = await plugin.intercept(url, request, response);
+    }
+  }
+
+  return response;
+}
+
+function getPluginInstances(compilation) {
+  return [...compilation.config.plugins]
+    .filter(plugin => plugin.type === 'resource' && plugin.name !== 'plugin-node-modules:resource')
+    .map((plugin) => {
+      return plugin.provider(compilation);
+    });
+}
+
 async function emitResources(compilation) {
   const { outputDir } = compilation.context;
   const { resources, graph } = compilation;
@@ -202,9 +224,20 @@ async function bundleSsrPages(compilation) {
         staticHtml = data.template ? data.template : await getPageTemplate(staticHtml, compilation.context, template, []);
         staticHtml = await getAppTemplate(staticHtml, compilation.context, imports, [], false, title);
         staticHtml = await getUserScripts(staticHtml, compilation);
+        // TODO seems like we are missing general purpose intercepting and optimization when bundling SSR pages
+        staticHtml = await (await interceptPage(new URL(`http://localhost:8080${route}`), new Request(new URL(`http://localhost:8080${route}`)), getPluginInstances(compilation), staticHtml)).text();
         staticHtml = await (await htmlOptimizer.optimize(new URL(`http://localhost:8080${route}`), new Response(staticHtml))).text();
         staticHtml = staticHtml.replace(/[`\\$]/g, '\\$&'); // https://stackoverflow.com/a/75688937/417806
 
+        // TODO prune graph of hydration data
+        // const g = [ ...compilation.graph ];
+
+        // g.forEach(page => {
+        //   delete page.pageData;
+        // })
+
+        // compilation.graph = g;
+
         // better way to write out this inline code?
         await fs.writeFile(entryFileUrl, `
           import { executeRouteModule } from '${normalizePathnameForWindows(executeModuleUrl)}';

diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -115,6 +115,14 @@ class StandardHtmlResource extends ResourceInterface {
           if (result.template) {
             ssrTemplate = result.template;
           }
+
+          // if (result.hydrate) {
+          //   matchingRoute.hydrate = result.hydrate;
+          //   matchingRoute.pageData = result.pageData;
+
+          //   console.log('Update Page', this.compilation.graph.find((node) => node.route === pathname));
+          // }
+
           if (result.body) {
             ssrBody = result.body;
           }
@@ -201,6 +209,20 @@ class StandardHtmlResource extends ResourceInterface {
       }
     }
 
+    // if (matchingRoute.hydrate && matchingRoute.pageData) {
+    //   const id = '__GWD_HYDRATION_DATA__';
+    //   const { pageData } = matchingRoute;
+
+    //   console.log('hydrate with page data =>', { pageData });
+
+    //   body = body.replace('</head>', `
+    //     <script type="application/json" id="${id}">
+    //       ${JSON.stringify(pageData)}
+    //     </script>
+    //     </head>
+    //   `);
+    // }
+
     // give the user something to see so they know it works, if they have no content
     if (body.indexOf('<content-outlet></content-outlet>') > 0) {
       body = body.replace('<content-outlet></content-outlet>', `

diff --git a/packages/plugin-typescript/test/cases/options.extend-config/src/scripts/main.ts b/packages/plugin-typescript/test/cases/options.extend-config/src/scripts/main.ts
@@ -1,4 +1,5 @@
-import { html, css, LitElement, customElement, property } from 'lit-element';
+import { html, css, LitElement } from 'lit-element';
+import { customElement, property } from 'lit/decorators.js';
 import { TemplateResult } from 'lit-html';
 
 @customElement('app-greeting')