dinou 6.1.1 → 7.0.0

package/dinou/core/get-error-jsx.js

@@ -6,16 +6,67 @@ const {
 } = require("./get-file-path-and-dynamic-params");
 const importModule = require("./import-module");
 const { asyncRenderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
+const { getLayoutProps } = require("./layout-functions");
 
-async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
+function cleanErrorStack(stack) {
+  if (!stack || typeof stack !== "string") return "";
+  const lines = stack.split("\n");
+  const filtered = [];
+
+  for (const line of lines) {
+    if (!line.trim().startsWith("at ")) {
+      filtered.push(line);
+      continue;
+    }
+
+    // Filter out client Flight / bundler runtime internals
+    if (
+      line.includes("resolveErrorDev") ||
+      line.includes("resolveErrorModel") ||
+      line.includes("processFullStringRow") ||
+      line.includes("processFullBinaryRow") ||
+      line.includes("processBinaryChunk") ||
+      line.includes("buildFakeCallStack") ||
+      line.includes("createFakeFunction") ||
+      line.includes("initializeFakeTask") ||
+      line.includes("getRootTask") ||
+      line.includes("progress (http") ||
+      line.includes("__hmr_client__") ||
+      (line.includes("http://") && line.includes("/chunk-"))
+    ) {
+      continue;
+    }
+
+    // Filter out server engine / Node internals
+    if (
+      line.includes("node_modules/@roggc/react-server-dom-esm") ||
+      line.includes("node_modules/react-dom") ||
+      line.includes("node_modules/react/") ||
+      line.includes("node:internal") ||
+      line.includes("asyncRenderJSXToClientJSX") ||
+      line.includes("renderModelDestructive") ||
+      line.includes("renderHtmlStream") ||
+      line.includes("pipeRSC")
+    ) {
+      continue;
+    }
+
+    filtered.push(line);
+  }
+
+  return (filtered.length > 0 ? filtered : lines).join("\n").trim();
+}
+
+async function getErrorJSX(reqPath, query, error, isDevelopment = false, options = {}) {
   const srcFolder = path.resolve(process.cwd(), "src");
   const reqSegments = reqPath.split("/").filter(Boolean);
   const hasRouterSyntax = reqSegments.some((seg) => {
     const isGroup = seg.startsWith("(") && seg.endsWith(")");
     const isDynamic = seg.startsWith("[") && seg.endsWith("]");
     const isSlot = seg.startsWith("@");
+    const isPrivate = seg.startsWith("_");
 
-    return isGroup || isDynamic || isSlot;
+    return isGroup || isDynamic || isSlot || isPrivate;
   });
 
   let pagePath;
@@ -61,64 +112,140 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
     }
   }
 
-  if (pagePath) {
+  if (!pagePath) {
+    const isDev = isDevelopment;
+    jsx = React.createElement(
+      "div",
+      {
+        style: {
+          fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          padding: "32px",
+          maxWidth: "960px",
+          margin: "40px auto",
+          backgroundColor: "#fff1f2",
+          border: "1px solid #fecdd3",
+          borderRadius: "12px",
+          color: "#9f1239",
+          boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1)",
+        },
+      },
+      React.createElement(
+        "div",
+        { style: { display: "flex", alignItems: "center", gap: "10px", marginBottom: "12px" } },
+        React.createElement("span", { style: { background: "#e11d48", color: "white", padding: "2px 8px", borderRadius: "9999px", fontSize: "12px", fontWeight: "bold" } }, isDev ? "Dinou Dev Error" : "Application Error"),
+        React.createElement("h2", { style: { margin: 0, fontSize: "1.25rem", fontWeight: 700, color: "#881337" } }, error?.message || "Unhandled Application Error")
+      ),
+      isDev && React.createElement(
+        "p",
+        { style: { margin: "0 0 16px 0", fontSize: "0.875rem", color: "#9f1239", lineHeight: 1.5 } },
+        "An unhandled error occurred during rendering. You can provide a custom error UI by creating an ",
+        React.createElement("code", { style: { background: "#ffe4e6", padding: "2px 6px", borderRadius: "4px", fontWeight: 600 } }, "error.tsx"),
+        " file in your route folder."
+      ),
+      isDev && error?.stack && React.createElement(
+        "pre",
+        {
+          style: {
+            background: "#0f172a",
+            color: "#f8fafc",
+            padding: "16px",
+            borderRadius: "8px",
+            overflowX: "auto",
+            fontSize: "0.8125rem",
+            lineHeight: 1.6,
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          },
+        },
+        error.stack
+      )
+    );
+  } else {
     const pageModule = await importModule(pagePath);
     const Page = pageModule.default ?? pageModule;
+    const sanitizedError = {
+      ...(typeof error === "object" && error !== null ? error : {}),
+      message: isDevelopment
+        ? (error?.message || "Unknown Error")
+        : (error?.message && !error.stack ? error.message : "An error occurred in the Server Components render"),
+      name: error?.name || "Error",
+      stack: isDevelopment ? error?.stack : undefined,
+    };
     jsx = React.createElement(Page, {
       params: dynamicParams ?? {},
-      error,
+      error: sanitizedError,
     });
+  }
 
-    const noLayoutErrorPath = path.join(
-      path.dirname(pagePath),
-      `no_layout_error`
-    );
-    if (existsSync(noLayoutErrorPath)) {
-      return jsx;
-    }
+  // Segmented handling for Page: If only the error for the page slot is requested
+  if (options && options.segment === "page") {
+    return jsx;
+  }
 
-    if (
-      getFilePathAndDynamicParams(
-        reqSegments,
-        query,
-        srcFolder,
-        "no_layout",
-        false
-      )[0]
-    ) {
-      return jsx;
-    }
+  const noLayoutErrorPath = pagePath
+    ? path.join(path.dirname(pagePath), "no_layout_error")
+    : null;
+  if (noLayoutErrorPath && existsSync(noLayoutErrorPath)) {
+    return jsx;
+  }
 
-    const layouts = getFilePathAndDynamicParams(
+  if (
+    getFilePathAndDynamicParams(
       reqSegments,
       query,
       srcFolder,
-      "layout",
-      true,
-      false,
-      undefined,
-      0,
-      {},
-      true
-    );
+      "no_layout",
+      false
+    )[0]
+  ) {
+    return jsx;
+  }
 
+  const layouts = getFilePathAndDynamicParams(
+    reqSegments,
+    query,
+    srcFolder,
+    "layout",
+    true,
+    false,
+    undefined,
+    0,
+    {},
+    true
+  );
+
+    const baseErrorJsx = jsx;
+    let layoutApplied = false;
+    let appliedLayoutKey = null;
     if (layouts && Array.isArray(layouts)) {
+      const reversedLayouts = [...layouts].reverse();
+      let outermostLayoutApplied = false;
       let index = 0;
-      for (const [layoutPath, dParams, slots] of layouts.reverse()) {
+      for (const [layoutPath, dParams, slots] of reversedLayouts) {
         const layoutModule = await importModule(layoutPath);
         const Layout = layoutModule.default ?? layoutModule;
         const updatedSlots = {};
-        for (const [slotName, slotElement] of Object.entries(slots)) {
+        for (const [slotName, slotValue] of Object.entries(slots)) {
           let updatedSlotElement;
+          const slotFilePath = slotValue?.slotPath || slotValue?.props?.__modulePath;
+          const slotParams = slotValue?.slotParams || slotValue?.props?.params || {};
           try {
-            await asyncRenderJSXToClientJSX(slotElement);
-            updatedSlotElement = slotElement;
+            let elementToRender;
+            if (slotValue && slotValue.slotPath) {
+              const slotModule = await importModule(slotValue.slotPath);
+              const Slot = slotModule.default ?? slotModule;
+              elementToRender = React.createElement(Slot, {
+                params: slotParams,
+                key: slotName,
+                __modulePath: slotValue.slotPath,
+              });
+            } else {
+              elementToRender = slotValue;
+            }
+            await asyncRenderJSXToClientJSX(elementToRender);
+            updatedSlotElement = elementToRender;
           } catch (e) {
             // 1. RECOVER THE REAL PATH
-            // We use the "hack" (metadata) that we inject in getSlots.
-            // This gives us the path to the file: .../src/(group)/@sidebar/page.tsx
-            const slotFilePath = slotElement.props?.__modulePath;
-
+            // Gives us the path to the file: .../src/(group)/@sidebar/page.tsx
             if (slotFilePath) {
               // 2. GET THE SLOT FOLDER
               // Remove the file name to stay with the directory:
@@ -144,7 +271,9 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
                 const SlotError = slotErrorModule.default ?? slotErrorModule;
 
                 const serializedError = {
-                  message: e.message || "Unknown Error",
+                  message: isDevelopment
+                    ? (e.message || "Unknown Error")
+                    : "An error occurred in the Server Components render",
                   name: e.name,
                   stack: isDevelopment ? e.stack : undefined,
                 };
@@ -172,11 +301,29 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
             updatedSlots[slotName] = updatedSlotElement;
           }
         }
+        const layoutProps = await getLayoutProps(layoutPath, dParams);
         let props = {
           params: dParams,
           ...updatedSlots,
+          ...(layoutProps ?? {}),
         };
-        jsx = React.createElement(Layout, props, jsx);
+        try {
+          const testElement = React.createElement(Layout, props, jsx);
+          await asyncRenderJSXToClientJSX(testElement);
+          jsx = testElement;
+          layoutApplied = true;
+          outermostLayoutApplied = true;
+          if (!appliedLayoutKey) {
+            const relDir = path.relative(srcFolder, path.dirname(layoutPath)).replace(/\\/g, "/");
+            appliedLayoutKey = relDir === "" ? "/" : "/" + relDir;
+          }
+        } catch (layoutErr) {
+          console.warn(
+            `[Dinou] Layout ${layoutPath} failed during error recovery, skipping this layout:`,
+            layoutErr?.message || layoutErr
+          );
+          outermostLayoutApplied = false;
+        }
         const layoutFolderPath = path.dirname(layoutPath);
         if (
           getFilePathAndDynamicParams(
@@ -191,7 +338,40 @@ async function getErrorJSX(reqPath, query, error, isDevelopment = false) {
         }
         index++;
       }
+
+      // If the outermost (root) layout in this branch failed to apply, the layout chain cannot
+      // provide a root document shell (<html>/<body>) and client hydration cannot succeed.
+      // Revert to the standalone error JSX and mark hasLayout as false.
+      if (!outermostLayoutApplied) {
+        jsx = baseErrorJsx;
+        layoutApplied = false;
+        appliedLayoutKey = null;
+      }
     }
+
+  if (options) {
+    options.hasLayout = layoutApplied;
+    options.appliedLayoutKey = appliedLayoutKey;
+  }
+
+  const hasHtml = jsx?.type === "html" || (Array.isArray(jsx) && jsx.some((c) => c?.type === "html"));
+  if (!layoutApplied && !hasHtml) {
+    jsx = React.createElement(
+      "html",
+      { lang: "en" },
+      React.createElement(
+        "head",
+        null,
+        React.createElement("meta", { charSet: "UTF-8" }),
+        React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1" }),
+        React.createElement("title", null, isDevelopment ? "Dinou Dev Error" : "Application Error")
+      ),
+      React.createElement(
+        "body",
+        { style: { margin: 0, background: "#fff1f2", padding: "20px" } },
+        jsx
+      )
+    );
   }
 
   return jsx;

package/dinou/core/get-file-path-and-dynamic-params.js

@@ -1,6 +1,5 @@
 const path = require("path");
 const { existsSync, readdirSync } = require("./vfs");
-const React = require("react");
 
 function safeDecode(val) {
   try {
@@ -16,7 +15,7 @@ function getSlots(currentPath, reqSegments, query) {
   const entries = readdirSync(currentPath, { withFileTypes: true });
 
   for (const entry of entries) {
-    if (!entry.isDirectory()) continue;
+    if (!entry.isDirectory() || entry.name.startsWith("_")) continue;
 
     if (entry.name.startsWith("@")) {
       const [slotPath, slotParams] = getFilePathAndDynamicParams(
@@ -31,15 +30,11 @@ function getSlots(currentPath, reqSegments, query) {
       );
 
       if (slotPath) {
-        const slotModule = require(slotPath);
-        const Slot = slotModule.default ?? slotModule;
         const slotName = entry.name.slice(1);
-
-        slots[slotName] = React.createElement(Slot, {
-          params: slotParams,
-          key: slotName,
-          __modulePath: slotPath ?? null,
-        });
+        slots[slotName] = {
+          slotPath,
+          slotParams,
+        };
       }
     } else if (entry.name.startsWith("(") && entry.name.endsWith(")")) {
       const groupPath = path.join(currentPath, entry.name);
@@ -112,7 +107,7 @@ function getFilePathAndDynamicParams(
     if (index > reqSegments.length - 1) {
       const entries = readdirSync(currentPath, { withFileTypes: true });
       for (const entry of entries) {
-        if (entry.isDirectory()) {
+        if (entry.isDirectory() && !entry.name.startsWith("_")) {
           if (entry.name.startsWith("[[...") && entry.name.endsWith("]]")) {
             const paramName = entry.name.slice(5, -2);
             const paramValue =
@@ -252,7 +247,8 @@ function getFilePathAndDynamicParams(
     ((reqSegments[index].startsWith("(") && reqSegments[index].endsWith(")")) ||
       (reqSegments[index].startsWith("[") &&
         reqSegments[index].endsWith("]")) ||
-      reqSegments[index].startsWith("@"));
+      reqSegments[index].startsWith("@") ||
+      reqSegments[index].startsWith("_"));
   if (existsSync(staticPath) && !isRouterSyntaxInSegment) {
     return getFilePathAndDynamicParams(
       reqSegments,
@@ -271,7 +267,7 @@ function getFilePathAndDynamicParams(
   } else {
     const entries = readdirSync(currentPath, { withFileTypes: true });
     for (const entry of entries) {
-      if (entry.isDirectory()) {
+      if (entry.isDirectory() && !entry.name.startsWith("_")) {
         if (entry.name.startsWith("[[...") && entry.name.endsWith("]]")) {
           const paramName = entry.name.slice(5, -2);
           const paramValue =