dinou 4.0.2 → 4.0.4

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

@@ -38,7 +38,8 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (url) => {
+const getRSCPayload = (rscKey) => {
+  const url = rscKey.split("::")[0];
   // Important: url must already be normalized here
   if (cache.has(url)) return cache.get(url);
 
@@ -55,7 +56,7 @@ const getRSCPayload = (url) => {
           name: window.__DINOU_ERROR_NAME__,
         },
       }),
-    })
+    }),
   );
   cache.set(url, content);
   return content;
@@ -113,7 +114,7 @@ function Router() {
     // Normal RSC Navigation
     scrollCache.set(
       window.location.pathname + window.location.search,
-      window.scrollY
+      window.scrollY,
     );
     // cache.delete(finalPath);
     if (options.replace) {
@@ -231,7 +232,8 @@ function Router() {
   }, [route]);
 
   // RSC Logic
-  const content = getRSCPayload(route);
+  const rscKey = route + "::" + version;
+  const content = getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -242,7 +244,7 @@ function Router() {
       refresh,
       isPending,
     }),
-    [route, isPending]
+    [route, isPending],
   );
 
   return (

package/dinou/core/client-error.jsx

@@ -38,7 +38,8 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (url) => {
+const getRSCPayload = (rscKey) => {
+  const url = rscKey.split("::")[0];
   // Important: url must already be normalized here
   if (cache.has(url)) return cache.get(url);
 
@@ -55,7 +56,7 @@ const getRSCPayload = (url) => {
           name: window.__DINOU_ERROR_NAME__,
         },
       }),
-    })
+    }),
   );
   cache.set(url, content);
   return content;
@@ -113,7 +114,7 @@ function Router() {
     // Normal RSC Navigation
     scrollCache.set(
       window.location.pathname + window.location.search,
-      window.scrollY
+      window.scrollY,
     );
     // cache.delete(finalPath);
     if (options.replace) {
@@ -231,7 +232,8 @@ function Router() {
   }, [route]);
 
   // RSC Logic
-  const content = getRSCPayload(route);
+  const rscKey = route + "::" + version;
+  const content = getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -242,7 +244,7 @@ function Router() {
       refresh,
       isPending,
     }),
-    [route, isPending]
+    [route, isPending],
   );
 
   return (

package/dinou/core/client-webpack.jsx

@@ -38,7 +38,8 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (url) => {
+const getRSCPayload = (rscKey) => {
+  const url = rscKey.split("::")[0];
   // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) {
     return cache.get(url);
@@ -52,8 +53,8 @@ const getRSCPayload = (url) => {
         ? "/____rsc_payload_old_static____" + url
         : "/____rsc_payload_old____" + url
       : window.__DINOU_USE_STATIC__
-      ? "/____rsc_payload_static____" + url
-      : "/____rsc_payload____" + url;
+        ? "/____rsc_payload_static____" + url
+        : "/____rsc_payload____" + url;
 
     // Clean flags immediately
     window.__DINOU_USE_OLD_RSC__ = false;
@@ -120,7 +121,7 @@ function Router() {
     // Normal RSC Navigation
     scrollCache.set(
       window.location.pathname + window.location.search,
-      window.scrollY
+      window.scrollY,
     );
     // cache.delete(finalPath);
     if (options.replace) {
@@ -238,7 +239,8 @@ function Router() {
   }, [route]);
 
   // RSC Logic
-  const content = getRSCPayload(route);
+  const rscKey = route + "::" + version;
+  const content = getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +251,7 @@ function Router() {
       refresh,
       isPending,
     }),
-    [route, isPending]
+    [route, isPending],
   );
 
   return (

package/dinou/core/client.jsx

@@ -39,7 +39,8 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (url) => {
+const getRSCPayload = (rscKey) => {
+  const url = rscKey.split("::")[0];
   // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) {
     return cache.get(url);
@@ -53,8 +54,8 @@ const getRSCPayload = (url) => {
         ? "/____rsc_payload_old_static____" + url
         : "/____rsc_payload_old____" + url
       : window.__DINOU_USE_STATIC__
-      ? "/____rsc_payload_static____" + url
-      : "/____rsc_payload____" + url;
+        ? "/____rsc_payload_static____" + url
+        : "/____rsc_payload____" + url;
 
     // Clean flags immediately
     window.__DINOU_USE_OLD_RSC__ = false;
@@ -121,7 +122,7 @@ function Router() {
     // Normal RSC Navigation
     scrollCache.set(
       window.location.pathname + window.location.search,
-      window.scrollY
+      window.scrollY,
     );
     // cache.delete(finalPath);
     if (options.replace) {
@@ -239,7 +240,8 @@ function Router() {
   }, [route]);
 
   // RSC Logic
-  const content = getRSCPayload(route);
+  const rscKey = route + "::" + version;
+  const content = getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -250,7 +252,7 @@ function Router() {
       refresh,
       isPending,
     }),
-    [route, isPending]
+    [route, isPending],
   );
 
   return (

package/dinou/core/server-function-proxy-webpack.js

@@ -4,13 +4,29 @@ import { createFromFetch } from "react-server-dom-webpack/client";
 function createServerFunctionProxy(id) {
   return new Proxy(() => {}, {
     apply: async (_target, _thisArg, args) => {
+      let body;
+      const headers = {
+        "x-server-function-call": "1",
+      };
+
+      if (args[0] instanceof FormData) {
+        const formData = args[0];
+
+        formData.append("__dinou_func_id", id);
+
+        if (args.length > 1) {
+          formData.append("__dinou_args", JSON.stringify(args.slice(1)));
+        }
+
+        body = formData;
+      } else {
+        headers["Content-Type"] = "application/json";
+        body = JSON.stringify({ id, args });
+      }
       const res = await fetch("/____server_function____", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "x-server-function-call": "1",
-        },
-        body: JSON.stringify({ id, args }),
+        headers,
+        body,
       });
 
       if (!res.ok) throw new Error("Server function failed");
@@ -48,7 +64,7 @@ function createServerFunctionProxy(id) {
                     // CHECK: We search for the tag start, whether it has the closing > or not
                     if (buffer.includes("<script")) {
                       console.warn(
-                        "[Dinou] Stream ended with incomplete script. Discarding tail."
+                        "[Dinou] Stream ended with incomplete script. Discarding tail.",
                       );
                       // We do not enqueue.
                     } else {
@@ -86,7 +102,7 @@ function createServerFunctionProxy(id) {
                 // Once executed, we remove them so they don't go to React
                 buffer = buffer.replace(scriptRegex, "");
 
-                // 4. CALCULATE WHAT IS SAFE TO SEND (Anti-cut logic)
+                // 4. CALCULATE WHAT IS SAFE TO SEND (The anti-cut logic)
                 // We need to know if the buffer ends with something that LOOKS like the start of a script
                 // Dangerous patterns at the end: <, <s, <sc, <scr, <scri, <scrip, <script
 

package/dinou/core/server-function-proxy.js

@@ -4,13 +4,29 @@ import { createFromFetch } from "@roggc/react-server-dom-esm/client";
 export function createServerFunctionProxy(id) {
   return new Proxy(() => {}, {
     apply: async (_target, _thisArg, args) => {
+      let body;
+      const headers = {
+        "x-server-function-call": "1",
+      };
+
+      if (args[0] instanceof FormData) {
+        const formData = args[0];
+
+        formData.append("__dinou_func_id", id);
+
+        if (args.length > 1) {
+          formData.append("__dinou_args", JSON.stringify(args.slice(1)));
+        }
+
+        body = formData;
+      } else {
+        headers["Content-Type"] = "application/json";
+        body = JSON.stringify({ id, args });
+      }
       const res = await fetch("/____server_function____", {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "x-server-function-call": "1",
-        },
-        body: JSON.stringify({ id, args }),
+        headers,
+        body,
       });
 
       if (!res.ok) throw new Error("Server function failed");
@@ -48,7 +64,7 @@ export function createServerFunctionProxy(id) {
                     // CHECK: We search for the tag start, whether it has the closing > or not
                     if (buffer.includes("<script")) {
                       console.warn(
-                        "[Dinou] Stream ended with incomplete script. Discarding tail."
+                        "[Dinou] Stream ended with incomplete script. Discarding tail.",
                       );
                       // We do not enqueue.
                     } else {

package/dinou/core/server.js

@@ -54,11 +54,11 @@ if (isDevelopment) {
     process.cwd(),
     isWebpack
       ? `${outputFolder}/react-client-manifest.json`
-      : `react_client_manifest/react-client-manifest.json`
+      : `react_client_manifest/react-client-manifest.json`,
   );
   const manifestFolderPath = path.resolve(
     process.cwd(),
-    isWebpack ? outputFolder : "react_client_manifest"
+    isWebpack ? outputFolder : "react_client_manifest",
   );
 
   let manifestWatcher = null;
@@ -139,7 +139,7 @@ if (isDevelopment) {
         }
       } catch (err) {
         console.warn(
-          `[Server HMR] Could not resolve or clear ${modulePath}: ${err.message}`
+          `[Server HMR] Could not resolve or clear ${modulePath}: ${err.message}`,
         );
       }
     }
@@ -234,7 +234,7 @@ if (!isDevelopment) {
     process.cwd(),
     isWebpack
       ? `${outputFolder}/server-functions-manifest.json`
-      : `server_functions_manifest/server-functions-manifest.json`
+      : `server_functions_manifest/server-functions-manifest.json`,
   ); // Adjust 'dist/' to your outdir
   if (existsSync(manifestPath)) {
     serverFunctionsManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
@@ -258,7 +258,7 @@ function getContext(req, res) {
   const safeResCall = (methodName, ...args) => {
     if (res.headersSent) {
       console.log(
-        `[Dinou] res.${methodName} called but headers already sent. Ignoring.`
+        `[Dinou] res.${methodName} called but headers already sent. Ignoring.`,
       );
       // console.warn(
       //   `[Dinou Warning] RSC Stream active. Ignoring res.${methodName}() to avoid crash.`
@@ -301,6 +301,12 @@ function getContext(req, res) {
         cookie: req.headers["cookie"],
         referer: req.headers["referer"],
         host: req.headers["host"],
+        authorization: req.headers["authorization"],
+        "accept-language": req.headers["accept-language"],
+        "x-forwarded-for": req.headers["x-forwarded-for"],
+        forwarded: req.headers["forwarded"],
+        "content-type": req.headers["content-type"],
+        origin: req.headers["origin"],
       },
       query: { ...req.query },
       path: req.path,
@@ -344,6 +350,12 @@ function getContextForServerFunctionEndpoint(req, res) {
         cookie: req.headers["cookie"],
         referer: req.headers["referer"],
         host: req.headers["host"],
+        authorization: req.headers["authorization"],
+        "accept-language": req.headers["accept-language"],
+        "x-forwarded-for": req.headers["x-forwarded-for"],
+        forwarded: req.headers["forwarded"],
+        "content-type": req.headers["content-type"],
+        origin: req.headers["origin"],
       },
       query: { ...req.query },
       path: req.path,
@@ -385,7 +397,7 @@ function getContextForServerFunctionEndpoint(req, res) {
         // 🛑 Security: JS cannot write HttpOnly cookies
         if (options && options.httpOnly) {
           console.error(
-            `[Dinou Error] Cannot set HttpOnly cookie '${name}' in Server Function endpoint because streaming has started.`
+            `[Dinou Error] Cannot set HttpOnly cookie '${name}' in Server Function endpoint because streaming has started.`,
           );
           return;
         }
@@ -426,7 +438,7 @@ function getContextForServerFunctionEndpoint(req, res) {
         const safePath = JSON.stringify(path);
 
         res.write(
-          `<script>document.cookie = ${safeName} + "=; Max-Age=0; path=" + ${safePath} + ";";</script>`
+          `<script>document.cookie = ${safeName} + "=; Max-Age=0; path=" + ${safePath} + ";";</script>`,
         );
       },
     },
@@ -465,10 +477,10 @@ if (!isDevelopment) {
         process.cwd(),
         isWebpack
           ? `${outputFolder}/react-client-manifest.json`
-          : `react_client_manifest/react-client-manifest.json`
+          : `react_client_manifest/react-client-manifest.json`,
       ),
-      "utf8"
-    )
+      "utf8",
+    ),
   );
 }
 
@@ -484,9 +496,9 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
           ? "/____rsc_payload_old_static____"
           : "/____rsc_payload_old____"
         : isStatic
-        ? "/____rsc_payload_static____"
-        : "/____rsc_payload____",
-      ""
+          ? "/____rsc_payload_static____"
+          : "/____rsc_payload____",
+      "",
     );
     // 1. Correct Map initialization
     if (!isDynamic.has(reqPath)) {
@@ -512,7 +524,7 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
       const payloadPath = path.resolve(
         "dist2",
         reqPath.replace(/^\//, ""),
-        isOld || regenerating.has(reqPath) ? "rsc._old.rsc" : "rsc.rsc"
+        isOld || regenerating.has(reqPath) ? "rsc._old.rsc" : "rsc.rsc",
       );
       const distDir = path.resolve("dist2");
 
@@ -546,7 +558,7 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
         reqPath,
         { ...req.query },
         isNotFound,
-        isDevelopment
+        isDevelopment,
       );
       const manifest = isDevelopment
         ? JSON.parse(
@@ -555,10 +567,10 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
                 process.cwd(),
                 isWebpack
                   ? `${outputFolder}/react-client-manifest.json`
-                  : `react_client_manifest/react-client-manifest.json`
+                  : `react_client_manifest/react-client-manifest.json`,
               ),
-              "utf8"
-            )
+              "utf8",
+            ),
           )
         : cachedClientManifest;
 
@@ -596,7 +608,7 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
       reqPath,
       { ...req.query },
       req.body.error,
-      isDevelopment
+      isDevelopment,
     );
     const manifest = isDevelopment
       ? JSON.parse(
@@ -605,10 +617,10 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
               process.cwd(),
               isWebpack
                 ? `${outputFolder}/react-client-manifest.json`
-                : `react_client_manifest/react-client-manifest.json`
+                : `react_client_manifest/react-client-manifest.json`,
             ),
-            "utf8"
-          )
+            "utf8",
+          ),
         )
       : cachedClientManifest;
     const { pipe } = renderToPipeableStream(jsx, manifest);
@@ -702,6 +714,12 @@ app.get(/^\/.*\/?$/, (req, res) => {
           cookie: req.headers["cookie"],
           referer: req.headers["referer"],
           host: req.headers["host"],
+          authorization: req.headers["authorization"],
+          "accept-language": req.headers["accept-language"],
+          "x-forwarded-for": req.headers["x-forwarded-for"],
+          forwarded: req.headers["forwarded"],
+          "content-type": req.headers["content-type"],
+          origin: req.headers["origin"],
         },
         path: req.path,
         method: req.method,
@@ -718,7 +736,7 @@ app.get(/^\/.*\/?$/, (req, res) => {
           contextForChild,
           res,
           capturedStatus,
-          isDynamic
+          isDynamic,
         );
 
         res.setHeader("Content-Type", "text/html");
@@ -785,8 +803,25 @@ function isOriginAllowed(req) {
   }
 }
 
+const multer = require("multer");
+
+const upload = multer().any();
+
+const runMiddleware = (req, res, fn) => {
+  return new Promise((resolve, reject) => {
+    fn(req, res, (result) => {
+      if (result instanceof Error) return reject(result);
+      return resolve(result);
+    });
+  });
+};
+
 app.post("/____server_function____", async (req, res) => {
   try {
+    if (req.headers["content-type"]?.includes("multipart/form-data")) {
+      await runMiddleware(req, res, upload);
+    }
+
     // 1. Check Origin (Prevent calls from other domains)
     const origin = req.headers.origin;
     const host = req.headers.host;
@@ -805,11 +840,44 @@ app.post("/____server_function____", async (req, res) => {
     // 2. Origin Check (NEW)
     if (!isDevelopment && !isOriginAllowed(req)) {
       console.error(
-        `[Security] Blocked request from origin: ${req.headers.origin}`
+        `[Security] Blocked request from origin: ${req.headers.origin}`,
       );
       return res.status(403).json({ error: "Origin not allowed" });
     }
-    const { id, args } = req.body;
+
+    let id, args;
+
+    if (req.headers["content-type"]?.includes("multipart/form-data")) {
+      id = req.body.__dinou_func_id;
+
+      const formData = new FormData();
+
+      for (const key in req.body) {
+        if (key === "__dinou_func_id" || key === "__dinou_args") continue;
+        formData.append(key, req.body[key]);
+      }
+
+      if (req.files && Array.isArray(req.files)) {
+        for (const file of req.files) {
+          const blob = new Blob([file.buffer], { type: file.mimetype });
+          formData.append(file.fieldname, blob, file.originalname);
+        }
+      }
+
+      args = [formData];
+
+      if (req.body.__dinou_args) {
+        try {
+          const extraArgs = JSON.parse(req.body.__dinou_args);
+          args.push(...extraArgs);
+        } catch (e) {
+          console.error("Error parsing extra args in multipart request");
+        }
+      }
+    } else {
+      id = req.body.id;
+      args = req.body.args;
+    }
 
     // Basic input validation: id must be string, args an array
     if (typeof id !== "string" || !Array.isArray(args)) {
@@ -932,7 +1000,7 @@ app.post("/____server_function____", async (req, res) => {
         process.cwd(),
         isWebpack
           ? `${outputFolder}/react-client-manifest.json`
-          : `react_client_manifest/react-client-manifest.json`
+          : `react_client_manifest/react-client-manifest.json`,
       );
       // Verify that the manifest exists to avoid errors
       if (!existsSync(manifestPath)) {
@@ -976,10 +1044,10 @@ const http = require("http");
     await new Promise((resolve) => {
       server.listen(port, () => {
         console.log(
-          `\n🚀 Dinou Server is ready and listening on http://localhost:${port}`
+          `\n🚀 Dinou Server is ready and listening on http://localhost:${port}`,
         );
         console.log(
-          `   Environment: ${isDevelopment ? "Development" : "Production"}`
+          `   Environment: ${isDevelopment ? "Development" : "Production"}`,
         );
         resolve();
       });
@@ -996,7 +1064,7 @@ const http = require("http");
         .catch((err) => {
           console.error(
             "❌ [Background] Static generation failed (App continues in Dynamic Mode):",
-            err
+            err,
           );
           isReady = true;
         });

package/dinou/esbuild/helpers-esbuild/get-config-esbuild-prod.mjs

@@ -6,6 +6,7 @@ import assetsPlugin from "../plugins-esbuild/assets-plugin.mjs";
 import copyStaticFiles from "esbuild-copy-static-files";
 import manifestGeneratorPlugin from "../plugins-esbuild/manifest-generator-plugin.mjs";
 import writePlugin from "../plugins-esbuild/write-plugin.mjs";
+import babelReactCompilerPlugin from "../plugins-esbuild/babel-react-compiler-plugin.mjs";
 import { existsSync } from "node:fs";
 
 const manifestData = {};
@@ -16,6 +17,7 @@ export default function getConfigEsbuildProd({
   manifest = {},
 }) {
   let plugins = [
+    babelReactCompilerPlugin(),
     TsconfigPathsPlugin({}),
     cssProcessorPlugin({ outdir }),
     reactClientManifestPlugin({

package/dinou/esbuild/plugins-esbuild/babel-react-compiler-plugin.mjs

@@ -0,0 +1,64 @@
+import babel from "@babel/core";
+import fs from "node:fs/promises";
+import path from "node:path";
+const norm = (p) => path.resolve(p).replace(/\\/g, "/");
+export default function babelReactCompilerPlugin() {
+  return {
+    name: "babel-react-compiler-bridge",
+    setup(build) {
+      const entryPoints = build.initialOptions.entryPoints;
+      // Interceptamos archivos JS/TS/JSX/TSX
+      // OJO: Filtramos node_modules para no ralentizar procesando librerías externas
+      build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
+        // Doble chequeo de seguridad para evitar node_modules
+        if (args.path.includes("node_modules")) return;
+        const abs = path.resolve(args.path);
+
+        const absNorm = norm(abs);
+        const isAnEntryPoint = Object.values(entryPoints).some(
+          (val) => norm(path.resolve(val)) === absNorm,
+        );
+        if (!isAnEntryPoint) {
+          return;
+        }
+        try {
+          const source = await fs.readFile(args.path, "utf8");
+          const filename = args.path;
+
+          // Transformamos el código con Babel + React Compiler
+          const result = await babel.transformAsync(source, {
+            filename,
+            presets: [
+              // Necesitamos decirle a Babel que entienda React y TS antes de compilar
+              ["@babel/preset-react", { runtime: "automatic" }],
+              "@babel/preset-typescript",
+            ],
+            plugins: [
+              "babel-plugin-react-compiler", // 👈 LA JOYA DE LA CORONA
+            ],
+            sourceMaps: true, // Vital para que los sourcemaps de esbuild funcionen
+            configFile: false, // Ignoramos babel.config.js globales para ir al grano
+          });
+
+          // Si por alguna razón Babel no devuelve código, dejamos a esbuild actuar
+          if (!result || !result.code) return;
+
+          return {
+            contents: result.code,
+            loader: "js", // Babel devuelve JS estándar
+          };
+        } catch (error) {
+          // Si falla Babel, mostramos error bonito para no romper el build silenciosamente
+          return {
+            errors: [
+              {
+                text: error.message,
+                detail: error,
+              },
+            ],
+          };
+        }
+      });
+    },
+  };
+}