dinou 6.1.1 → 7.1.0

package/dinou/core/ppr-context.js

@@ -0,0 +1,105 @@
+// dinou/core/ppr-context.js
+// PPR Pre-rendering Context and Suspense Hole Tracker for Dinou v7.2.
+
+const { AsyncLocalStorage } = require("async_hooks");
+
+const pprStorage = new AsyncLocalStorage();
+
+/**
+ * Executes a function within a PPR pre-render context.
+ * @param {object} options
+ * @param {Function} callback
+ * @returns {Promise<any>}
+ */
+function runWithPprContext(options, callback) {
+  const store = {
+    isPpr: Boolean(options?.isPpr),
+    suspenseDepth: 0,
+    currentHoleId: null,
+    holes: new Map(),
+    nextHoleIndex: 0,
+    ...options,
+  };
+  return pprStorage.run(store, callback);
+}
+
+function getPprStore() {
+  return pprStorage.getStore() || null;
+}
+
+function isPprBuildActive() {
+  const store = getPprStore();
+  return Boolean(store && store.isPpr);
+}
+
+function isInsideSuspense() {
+  const store = getPprStore();
+  return Boolean(store && store.suspenseDepth > 0);
+}
+
+function enterSuspense(holeId = null) {
+  const store = getPprStore();
+  if (store) {
+    store.suspenseDepth++;
+    if (!holeId) {
+      store.nextHoleIndex++;
+      holeId = `ppr-hole-${store.nextHoleIndex}`;
+    }
+    store.currentHoleId = holeId;
+    return holeId;
+  }
+  return null;
+}
+
+function exitSuspense() {
+  const store = getPprStore();
+  if (store) {
+    store.suspenseDepth = Math.max(0, store.suspenseDepth - 1);
+    if (store.suspenseDepth === 0) {
+      store.currentHoleId = null;
+    }
+  }
+}
+
+function markDynamicAccess(type = "dynamic") {
+  const store = getPprStore();
+  if (store && store.isPpr && store.suspenseDepth > 0) {
+    const holeId = store.currentHoleId || `ppr-hole-${store.nextHoleIndex}`;
+    const error = new Error(`[Dinou PPR] Dynamic access to '${type}' postponed inside Suspense`);
+    error.$$typeof = Symbol.for("dinou.ppr.postpone");
+    error.pprType = type;
+    error.holeId = holeId;
+    throw error;
+  }
+}
+
+function registerHole(holeId, meta = {}) {
+  const store = getPprStore();
+  if (store) {
+    store.holes.set(holeId, {
+      id: holeId,
+      registeredAt: Date.now(),
+      ...meta,
+    });
+  }
+}
+
+function getRegisteredHoles() {
+  const store = getPprStore();
+  if (store) {
+    return Array.from(store.holes.keys());
+  }
+  return [];
+}
+
+module.exports = {
+  runWithPprContext,
+  getPprStore,
+  isPprBuildActive,
+  isInsideSuspense,
+  enterSuspense,
+  exitSuspense,
+  markDynamicAccess,
+  registerHole,
+  getRegisteredHoles,
+};

package/dinou/core/ppr-runtime.js

@@ -0,0 +1,263 @@
+// dinou/core/ppr-runtime.js
+// Dinou Partial Prerendering (PPR) Runtime Streaming Resume Engine.
+// Sends the pre-rendered shell immediately (0ms TTFB) and progressively
+// streams dynamic Suspense holes as they resolve over the same HTTP connection.
+// Designed for the Dual-Bundle architecture (Pass A: RSC, Pass B: SSR).
+
+const React = require("react");
+const { renderRSCStream } = require("./rsc-renderer.js");
+const { getClientManifest } = require("./manifest-provider.js");
+const { requestStorage, setCurrentContext } = require("./request-context.js");
+const getJSX = require("./get-jsx.js");
+
+/**
+ * Traverses a React JSX element tree to find Suspense boundaries,
+ * evaluates their dynamic children, and streams replacement chunks.
+ *
+ * @param {object} node - Root JSX node (layout + page)
+ * @param {Array<string|object>} expectedHoles - Holes registered at build time
+ * @param {WritableStreamDefaultWriter} writer - Response stream writer
+ * @param {TextEncoder} encoder - Text encoder
+ * @param {object} platformContext - Dinou platform context (containing renderHtmlStream)
+ * @param {boolean} isDevelopment - Dev mode flag
+ */
+async function streamDynamicHoles(
+  node,
+  expectedHoles,
+  writer,
+  encoder,
+  platformContext,
+  isDevelopment = false
+) {
+  let holeIndex = 0;
+  const holePromises = [];
+
+  const knownHoleIds = new Set(
+    (expectedHoles || []).map((h) => (typeof h === "object" ? h.id : h))
+  );
+
+  const clientManifest = getClientManifest();
+
+function isClientComponent(type) {
+  if (!type) return false;
+  return (
+    type.$$typeof === Symbol.for("react.client.reference") ||
+    Boolean(type.$$id) ||
+    Boolean(type.filepath)
+  );
+}
+
+  async function traverse(current) {
+    if (!current) return;
+
+    // Handle Client Component: do NOT execute, only traverse children
+    if (isClientComponent(current?.type) || current?.$$typeof === Symbol.for("react.client.reference")) {
+      if (current?.props?.children) {
+        await traverse(current.props.children);
+      }
+      return;
+    }
+
+    // Handle React Server Component function
+    if (typeof current?.type === "function") {
+      try {
+        const evaluated = await current.type(current.props || {});
+        await traverse(evaluated);
+      } catch (err) {
+        console.error("[Dinou PPR] Error evaluating component in hole traversal:", err);
+      }
+      return;
+    }
+
+    // Handle React.forward_ref
+    if (
+      typeof current?.type === "object" &&
+      current.type !== null &&
+      current.type.$$typeof === Symbol.for("react.forward_ref")
+    ) {
+      try {
+        const rendered = current.type.render(current.props || {}, current.ref);
+        await traverse(rendered);
+      } catch (err) {
+        console.error("[Dinou PPR] Error evaluating forward_ref in hole traversal:", err);
+      }
+      return;
+    }
+
+    // Handle React.Suspense
+    if (
+      current?.type === Symbol.for("react.suspense") ||
+      current?.type === React.Suspense
+    ) {
+      holeIndex++;
+      const currentHoleId = `ppr-hole-${holeIndex}`;
+
+      // Check if this boundary was registered as a dynamic hole
+      const shouldStream =
+        knownHoleIds.size === 0 || knownHoleIds.has(currentHoleId);
+
+      if (shouldStream) {
+        const children = current.props?.children;
+        const promise = (async () => {
+          try {
+            let html = "";
+            if (platformContext && platformContext.renderHtmlStream) {
+              const rscStream = renderRSCStream(children, clientManifest, { runtime: "edge" });
+              const htmlStream = await platformContext.renderHtmlStream(rscStream, {
+                bootstrapModules: [],
+              });
+              html = await new Response(htmlStream).text();
+            }
+
+            const chunk = `\n<template id="ppr-content-${currentHoleId}">${html}</template>\n<script>(function(){var c=document.getElementById("ppr-content-${currentHoleId}");if(!c)return;var b=document.getElementById("B:${holeIndex - 1}");var t=document.querySelector('[data-ppr-hole="${currentHoleId}"]')||(b?b.nextElementSibling:null);try{if(t){t.replaceWith(c.content?c.content:...c.childNodes);}}finally{c.remove();}})();</script>\n`;
+            await writer.write(encoder.encode(chunk));
+          } catch (holeErr) {
+            console.error(`[Dinou PPR] Error resolving dynamic hole ${currentHoleId}:`, holeErr);
+            const errMsg = isDevelopment
+              ? (holeErr?.message || "Unknown dynamic error")
+              : "Error loading dynamic content";
+            const errChunk = `\n<template id="ppr-content-${currentHoleId}"><div style="color:#e11d48;padding:8px 12px;background:#fff1f2;border:1px solid #fecdd3;border-radius:6px;font-size:0.875rem;font-family:system-ui,sans-serif;">[PPR Error: ${errMsg}]</div></template>\n<script>(function(){var c=document.getElementById("ppr-content-${currentHoleId}");if(!c)return;var b=document.getElementById("B:${holeIndex - 1}");var t=document.querySelector('[data-ppr-hole="${currentHoleId}"]')||(b?b.nextElementSibling:null);try{if(t){t.replaceWith(c.content?c.content:...c.childNodes);}}finally{c.remove();}})();</script>\n`;
+            await writer.write(encoder.encode(errChunk));
+          }
+        })();
+        holePromises.push(promise);
+      }
+      return;
+    }
+
+    // Handle Arrays (children)
+    if (Array.isArray(current)) {
+      for (const item of current) {
+        await traverse(item);
+      }
+      return;
+    }
+
+    // Traverse children props
+    if (current?.props?.children) {
+      await traverse(current.props.children);
+    }
+  }
+
+  await traverse(node);
+  await Promise.all(holePromises);
+}
+
+/**
+ * Handles PPR Runtime Streaming Resume.
+ * Immediately flushes shellPrelude to the client, then resolves dynamic holes in parallel.
+ */
+async function handlePprResume({
+  reqPath,
+  queryObj,
+  simReq,
+  bridge,
+  platformContext,
+  rootContext,
+  cachedItem,
+  metadata,
+  isDevelopment,
+  getDiscoveredLayouts,
+  createRequestContext,
+  copyCustomContextProperties,
+}) {
+  let shellHtml = cachedItem.content;
+  if (typeof shellHtml === "string") {
+    if (!shellHtml.includes("window.__DINOU_LAYOUTS__")) {
+      const knownLayouts = typeof getDiscoveredLayouts === "function" ? getDiscoveredLayouts() : {};
+      shellHtml = shellHtml.replace(
+        "</head>",
+        `<script>window.__DINOU_LAYOUTS__=${JSON.stringify(knownLayouts)};</script></head>`
+      );
+    }
+    shellHtml = shellHtml.replace(
+      /window\.__DINOU_USE_STATIC__\s*=\s*true;?/g,
+      "window.__DINOU_USE_STATIC__ = false; window.__DINOU_PPR__ = true;"
+    );
+    if (!shellHtml.includes("window.__DINOU_PPR__")) {
+      shellHtml = shellHtml.replace(
+        "</head>",
+        `<script>window.__DINOU_USE_STATIC__ = false; window.__DINOU_PPR__ = true;</script></head>`
+      );
+    }
+  }
+
+  // Separate shell into prelude (up to </body>) and postlude
+  const lowerHtml = shellHtml.toLowerCase();
+  const bodyCloseIndex = lowerHtml.lastIndexOf("</body>");
+  let shellPrelude =
+    bodyCloseIndex !== -1 ? shellHtml.slice(0, bodyCloseIndex) : shellHtml;
+  let shellPostlude =
+    bodyCloseIndex !== -1 ? shellHtml.slice(bodyCloseIndex) : "</body></html>";
+
+  const { readable, writable } = new TransformStream();
+  const writer = writable.getWriter();
+  const encoder = new TextEncoder();
+
+  // Stream dynamic holes in parallel with the prelude
+  const resumePromise = (async () => {
+    try {
+      // 1. Immediately flush static shell prelude (0ms TTFB)
+      await writer.write(encoder.encode(shellPrelude));
+
+      const dynamicState = { value: true };
+      const context = createRequestContext(simReq, bridge, platformContext, dynamicState);
+      if (typeof copyCustomContextProperties === "function") {
+        copyCustomContextProperties(rootContext, context);
+      }
+      if (typeof setCurrentContext === "function") {
+        setCurrentContext(context);
+      }
+
+      await requestStorage.run(context, async () => {
+        const isNotFound = { value: false };
+        const jsx = await getJSX(
+          reqPath,
+          queryObj,
+          isNotFound,
+          isDevelopment,
+          false
+        );
+
+        const holes = metadata?.holes || [];
+        await streamDynamicHoles(
+          jsx,
+          holes,
+          writer,
+          encoder,
+          platformContext,
+          isDevelopment
+        );
+      });
+    } catch (streamErr) {
+      console.error("[Dinou PPR] Runtime streaming resume error:", streamErr);
+    } finally {
+      try {
+        await writer.write(encoder.encode(shellPostlude));
+        await writer.close();
+      } catch (_) {}
+    }
+  })();
+
+  if (
+    platformContext &&
+    platformContext.ctx &&
+    typeof platformContext.ctx.waitUntil === "function"
+  ) {
+    platformContext.ctx.waitUntil(resumePromise);
+  }
+
+  const headers = new Headers(bridge.headers);
+  headers.set("Content-Type", "text/html; charset=utf-8");
+  headers.set("Cache-Control", "no-store, no-cache, must-revalidate");
+
+  return new Response(readable, {
+    status: metadata?.status || 200,
+    headers,
+  });
+}
+
+module.exports = {
+  streamDynamicHoles,
+  handlePprResume,
+};

package/dinou/core/redirect.jsx

@@ -1,5 +1,7 @@
 import { ClientRedirect } from "./client-redirect.jsx";
 
+const DINOU_CONTEXT_KEY = Symbol.for("dinou.request.context.storage");
+
 /**
  * Universal redirection function.
  * Use it with 'return': return redirect('/login');
@@ -7,26 +9,23 @@ import { ClientRedirect } from "./client-redirect.jsx";
 export function redirect(destination) {
   // 1. We try to get the server context
   if (typeof window === "undefined") {
-    // getContext() must be accessible here
-    const dynamicRequire =
-      typeof __dinou_require__ !== "undefined"
-        ? __dinou_require__
-        : typeof module !== "undefined" && typeof module.require === "function"
-          ? module.require.bind(module)
-          : null;
-    if (dynamicRequire) {
-      const { getContext } = dynamicRequire(
-        /* webpackIgnore: true */ "./request-context.js"
-      );
-      const ctx = getContext();
-
-      // 2. If we are on the server and headers have NOT been sent yet...
-      // We can do a real HTTP redirect (Status 307).
-      // This is better for SEO and speed in Hard Navigation.
-      if (ctx && ctx.res) {
-        ctx.res.redirect(destination);
-        return <ClientRedirect to={destination} />;
+    let ctx;
+    try {
+      const storage = globalThis[DINOU_CONTEXT_KEY];
+      if (storage && typeof storage.getStore === "function") {
+        ctx = storage.getStore();
+      }
+      if (!ctx && typeof globalThis !== "undefined") {
+        ctx = globalThis[Symbol.for("dinou.request.context.current")];
       }
+    } catch (e) { }
+
+    // 2. If we are on the server and headers have NOT been sent yet...
+    // We can do a real HTTP redirect (Status 307 or x-rsc-redirect).
+    // This is better for SEO and speed in Hard Navigation.
+    if (ctx && ctx.res && typeof ctx.res.redirect === "function") {
+      ctx.res.redirect(destination);
+      return <ClientRedirect to={destination} />;
     }
   }
 
@@ -34,3 +33,5 @@ export function redirect(destination) {
   // We return the component that will force the redirection in the browser.
   return <ClientRedirect to={destination} />;
 }
+
+export default redirect;

package/dinou/core/render-jsx-to-client-jsx.js

@@ -1,3 +1,10 @@
+const {
+  isPprBuildActive,
+  enterSuspense,
+  exitSuspense,
+  registerHole,
+} = require("./ppr-context.js");
+
 // Function to check if a component is a client component
 function isClientComponent(type) {
   if (!type) {
@@ -10,21 +17,23 @@ function isClientComponent(type) {
   );
 }
 
-function renderJSXToClientJSX(jsx, key = null) {
+async function asyncRenderJSXToClientJSX(jsx, key = null) {
   if (
     typeof jsx === "string" ||
     typeof jsx === "number" ||
     typeof jsx === "boolean" ||
     typeof jsx === "function" ||
     typeof jsx === "undefined" ||
-    jsx == null
+    jsx === null
   ) {
     return jsx;
   } else if (Array.isArray(jsx)) {
-    return jsx.map((child, i) =>
-      renderJSXToClientJSX(
-        child,
-        i + (typeof child?.type === "string" ? "_" + child?.type : "")
+    return await Promise.all(
+      jsx.map((child) =>
+        asyncRenderJSXToClientJSX(
+          child,
+          child?.key ?? null
+        )
       )
     );
   } else if (typeof jsx === "symbol") {
@@ -34,21 +43,64 @@ function renderJSXToClientJSX(jsx, key = null) {
         $$typeof: Symbol.for("react.transitional.element"),
         type: Symbol.for("react.fragment"),
         props: {},
-        key: key,
+        key,
       };
     }
     console.error("Unsupported symbol:", String(jsx));
     throw new Error(`Unsupported symbol: ${String(jsx)}`);
   } else if (typeof jsx === "object") {
     if (jsx.$$typeof === Symbol.for("react.transitional.element")) {
-      if (
+      if (jsx.type === Symbol.for("react.suspense")) {
+        if (isPprBuildActive()) {
+          const holeId = enterSuspense();
+          try {
+            const renderedChildren = await asyncRenderJSXToClientJSX(jsx.props?.children);
+            exitSuspense();
+            return {
+              ...jsx,
+              props: {
+                ...jsx.props,
+                children: renderedChildren,
+                fallback: await asyncRenderJSXToClientJSX(jsx.props?.fallback),
+              },
+              key: key ?? jsx.key,
+            };
+          } catch (err) {
+            exitSuspense();
+            if (
+              (err && err.$$typeof === Symbol.for("dinou.ppr.postpone")) ||
+              (err && typeof err?.then === "function") ||
+              (err && err?.$$typeof === Symbol.for("react.postpone"))
+            ) {
+              registerHole(holeId, { type: err.pprType || "suspense" });
+              const renderedFallback = await asyncRenderJSXToClientJSX(jsx.props?.fallback);
+              return {
+                $$typeof: Symbol.for("react.transitional.element"),
+                type: "div",
+                props: {
+                  "data-ppr-hole": holeId,
+                  style: { display: "contents" },
+                  children: renderedFallback,
+                },
+                key: key ?? jsx.key,
+              };
+            }
+            throw err;
+          }
+        }
+        return {
+          ...jsx,
+          props: await asyncRenderJSXToClientJSX(jsx.props),
+          key: key ?? jsx.key,
+        };
+      } else if (
         jsx.type === Symbol.for("react.fragment") ||
-        jsx.type === Symbol.for("react.suspense") ||
+        jsx.type === Symbol.for("react.view_transition") ||
         typeof jsx.type === "string"
       ) {
         return {
           ...jsx,
-          props: renderJSXToClientJSX(jsx.props),
+          props: await asyncRenderJSXToClientJSX(jsx.props),
           key: key ?? jsx.key,
         };
       } else if (typeof jsx.type === "function") {
@@ -59,94 +111,47 @@ function renderJSXToClientJSX(jsx, key = null) {
             ...jsx,
             $$typeof: Symbol.for("react.transitional.element"),
             type: Component,
-            props: renderJSXToClientJSX(props),
+            props: await asyncRenderJSXToClientJSX(props),
             key: key ?? jsx.key,
           };
         } else {
           // Server component: execute and process
-          const returnedJsx = Component(props);
-          return renderJSXToClientJSX(returnedJsx, key ?? jsx.key);
+          const returnedJsx = await Component(props);
+          return await asyncRenderJSXToClientJSX(returnedJsx, key ?? jsx.key);
         }
-      } else {
-        console.error("Unsupported JSX type:", jsx.type);
-        throw new Error("Unsupported JSX type");
-      }
-    } else if (jsx instanceof Promise) {
-      return jsx;
-    } else {
-      // Process object props (e.g., { className: "foo" })
-      return Object.fromEntries(
-        Object.entries(jsx).map(([propName, value]) => [
-          propName,
-          renderJSXToClientJSX(value),
-        ])
-      );
-    }
-  } else {
-    throw new Error("Not implemented");
-  }
-}
-
-async function asyncRenderJSXToClientJSX(jsx, key = null) {
-  if (
-    typeof jsx === "string" ||
-    typeof jsx === "number" ||
-    typeof jsx === "boolean" ||
-    typeof jsx === "function" ||
-    typeof jsx === "undefined" ||
-    jsx === null
-  ) {
-    return jsx;
-  } else if (Array.isArray(jsx)) {
-    return await Promise.all(
-      jsx.map((child, i) =>
-        asyncRenderJSXToClientJSX(
-          child,
-          i + (typeof child?.type === "string" ? "_" + child?.type : "")
-        )
-      )
-    );
-  } else if (typeof jsx === "symbol") {
-    if (jsx === Symbol.for("react.fragment")) {
-      // Handle Fragment as an empty props object
-      return {
-        $$typeof: Symbol.for("react.transitional.element"),
-        type: Symbol.for("react.fragment"),
-        props: { key },
-      };
-    }
-    console.error("Unsupported symbol:", String(jsx));
-    throw new Error(`Unsupported symbol: ${String(jsx)}`);
-  } else if (typeof jsx === "object") {
-    if (jsx.$$typeof === Symbol.for("react.transitional.element")) {
-      if (
-        jsx.type === Symbol.for("react.fragment") ||
-        jsx.type === Symbol.for("react.suspense") ||
-        typeof jsx.type === "string"
+      } else if (
+        typeof jsx.type === "object" &&
+        jsx.type !== null &&
+        jsx.type.$$typeof === Symbol.for("react.forward_ref")
       ) {
-        return {
-          ...jsx,
-          props: {
-            ...(await asyncRenderJSXToClientJSX(jsx.props, key ?? jsx.key)),
+        if (isClientComponent(jsx.type)) {
+          return {
+            ...jsx,
+            $$typeof: Symbol.for("react.transitional.element"),
+            type: jsx.type,
+            props: await asyncRenderJSXToClientJSX(jsx.props),
             key: key ?? jsx.key,
-          },
-        };
-      } else if (typeof jsx.type === "function") {
-        const Component = jsx.type;
-        const props = jsx.props;
-        if (isClientComponent(Component)) {
+          };
+        } else {
+          const returnedJsx = await jsx.type.render(jsx.props, jsx.ref);
+          return await asyncRenderJSXToClientJSX(returnedJsx, key ?? jsx.key);
+        }
+      } else if (
+        typeof jsx.type === "object" &&
+        jsx.type !== null &&
+        jsx.type.$$typeof === Symbol.for("react.memo")
+      ) {
+        if (isClientComponent(jsx.type)) {
           return {
             ...jsx,
             $$typeof: Symbol.for("react.transitional.element"),
-            type: Component,
-            props: {
-              ...(await asyncRenderJSXToClientJSX(props, key ?? jsx.key)),
-              key: key ?? jsx.key,
-            },
+            type: jsx.type,
+            props: await asyncRenderJSXToClientJSX(jsx.props),
+            key: key ?? jsx.key,
           };
         } else {
-          // Server component: execute and process
-          const returnedJsx = await Component(props);
+          const innerComp = jsx.type.type;
+          const returnedJsx = typeof innerComp === "function" ? await innerComp(jsx.props) : null;
           return await asyncRenderJSXToClientJSX(returnedJsx, key ?? jsx.key);
         }
       } else {
@@ -172,6 +177,5 @@ async function asyncRenderJSXToClientJSX(jsx, key = null) {
 }
 
 module.exports = {
-  renderJSXToClientJSX,
   asyncRenderJSXToClientJSX,
 };