@taujs/server 0.1.3 → 0.1.5

package/README.md

@@ -14,6 +14,14 @@ Supports rendering modes:
 - Server-side rendering (SSR)
 - Streaming SSR
 
+Supported application structure and composition:
+
+- Single-page Application (SPA)
+- Multi-page Application (MPA)
+- Build-time Micro-Frontends, server orchestration and delivery
+
+Assemble independently built frontends at build time incorporating flexible per-route SPA-MPA hybrid with CSR, SSR, and Streaming SSR, rendering options.
+
 Fastify Plugin for integration with taujs [ τjs ] template https://github.com/aoede3/taujs
 
 - Production: Fastify, React

package/dist/index.d.ts

@@ -5,8 +5,46 @@ declare const RENDERTYPE: {
     ssr: string;
     streaming: string;
 };
+declare const TEMPLATE: {
+    defaultEntryClient: string;
+    defaultEntryServer: string;
+    defaultHtmlTemplate: string;
+};
 
+declare const createMaps: () => {
+    bootstrapModules: Map<string, string>;
+    cssLinks: Map<string, string>;
+    manifests: Map<string, Manifest>;
+    preloadLinks: Map<string, string>;
+    renderModules: Map<string, RenderModule>;
+    ssrManifests: Map<string, SSRManifest>;
+    templates: Map<string, string>;
+};
+declare const processConfigs: (configs: Config[], baseClientRoot: string, templateDefaults: typeof TEMPLATE) => ProcessedConfig[];
 declare const SSRServer: FastifyPluginAsync<SSRServerOptions>;
+type Config = {
+    appId: string;
+    entryPoint: string;
+    entryClient?: string;
+    entryServer?: string;
+    htmlTemplate?: string;
+};
+type ProcessedConfig = {
+    appId: string;
+    clientRoot: string;
+    entryClient: string;
+    entryPoint: string;
+    entryServer: string;
+    htmlTemplate: string;
+};
+type SSRServerOptions = {
+    alias?: Record<string, string>;
+    clientRoot: string;
+    configs: Config[];
+    routes: Route<RouteParams>[];
+    serviceRegistry: ServiceRegistry;
+    isDebug?: boolean;
+};
 type ServiceRegistry = {
     [serviceName: string]: {
         [methodName: string]: (params: Record<string, unknown>) => Promise<Record<string, unknown>>;
@@ -25,25 +63,19 @@ type FetchConfig = {
     serviceName?: string;
     serviceMethod?: string;
 };
-type SSRServerOptions = {
-    alias?: Record<string, string>;
-    clientRoot: string;
-    clientHtmlTemplate: string;
-    clientEntryClient: string;
-    clientEntryServer: string;
-    routes: Route<RouteParams>[];
-    serviceRegistry: ServiceRegistry;
-    isDebug?: boolean;
+type SSRManifest = {
+    [key: string]: string[];
+};
+type ManifestEntry = {
+    file: string;
+    src?: string;
+    isDynamicEntry?: boolean;
+    imports?: string[];
+    css?: string[];
+    assets?: string[];
 };
 type Manifest = {
-    [key: string]: {
-        file: string;
-        src?: string;
-        isDynamicEntry?: boolean;
-        imports?: string[];
-        css?: string[];
-        assets?: string[];
-    };
+    [key: string]: ManifestEntry;
 };
 type RenderSSR = (initialDataResolved: Record<string, unknown>, location: string, meta?: Record<string, unknown>) => Promise<{
     headContent: string;
@@ -58,20 +90,18 @@ type RenderModule = {
 type RouteAttributes<Params = {}> = {
     fetch?: (params?: Params, options?: RequestInit & {
         params?: Record<string, unknown>;
-    }) => Promise<{
-        options: RequestInit & {
-            params?: Record<string, unknown>;
-        };
-        serviceName?: string;
-        serviceMethod?: string;
-        url?: string;
-    }>;
+    }) => Promise<FetchConfig>;
+} & ({
+    render?: typeof RENDERTYPE.ssr;
     meta?: Record<string, unknown>;
-    render?: typeof RENDERTYPE.ssr | typeof RENDERTYPE.streaming;
-};
+} | {
+    render: typeof RENDERTYPE.streaming;
+    meta: Record<string, unknown>;
+});
 type Route<Params = {}> = {
     attr?: RouteAttributes<Params>;
     path: string;
+    appId?: string;
 };
 interface InitialRouteParams extends Record<string, unknown> {
     serviceName?: string;
@@ -80,4 +110,4 @@ interface InitialRouteParams extends Record<string, unknown> {
 type RouteParams = InitialRouteParams & Record<string, unknown>;
 type RoutePathsAndAttributes<Params = {}> = Omit<Route<Params>, 'element'>;
 
-export { type FetchConfig, type InitialRouteParams, type Manifest, type RenderCallbacks, type RenderModule, type RenderSSR, type RenderStream, type Route, type RouteAttributes, type RouteParams, type RoutePathsAndAttributes, SSRServer, type SSRServerOptions, type ServiceRegistry };
+export { type Config, type FetchConfig, type InitialRouteParams, type Manifest, type ManifestEntry, type ProcessedConfig, type RenderCallbacks, type RenderModule, type RenderSSR, type RenderStream, type Route, type RouteAttributes, type RouteParams, type RoutePathsAndAttributes, type SSRManifest, SSRServer, type SSRServerOptions, type ServiceRegistry, TEMPLATE, createMaps, processConfigs };

package/dist/index.js

@@ -118,7 +118,7 @@ var require_plugin = __commonJS({
 // src/SSRServer.ts
 var import_fastify_plugin = __toESM(require_plugin(), 1);
 import { readFile } from "node:fs/promises";
-import path from "node:path";
+import path2 from "node:path";
 import { createViteRuntime } from "vite";
 
 // src/constants.ts
@@ -130,10 +130,16 @@ var SSRTAG = {
   ssrHead: "<!--ssr-head-->",
   ssrHtml: "<!--ssr-html-->"
 };
+var TEMPLATE = {
+  defaultEntryClient: "entry-client",
+  defaultEntryServer: "entry-server",
+  defaultHtmlTemplate: "index.html"
+};
 
 // src/utils/Utils.ts
-import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
+import "node:path";
+import { fileURLToPath } from "node:url";
 import { match } from "path-to-regexp";
 var isDevelopment = process.env.NODE_ENV === "development";
 var __filename = fileURLToPath(import.meta.url);
@@ -163,20 +169,20 @@ async function collectStyleUrls(server, entries) {
   await Promise.all(entries.map((url) => traverse(url)));
   return [...visited].filter((url) => url.match(CSS_LANGS_RE));
 }
-function renderPreloadLinks(modules, manifest) {
+function renderPreloadLinks(ssrManifest, basePath = "") {
   const seen = /* @__PURE__ */ new Set();
   let links = "";
-  modules.forEach((id) => {
-    const files = manifest[id];
+  for (const moduleId in ssrManifest) {
+    const files = ssrManifest[moduleId];
     if (files) {
       files.forEach((file) => {
         if (!seen.has(file)) {
           seen.add(file);
-          links += renderPreloadLink(file);
+          links += renderPreloadLink(basePath ? `${basePath}/${file}` : `${file}`);
         }
       });
     }
-  });
+  }
   return links;
 }
 function renderPreloadLink(file) {
@@ -248,17 +254,22 @@ var matchRoute = (url, renderRoutes) => {
   }
   return null;
 };
-var getCssLinks = (manifest) => {
-  const links = [];
-  for (const value of Object.values(manifest)) {
-    if (value.css && value.css.length > 0) {
-      value.css.forEach((cssFile) => {
-        links.push(`<link rel="preload stylesheet" as="style" type="text/css" href="/${cssFile}">`);
-      });
+function getCssLinks(manifest, basePath = "") {
+  const seen = /* @__PURE__ */ new Set();
+  const styles = [];
+  for (const key in manifest) {
+    const entry = manifest[key];
+    if (entry && entry.css) {
+      for (const cssFile of entry.css) {
+        if (!seen.has(cssFile)) {
+          seen.add(cssFile);
+          styles.push(`<link rel="preload stylesheet" as="style" type="text/css" href="${basePath}/${cssFile}">`);
+        }
+      }
     }
   }
-  return links.join("");
-};
+  return styles.join("\n");
+}
 var overrideCSSHMRConsoleError = () => {
   const originalConsoleError = console.error;
   console.error = function(message, ...optionalParams) {
@@ -266,29 +277,76 @@ var overrideCSSHMRConsoleError = () => {
     originalConsoleError.apply(console, [message, ...optionalParams]);
   };
 };
+var ensureNonNull = (value, errorMessage) => {
+  if (value === void 0 || value === null) throw new Error(errorMessage);
+  return value;
+};
 
 // src/SSRServer.ts
+var createMaps = () => {
+  return {
+    bootstrapModules: /* @__PURE__ */ new Map(),
+    cssLinks: /* @__PURE__ */ new Map(),
+    manifests: /* @__PURE__ */ new Map(),
+    preloadLinks: /* @__PURE__ */ new Map(),
+    renderModules: /* @__PURE__ */ new Map(),
+    ssrManifests: /* @__PURE__ */ new Map(),
+    templates: /* @__PURE__ */ new Map()
+  };
+};
+var processConfigs = (configs, baseClientRoot, templateDefaults) => {
+  return configs.map((config) => {
+    const clientRoot = path2.resolve(baseClientRoot, config.entryPoint);
+    return {
+      clientRoot,
+      entryPoint: config.entryPoint,
+      entryClient: config.entryClient || templateDefaults.defaultEntryClient,
+      entryServer: config.entryServer || templateDefaults.defaultEntryServer,
+      htmlTemplate: config.htmlTemplate || templateDefaults.defaultHtmlTemplate,
+      appId: config.appId
+    };
+  });
+};
 var SSRServer = (0, import_fastify_plugin.default)(
   async (app, opts) => {
-    const { alias, clientRoot, clientHtmlTemplate, clientEntryClient, clientEntryServer, routes, serviceRegistry, isDebug } = opts;
-    const templateHtmlPath = path.join(clientRoot, clientHtmlTemplate);
-    const templateHtml = !isDevelopment ? await readFile(templateHtmlPath, "utf-8") : await readFile(path.join(clientRoot, clientHtmlTemplate), "utf-8");
-    const ssrManifestPath = path.join(clientRoot, ".vite/ssr-manifest.json");
-    const ssrManifest = !isDevelopment ? JSON.parse(await readFile(ssrManifestPath, "utf-8")) : void 0;
-    const manifestPath = path.join(clientRoot, ".vite/manifest.json");
-    const manifest = !isDevelopment ? JSON.parse(await readFile(manifestPath, "utf-8")) : void 0;
-    const bootstrapModules = isDevelopment ? `/${clientEntryClient}.tsx` : `/${manifest[`${clientEntryClient}.tsx`]?.file}`;
-    const preloadLinks = !isDevelopment ? renderPreloadLinks(Object.keys(ssrManifest), ssrManifest) : void 0;
-    const cssLinks = !isDevelopment ? getCssLinks(manifest) : void 0;
-    let renderModule;
-    let styles;
-    let template = templateHtml;
+    const { alias, configs, routes, serviceRegistry, isDebug, clientRoot: baseClientRoot } = opts;
+    const { bootstrapModules, cssLinks, manifests, preloadLinks, renderModules, ssrManifests, templates } = createMaps();
+    const processedConfigs = processConfigs(configs, baseClientRoot, TEMPLATE);
+    for (const config of processedConfigs) {
+      const { clientRoot, entryClient, htmlTemplate } = config;
+      const templateHtmlPath = path2.join(clientRoot, htmlTemplate);
+      const templateHtml = await readFile(templateHtmlPath, "utf-8");
+      templates.set(clientRoot, templateHtml);
+      const relativeBasePath = path2.relative(baseClientRoot, clientRoot).replace(/\\/g, "/");
+      const adjustedRelativePath = relativeBasePath ? `/${relativeBasePath}` : "";
+      if (!isDevelopment) {
+        const manifestPath = path2.join(clientRoot, ".vite/manifest.json");
+        const manifestContent = await readFile(manifestPath, "utf-8");
+        const manifest = JSON.parse(manifestContent);
+        manifests.set(clientRoot, manifest);
+        const ssrManifestPath = path2.join(clientRoot, ".vite/ssr-manifest.json");
+        const ssrManifestContent = await readFile(ssrManifestPath, "utf-8");
+        const ssrManifest = JSON.parse(ssrManifestContent);
+        ssrManifests.set(clientRoot, ssrManifest);
+        const entryClientFile = manifest[`${entryClient}.tsx`]?.file;
+        if (!entryClientFile) throw new Error(`Entry client file not found in manifest for ${entryClient}.tsx`);
+        const bootstrapModule = `/${adjustedRelativePath}/${entryClientFile}`.replace(/\/{2,}/g, "/");
+        bootstrapModules.set(clientRoot, bootstrapModule);
+        const preloadLink = renderPreloadLinks(ssrManifest, adjustedRelativePath);
+        preloadLinks.set(clientRoot, preloadLink);
+        const cssLink = getCssLinks(manifest, adjustedRelativePath);
+        cssLinks.set(clientRoot, cssLink);
+      } else {
+        const bootstrapModule = `/${adjustedRelativePath}/${entryClient}`.replace(/\/{2,}/g, "/");
+        bootstrapModules.set(clientRoot, bootstrapModule);
+      }
+    }
     let viteDevServer;
     let viteRuntime;
-    void await app.register(import("@fastify/static"), {
+    await app.register(import("@fastify/static"), {
       index: false,
       prefix: "/",
-      root: clientRoot,
+      root: baseClientRoot,
       wildcard: false
     });
     if (isDevelopment) {
@@ -306,31 +364,27 @@ var SSRServer = (0, import_fastify_plugin.default)(
         plugins: [
           ...isDebug ? [
             {
+              name: "taujs-development-server-debug-logging",
               configureServer(server) {
-                console.log("\u03C4js debug ssr server started.");
+                console.log("\u03C4js development server debug started.");
                 server.middlewares.use((req, res, next) => {
                   console.log(`rx: ${req.url}`);
-                  res.on("finish", () => {
-                    console.log(`tx: ${req.url}`);
-                  });
+                  res.on("finish", () => console.log(`tx: ${req.url}`));
                   next();
                 });
-              },
-              name: "taujs-ssr-server-debug-logging"
+              }
             }
           ] : []
         ],
         resolve: {
           alias: {
-            ...{
-              "@client": path.resolve(clientRoot),
-              "@server": path.resolve(__dirname),
-              "@shared": path.resolve(__dirname, "../shared")
-            },
+            "@client": path2.resolve(baseClientRoot),
+            "@server": path2.resolve(__dirname),
+            "@shared": path2.resolve(__dirname, "../shared"),
             ...alias
           }
         },
-        root: clientRoot,
+        root: baseClientRoot,
         server: {
           middlewareMode: true,
           hmr: {
@@ -340,17 +394,15 @@ var SSRServer = (0, import_fastify_plugin.default)(
       });
       viteRuntime = await createViteRuntime(viteDevServer);
       overrideCSSHMRConsoleError();
-      void app.addHook("onRequest", async (request, reply) => {
+      app.addHook("onRequest", async (request, reply) => {
         await new Promise((resolve) => {
           viteDevServer.middlewares(request.raw, reply.raw, () => {
             if (!reply.sent) resolve();
           });
         });
       });
-    } else {
-      renderModule = await import(path.join(clientRoot, `${clientEntryServer}.js`));
     }
-    void app.get("/*", async (req, reply) => {
+    app.get("/*", async (req, reply) => {
       try {
         if (/\.\w+$/.test(req.raw.url ?? "")) return reply.callNotFound();
         const url = req.url ? new URL(req.url, `http://${req.headers.host}`).pathname : "/";
@@ -359,26 +411,49 @@ var SSRServer = (0, import_fastify_plugin.default)(
           reply.callNotFound();
           return;
         }
+        const { route, params } = matchedRoute;
+        const { attr, appId } = route;
+        const config = processedConfigs.find((config2) => config2.appId === appId) || processedConfigs[0];
+        if (!config) throw new Error("No configuration found for the request.");
+        const { clientRoot, entryServer } = config;
+        let template = ensureNonNull(templates.get(clientRoot), `Template not found for clientRoot: ${clientRoot}`);
+        const bootstrapModule = bootstrapModules.get(clientRoot);
+        const cssLink = cssLinks.get(clientRoot);
+        const manifest = manifests.get(clientRoot);
+        const preloadLink = preloadLinks.get(clientRoot);
+        const ssrManifest = ssrManifests.get(clientRoot);
+        let renderModule;
         if (isDevelopment) {
           template = template.replace(/<script type="module" src="\/@vite\/client"><\/script>/g, "");
           template = template.replace(/<style type="text\/css">[\s\S]*?<\/style>/g, "");
-          renderModule = await viteRuntime.executeEntrypoint(path.join(clientRoot, `${clientEntryServer}.tsx`));
-          styles = await collectStyle(viteDevServer, [`${clientRoot}/${clientEntryServer}.tsx`]);
-          template = template.replace("</head>", `<style type="text/css">${styles}</style></head>`);
+          const entryServerPath = path2.join(clientRoot, `${entryServer}.tsx`);
+          const executedModule = await viteRuntime.executeEntrypoint(entryServerPath);
+          renderModule = executedModule;
+          const styles = await collectStyle(viteDevServer, [entryServerPath]);
+          template = template?.replace("</head>", `<style type="text/css">${styles}</style></head>`);
           template = await viteDevServer.transformIndexHtml(url, template);
+        } else {
+          renderModule = renderModules.get(clientRoot);
+          if (!renderModule) {
+            const renderModulePath = path2.join(clientRoot, `${entryServer}.js`);
+            const importedModule = await import(renderModulePath);
+            renderModule = importedModule;
+            renderModules.set(clientRoot, renderModule);
+          }
         }
-        const { route, params } = matchedRoute;
-        const { attr } = route;
-        const renderType = attr?.render || RENDERTYPE.streaming;
-        const [beforeBody = "", afterBody] = template.split(SSRTAG.ssrHtml);
-        const [beforeHead, afterHead] = beforeBody.split(SSRTAG.ssrHead);
+        const renderType = attr?.render || RENDERTYPE.ssr;
+        const [beforeBody = "", afterBody = ""] = template.split(SSRTAG.ssrHtml);
+        const [beforeHead = "", afterHead = ""] = beforeBody.split(SSRTAG.ssrHead);
         const initialDataPromise = fetchInitialData(attr, params, serviceRegistry);
         if (renderType === RENDERTYPE.ssr) {
           const { renderSSR } = renderModule;
           const initialDataResolved = await initialDataPromise;
           const initialDataScript = `<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialDataResolved).replace(/</g, "\\u003c")}</script>`;
           const { headContent, appHtml } = await renderSSR(initialDataResolved, req.url, attr?.meta);
-          const fullHtml = template.replace(SSRTAG.ssrHead, headContent).replace(SSRTAG.ssrHtml, `${appHtml}${initialDataScript}<script type="module" src="${bootstrapModules}" async=""></script>`);
+          let aggregateHeadContent = headContent;
+          if (ssrManifest && preloadLink) aggregateHeadContent += preloadLink;
+          if (manifest && cssLink) aggregateHeadContent += cssLink;
+          const fullHtml = template.replace(SSRTAG.ssrHead, aggregateHeadContent).replace(SSRTAG.ssrHtml, `${appHtml}${initialDataScript}<script type="module" src="${bootstrapModule}" async=""></script>`);
           return reply.status(200).header("Content-Type", "text/html").send(fullHtml);
         } else {
           const { renderStream } = renderModule;
@@ -388,8 +463,8 @@ var SSRServer = (0, import_fastify_plugin.default)(
             {
               onHead: (headContent) => {
                 let aggregateHeadContent = headContent;
-                if (ssrManifest) aggregateHeadContent += preloadLinks;
-                if (manifest) aggregateHeadContent += cssLinks;
+                if (ssrManifest && preloadLink) aggregateHeadContent += preloadLink;
+                if (manifest && cssLink) aggregateHeadContent += cssLink;
                 reply.raw.write(`${beforeHead}${aggregateHeadContent}${afterHead}`);
               },
               onFinish: async (initialDataResolved) => {
@@ -404,7 +479,7 @@ var SSRServer = (0, import_fastify_plugin.default)(
             },
             initialDataPromise,
             req.url,
-            bootstrapModules,
+            bootstrapModule,
             attr?.meta
           );
         }
@@ -414,14 +489,19 @@ var SSRServer = (0, import_fastify_plugin.default)(
         reply.raw.end("Internal Server Error");
       }
     });
-    void app.setNotFoundHandler(async (req, reply) => {
+    app.setNotFoundHandler(async (req, reply) => {
       if (/\.\w+$/.test(req.raw.url ?? "")) return reply.callNotFound();
       try {
-        let template2 = templateHtml;
-        template2 = template2.replace(SSRTAG.ssrHead, "").replace(SSRTAG.ssrHtml, "");
-        if (!isDevelopment) template2 = template2.replace("</head>", `${getCssLinks(manifest)}</head>`);
-        template2 = template2.replace("</body>", `<script type="module" src="${bootstrapModules}" async=""></script></body>`);
-        reply.status(200).type("text/html").send(template2);
+        const defaultConfig = processedConfigs[0];
+        if (!defaultConfig) throw new Error("No default configuration found.");
+        const { clientRoot } = defaultConfig;
+        let template = ensureNonNull(templates.get(clientRoot), `Template not found for clientRoot: ${clientRoot}`);
+        const cssLink = cssLinks.get(clientRoot);
+        const bootstrapModule = bootstrapModules.get(clientRoot);
+        template = template.replace(SSRTAG.ssrHead, "").replace(SSRTAG.ssrHtml, "");
+        if (!isDevelopment && cssLink) template = template.replace("</head>", `${cssLink}</head>`);
+        if (bootstrapModule) template = template.replace("</body>", `<script type="module" src="${bootstrapModule}" async=""></script></body>`);
+        reply.status(200).type("text/html").send(template);
       } catch (error) {
         console.error("Failed to serve clientHtmlTemplate:", error);
         reply.status(500).send("Internal Server Error");
@@ -431,5 +511,8 @@ var SSRServer = (0, import_fastify_plugin.default)(
   { name: "taujs-ssr-server" }
 );
 export {
-  SSRServer
+  SSRServer,
+  TEMPLATE,
+  createMaps,
+  processConfigs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taujs/server",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "taujs | τjs",
   "author": "Aoede <taujs@aoede.uk.net> (https://www.aoede.uk.net)",
   "license": "MIT",