@taujs/server 0.0.8 → 0.1.0

package/README.md

@@ -6,7 +6,7 @@
 
 `pnpm add @taujs/server`
 
-## Streaming React SSR & Hydration
+## SPA; SSR; Streaming SSR; Hydration; Fastify + React 18
 
 Fastify Plugin for integration with taujs [ τjs ] template https://github.com/aoede3/taujs
 

package/dist/data.d.ts

@@ -7,11 +7,11 @@ type SSRStore<T> = {
     setData: (newData: T) => void;
     subscribe: (callback: () => void) => () => void;
 };
-declare const createSSRStore: <T>(initialDataPromise: Promise<T>) => SSRStore<T>;
+declare const createSSRStore: <T>(initialDataOrPromise: T | Promise<T>) => SSRStore<T>;
 declare const SSRStoreProvider: React.FC<React.PropsWithChildren<{
     store: SSRStore<Record<string, unknown>>;
 }>>;
-declare const useSSRStore: <T>() => SSRStore<T>;
+declare const useSSRStore: <T>() => T;
 
 type HydrateAppOptions = {
     appComponent: React.ReactElement;
@@ -21,17 +21,29 @@ type HydrateAppOptions = {
 };
 declare const hydrateApp: ({ appComponent, initialDataKey, rootElementId, debug }: HydrateAppOptions) => void;
 
-type StreamRenderOptions = {
-    appComponent: React.ReactElement;
-    initialDataPromise: Promise<Record<string, unknown>>;
-    bootstrapModules: string;
-    headContent: string;
+type RendererOptions = {
+    appComponent: (props: {
+        location: string;
+    }) => React.ReactElement;
+    headContent: string | ((data: Record<string, unknown>) => string);
 };
 type RenderCallbacks = {
     onHead: (headContent: string) => void;
     onFinish: (initialDataResolved: unknown) => void;
     onError: (error: unknown) => void;
 };
-declare const createStreamRenderer: (serverResponse: ServerResponse, { onHead, onFinish, onError }: RenderCallbacks, { appComponent, initialDataPromise, bootstrapModules, headContent }: StreamRenderOptions) => void;
+declare const resolveHeadContent: (headContent: string | ((meta: Record<string, unknown>) => string), meta?: Record<string, unknown>) => string;
+declare const createRenderer: ({ appComponent, headContent }: RendererOptions) => {
+    renderSSR: (initialDataResolved: Record<string, unknown>, location: string, meta?: Record<string, unknown>) => Promise<{
+        headContent: string;
+        appHtml: string;
+    }>;
+    renderStream: (serverResponse: ServerResponse, callbacks: RenderCallbacks, initialDataResolved: Record<string, unknown>, location: string, bootstrapModules?: string, meta?: Record<string, unknown>) => void;
+};
+declare const createRenderStream: (serverResponse: ServerResponse, { onHead, onFinish, onError }: RenderCallbacks, { appComponent, headContent, initialDataResolved, location, bootstrapModules, }: RendererOptions & {
+    initialDataResolved: Record<string, unknown>;
+    location: string;
+    bootstrapModules?: string;
+}) => void;
 
-export { type SSRStore, SSRStoreProvider, createSSRStore, createStreamRenderer, hydrateApp, useSSRStore };
+export { type SSRStore, SSRStoreProvider, createRenderStream, createRenderer, createSSRStore, hydrateApp, resolveHeadContent, useSSRStore };

package/dist/data.js

@@ -1,26 +1,31 @@
 // src/SSRDataStore.tsx
 import { createContext, useContext, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
-var createSSRStore = (initialDataPromise) => {
+var createSSRStore = (initialDataOrPromise) => {
   let currentData;
-  let status = "pending";
+  let status;
   const subscribers = /* @__PURE__ */ new Set();
-  let resolvePromise = null;
-  const serverDataPromise = new Promise((resolve) => resolvePromise = resolve);
-  initialDataPromise.then((data) => {
-    currentData = data;
+  let serverDataPromise;
+  if (initialDataOrPromise instanceof Promise) {
+    status = "pending";
+    serverDataPromise = initialDataOrPromise.then((data) => {
+      currentData = data;
+      status = "success";
+      subscribers.forEach((callback) => callback());
+    }).catch((error) => {
+      console.error("Failed to load initial data:", error);
+      status = "error";
+    }).then(() => {
+    });
+  } else {
+    currentData = initialDataOrPromise;
     status = "success";
-    subscribers.forEach((callback) => callback());
-    if (resolvePromise) resolvePromise();
-  }).catch((error) => {
-    console.error("Failed to load initial data:", error);
-    status = "error";
-  });
+    serverDataPromise = Promise.resolve();
+  }
   const setData = (newData) => {
     currentData = newData;
     status = "success";
     subscribers.forEach((callback) => callback());
-    if (resolvePromise) resolvePromise();
   };
   const subscribe = (callback) => {
     subscribers.add(callback);
@@ -28,7 +33,7 @@ var createSSRStore = (initialDataPromise) => {
   };
   const getSnapshot = () => {
     if (status === "pending") {
-      throw initialDataPromise;
+      throw serverDataPromise;
     } else if (status === "error") {
       throw new Error("An error occurred while fetching the data.");
     }
@@ -105,15 +110,45 @@ var hydrateApp = ({ appComponent, initialDataKey = "__INITIAL_DATA__", rootEleme
 // src/SSRRender.tsx
 import { Writable } from "node:stream";
 import "react";
-import { renderToPipeableStream } from "react-dom/server";
+import { renderToPipeableStream, renderToString } from "react-dom/server";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var createStreamRenderer = (serverResponse, { onHead, onFinish, onError }, { appComponent, initialDataPromise, bootstrapModules, headContent }) => {
-  const store = createSSRStore(initialDataPromise);
-  const appElement = /* @__PURE__ */ jsx3(SSRStoreProvider, { store, children: appComponent });
+var resolveHeadContent = (headContent, meta = {}) => typeof headContent === "function" ? headContent(meta) : headContent;
+var createRenderer = ({ appComponent, headContent }) => {
+  const renderSSR = async (initialDataResolved, location, meta = {}) => {
+    const dataForHeadContent = Object.keys(initialDataResolved).length > 0 ? initialDataResolved : meta;
+    const dynamicHeadContent = resolveHeadContent(headContent, dataForHeadContent);
+    const appHtml = renderToString(/* @__PURE__ */ jsx3(SSRStoreProvider, { store: createSSRStore(initialDataResolved), children: appComponent({ location }) }));
+    return {
+      headContent: dynamicHeadContent,
+      appHtml
+    };
+  };
+  const renderStream = (serverResponse, callbacks, initialDataResolved, location, bootstrapModules, meta = {}) => {
+    const dynamicHeadContent = resolveHeadContent(headContent, meta);
+    createRenderStream(serverResponse, callbacks, {
+      appComponent: (props) => appComponent({ ...props, location }),
+      headContent: dynamicHeadContent,
+      initialDataResolved,
+      location,
+      bootstrapModules
+    });
+  };
+  return { renderSSR, renderStream };
+};
+var createRenderStream = (serverResponse, { onHead, onFinish, onError }, {
+  appComponent,
+  headContent,
+  initialDataResolved,
+  location,
+  bootstrapModules
+}) => {
+  const store = createSSRStore(initialDataResolved);
+  const appElement = /* @__PURE__ */ jsx3(SSRStoreProvider, { store, children: appComponent({ location }) });
   const { pipe } = renderToPipeableStream(appElement, {
-    bootstrapModules: [bootstrapModules],
+    bootstrapModules: bootstrapModules ? [bootstrapModules] : void 0,
     onShellReady() {
-      onHead(headContent);
+      const dynamicHeadContent = resolveHeadContent(headContent, initialDataResolved);
+      onHead(dynamicHeadContent);
       pipe(
         new Writable({
           write(chunk, _encoding, callback) {
@@ -135,8 +170,10 @@ var createStreamRenderer = (serverResponse, { onHead, onFinish, onError }, { app
 };
 export {
   SSRStoreProvider,
+  createRenderStream,
+  createRenderer,
   createSSRStore,
-  createStreamRenderer,
   hydrateApp,
+  resolveHeadContent,
   useSSRStore
 };

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import { FastifyPluginAsync } from 'fastify';
 import { ServerResponse } from 'node:http';
 
+declare const RENDERTYPE: {
+    ssr: string;
+    streaming: string;
+};
+
 declare const SSRServer: FastifyPluginAsync<SSRServerOptions>;
 type ServiceRegistry = {
     [serviceName: string]: {
@@ -40,9 +45,15 @@ type Manifest = {
         assets?: string[];
     };
 };
-type StreamRender = (serverResponse: ServerResponse, callbacks: RenderCallbacks, initialDataPromise: Promise<Record<string, unknown>>, bootstrapModules: string) => void;
+type RenderSSR = (initialDataResolved: Record<string, unknown>, location: string, meta?: Record<string, unknown>) => Promise<{
+    headContent: string;
+    appHtml: string;
+    initialDataScript: string;
+}>;
+type RenderStream = (serverResponse: ServerResponse, callbacks: RenderCallbacks, initialDataPromise: Promise<Record<string, unknown>>, location: string, bootstrapModules?: string, meta?: Record<string, unknown>) => void;
 type RenderModule = {
-    streamRender: StreamRender;
+    renderSSR: RenderSSR;
+    renderStream: RenderStream;
 };
 type RouteAttributes<Params = {}> = {
     fetch: (params?: Params, options?: RequestInit & {
@@ -55,9 +66,11 @@ type RouteAttributes<Params = {}> = {
         serviceMethod?: string;
         url?: string;
     }>;
+    meta?: Record<string, unknown>;
+    render?: typeof RENDERTYPE.ssr | typeof RENDERTYPE.streaming;
 };
 type Route<Params = {}> = {
-    attributes?: RouteAttributes<Params>;
+    attr?: RouteAttributes<Params>;
     path: string;
 };
 interface InitialRouteParams extends Record<string, unknown> {
@@ -67,4 +80,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 Route, type RouteAttributes, type RouteParams, type RoutePathsAndAttributes, SSRServer, type SSRServerOptions, type ServiceRegistry, type StreamRender };
+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 };

package/dist/index.js

@@ -211,9 +211,9 @@ var fetchData = async ({ url, options }) => {
   }
   throw new Error("URL must be provided to fetch data");
 };
-var fetchInitialData = async (attributes, params, serviceRegistry) => {
-  if (attributes && typeof attributes.fetch === "function") {
-    return attributes.fetch(params, {
+var fetchInitialData = async (attr, params, serviceRegistry) => {
+  if (attr && typeof attr.fetch === "function") {
+    return attr.fetch(params, {
       headers: { "Content-Type": "application/json" },
       params
     }).then(async (data) => {
@@ -257,6 +257,16 @@ var overrideCSSHMRConsoleError = () => {
   };
 };
 
+// src/constants.ts
+var RENDERTYPE = {
+  ssr: "ssr",
+  streaming: "streaming"
+};
+var SSRTAG = {
+  ssrHead: "<!--ssr-head-->",
+  ssrHtml: "<!--ssr-html-->"
+};
+
 // src/SSRServer.ts
 var SSRServer = (0, import_fastify_plugin.default)(
   async (app, opts) => {
@@ -275,6 +285,12 @@ var SSRServer = (0, import_fastify_plugin.default)(
     let template = templateHtml;
     let viteDevServer;
     let viteRuntime;
+    void await app.register(import("@fastify/static"), {
+      index: false,
+      prefix: "/",
+      root: clientRoot,
+      wildcard: false
+    });
     if (isDevelopment) {
       const { createServer } = await import("vite");
       viteDevServer = await createServer({
@@ -326,14 +342,10 @@ var SSRServer = (0, import_fastify_plugin.default)(
       });
     } else {
       renderModule = await import(path.join(clientRoot, `${clientEntryServer}.js`));
-      void await app.register(import("@fastify/static"), {
-        index: false,
-        root: path.resolve(clientRoot),
-        wildcard: false
-      });
     }
     void 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 : "/";
         const matchedRoute = matchRoute(url, routes);
         if (!matchedRoute) {
@@ -341,41 +353,54 @@ var SSRServer = (0, import_fastify_plugin.default)(
           return;
         }
         if (isDevelopment) {
-          template = await viteDevServer.transformIndexHtml(url, template);
+          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>`);
+          template = await viteDevServer.transformIndexHtml(url, template);
         }
-        const { streamRender } = renderModule;
         const { route, params } = matchedRoute;
-        const { attributes } = route;
-        const [beforeBody = "", afterBody] = template.split("<!--ssr-html-->");
-        const [beforeHead, afterHead] = beforeBody.split("<!--ssr-head-->");
-        const initialDataPromise = fetchInitialData(attributes, params, serviceRegistry);
-        reply.raw.writeHead(200, { "Content-Type": "text/html" });
-        reply.raw.write(beforeHead);
-        streamRender(
-          reply.raw,
-          {
-            onHead: (headContent) => {
-              let fullHeadContent = headContent;
-              if (ssrManifest) fullHeadContent += preloadLinks;
-              if (manifest) fullHeadContent += cssLinks;
-              reply.raw.write(`${fullHeadContent}${afterHead}`);
-            },
-            onFinish: async (initialDataResolved) => {
-              reply.raw.write(`<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialDataResolved).replace(/</g, "\\u003c")}</script>`);
-              reply.raw.write(afterBody);
-              reply.raw.end();
+        const { attr } = route;
+        const renderType = attr?.render || RENDERTYPE.streaming;
+        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>`);
+          return reply.status(200).header("Content-Type", "text/html").send(fullHtml);
+        } else {
+          const { renderStream } = renderModule;
+          reply.raw.writeHead(200, { "Content-Type": "text/html" });
+          renderStream(
+            reply.raw,
+            {
+              onHead: (headContent) => {
+                let aggregateHeadContent = headContent;
+                if (ssrManifest) aggregateHeadContent += preloadLinks;
+                if (manifest) aggregateHeadContent += cssLinks;
+                reply.raw.write(`${beforeHead}${aggregateHeadContent}${afterHead}`);
+              },
+              onFinish: async (initialDataResolved) => {
+                reply.raw.write(`<script>window.__INITIAL_DATA__ = ${JSON.stringify(initialDataResolved).replace(/</g, "\\u003c")}</script>`);
+                reply.raw.write(afterBody);
+                reply.raw.end();
+              },
+              onError: (error) => {
+                console.error("Critical rendering onError:", error);
+                reply.raw.end("Internal Server Error");
+              }
             },
-            onError: (error) => {
-              console.error("Critical rendering onError:", error);
-              reply.raw.end("Internal Server Error");
-            }
-          },
-          initialDataPromise,
-          bootstrapModules
-        );
+            initialDataPromise,
+            req.url,
+            bootstrapModules,
+            attr?.meta
+          );
+        }
       } catch (error) {
         console.error("Error setting up SSR stream:", error);
         if (!reply.raw.headersSent) reply.raw.writeHead(500, { "Content-Type": "text/plain" });
@@ -386,7 +411,7 @@ var SSRServer = (0, import_fastify_plugin.default)(
       if (/\.\w+$/.test(req.raw.url ?? "")) return reply.callNotFound();
       try {
         let template2 = templateHtml;
-        template2 = template2.replace("<!--ssr-head-->", "").replace("<!--ssr-html-->", "");
+        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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taujs/server",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "taujs | τjs",
   "author": "Aoede <taujs@aoede.uk.net> (https://www.aoede.uk.net)",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitest/coverage-v8": "^2.1.0",
-    "fastify": "^4.28.0",
+    "fastify": "^4.28.1",
     "jsdom": "^25.0.0",
     "prettier": "^3.3.3",
     "react-dom": "^18.3.1",
@@ -62,7 +62,7 @@
     "vitest": "^2.0.5"
   },
   "peerDependencies": {
-    "fastify": "^5.0.0",
+    "fastify": "^4.28.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "^5.5.4",
@@ -70,9 +70,11 @@
   },
   "scripts": {
     "build": "tsup",
+    "build-local": "tsup && ./move.sh",
     "ci": "npm run build && npm run check-format && npm run lint",
     "lint": "tsc",
     "test": "vitest run",
+    "test:ui": "vitest --ui --coverage.enabled=true",
     "coverage": "vitest run --coverage",
     "format": "prettier --write .",
     "check-format": "prettier --check .",