dinou 3.0.5 → 3.0.6

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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/).
 
+## [3.0.6]
+
+## Security
+
+- Fix: Use fixes from React versions 19.2.3 and improve security of server function endpoint.
+
 ## [3.0.5]
 
 ## Security

package/dinou/core/parse-exports.js

@@ -0,0 +1,40 @@
+const parser = require("@babel/parser");
+const traverse = require("@babel/traverse");
+
+function parseExports(code) {
+  const ast = parser.parse(code, {
+    sourceType: "module",
+    plugins: ["jsx", "typescript"],
+  });
+
+  const exports = new Set();
+
+  traverse.default(ast, {
+    ExportDefaultDeclaration() {
+      exports.add("default");
+    },
+    ExportNamedDeclaration(p) {
+      if (p.node.declaration) {
+        if (p.node.declaration.type === "FunctionDeclaration") {
+          exports.add(p.node.declaration.id.name);
+        } else if (p.node.declaration.type === "VariableDeclaration") {
+          p.node.declaration.declarations.forEach((d) => {
+            if (d.id.type === "Identifier") {
+              exports.add(d.id.name);
+            }
+          });
+        }
+      } else if (p.node.specifiers) {
+        p.node.specifiers.forEach((s) => {
+          if (s.type === "ExportSpecifier") {
+            exports.add(s.exported.name);
+          }
+        });
+      }
+    },
+  });
+
+  return [...exports];
+}
+
+module.exports = parseExports;

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

@@ -1,12 +1,15 @@
 // public/server-function-proxy.js
 import { createFromFetch } from "react-server-dom-webpack/client";
 
-export function createServerFunctionProxy(id) {
+function createServerFunctionProxy(id) {
   return new Proxy(() => {}, {
     apply: async (_target, _thisArg, args) => {
       const res = await fetch("/____server_function____", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          "x-server-function-call": "1",
+        },
         body: JSON.stringify({ id, args }),
       });
       if (!res.ok) throw new Error("Server function failed");
@@ -21,3 +24,10 @@ export function createServerFunctionProxy(id) {
     },
   });
 }
+
+if (typeof window !== "undefined") {
+  window.__SERVER_FUNCTION_PROXY_LIB__ = { createServerFunctionProxy };
+}
+
+export { createServerFunctionProxy };
+export default { createServerFunctionProxy };

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

@@ -6,7 +6,10 @@ export function createServerFunctionProxy(id) {
     apply: async (_target, _thisArg, args) => {
       const res = await fetch("/____server_function____", {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          "x-server-function-call": "1",
+        },
         body: JSON.stringify({ id, args }),
       });
       if (!res.ok) throw new Error("Server function failed");

package/dinou/core/server.js

@@ -41,6 +41,7 @@ const outputFolder = isDevelopment ? "public" : "dist3";
 const chokidar = require("chokidar");
 const { fileURLToPath } = require("url");
 const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
+const parseExports = require("./parse-exports.js");
 if (isDevelopment) {
   const manifestPath = path.resolve(
     process.cwd(),
@@ -217,6 +218,28 @@ if (isDevelopment) {
   }
   startManifestWatcher();
 }
+let serverFunctionsManifest = null;
+// const devCache = new Map(); // Para dev: Map<absolutePath, Set<exports>>
+
+if (!isDevelopment) {
+  // En prod/build: cargar manifest generado
+  const manifestPath = path.resolve(
+    process.cwd(),
+    isWebpack
+      ? `${outputFolder}/server-functions-manifest.json`
+      : `server_functions_manifest/server-functions-manifest.json`
+  ); // Ajusta 'dist/' a tu outdir
+  if (existsSync(manifestPath)) {
+    serverFunctionsManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+    // Convertir arrays a Sets para lookups rápidos
+    for (const key in serverFunctionsManifest) {
+      serverFunctionsManifest[key] = new Set(serverFunctionsManifest[key]);
+    }
+    console.log("[server] Loaded server functions manifest");
+  } else {
+    console.error("[server] Manifest not found - falling back to file reads");
+  }
+}
 const cookieParser = require("cookie-parser");
 const appUseCookieParser = cookieParser();
 const app = express();
@@ -235,6 +258,22 @@ app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
   });
 });
 
+let cachedClientManifest = null;
+if (!isDevelopment) {
+  // Carga inicial
+  cachedClientManifest = JSON.parse(
+    readFileSync(
+      path.resolve(
+        process.cwd(),
+        isWebpack
+          ? `${outputFolder}/react-client-manifest.json`
+          : `react_client_manifest/react-client-manifest.json`
+      ),
+      "utf8"
+    )
+  );
+}
+
 app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
   try {
     const reqPath = (
@@ -242,7 +281,17 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
     ).replace("/____rsc_payload____", "");
 
     if (!isDevelopment && Object.keys({ ...req.query }).length === 0) {
-      const payloadPath = path.join("dist2", reqPath, "rsc.rsc");
+      // const payloadPath = path.join("dist2", reqPath, "rsc.rsc");
+      const payloadPath = path.resolve(
+        "dist2",
+        reqPath.replace(/^\//, ""),
+        "rsc.rsc"
+      );
+      const distDir = path.resolve("dist2");
+
+      if (!payloadPath.startsWith(distDir)) {
+        return res.status(403).end();
+      }
       if (existsSync(payloadPath)) {
         res.setHeader("Content-Type", "application/octet-stream");
         const readStream = createReadStream(payloadPath);
@@ -259,16 +308,19 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
       { ...req.cookies },
       isDevelopment
     );
-    const manifest = JSON.parse(
-      readFileSync(
-        path.resolve(
-          isWebpack
-            ? `${outputFolder}/react-client-manifest.json`
-            : `react_client_manifest/react-client-manifest.json`
-        ),
-        "utf8"
-      )
-    );
+    const manifest = isDevelopment
+      ? JSON.parse(
+          readFileSync(
+            path.resolve(
+              process.cwd(),
+              isWebpack
+                ? `${outputFolder}/react-client-manifest.json`
+                : `react_client_manifest/react-client-manifest.json`
+            ),
+            "utf8"
+          )
+        )
+      : cachedClientManifest;
 
     const { pipe } = renderToPipeableStream(jsx, manifest);
     pipe(res);
@@ -284,17 +336,20 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
       req.path.endsWith("/") ? req.path : req.path + "/"
     ).replace("/____rsc_payload_error____", "");
     const jsx = await getErrorJSX(reqPath, { ...req.query }, req.body.error);
-    const manifest = readFileSync(
-      path.resolve(
-        process.cwd(),
-        isWebpack
-          ? `${outputFolder}/react-client-manifest.json`
-          : `react_client_manifest/react-client-manifest.json`
-      ),
-      "utf8"
-    );
-    const moduleMap = JSON.parse(manifest);
-    const { pipe } = renderToPipeableStream(jsx, moduleMap);
+    const manifest = isDevelopment
+      ? JSON.parse(
+          readFileSync(
+            path.resolve(
+              process.cwd(),
+              isWebpack
+                ? `${outputFolder}/react-client-manifest.json`
+                : `react_client_manifest/react-client-manifest.json`
+            ),
+            "utf8"
+          )
+        )
+      : cachedClientManifest;
+    const { pipe } = renderToPipeableStream(jsx, manifest);
     pipe(res);
   } catch (error) {
     console.error("Error rendering RSC:", error);
@@ -337,47 +392,143 @@ app.get(/^\/.*\/?$/, (req, res) => {
 
 app.post("/____server_function____", async (req, res) => {
   try {
+    // 1. Verificar Origin (Prevenir llamadas desde otros dominios)
+    const origin = req.headers.origin;
+    const host = req.headers.host;
+
+    // Nota: En local a veces origin es undefined o null, permitirlo en dev si es necesario
+    if (!isDevelopment && origin && !origin.includes(host)) {
+      return res.status(403).json({ error: "Invalid Origin" });
+    }
+
+    // 2. Verificar Header Personalizado (Defensa CSRF robusta)
+    // Asegúrate de que tu cliente (server-function-proxy.js) envíe este header
+    if (!req.headers["x-server-function-call"]) {
+      return res.status(403).json({ error: "Missing security header" });
+    }
     const { id, args } = req.body;
+
+    // Validación básica de inputs: id debe ser string, args un array
+    if (typeof id !== "string" || !Array.isArray(args)) {
+      return res.status(400).json({ error: "Invalid request body" });
+    }
+
     const [fileUrl, exportName] = id.split("#");
 
-    let relativePath = fileUrl.replace(/^file:\/\/\/?/, "");
+    // Validar fileUrl: debe empezar con 'file://' y no contener caracteres sospechosos
+    if (!fileUrl.startsWith("file://")) {
+      return res.status(400).json({ error: "Invalid file URL format" });
+    }
+
+    // Extraer relativePath y normalizarlo (elimina 'file://' y posibles '/')
+    let relativePath = fileUrl.replace(/^file:\/\/\/?/, "").trim();
+    if (relativePath.startsWith("/") || relativePath.includes("..")) {
+      return res
+        .status(400)
+        .json({ error: "Invalid path: no absolute or traversal allowed" });
+    }
+    // console.log("relPath", relativePath);
+    // Restringir a carpeta 'src/': prepend 'src/' si no está, y resolver absolutePath
+    if (!relativePath.startsWith("src/") && !relativePath.startsWith("src\\")) {
+      relativePath = path.join("src", relativePath);
+    }
     const absolutePath = path.resolve(process.cwd(), relativePath);
 
+    // Verificar que absolutePath esté estrictamente dentro de 'src/'
+    const srcDir = path.resolve(process.cwd(), "src");
+    if (!absolutePath.startsWith(srcDir + path.sep)) {
+      return res
+        .status(403)
+        .json({ error: "Access denied: file outside src directory" });
+    }
+    // console.log("absPath", absolutePath);
+    // Verificar que el archivo exista
+    if (!existsSync(absolutePath)) {
+      return res.status(404).json({ error: "File not found" });
+    }
+
+    let allowedExports;
+    if (serverFunctionsManifest) {
+      // Prod: usar manifest (relativePath ya está normalizado)
+      allowedExports = serverFunctionsManifest[relativePath];
+    } else {
+      // Dev: usar cache o verificar archivo
+      // allowedExports = devCache.get(absolutePath);
+      // if (!allowedExports) {
+      const fileContent = readFileSync(absolutePath, "utf8"); // Solo lee una vez
+      const firstLine = fileContent.trim().split("\n")[0].trim();
+      if (
+        !firstLine.startsWith('"use server"') &&
+        !firstLine.startsWith("'use server'")
+      ) {
+        return res
+          .status(403)
+          .json({ error: "Not a valid server function file" });
+      }
+      // Parsear exports (necesitas implementar parseExports en server si no lo tienes)
+      const exports = parseExports(fileContent); // Asume que mueves parseExports a un util compartido
+      allowedExports = new Set(exports);
+      // devCache.set(absolutePath, allowedExports);
+      // }
+    }
+
+    // Validar exportName contra allowedExports
+    if (
+      !exportName ||
+      (exportName !== "default" && !allowedExports.has(exportName))
+    ) {
+      return res.status(400).json({ error: "Invalid export name" });
+    }
+
+    // Proceder con la importación (usando tu importModule)
     const mod = await importModule(absolutePath);
 
+    // Validar exportName: solo permitir 'default' u otros si defines una whitelist
+    if (!exportName || (exportName !== "default" && !mod[exportName])) {
+      return res.status(400).json({ error: "Invalid export name" });
+    }
     const fn = exportName === "default" ? mod.default : mod[exportName];
 
     if (typeof fn !== "function") {
       return res.status(400).json({ error: "Export is not a function" });
     }
 
+    // Ejecutar la función con context
     const context = { req, res };
     args.push(context);
+    if (args.length > fn.length + 1) {
+      return res.status(400).json({ error: "Invalid args length" });
+    }
     const result = await fn(...args);
 
+    // Manejo del resultado (igual que antes, pero con chequeos extras si es necesario)
     if (
       result &&
       result.$$typeof === Symbol.for("react.transitional.element")
     ) {
       res.setHeader("Content-Type", "text/x-component");
-      const manifest = readFileSync(
-        path.resolve(
-          process.cwd(),
-          isWebpack
-            ? `${outputFolder}/react-client-manifest.json`
-            : `react_client_manifest/react-client-manifest.json`
-        ),
-        "utf8"
+      const manifestPath = path.resolve(
+        process.cwd(),
+        isWebpack
+          ? `${outputFolder}/react-client-manifest.json`
+          : `react_client_manifest/react-client-manifest.json`
       );
-      const moduleMap = JSON.parse(manifest);
-      const { pipe } = renderToPipeableStream(result, moduleMap);
+      // Verificar que el manifest exista para evitar errores
+      if (!existsSync(manifestPath)) {
+        return res.status(500).json({ error: "Manifest not found" });
+      }
+      const manifest = isDevelopment
+        ? JSON.parse(readFileSync(manifestPath, "utf8"))
+        : cachedClientManifest;
+      const { pipe } = renderToPipeableStream(result, manifest);
       pipe(res);
     } else {
       res.json(result);
     }
   } catch (err) {
-    console.error(`Server function error [${req.body.id}]:`, err);
-    res.status(500).json({ error: err.message });
+    console.error(`Server function error [${req.body?.id}]:`, err);
+    // En producción, no envíes err.message completo para evitar leaks
+    res.status(500).json({ error: "Internal server error" });
   }
 });
 

package/dinou/esbuild/build.mjs

@@ -11,6 +11,7 @@ const __dirname = path.dirname(__filename);
 const outdir = "dist3";
 await fs.rm(outdir, { recursive: true, force: true });
 await fs.rm("react_client_manifest", { recursive: true, force: true });
+await fs.rm("server_functions_manifest", { recursive: true, force: true });
 
 const frameworkEntryPoints = {
   main: path.resolve(__dirname, "../core/client.jsx"),

package/dinou/esbuild/dev.mjs

@@ -14,6 +14,7 @@ const __dirname = path.dirname(__filename);
 const outdir = "public";
 await fs.rm(outdir, { recursive: true, force: true });
 await fs.rm("react_client_manifest", { recursive: true, force: true });
+await fs.rm("server_functions_manifest", { recursive: true, force: true });
 
 let currentCtx = null; // Track the active esbuild context
 let debounceTimer = null; // For debouncing recreations

package/dinou/esbuild/plugins-esbuild/server-functions-plugin.mjs

@@ -1,62 +1,29 @@
 import path from "path";
-import parser from "@babel/parser";
-import traverse from "@babel/traverse";
-import fs from "fs";
-
-function parseExports(code) {
-  const ast = parser.parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"],
-  });
-
-  const exports = new Set();
-
-  traverse.default(ast, {
-    ExportDefaultDeclaration() {
-      exports.add("default");
-    },
-    ExportNamedDeclaration(p) {
-      if (p.node.declaration) {
-        if (p.node.declaration.type === "FunctionDeclaration") {
-          exports.add(p.node.declaration.id.name);
-        } else if (p.node.declaration.type === "VariableDeclaration") {
-          p.node.declaration.declarations.forEach((d) => {
-            if (d.id.type === "Identifier") {
-              exports.add(d.id.name);
-            }
-          });
-        }
-      } else if (p.node.specifiers) {
-        p.node.specifiers.forEach((s) => {
-          if (s.type === "ExportSpecifier") {
-            exports.add(s.exported.name);
-          }
-        });
-      }
-    },
-  });
-
-  return [...exports];
-}
+import fs from "node:fs/promises";
+import parseExports from "../../core/parse-exports.js";
 
 export default function serverFunctionsPlugin(manifestData = {}) {
   return {
     name: "server-functions-proxy",
     setup(build) {
       const root = process.cwd();
+      const serverFunctions = new Map(); // Recolectar aquí: Map<relativePath, Set<exports>>
 
       // 1. TRANSFORM FILES DURING BUILD
       build.onLoad({ filter: /\.[jt]sx?$/ }, async (args) => {
-        const code = await fs.promises.readFile(args.path, "utf8");
+        const code = await fs.readFile(args.path, "utf8");
 
         if (!code.trim().startsWith('"use server"')) return null;
 
         const exports = parseExports(code);
         if (exports.length === 0) return null;
 
-        const fileUrl = `file:///${path.relative(root, args.path)}`;
+        const relativePath = path.relative(root, args.path);
+        serverFunctions.set(relativePath, new Set(exports)); // Guardar exports como Set para uniqueness
+
+        const fileUrl = `file:///${relativePath}`;
 
-        // Proxy code
+        // Proxy code (igual que antes)
         let proxyCode = `
           import { createServerFunctionProxy } from "/__SERVER_FUNCTION_PROXY__";
         `;
@@ -82,9 +49,8 @@ export default function serverFunctionsPlugin(manifestData = {}) {
         };
       });
 
-      // 2. REPLACE PLACEHOLDER AFTER BUILD
+      // 2. REPLACE PLACEHOLDER AND GENERATE MANIFEST AFTER BUILD
       build.onEnd(async (result) => {
-        // console.log("[server-functions-proxy] manifest:", manifestData);
         const hashedProxy =
           "/" +
           (manifestData["serverFunctionProxy.js"] || "serverFunctionProxy.js");
@@ -98,12 +64,26 @@ export default function serverFunctionsPlugin(manifestData = {}) {
               /\/__SERVER_FUNCTION_PROXY__/g,
               hashedProxy
             );
-            // console.log(
-            //   `[server-functions-proxy] Replaced __SERVER_FUNCTION_PROXY__ in ${outputFile.path}`
-            // );
             outputFile.contents = new TextEncoder().encode(newCode);
           }
         }
+
+        // Generar manifest: convertir Map a objeto simple
+        const manifestObj = {};
+        for (const [path, exportsSet] of serverFunctions.entries()) {
+          manifestObj[path] = Array.from(exportsSet);
+        }
+
+        // Escribir el manifest en el output dir (ej. mismo lugar que otros assets)
+        const manifestPath = path.join(
+          "server_functions_manifest",
+          "server-functions-manifest.json"
+        );
+        await fs.mkdir(path.dirname(manifestPath), { recursive: true });
+        await fs.writeFile(manifestPath, JSON.stringify(manifestObj, null, 2));
+        // console.log(
+        //   `[server-functions-proxy] Generated manifest at ${manifestPath}`
+        // );
       });
     },
   };

package/dinou/rollup/rollup-plugins/rollup-plugin-server-functions.js

@@ -1,45 +1,13 @@
 // rollup-plugin-server-functions.js
 const path = require("path");
-const parser = require("@babel/parser");
-const traverse = require("@babel/traverse").default;
+const fs = require("fs/promises");
 const manifestGeneratorPlugin = require("./manifest-generator-plugin");
-
-function parseExports(code) {
-  const ast = parser.parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"],
-  });
-  const exports = new Set();
-
-  traverse(ast, {
-    ExportDefaultDeclaration() {
-      exports.add("default");
-    },
-    ExportNamedDeclaration(p) {
-      if (p.node.declaration) {
-        if (p.node.declaration.type === "FunctionDeclaration") {
-          exports.add(p.node.declaration.id.name);
-        } else if (p.node.declaration.type === "VariableDeclaration") {
-          p.node.declaration.declarations.forEach((d) => {
-            if (d.id.type === "Identifier") {
-              exports.add(d.id.name);
-            }
-          });
-        }
-      } else if (p.node.specifiers) {
-        p.node.specifiers.forEach((s) => {
-          if (s.type === "ExportSpecifier") {
-            exports.add(s.exported.name);
-          }
-        });
-      }
-    },
-  });
-
-  return Array.from(exports);
-}
+const parseExports = require("../../core/parse-exports.js");
 
 function serverFunctionsPlugin() {
+  const root = process.cwd();
+  const serverFunctions = new Map(); // Recolectar aquí: Map<relativePath, Set<exports>>
+
   return {
     name: "server-functions-proxy",
     transform(code, id) {
@@ -48,7 +16,10 @@ function serverFunctionsPlugin() {
       const exports = parseExports(code);
       if (exports.length === 0) return null;
 
-      const fileUrl = `file:///${path.relative(process.cwd(), id)}`;
+      const relativePath = path.relative(root, id);
+      serverFunctions.set(relativePath, new Set(exports)); // Guardar exports como Set para uniqueness
+
+      const fileUrl = `file:///${relativePath}`;
 
       // Generamos un módulo que exporta proxies en lugar del código real
       let proxyCode = `
@@ -90,6 +61,26 @@ function serverFunctionsPlugin() {
           );
         }
       }
+
+      // Generar manifest: convertir Map a objeto simple
+      const manifestObj = {};
+      for (const [relPath, exportsSet] of serverFunctions.entries()) {
+        manifestObj[relPath] = Array.from(exportsSet);
+      }
+
+      // Escribir el manifest en la carpeta especificada (ej. mismo lugar que otros assets)
+      const manifestPath = path.join(
+        "server_functions_manifest",
+        "server-functions-manifest.json"
+      );
+      fs.mkdir(path.dirname(manifestPath), { recursive: true })
+        .then(() =>
+          fs.writeFile(manifestPath, JSON.stringify(manifestObj, null, 2))
+        )
+        .then(() => {
+          // console.log(`[rollup-server-functions] Generated manifest at ${manifestPath}`);
+        })
+        .catch(console.error);
     },
   };
 }

package/dinou/rollup/rollup.config.js

@@ -60,7 +60,11 @@ module.exports = async function () {
     ],
     plugins: [
       del({
-        targets: [`${outputDirectory}/*`, "react_client_manifest/*"],
+        targets: [
+          `${outputDirectory}/*`,
+          "react_client_manifest/*",
+          "server_functions_manifest/*",
+        ],
         runOnce: true,
         hook: "buildStart",
       }),

package/dinou/webpack/loaders/server-functions-loader.js

@@ -1,69 +1,78 @@
-// server-functions-loader.js
-const parser = require("@babel/parser");
-const traverse = require("@babel/traverse").default;
+// server-functions-loader-simple.js
 const path = require("path");
+const parseExports = require("../../core/parse-exports.js");
 
-function parseExports(code) {
-  const ast = parser.parse(code, {
-    sourceType: "module",
-    plugins: ["jsx", "typescript"],
-  });
+module.exports = function (source) {
+  // Detect "use server"
+  const lines = source.split("\n");
+  let hasUseServer = false;
 
-  const exports = new Set();
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (
+      trimmed.startsWith('"use server"') ||
+      trimmed.startsWith("'use server'")
+    ) {
+      hasUseServer = true;
+      break;
+    }
+  }
 
-  traverse(ast, {
-    ExportDefaultDeclaration() {
-      exports.add("default");
-    },
-    ExportNamedDeclaration(p) {
-      if (p.node.declaration) {
-        if (p.node.declaration.type === "FunctionDeclaration") {
-          exports.add(p.node.declaration.id.name);
-        } else if (p.node.declaration.type === "VariableDeclaration") {
-          p.node.declaration.declarations.forEach((d) => {
-            if (d.id.type === "Identifier") {
-              exports.add(d.id.name);
-            }
-          });
-        }
-      } else if (p.node.specifiers) {
-        p.node.specifiers.forEach((s) => {
-          if (s.type === "ExportSpecifier") {
-            exports.add(s.exported.name);
-          }
-        });
-      }
-    },
-  });
+  if (!hasUseServer) return source;
 
-  return Array.from(exports);
-}
+  const exports = parseExports(source);
+  if (exports.length === 0) return source;
 
-module.exports = function serverFunctionsLoader(source) {
-  if (!source.trim().startsWith('"use server"')) return source;
+  // Build IDs
+  const moduleId = this.resourcePath;
+  const relativePath = path.relative(process.cwd(), moduleId);
+  const normalizedPath = relativePath.replace(/\\/g, "/");
 
-  const callback = this.async();
-  const exports = parseExports(source);
-  if (exports.length === 0) return callback(null, source);
+  const fileUrl = `file:///${normalizedPath}`;
 
-  const fileUrl = `file:///${path.relative(process.cwd(), this.resourcePath)}`;
+  //
+  // IMPORTANT: dynamic import instead of static import
+  //
+  // Webpack will NOT try to resolve "__SERVER_FUNCTION_PROXY__"
+  // as a module → it will remain a string → replaced later → browser loads it.
 
-  let out = `import { createServerFunctionProxy } from "__SERVER_FUNCTION_PROXY__";\n`;
+  let proxyCode = `
+const loadProxy = new Function('return import("/"+"__SERVER_FUNCTION_PROXY__")');
+`;
 
-  for (const name of exports) {
-    const key =
-      name === "default" ? `${fileUrl}#default` : `${fileUrl}#${name}`;
+  for (const exp of exports) {
+    const key = exp === "default" ? `${fileUrl}#default` : `${fileUrl}#${exp}`;
 
-    if (name === "default") {
-      out += `export default createServerFunctionProxy(${JSON.stringify(
-        key
-      )});\n`;
+    if (exp === "default") {
+      proxyCode += `
+export default (...args) =>
+  loadProxy().then(mod =>
+    (mod.default ?? mod ?? window.__SERVER_FUNCTION_PROXY_LIB__).createServerFunctionProxy(${JSON.stringify(
+      key
+    )})(...args)
+  );
+`;
     } else {
-      out += `export const ${name} = createServerFunctionProxy(${JSON.stringify(
-        key
-      )});\n`;
+      proxyCode += `
+export const ${exp} = (...args) =>
+  loadProxy().then(mod => (mod.default ?? mod ?? window.__SERVER_FUNCTION_PROXY_LIB__).createServerFunctionProxy(${JSON.stringify(
+    key
+  )})(...args)
+  );
+`;
     }
   }
 
-  callback(null, out);
+  // Emit manifest entry
+  const manifestEntry = {
+    path: normalizedPath,
+    exports: exports,
+  };
+
+  this.emitFile(
+    `server-functions/${normalizedPath}.json`,
+    JSON.stringify(manifestEntry, null, 2)
+  );
+
+  return proxyCode;
 };

package/dinou/webpack/plugins/server-functions-plugin.js

@@ -1,44 +1,82 @@
-// ServerFunctionsPlugin.js
-class ServerFunctionsPlugin {
-  constructor({ manifest }) {
-    this.manifest = manifest;
+// webpack-server-functions-plugin-simple.js
+const path = require("path");
+const fs = require("fs");
+const manifestGeneratorPlugin = require("./manifest-generator-plugin");
+
+class WebpackServerFunctionsPluginSimple {
+  constructor() {
+    this.serverFunctions = new Map();
   }
 
   apply(compiler) {
-    const pluginName = "ServerFunctionsPlugin";
-
-    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
-      compilation.hooks.processAssets.tap(
-        {
-          name: pluginName,
-          stage: compilation.constructor.PROCESS_ASSETS_STAGE_OPTIMIZE,
-        },
-        (assets) => {
-          const proxyPath =
-            "/" +
-            (this.manifest["serverFunctionProxy.js"] ||
-              "serverFunctionProxy.js");
-
-          for (const filename of Object.keys(assets)) {
-            let source = assets[filename].source();
-            if (typeof source !== "string") continue;
-
-            if (!source.includes("__SERVER_FUNCTION_PROXY__")) continue;
-
-            const replaced = source.replace(
-              /__SERVER_FUNCTION_PROXY__/g,
-              proxyPath
-            );
+    const { webpack } = compiler;
+    const { Compilation, sources } = webpack;
+
+    // Recopilar archivos generados por el loader
+    compiler.hooks.thisCompilation.tap(
+      "WebpackServerFunctionsPluginSimple",
+      (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: "WebpackServerFunctionsPluginSimple",
+            stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+          },
+          (assets) => {
+            // 1. Reemplazar placeholder
+            const manifest = manifestGeneratorPlugin.manifestData;
+            const hashedPath =
+              // "/" +
+              manifest["serverFunctionProxy.js"] || "serverFunctionProxy.js";
+
+            for (const [filename, asset] of Object.entries(assets)) {
+              if (filename.endsWith(".js")) {
+                let code = asset.source();
+                if (code.includes("__SERVER_FUNCTION_PROXY__")) {
+                  code = code.replace(/__SERVER_FUNCTION_PROXY__/g, hashedPath);
+                  compilation.updateAsset(
+                    filename,
+                    new sources.RawSource(code)
+                  );
+                }
+              }
+            }
+
+            // 2. Recopilar todos los archivos de server functions
+            const serverFunctionsManifest = {};
 
-            compilation.updateAsset(filename, (old) => ({
-              source: () => replaced,
-              size: () => replaced.length,
-            }));
+            for (const [filename, asset] of Object.entries(assets)) {
+              if (
+                filename.startsWith("server-functions/") &&
+                filename.endsWith(".json")
+              ) {
+                try {
+                  const content = asset.source();
+                  const entry = JSON.parse(content);
+                  serverFunctionsManifest[entry.path] = entry.exports;
+
+                  // Eliminar este archivo temporal
+                  delete assets[filename];
+                } catch (e) {
+                  // Ignorar errores de parsing
+                }
+              }
+            }
+
+            // 3. Generar manifest final
+            const manifestContent = JSON.stringify(
+              serverFunctionsManifest,
+              null,
+              2
+            );
+            compilation.emitAsset(
+              "server-functions-manifest.json",
+              new sources.RawSource(manifestContent)
+            );
           }
-        }
-      );
-    });
+        );
+      }
+    );
   }
 }
 
-module.exports = ServerFunctionsPlugin;
+module.exports = WebpackServerFunctionsPluginSimple;

package/dinou/webpack/webpack.config.js

@@ -51,11 +51,24 @@ module.exports = async () => {
         {}
       ),
     },
+    experiments: {
+      outputModule: true,
+    },
     output: {
       path: path.resolve(process.cwd(), outputDirectory),
       filename: "[name]-[contenthash].js",
       publicPath: "/",
       clean: true,
+      library: {
+        type: "module",
+      },
+      environment: {
+        module: true,
+      },
+      // module: true,
+      chunkFormat: "module", // Ensures non-entry chunks (like serverFunctionProxy) output as ESM
+      // // Optional: If webpack renames to .mjs, force .js
+      // chunkFilename: "[name]-[contenthash].js",
     },
     module: {
       noParse: [/dist3/, /public/],
@@ -65,18 +78,7 @@ module.exports = async () => {
         //   include: path.resolve(process.cwd(), "dist3"),
         //   use: "null-loader",
         // },
-        {
-          test: /\.[jt]sx?$/,
-          include: path.resolve(process.cwd(), "src"),
-          use: [
-            {
-              loader: path.resolve(
-                __dirname,
-                "./loaders/server-functions-loader.js"
-              ),
-            },
-          ],
-        },
+
         {
           test: /\.(js|jsx|ts|tsx)$/,
           include: [
@@ -91,7 +93,6 @@ module.exports = async () => {
                 "@babel/preset-typescript",
               ],
               plugins: [
-                "@babel/plugin-transform-modules-commonjs",
                 "@babel/plugin-syntax-import-meta",
                 // isDevelopment && require.resolve("react-refresh/babel"),
               ].filter(Boolean),
@@ -103,6 +104,18 @@ module.exports = async () => {
             path.resolve(process.cwd(), "public"),
           ],
         },
+        {
+          test: /\.[jt]sx?$/,
+          include: path.resolve(process.cwd(), "src"),
+          use: [
+            {
+              loader: path.resolve(
+                __dirname,
+                "./loaders/server-functions-loader.js"
+              ),
+            },
+          ],
+        },
         {
           test: /\.module\.css$/,
           use: [
@@ -198,9 +211,11 @@ module.exports = async () => {
           ]
         : [],
     },
-    externals: {
-      __SERVER_FUNCTION_PROXY__: "__SERVER_FUNCTION_PROXY__",
-    },
+    // externals: {
+    //   // __SERVER_FUNCTION_PROXY__: "__SERVER_FUNCTION_PROXY__",
+    //   // "/__SERVER_FUNCTION_PROXY__": "/__SERVER_FUNCTION_PROXY__",
+    //   // serverFunctionProxy: "/serverFunctionProxy.js",
+    // },
     optimization: {
       splitChunks: {
         cacheGroups: {
@@ -216,6 +231,10 @@ module.exports = async () => {
     watchOptions: {
       ignored: ["public/", "dist3/"],
     },
+    stats: "normal", // o 'verbose' en dev
+    infrastructureLogging: {
+      level: "info",
+    },
     ...(isDevelopment
       ? {
           devServer: {
@@ -232,6 +251,7 @@ module.exports = async () => {
                 changeOrigin: true,
               },
             ],
+            client: false,
           },
         }
       : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Dinou is a modern React 19 framework with React Server Components, Server Functions, and streaming SSR.",
   "main": "index.js",
   "bin": {
@@ -41,7 +41,7 @@
     "@babel/traverse": "^7.28.3",
     "@esbuild-plugins/tsconfig-paths": "^0.1.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
-    "@roggc/react-server-dom-esm": "^0.0.0-380778d2-20251207",
+    "@roggc/react-server-dom-esm": "^0.0.0-b061b597-20251212",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
@@ -70,7 +70,7 @@
     "postcss-loader": "^8.2.0",
     "postcss-modules": "^6.0.1",
     "react-refresh": "^0.17.0",
-    "react-server-dom-webpack": "^19.2.1",
+    "react-server-dom-webpack": "^19.2.3",
     "rollup": "^4.46.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",
@@ -85,7 +85,7 @@
     "ws": "^8.18.3"
   },
   "peerDependencies": {
-    "react": ">=19.2.1",
-    "react-dom": ">=19.2.1"
+    "react": ">=19.2.3",
+    "react-dom": ">=19.2.3"
   }
 }