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 <owenbuckley13@gmail.com>

* 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 <devlab2425@gmail.com>

.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

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",

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);
       }
 

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

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) {