dinou 5.0.1 → 5.0.3

package/CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [5.0.3] - 2026-07-09
+
+### Added
+- **Native React 19 Server Actions & `callServer` Support**: Enabled full integration for submitting forms directly from Server Components using the native `<form action={ServerAction}>` pattern.
+  - **Client-side Integration**: Implemented the global `callServer` option hook within `createFromFetch` in both the ESM client (`client.jsx`) and Webpack client (`client-webpack.jsx`). React now intercepts form submits and marshals arguments through Dinou's `createServerFunctionProxy` seamlessly.
+  - **Server-side Module Loader Integration**: Updated `babel-esm-loader.js` to automatically scan `"use server"` files and register exported functions using React's `registerServerReference` runtime call.
+- **Route-Level Soft Navigation Error Recovery**: Integrated client-side React `ErrorBoundary` support wrapping the router context. If rendering crashes during a soft navigation or initial mount (on either Server or Client components), the router captures the failure and dynamically fetches `/____rsc_payload_error____` to render the custom slot-based error page fallback, avoiding white screens and React root unmounts.
+
+
+## [5.0.2] - 2026-07-08
+
+### 🛡️ Security & Route Control
+* **Route Validation in RSC Payload Endpoints**: Unified security checks across endpoints. Direct requests to fetch RSC payloads (`/____rsc_payload____/*`) now enforce `validateParams()` and `allowISG()` checks matching the main HTML document loader behavior. This prevents direct payload scraping or scanning of blocked/invalid dynamic route parameters.
+
+### 🐛 Bug Fixes
+* **Sequential Compilation in ISR & ISG**: Resolved a critical race condition that caused disk cache desynchronization and persistent hydration mismatch errors.
+  * **Issue**: `Promise.all` compiled the RSC payload and HTML page in parallel. The HTML generator read the `rsc.rsc` file from disk before the new payload finished writing, saving a stale timestamp/state in the static HTML file.
+  * **Solution**: Refactored `revalidating.js` and `generating-isg.js` to execute sequentially. The RSC payload is compiled and committed first, ensuring the HTML compiler reads the freshly generated RSC file.
+* **ESM Loader Compatibility for Slot Error Boundaries (`importModule` vs `require`)**: Fixed a server-side crash when using React client hooks inside slot error components (`error.tsx`).
+  * **Issue**: The framework used CommonJS `require()` to import the slot error components, bypassing the registered ESM custom loader (`register-loader.mjs`). This caused `"use client"` components to be evaluated as Server Components, failing with `useState is not a function`.
+  * **Solution**: Updated `get-jsx.js` and `get-error-jsx.js` to load slot error modules using `await importModule()`, ensuring they are correctly resolved as Client Component References.
+
 ## [5.0.1] - 2026-07-07
 
 ### Fixed

package/dinou/core/babel-esm-loader.js

@@ -6,6 +6,8 @@ const createScopedName = require("./createScopedName");
 const { extensionsWithDot } = require("./asset-extensions.js");
 const { getAbsPathWithExt } = require("./get-abs-path-with-ext.js");
 
+const { normalizePathCase } = require("./path-utils.js");
+
 const Module = require("module");
 const originalResolveFilename = Module._resolveFilename;
 const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
@@ -90,7 +92,10 @@ exports.load = async function load(url, context, defaultLoad) {
     } catch (e) {
       throw e;
     }
-    const rel = path.relative(process.cwd(), filename);
+    const rel = path.relative(
+      normalizePathCase(process.cwd()),
+      normalizePathCase(filename)
+    );
     const source = fs.readFileSync(filename, "utf-8");
     const urlToReturn = pathToFileURL(filename).href;
 
@@ -144,6 +149,48 @@ exports.load = async function load(url, context, defaultLoad) {
       };
     }
 
+    const { useServerRegex } = require("../constants.js");
+    const hasUseServer = useServerRegex.test(source);
+
+    if (isReactServer && hasUseServer) {
+      const parseExports = require("./parse-exports.js");
+      const exports = parseExports(source);
+
+      const { code } = await transformAsync(source, {
+        filename,
+        presets: [
+          ["@babel/preset-react", { runtime: "automatic" }],
+          "@babel/preset-typescript",
+        ],
+        sourceMaps: "inline",
+        ast: false,
+      });
+
+      let newSrc = code + "\n\n";
+
+      if (!isWebpack) {
+        const packageJsonPath = require.resolve("@roggc/react-server-dom-esm/package.json");
+        const serverNodePath = path.join(path.dirname(packageJsonPath), "server.node.js");
+        const serverNodeUrl = pathToFileURL(serverNodePath).href;
+        newSrc += `import pkgServer from ${JSON.stringify(serverNodeUrl)};\n`;
+        newSrc += 'const {registerServerReference} = pkgServer;\n';
+      }
+
+      const relativeFileUrl = "file:///" + rel.replace(/\\/g, "/");
+      for (const name of exports) {
+        if (name !== 'default') {
+          newSrc += `registerServerReference(${name}, ${JSON.stringify(relativeFileUrl)}, ${JSON.stringify(name)});\n`;
+        }
+      }
+
+      return {
+        format: "module",
+        source: newSrc,
+        shortCircuit: true,
+        url: urlToReturn,
+      };
+    }
+
     if (ext === ".js") {
       return {
         format: "module",

package/dinou/core/client-error-webpack.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "react-server-dom-webpack/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy-webpack.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/client-error.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "@roggc/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }