Rfcs/issue 955 layouts and pages (#1212)

* feature/discussion 1117 Isolation Mode (v1) (#1206) * isolation mode for SSR pages and API routes for greenwood serve * documentation for isolation mode option and global config test case * misc refactoring * set isolation mode to true for Lit renderer plugin * set isolation mode to true for Lit renderer plugin * enhancement/Issue-1118: Single File Bundles for SSR and API routes (#1186) * Issue-1118: Refactor rollup config generation for APIs * Issue-1118: Refactor rollup config generation for SSR * Issue-1118: Refactor forEach to use for-in for the ssr config generation * Issue-1118: Convert forEach to for..in * Issue-1118: Remove unused code * refactor away bundling work arounds and add comments * refactor SSR page bundling to avoid hacky entry point placeholder hack * patch custom element registry check from wcc * refactor SSR page output name from .entry to .route * document breaking changes for adapter plugins * refactor import meta relative asset path escaping * refactor API routes and adapters for mapped API bundles * misc refactoring and docs update * latest WCC patches * windows compatibility * update adapter docs example * remove patches --------- Co-authored-by: Owen Buckley <[email protected]> * v0.30.0-alpha.1 * feature/issue 923 native import attributes for CSS and JSON (#1215) * intial draft of import attributes support for CSS and JSON * all test cases passing * need patch package * wcc patches for import attributes and CSSStylesheet shim * bump min NodeJS version for exp specs * temp disable ESLint * develop based import assertion specs * serve based import attributes specs * add preIntercept resource plugin lifecycle and refactor PostCSS to use it * all test cases passing for import attributes support * refactor built in CSS and JSON intercepting * demo code * raw plugin docs and package.json updates * update latest documentation for custom loaders support in NodeJS * update custom import docs * upgrade wcc v0.13.0 * only need Node 18 for github actions * css imports and raw plugin interop with test cases * lit renderer import attribute test cases and documentation * refactor matchers support for raw plugin instead of patching and add test cases * disable describe.only * update usage for custom resource plugins to showcase usage of import attributes * document preIntercept lifecycle and convert Babel to use it * restore ESLint * enable debug logging for failing specs * refactor theme pack specs * fix linting * remove CSS and JSON packages from being publishable * clean up console logs and comments * rename exp test cases to loadersnaming prefix * fix command in github actions * remove plugin-import-css callout from plugin-postcss README * remove demo code from website * refine PostCSS plugin intercepting * first pass on resource tracking and bundling refactor with lit polyfills removal from CLI * interim work around to solve double rendering and undefined WCC bugs * refactor frontmatter for graph and standard html plugin for SSR * rename templates directory to layouts * refactor over bundling of static script assets in bundleSsrPages * handle bundling styles within bundleSsrPages * post rebase tweaks * custom elements as layouts * post rebase tweaks * WCC patched support for TS pages * support and tests for API routes as a custom dynamic format * restore TS tests and make servePage default * document custom page format support * fix lint * patch latest WCC TypeScript changes * cleanup default app layout content * handle rollup circular dependency warnings for API routes * rename test cases from templates to layout * collapse API routes directory into pages directory * bump to wc-compiler 0.14.0 --------- Co-authored-by: Paul Barry <[email protected]>
ProjectEvergreen · Jun 22, 2024 · 87cdf8d · 87cdf8d
1 parent 1a21f68
commit 87cdf8d
Show file tree

Hide file tree

Showing 297 changed files with 2,229 additions and 1,273 deletions.
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -57,7 +57,7 @@ The [layout](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/
 - _lib/_ - Custom utility and client facing files
 - _lifecycles/_ - Tasks that can be composed by commands to support the full needs of that command
 - _plugins/_ - Custom default plugins maintained by the CLI project
-- _templates/_ - Default templates and / or pages provided by Greenwood.
+- _layouts/_ - Default layouts and / or pages provided by Greenwood.
 
 
 #### Lifecycles

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -52,7 +52,7 @@
     "remark-rehype": "^7.0.0",
     "rollup": "^3.29.4",
     "unified": "^9.2.0",
-    "wc-compiler": "~0.13.0"
+    "wc-compiler": "~0.14.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",

diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js
@@ -1,70 +1,10 @@
 import { bundleCompilation } from '../lifecycles/bundle.js';
-import { checkResourceExists, trackResourcesForRoute } from '../lib/resource-utils.js';
+import { checkResourceExists } from '../lib/resource-utils.js';
 import { copyAssets } from '../lifecycles/copy.js';
 import fs from 'fs/promises';
 import { preRenderCompilationWorker, preRenderCompilationCustom, staticRenderCompilation } from '../lifecycles/prerender.js';
 import { ServerInterface } from '../lib/server-interface.js';
 
-// TODO a lot of these are duplicated in the prerender lifecycle too
-// would be good to refactor
-async function servePage(url, request, plugins) {
-  let response = new Response('');
-
-  for (const plugin of plugins) {
-    if (plugin.shouldServe && await plugin.shouldServe(url, request)) {
-      response = await plugin.serve(url, request);
-      break;
-    }
-  }
-
-  return response;
-}
-
-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.shouldPreIntercept && await plugin.shouldPreIntercept(url, request, response)) {
-      response = await plugin.preIntercept(url, request, response);
-    }
-
-    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);
-    });
-}
-
-// TODO does this make more sense in bundle lifecycle?
-// https://github.com/ProjectEvergreen/greenwood/issues/970
-// or could this be done sooner (like in appTemplate building in html resource plugin)?
-// Or do we need to ensure userland code / plugins have gone first
-async function trackResourcesForRoutes(compilation) {
-  const plugins = getPluginInstances(compilation);
-
-  for (const page of compilation.graph) {
-    const { route } = page;
-    const url = new URL(`http://localhost:${compilation.config.port}${route}`);
-    const request = new Request(url);
-
-    let body = await (await servePage(url, request, plugins)).text();
-    body = await (await interceptPage(url, request, plugins, body)).text();
-
-    await trackResourcesForRoute(body, compilation, route);
-  }
-}
-
 const runProductionBuild = async (compilation) => {
 
   return new Promise(async (resolve, reject) => {
@@ -106,13 +46,11 @@ const runProductionBuild = async (compilation) => {
         }));
 
         if (prerenderPlugin.executeModuleUrl) {
-          await trackResourcesForRoutes(compilation);
           await preRenderCompilationWorker(compilation, prerenderPlugin);
         } else {
           await preRenderCompilationCustom(compilation, prerenderPlugin);
         }
       } else {
-        await trackResourcesForRoutes(compilation);
         await staticRenderCompilation(compilation);
       }
 

diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
@@ -423,10 +423,10 @@ const getRollupConfigForScriptResources = async (compilation) => {
 };
 
 const getRollupConfigForApis = async (compilation) => {
-  const { outputDir, userWorkspace } = compilation.context;
+  const { outputDir, pagesDir } = compilation.context;
 
   return [...compilation.manifest.apis.values()]
-    .map(api => normalizePathnameForWindows(new URL(`.${api.path}`, userWorkspace)))
+    .map(api => normalizePathnameForWindows(new URL(`.${api.path}`, pagesDir)))
     .map(filepath => ({
       input: filepath,
       output: {
@@ -445,7 +445,27 @@ const getRollupConfigForApis = async (compilation) => {
         }),
         commonjs(),
         greenwoodImportMetaUrl(compilation)
-      ]
+      ],
+      onwarn: (errorObj) => {
+        const { code, message } = errorObj;
+
+        switch (code) {
+
+          case 'CIRCULAR_DEPENDENCY':
+            // let this through for WCC + sucrase
+            // Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js ->
+            //   ../../../../../node_modules/sucrase/dist/esm/parser/traverser/util.js -> ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js
+            // Circular dependency: ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js ->
+            //   ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/readWord.js -> ../../../../../node_modules/sucrase/dist/esm/parser/tokenizer/index.js
+            // https://github.com/ProjectEvergreen/greenwood/pull/1212
+            // https://github.com/lit/lit/issues/449#issuecomment-416688319
+            break;
+          default:
+            // otherwise, log all warnings from rollup
+            console.debug(message);
+
+        }
+      }
     }));
 };
 
@@ -483,11 +503,12 @@ const getRollupConfigForSsr = async (compilation, input) => {
         switch (code) {
 
           case 'CIRCULAR_DEPENDENCY':
-            // TODO let this through for lit by suppressing it
+            // let this through for lit
             // Error: the string "Circular dependency: ../../../../../node_modules/@lit-labs/ssr/lib/render-lit-html.js ->
             // ../../../../../node_modules/@lit-labs/ssr/lib/lit-element-renderer.js -> ../../../../../node_modules/@lit-labs/ssr/lib/render-lit-html.js\n" was thrown, throw an Error :)
-            // https://github.com/lit/lit/issues/449
             // https://github.com/ProjectEvergreen/greenwood/issues/1118
+            // https://github.com/lit/lit/issues/449#issuecomment-416688319
+            // https://github.com/rollup/rollup/issues/1089#issuecomment-402109607
             break;
           default:
             // otherwise, log all warnings from rollup

diff --git a/packages/cli/src/templates/404.html → packages/cli/src/layouts/404.html b/packages/cli/src/templates/404.html → packages/cli/src/layouts/404.html
diff --git a/packages/cli/src/templates/app.html → packages/cli/src/layouts/app.html b/packages/cli/src/templates/app.html → packages/cli/src/layouts/app.html
diff --git a/packages/cli/src/templates/page.html → packages/cli/src/layouts/page.html b/packages/cli/src/templates/page.html → packages/cli/src/layouts/page.html
diff --git a/packages/cli/src/lib/execute-route-module.js b/packages/cli/src/lib/execute-route-module.js
@@ -2,7 +2,7 @@ import { renderToString, renderFromHTML } from 'wc-compiler';
 
 async function executeRouteModule({ moduleUrl, compilation, page = {}, prerender = false, htmlContents = null, scripts = [], request }) {
   const data = {
-    template: null,
+    layout: null,
     body: null,
     frontmatter: null,
     html: null
@@ -15,7 +15,7 @@ async function executeRouteModule({ moduleUrl, compilation, page = {}, prerender
     data.html = html;
   } else {
     const module = await import(moduleUrl).then(module => module);
-    const { prerender = false, getTemplate = null, getBody = null, getFrontmatter = null, isolation } = module;
+    const { prerender = false, getLayout = null, getBody = null, getFrontmatter = null, isolation } = module;
 
     if (module.default) {
       const { html } = await renderToString(new URL(moduleUrl), false, request);
@@ -27,8 +27,8 @@ async function executeRouteModule({ moduleUrl, compilation, page = {}, prerender
       }
     }
 
-    if (getTemplate) {
-      data.template = await getTemplate(compilation, page);
+    if (getLayout) {
+      data.layout = await getLayout(compilation, page);
     }
 
     if (getFrontmatter) {