feat(cli): #882 dynamic SSR and API routing

packages/cli/package.json

@@ -61,6 +61,7 @@
     "livereload": "^0.9.1",
     "node-html-parser": "^7.0.1",
     "rollup": "^4.26.0",
+    "urlpattern-polyfill": "^10.1.0",
     "wc-compiler": "~0.18.0"
   },
   "devDependencies": {

packages/cli/src/index.js

@@ -3,6 +3,10 @@ import { generateCompilation } from "./lifecycles/compile.js";
 async function run(command) {
   process.env.__GWD_COMMAND__ = command;
 
+  if (!globalThis.URLPattern) {
+    await import("urlpattern-polyfill");
+  }
+
   try {
     console.info(`Running Greenwood with the ${command} command.`);
     const compilation = await generateCompilation();

packages/cli/src/lib/api-route-worker.js

@@ -29,7 +29,7 @@ async function responseAsObject(response) {
   };
 }
 
-async function executeRouteModule({ href, request }) {
+async function executeRouteModule({ href, request, props }) {
   const { body, headers = {}, method, url } = request;
   const contentType = headers["content-type"] || "";
   // @ts-expect-error see https://github.com/microsoft/TypeScript/issues/42866
@@ -47,11 +47,16 @@ async function executeRouteModule({ href, request }) {
       header: headers,
       body: format,
     }),
+    {
+      props: {
+        ...props,
+      },
+    },
   );
 
   parentPort.postMessage(await responseAsObject(response));
 }
 
-parentPort.on("message", async (task) => {
-  await executeRouteModule(task);
+parentPort.on("message", async (task, props) => {
+  await executeRouteModule(task, props);
 });

packages/cli/src/lib/execute-route-module.js

@@ -8,6 +8,7 @@ async function executeRouteModule({
   htmlContents = null,
   scripts = [],
   request,
+  props,
   contentOptions = {},
 }) {
   const data = {
@@ -35,10 +36,15 @@ async function executeRouteModule({
 
     if (body) {
       if (module.default) {
-        const { html } = await renderToString(new URL(moduleUrl), false, { request, compilation });
+        const { html } = await renderToString(new URL(moduleUrl), false, {
+          request,
+          compilation,
+          props,
+        });
 
         data.body = html;
       } else if (getBody) {
+        // TODO do we need to pass props here too?
         data.body = await getBody(compilation, page, request);
       }
     }

packages/cli/src/lib/ssr-route-worker.js

@@ -11,6 +11,7 @@ async function executeModule({
   scripts = "[]",
   request,
   contentOptions = "{}",
+  props,
 }) {
   const { executeRouteModule } = await import(executeModuleUrl);
   const data = await executeRouteModule({
@@ -22,6 +23,7 @@ async function executeModule({
     scripts: JSON.parse(scripts),
     request,
     contentOptions: JSON.parse(contentOptions),
+    props,
   });
 
   parentPort.postMessage(data);

packages/cli/src/lib/url-utils.js

@@ -0,0 +1,45 @@
+function getDynamicSegmentsFromRoute({ route, relativePagePath, extension }) {
+  const dynamicRoute = route.replace("[", ":").replace("]", "");
+  const segmentKey = relativePagePath
+    .split("/")
+    [relativePagePath.split("/").length - 1].replace(extension, "")
+    .replace("[", "")
+    .replace("]", "")
+    .replace(".", "");
+
+  return { segmentKey, dynamicRoute };
+}
+
+function getMatchingDynamicApiRoute(apis, pathname) {
+  return Array.from(apis.keys()).find((key) => {
+    const route = apis.get(key);
+    return (
+      route.segment &&
+      new URLPattern({ pathname: `${route.segment.pathname}*` }).test(
+        `https://example.com${pathname}`,
+      )
+    );
+  });
+}
+
+function getMatchingDynamicSsrRoute(graph, pathname) {
+  return graph.find((node) => {
+    return (
+      (pathname !== "/404/") !== "/404/" &&
+      node.segment &&
+      new URLPattern({ pathname: node.segment.pathname }).test(`https://example.com${pathname}`)
+    );
+  });
+}
+
+function getPropsFromSegment(segment, pathname) {
+  return new URLPattern({ pathname: segment.pathname }).exec(`https://example.com${pathname}`)
+    .pathname.groups;
+}
+
+export {
+  getDynamicSegmentsFromRoute,
+  getMatchingDynamicApiRoute,
+  getPropsFromSegment,
+  getMatchingDynamicSsrRoute,
+};

packages/cli/src/lifecycles/bundle.js

@@ -361,7 +361,7 @@ async function bundleSsrPages(compilation, optimizePlugins) {
 
         const moduleUrl = new URL('${relativeDepth}${pagesPathDiff}${pagePath.replace("./", "")}', import.meta.url);
 
-        export async function handler(request) {
+        export async function handler(request, props) {
           const compilation = JSON.parse(\`${JSON.stringify({
             ...compilation,
             graph: pruneGraph(compilation.graph),
@@ -371,7 +371,7 @@ async function bundleSsrPages(compilation, optimizePlugins) {
           const page = JSON.parse(\`${JSON.stringify(pruneGraph([page])[0])
             .replace(/\\"/g, "&quote")
             .replace(/\\n/g, "")}\`);
-          const data = await executeRouteModule({ moduleUrl, compilation, page, request, contentOptions: { body: true } });
+          const data = await executeRouteModule({ moduleUrl, compilation, page, request, contentOptions: { body: true }, props });
           let staticHtml = \`${staticHtml}\`;
 
           if (data.body) {

packages/cli/src/lifecycles/graph.js

@@ -3,6 +3,7 @@ import fs from "node:fs/promises";
 import fm from "front-matter";
 import { checkResourceExists, requestAsObject } from "../lib/resource-utils.js";
 import { activeFrontmatterKeys } from "../lib/content-utils.js";
+import { getDynamicSegmentsFromRoute } from "../lib/url-utils.js";
 import { Worker } from "node:worker_threads";
 
 function getLabelFromRoute(_route) {
@@ -26,7 +27,12 @@ function getLabelFromRoute(_route) {
 }
 
 function getIdFromRelativePathPath(relativePathPath, extension) {
-  return relativePathPath.replace(`.${extension}`, "").replace("./", "").replace(/\//g, "-");
+  return relativePathPath
+    .replace(`.${extension}`, "")
+    .replace("./", "")
+    .replace(/\//g, "-")
+    .replace("[", "-")
+    .replace("]", "-");
 }
 
 function trackCollectionsForPage(page, collections) {
@@ -104,6 +110,12 @@ const generateGraph = async (compilation) => {
 
           // TODO should API routes be run in isolation mode like SSR pages?
           const { isolation } = await import(filenameUrl).then((module) => module);
+          const { segmentKey, dynamicRoute } = getDynamicSegmentsFromRoute({
+            route,
+            relativePagePath,
+            extension,
+            basePath,
+          });
 
           /*
            * API Properties (per route)
@@ -122,6 +134,8 @@ const generateGraph = async (compilation) => {
             outputHref: new URL(relativePagePath, outputDir).href.replace(`.${extension}`, ".js"),
             route: `${basePath}${route}`,
             isolation,
+            segment:
+              dynamicRoute.indexOf(":") > 0 ? { key: segmentKey, pathname: dynamicRoute } : null,
           });
         } else if (isPage) {
           let root = filename
@@ -245,6 +259,14 @@ const generateGraph = async (compilation) => {
            * hydration: if this page needs hydration support
            * servePage: signal that this is a custom page file type (static | dynamic)
            */
+
+          const { segmentKey, dynamicRoute } = getDynamicSegmentsFromRoute({
+            route,
+            relativePagePath,
+            extension,
+            basePath,
+          });
+
           const page = {
             id: decodeURIComponent(getIdFromRelativePathPath(relativePagePath, extension)),
             label: decodeURIComponent(label),
@@ -264,6 +286,8 @@ const generateGraph = async (compilation) => {
             isolation,
             hydration,
             servePage: isCustom,
+            segment:
+              dynamicRoute.indexOf(":") > 0 ? { key: segmentKey, pathname: dynamicRoute } : null,
           };
 
           pages.push(page);

packages/cli/src/lifecycles/serve.js

@@ -9,6 +9,11 @@ import {
   transformKoaRequestIntoStandardRequest,
   requestAsObject,
 } from "../lib/resource-utils.js";
+import {
+  getMatchingDynamicApiRoute,
+  getMatchingDynamicSsrRoute,
+  getPropsFromSegment,
+} from "../lib/url-utils.js";
 import { Readable } from "node:stream";
 import { Worker } from "node:worker_threads";
 
@@ -360,12 +365,30 @@ async function getHybridServer(compilation) {
   app.use(async (ctx) => {
     try {
       const url = new URL(`http://localhost:${config.port}${ctx.url}`);
+      const { pathname } = url;
       const matchingRoute = graph.find((node) => node.route === url.pathname) || { data: {} };
       const isApiRoute = manifest.apis.has(url.pathname);
       const request = transformKoaRequestIntoStandardRequest(url, ctx.request);
+      const matchingApiRouteWithSegment = getMatchingDynamicApiRoute(
+        compilation.manifest.apis,
+        pathname,
+      );
+      const matchingRouteWithSegment =
+        getMatchingDynamicSsrRoute(compilation.graph, pathname) || {};
+
+      if (
+        !config.prerender &&
+        (matchingRoute.isSSR || matchingRouteWithSegment.isSSR) &&
+        !matchingRoute.prerender
+      ) {
+        const entryPointUrl = new URL(
+          matchingRoute?.outputHref ?? matchingRouteWithSegment.outputHref,
+        );
+        const props =
+          matchingRouteWithSegment && matchingRouteWithSegment.segment
+            ? getPropsFromSegment(matchingRouteWithSegment.segment, pathname)
+            : undefined;
 
-      if (!config.prerender && matchingRoute.isSSR && !matchingRoute.prerender) {
-        const entryPointUrl = new URL(matchingRoute.outputHref);
         let html;
 
         if (matchingRoute.isolation || isolationMode) {
@@ -393,12 +416,13 @@ async function getHybridServer(compilation) {
               routeModuleUrl: entryPointUrl.href,
               request,
               compilation: JSON.stringify(compilation),
+              props,
             });
           });
         } else {
           // @ts-expect-error see https://github.com/microsoft/TypeScript/issues/42866
           const { handler } = await import(entryPointUrl);
-          const response = await handler(request, compilation);
+          const response = await handler(request, props);
 
           html = Readable.from(response.body);
         }
@@ -407,8 +431,13 @@ async function getHybridServer(compilation) {
         ctx.message = "OK";
         ctx.set("Content-Type", "text/html");
         ctx.status = 200;
-      } else if (isApiRoute) {
-        const apiRoute = manifest.apis.get(url.pathname);
+      } else if (isApiRoute || matchingApiRouteWithSegment) {
+        const apiRoute = manifest.apis.get(matchingApiRouteWithSegment ?? pathname);
+        const props =
+          matchingRouteWithSegment && apiRoute.segment
+            ? getPropsFromSegment(apiRoute.segment, pathname)
+            : undefined;
+
         const entryPointUrl = new URL(apiRoute.outputHref);
         let body, status, headers, statusText;
 
@@ -439,12 +468,13 @@ async function getHybridServer(compilation) {
             worker.postMessage({
               href: entryPointUrl.href,
               request: req,
+              props,
             });
           });
         } else {
           // @ts-expect-error see https://github.com/microsoft/TypeScript/issues/42866
           const { handler } = await import(entryPointUrl);
-          const response = await handler(request);
+          const response = await handler(request, { props });
 
           body = response.body;
           status = response.status;

packages/cli/src/plugins/resource/plugin-api-routes.js

@@ -4,6 +4,7 @@
  *
  */
 import { requestAsObject } from "../../lib/resource-utils.js";
+import { getMatchingDynamicApiRoute, getPropsFromSegment } from "../../lib/url-utils.js";
 import { Worker } from "node:worker_threads";
 
 class ApiRoutesResource {
@@ -13,15 +14,34 @@ class ApiRoutesResource {
   }
 
   async shouldServe(url) {
+    const { basePath } = this.compilation.config;
     const { protocol, pathname } = url;
 
-    return protocol.startsWith("http") && this.compilation.manifest.apis.has(pathname);
+    if (!protocol.startsWith("http") || !pathname.startsWith(`${basePath}/api/`)) {
+      return;
+    }
+
+    const matchingRouteWithSegment = getMatchingDynamicApiRoute(
+      this.compilation.manifest.apis,
+      pathname,
+    );
+
+    return matchingRouteWithSegment || this.compilation.manifest.apis.has(pathname);
   }
 
   async serve(url, request) {
-    const api = this.compilation.manifest.apis.get(url.pathname);
+    const { pathname } = url;
+    const matchingRouteWithSegment = getMatchingDynamicApiRoute(
+      this.compilation.manifest.apis,
+      pathname,
+    );
+    const api = this.compilation.manifest.apis.get(matchingRouteWithSegment ?? pathname);
     const apiUrl = new URL(api.pageHref);
     const href = apiUrl.href;
+    const props =
+      matchingRouteWithSegment && api.segment
+        ? getPropsFromSegment(api.segment, pathname)
+        : undefined;
 
     if (process.env.__GWD_COMMAND__ === "develop") {
       const workerUrl = new URL("../../lib/api-route-worker.js", import.meta.url);
@@ -40,7 +60,7 @@ class ApiRoutesResource {
           }
         });
 
-        worker.postMessage({ href, request: req });
+        worker.postMessage({ href, request: req, props });
       });
       const { headers, body, status, statusText } = response;
 
@@ -52,7 +72,7 @@ class ApiRoutesResource {
     } else {
       const { handler } = await import(href);
 
-      return await handler(request);
+      return await handler(request, props);
     }
   }
 }