dinou 4.0.3 → 4.0.5

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

@@ -803,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;
@@ -827,7 +844,40 @@ app.post("/____server_function____", async (req, res) => {
       );
       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)) {

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,
+              },
+            ],
+          };
+        }
+      });
+    },
+  };
+}

package/dinou/esbuild/react-refresh/esm-hmr-plugin.mjs

@@ -1,8 +1,9 @@
 // plugins-esbuild/esm-hmr-plugin.mjs
 import fs from "node:fs/promises";
 import path from "node:path";
-import * as babelCore from "@babel/core";
-import { babelConfig } from "./babel-config.js";
+// import * as babelCore from "@babel/core";
+// import { babelConfig } from "./babel-config.js";
+import { transformSync } from "@swc/core";
 import { createServer } from "node:http";
 import { EsmHmrEngine } from "./esm-hmr/server.js";
 import { fileURLToPath } from "node:url";
@@ -49,41 +50,6 @@ export default function esmHmrPlugin({
         }
       });
 
-      // build.onLoad({ filter: /.*/ }, async (args) => {
-      //   const abs = path.resolve(args.path);
-
-      //   const outfileName = Object.entries(entryPoints).find(
-      //     ([, value]) => norm(value) === norm(abs)
-      //   )?.[0];
-
-      //   if (!outfileName) {
-      //     return null;
-      //   }
-
-      //   for (let i = 0; i < entryAbsPaths.length; i++) {
-      //     if (abs === entryAbsPaths[i] && entrySources[i]) {
-      //       let injectCode = `import { createHotContext } from "/__hmr_client__.js";\n`;
-      //       injectCode += `window.__hotContext = createHotContext;\n`;
-
-      //       return {
-      //         contents: injectCode + entrySources[i],
-      //         loader: "jsx",
-      //       };
-      //     }
-      //   }
-
-      //   const source = await fs.readFile(args.path, "utf8");
-      //   const transformed = babelCore.transformSync(source, {
-      //     ...babelConfig,
-      //     filename: abs,
-      //   }).code;
-
-      //   return {
-      //     contents: transformed,
-      //     loader: args.path.endsWith(".tsx") ? "tsx" : "jsx",
-      //   };
-      // });
-
       build.onLoad({ filter: /.*/ }, async (args) => {
         const abs = path.resolve(args.path);
 
@@ -92,7 +58,7 @@ export default function esmHmrPlugin({
         // 1. Comprobamos si es un ROOT Entry (client.jsx o error.tsx)
         // Estos son los que tienes guardados en 'entryAbsPaths'
         const rootIndex = entryAbsPaths.findIndex(
-          (entryPath) => norm(entryPath) === absNorm
+          (entryPath) => norm(entryPath) === absNorm,
         );
 
         // CASO A: Es Main o Error (Roots)
@@ -115,7 +81,7 @@ export default function esmHmrPlugin({
         // 2. Comprobamos si es cualquier OTRO Entry Point de la configuración de esbuild
         // (Aquí están tus páginas, layouts, componentes...)
         const isAnEntryPoint = Object.values(entryPoints).some(
-          (val) => norm(path.resolve(val)) === absNorm
+          (val) => norm(path.resolve(val)) === absNorm,
         );
 
         // CASO B: Es una página o componente de usuario
@@ -123,18 +89,46 @@ export default function esmHmrPlugin({
           // AQUÍ SÍ aplicamos Babel para tener React Fast Refresh
           const source = await fs.readFile(args.path, "utf8");
 
+          // try {
+          //   const transformed = babelCore.transformSync(source, {
+          //     ...babelConfig,
+          //     filename: abs,
+          //   }).code;
+
+          //   return {
+          //     contents: transformed,
+          //     loader: args.path.endsWith(".tsx") ? "tsx" : "jsx",
+          //   };
+          // } catch (e) {
+          //   // Si babel falla, fallback al original
+          //   return null;
+          // }
           try {
-            const transformed = babelCore.transformSync(source, {
-              ...babelConfig,
+            const { code } = transformSync(source, {
               filename: abs,
-            }).code;
+              jsc: {
+                parser: {
+                  syntax: "typescript",
+                  tsx: true,
+                  dynamicImport: true,
+                },
+                target: "es2022",
+                transform: {
+                  react: {
+                    refresh: true,
+                    development: true,
+                    runtime: "automatic",
+                  },
+                },
+              },
+            });
 
             return {
-              contents: transformed,
-              loader: args.path.endsWith(".tsx") ? "tsx" : "jsx",
+              contents: code,
+              loader: "js",
             };
           } catch (e) {
-            // Si babel falla, fallback al original
+            console.error("SWC Error:", e);
             return null;
           }
         }
@@ -147,7 +141,7 @@ export default function esmHmrPlugin({
         if (!result || !result.outputFiles) return;
         const clientPath = path.resolve(
           path.dirname(fileURLToPath(import.meta.url)),
-          "./esm-hmr/client.mjs"
+          "./esm-hmr/client.mjs",
         );
         const clientCode = await fs.readFile(clientPath, "utf8");
         const assetPath = path.join(outdir, "__hmr_client__.js");
@@ -174,7 +168,7 @@ export default function esmHmrPlugin({
           const relPath = normalizeRel(bF);
           const outputFile = result.outputFiles.find(
             (f) =>
-              normalizeRel(path.relative(process.cwd(), f.path)) === relPath
+              normalizeRel(path.relative(process.cwd(), f.path)) === relPath,
           );
           if (!outputFile) continue;
           const baseName = path.basename(bF, ".js");
@@ -194,7 +188,7 @@ export default function esmHmrPlugin({
           const source = new TextDecoder().decode(outputFile.contents);
 
           const imports = Array.from(
-            source.matchAll(/import\s+["'](.+?)["']/g)
+            source.matchAll(/import\s+["'](.+?)["']/g),
           ).map((m) => m[1]);
 
           hmrEngine.value.setEntry(urlId, imports, true);

package/dinou/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "dinou",
-  "version": "4.0.3",
+  "name": "dinou-ejected",
+  "version": "4.0.5",
   "main": "index.js",
   "private": true,
   "exports": {
@@ -30,9 +30,11 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-replace": "^6.0.2",
+    "@swc/core": "^1.15.10",
     "@tailwindcss/postcss": "^4.1.10",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "chokidar": "^4.0.3",
     "commander": "^14.0.0",
     "concurrently": "^9.2.0",
@@ -48,6 +50,7 @@
     "generic-names": "^4.0.0",
     "loader-utils": "^3.3.1",
     "mini-css-extract-plugin": "^2.9.4",
+    "multer": "^2.0.2",
     "postcss": "^8.5.5",
     "postcss-import": "^16.1.1",
     "postcss-loader": "^8.2.0",

package/dinou/rollup/rollup.config.js

@@ -148,6 +148,7 @@ module.exports = async function () {
           "@babel/preset-typescript",
         ],
         plugins: [
+          "babel-plugin-react-compiler",
           isDevelopment && require.resolve("react-refresh/babel"),
           "@babel/plugin-syntax-import-meta",
         ].filter(Boolean),
@@ -185,7 +186,11 @@ module.exports = async function () {
       serverFunctionsPlugin(),
     ].filter(Boolean),
     watch: {
-      exclude: ["public/**", "react_client_manifest/**"],
+      exclude: [
+        "public/**",
+        "react_client_manifest/**",
+        "server_functions_manifest/**",
+      ],
     },
     onwarn(warning, warn) {
       // Ignore eval warning if it comes from our request-context file