enhancement/Issue-1118: Single File Bundles for SSR and API routes

.gitignore

@@ -11,4 +11,4 @@ packages/**/test/**/netlify
 packages/**/test/**/.netlify
 packages/**/test/**/.vercel
 public/
-adapter-outlet/
+adapter-output/

packages/cli/src/config/rollup.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 import fs from 'fs';
 import path from 'path';
 import { checkResourceExists, normalizePathnameForWindows } from '../lib/resource-utils.js';
@@ -121,7 +122,8 @@
 }
 
 function getMetaImportPath(node) {
-  return node.arguments[0].value.split('/').join(path.sep);
+  return node.arguments[0].value.split('/').join(path.sep)
+    .replace(/\\/g, '/'); // handle Windows style paths
 }
 
 function isNewUrlImportMetaUrl(node) {
@@ -157,6 +159,8 @@
       }).map((plugin) => {
         return plugin.provider(compilation);
       });
+      const idAssetName = path.basename(id);
+      const normalizedId = id.replace(/\\\\/g, '/').replace(/\\/g, '/'); // windows shenanigans...
       const idUrl = new URL(`file://${cleanRollupId(id)}`);
       const { pathname } = idUrl;
       const extension = pathname.split('.').pop();
@@ -235,43 +239,71 @@
           ? { type, id: normalizePathnameForWindows(url), name }
           : { type, name: assetName, source: assetContents };
         const ref = this.emitFile(emitConfig);
-        // handle Windows style paths
-        const normalizedRelativeAssetPath = relativeAssetPath.replace(/\\/g, '/');
         const importRef = `import.meta.ROLLUP_FILE_URL_${ref}`;
 
+        // loop through all URL bundle chunks from APIs and SSR pages
+        // and map to their parent file, to pick back up in generateBundle when full hashes are known
+        if (`${compilation.context.apisDir.pathname}${idAssetName}`.indexOf(normalizedId) >= 0) {
+          for (const entry of compilation.manifest.apis.keys()) {
+            const apiRoute = compilation.manifest.apis.get(entry);
+
+            if (normalizedId.endsWith(apiRoute.path)) {
+              const assets = apiRoute.assets || [];
+
+              assets.push(assetUrl.url.href);
+
+              compilation.manifest.apis.set(entry, {
+                ...apiRoute,
+                assets
+              });
+            }
+          }
+        } else {
+          // TODO figure out how to handle URL chunk from SSR pages
+          // https://github.com/ProjectEvergreen/greenwood/issues/1163
+        }
+
         modifiedCode = code
-          .replace(`'${normalizedRelativeAssetPath}'`, importRef)
-          .replace(`"${normalizedRelativeAssetPath}"`, importRef);
+          .replace(`'${relativeAssetPath}'`, importRef)
+          .replace(`"${relativeAssetPath}"`, importRef);
       }
 
       return {
         code: modifiedCode ? modifiedCode : code,
         map: null
       };
-    }
-  };
-}
+    },
 
-// TODO could we use this instead?
-// https://github.com/rollup/rollup/blob/v2.79.1/docs/05-plugin-development.md#resolveimportmeta
-// https://github.com/ProjectEvergreen/greenwood/issues/1087
-function greenwoodPatchSsrPagesEntryPointRuntimeImport() {
-  return {
-    name: 'greenwood-patch-ssr-pages-entry-point-runtime-import',
-    generateBundle(options, bundle) {
-      Object.keys(bundle).forEach((key) => {
-        if (key.startsWith('__')) {
-          // ___GWD_ENTRY_FILE_URL=${filename}___
-          const needle = bundle[key].code.match(/___GWD_ENTRY_FILE_URL=(.*.)___/);
-          if (needle) {
-            const entryPathMatch = needle[1];
-
-            bundle[key].code = bundle[key].code.replace(/'___GWD_ENTRY_FILE_URL=(.*.)___'/, `new URL('./_${entryPathMatch}', import.meta.url)`);
-          } else {
-            console.warn(`Could not find entry path match for bundle => ${key}`);
+    generateBundle(options, bundles) {
+      for (const bundle in bundles) {
+        const bundleExtension = bundle.split('.').pop();
+        const apiKey = `/api/${bundle.replace(`.${bundleExtension}`, '')}`;
+
+        if (compilation.manifest.apis.has(apiKey)) {
+          const apiManifestDetails = compilation.manifest.apis.get(apiKey);
+
+          for (const reference of bundles[bundle].referencedFiles) {
+            if (bundles[reference]) {
+              const assets = apiManifestDetails.assets;
+              let assetIdx;
+
+              assets.forEach((asset, idx) => {
+                // more windows shenanigans...)
+                if (asset.indexOf(bundles[reference]?.facadeModuleId?.replace(/\\/g, '/'))) {
+                  assetIdx = idx;
+                }
+              });
+
+              assets[assetIdx] = new URL(`./api/${reference}`, compilation.context.outputDir).href;
+
+              compilation.manifest.apis.set(apiKey, {
+                ...apiManifestDetails,
+                assets
+              });
+            }
           }
         }
-      });
+      }
     }
   };
 }
@@ -336,49 +368,40 @@
 
 const getRollupConfigForApis = async (compilation) => {
   const { outputDir, userWorkspace } = compilation.context;
-  const input = [...compilation.manifest.apis.values()]
-    .map(api => normalizePathnameForWindows(new URL(`.${api.path}`, userWorkspace)));
 
-  // why is this needed?
-  await fs.promises.mkdir(new URL('./api/assets/', outputDir), {
-    recursive: true
-  });
-
-  // TODO should routes and APIs have chunks?
-  // https://github.com/ProjectEvergreen/greenwood/issues/1118
-  return [{
-    input,
-    output: {
-      dir: `${normalizePathnameForWindows(outputDir)}/api`,
-      entryFileNames: '[name].js',
-      chunkFileNames: '[name].[hash].js'
-    },
-    plugins: [
-      greenwoodResourceLoader(compilation),
-      // support node export conditions for API routes
-      // https://github.com/ProjectEvergreen/greenwood/issues/1118
-      // https://github.com/rollup/plugins/issues/362#issuecomment-873448461
-      nodeResolve({
-        exportConditions: ['node'],
-        preferBuiltins: true
-      }),
-      commonjs(),
-      greenwoodImportMetaUrl(compilation)
-    ]
-  }];
+  return [...compilation.manifest.apis.values()]
+    .map(api => normalizePathnameForWindows(new URL(`.${api.path}`, userWorkspace)))
+    .map(filepath => ({
+      input: filepath,
+      output: {
+        dir: `${normalizePathnameForWindows(outputDir)}/api`,
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].[hash].js'
+      },
+      plugins: [
+        greenwoodResourceLoader(compilation),
+        // support node export conditions for SSR pages
+        // https://github.com/ProjectEvergreen/greenwood/issues/1118
+        // https://github.com/rollup/plugins/issues/362#issuecomment-873448461
+        nodeResolve({
+          exportConditions: ['node'],
+          preferBuiltins: true
+        }),
+        commonjs(),
+        greenwoodImportMetaUrl(compilation)
+      ]
+    }));
 };
 
 const getRollupConfigForSsr = async (compilation, input) => {
   const { outputDir } = compilation.context;
 
-  // TODO should routes and APIs have chunks?
-  // https://github.com/ProjectEvergreen/greenwood/issues/1118
-  return [{
-    input,
+  return input.map(filepath => ({
+    input: filepath,
     output: {
       dir: normalizePathnameForWindows(outputDir),
-      entryFileNames: '_[name].js',
-      chunkFileNames: '[name].[hash].js'
+      entryFileNames: '[name].route.js',
+      chunkFileNames: '[name].route.chunk.[hash].js'
     },
     plugins: [
       greenwoodResourceLoader(compilation),
@@ -390,8 +413,7 @@
         preferBuiltins: true
       }),
       commonjs(),
-      greenwoodImportMetaUrl(compilation),
-      greenwoodPatchSsrPagesEntryPointRuntimeImport() // TODO a little hacky but works for now
+      greenwoodImportMetaUrl(compilation)
     ],
     onwarn: (errorObj) => {
       const { code, message } = errorObj;
@@ -399,7 +421,7 @@
       switch (code) {
 
         case 'CIRCULAR_DEPENDENCY':
           // TODO let this through for lit by suppressing it
           // 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
@@ -411,7 +433,7 @@
 
       }
     }
-  }];
+  }));
 };
 
 export {

packages/cli/src/lifecycles/bundle.js

@@ -185,11 +185,15 @@ async function bundleStyleResources(compilation, resourcePlugins) {
 
 async function bundleApiRoutes(compilation) {
   // https://rollupjs.org/guide/en/#differences-to-the-javascript-api
-  const [rollupConfig] = await getRollupConfigForApis(compilation);
+  const apiConfigs = await getRollupConfigForApis(compilation);
 
-  if (rollupConfig.input.length !== 0) {
-    const bundle = await rollup(rollupConfig);
-    await bundle.write(rollupConfig.output);
+  if (apiConfigs.length > 0 && apiConfigs[0].input.length !== 0) {
+    for (const configIndex in apiConfigs) {
+      const rollupConfig = apiConfigs[configIndex];
+      const bundle = await rollup(rollupConfig);
+      await bundle.write(rollupConfig.output);
+
+    }
   }
 }
 
@@ -213,12 +217,14 @@ async function bundleSsrPages(compilation) {
     for (const page of compilation.graph) {
       if (page.isSSR && !page.prerender) {
         const { filename, imports, route, template, title } = page;
-        const entryFileUrl = new URL(`./_${filename}`, scratchDir);
+        const entryFileUrl = new URL(`./${filename}`, scratchDir);
         const moduleUrl = new URL(`./${filename}`, pagesDir);
         const request = new Request(moduleUrl); // TODO not really sure how to best no-op this?
         // TODO getTemplate has to be static (for now?)
         // https://github.com/ProjectEvergreen/greenwood/issues/955
         const data = await executeRouteModule({ moduleUrl, compilation, page, prerender: false, htmlContents: null, scripts: [], request });
+        const pagesPathDiff = compilation.context.pagesDir.pathname.replace(compilation.context.projectDirectory.pathname, '');
+
         let staticHtml = '';
 
         staticHtml = data.template ? data.template : await getPageTemplate(staticHtml, compilation.context, template, []);
@@ -229,13 +235,15 @@ async function bundleSsrPages(compilation) {
         staticHtml = staticHtml.replace(/[`\\$]/g, '\\$&'); // https://stackoverflow.com/a/75688937/417806
 
         // better way to write out this inline code?
+        // using a URL here produces a bundled chunk, but at leasts its bundled
         await fs.writeFile(entryFileUrl, `
           import { executeRouteModule } from '${normalizePathnameForWindows(executeModuleUrl)}';
 
+          const moduleUrl = new URL('../${pagesPathDiff}${filename}', import.meta.url);
+
           export async function handler(request) {
             const compilation = JSON.parse('${JSON.stringify(compilation)}');
             const page = JSON.parse('${JSON.stringify(page)}');
-            const moduleUrl = '___GWD_ENTRY_FILE_URL=${filename}___';
             const data = await executeRouteModule({ moduleUrl, compilation, page, request });
             let staticHtml = \`${staticHtml}\`;
 
@@ -251,16 +259,18 @@ async function bundleSsrPages(compilation) {
           }
         `);
 
-        input.push(normalizePathnameForWindows(moduleUrl));
         input.push(normalizePathnameForWindows(entryFileUrl));
       }
     }
 
-    const [rollupConfig] = await getRollupConfigForSsr(compilation, input);
+    const ssrConfigs = await getRollupConfigForSsr(compilation, input);
 
-    if (rollupConfig.input.length > 0) {
-      const bundle = await rollup(rollupConfig);
-      await bundle.write(rollupConfig.output);
+    if (ssrConfigs.length > 0 && ssrConfigs[0].input !== '') {
+      for (const configIndex in ssrConfigs) {
+        const rollupConfig = ssrConfigs[configIndex];
+        const bundle = await rollup(rollupConfig);
+        await bundle.write(rollupConfig.output);
+      }
     }
   }
 }

packages/cli/src/lifecycles/serve.js

@@ -296,6 +296,7 @@ async function getHybridServer(compilation) {
       const request = transformKoaRequestIntoStandardRequest(url, ctx.request);
 
       if (!config.prerender && matchingRoute.isSSR && !matchingRoute.prerender) {
+        const entryPointUrl = new URL(`./${matchingRoute.id}.route.js`, outputDir);
         let html;
 
         if (matchingRoute.isolation || isolationMode) {
@@ -317,13 +318,13 @@ async function getHybridServer(compilation) {
             });
 
             worker.postMessage({
-              routeModuleUrl: new URL(`./__${matchingRoute.filename}`, outputDir).href,
+              routeModuleUrl: entryPointUrl.href,
               request,
               compilation: JSON.stringify(compilation)
             });
           });
         } else {
-          const { handler } = await import(new URL(`./__${matchingRoute.filename}`, outputDir));
+          const { handler } = await import(entryPointUrl);
           const response = await handler(request, compilation);
 
           html = Readable.from(response.body);
@@ -334,6 +335,7 @@ async function getHybridServer(compilation) {
         ctx.status = 200;
       } else if (isApiRoute) {
         const apiRoute = manifest.apis.get(url.pathname);
+        const entryPointUrl = new URL(`.${apiRoute.path}`, outputDir);
         let body, status, headers, statusText;
 
         if (apiRoute.isolation || isolationMode) {
@@ -360,12 +362,12 @@ async function getHybridServer(compilation) {
             });
 
             worker.postMessage({
-              href: new URL(`.${apiRoute.path}`, outputDir).href,
+              href: entryPointUrl.href,
               request: req
             });
           });
         } else {
-          const { handler } = await import(new URL(`.${apiRoute.path}`, outputDir));
+          const { handler } = await import(entryPointUrl);
           const response = await handler(request);
 
           body = response.body;

packages/cli/test/cases/build.plugins.adapter/generic-adapter.js

@@ -3,7 +3,7 @@ import { checkResourceExists } from '../../../../cli/src/lib/resource-utils.js';
 
 function generateOutputFormat(id, type) {
   const path = type === 'page'
-    ? `__${id}`
+    ? `${id}.route`
     : `api/${id}`;
 
   return `

packages/cli/test/cases/serve.default.ssr/serve.default.ssr.spec.js

@@ -90,9 +90,8 @@ describe('Serve Greenwood With: ', function() {
         expect(headings[0].textContent).to.equal('Hello from the server rendered home page!');
       });
 
-      it('should have the expected bundled SSR output for the page', async function() {
-        const scriptFiles = (await glob.promise(path.join(this.context.publicDir, '*.js')))
-          .filter(file => file.indexOf('index.js') >= 0);
+      it('should have the expected bundled SSR output for the page entry point and chunk file', async function() {
+        const scriptFiles = await glob.promise(path.join(this.context.publicDir, 'index*.js'));
 
         expect(scriptFiles.length).to.equal(2);
       });
@@ -226,9 +225,8 @@ describe('Serve Greenwood With: ', function() {
         expect(resources.find(resource => resource.endsWith('/header.js'))).to.not.be.undefined;
       });
 
-      it('should have the expected bundled SSR output for the page', async function() {
-        const scriptFiles = (await glob.promise(path.join(this.context.publicDir, '*.js')))
-          .filter(file => file.indexOf('artists.js') >= 0);
+      it('should have the expected bundled SSR output for the page entry point and chunk file', async function() {
+        const scriptFiles = await glob.promise(path.join(this.context.publicDir, 'artists*.js'));
 
         expect(scriptFiles.length).to.equal(2);
       });
@@ -264,9 +262,8 @@ describe('Serve Greenwood With: ', function() {
         expect(cards.length).to.be.greaterThan(0);
       });
 
-      it('should have the expected bundled SSR output for the page', async function() {
-        const scriptFiles = (await glob.promise(path.join(this.context.publicDir, '*.js')))
-          .filter(file => file.indexOf('users.js') >= 0);
+      it('should have the expected bundled SSR output for the page entry point and chunk file', async function() {
+        const scriptFiles = await glob.promise(path.join(this.context.publicDir, 'users*.js'));
 
         expect(scriptFiles.length).to.equal(2);
       });