dinou 2.2.0 → 2.3.1

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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/).
 
+## [2.3.1]
+
+### Fixed
+
+- Build for ES modules (ESM).
+
+## [2.3.0]
+
+### Added
+
+- Support for ES modules (ESM). Dinou can now import and use ESM-only packages inside React components.
+
 ## [2.2.0]
 
 ### Fixed

package/cli.js

@@ -3,6 +3,7 @@
 const { program } = require("commander");
 const { execSync } = require("child_process");
 const path = require("path");
+const { pathToFileURL } = require("url");
 
 const dinouPath = path.resolve(__dirname, "dinou");
 const projectRoot = process.cwd();
@@ -21,10 +22,9 @@ program
   .description("Starts")
   .action(() => {
     console.log("Starting...");
-    const startExpress = `node --conditions react-server ${path.join(
-      dinouPath,
-      "server.js"
-    )}`;
+    const startExpress = `node --conditions react-server --import ${
+      pathToFileURL(path.join(dinouPath, "register-loader.mjs")).href
+    } ${path.join(dinouPath, "server.js")}`;
     const startDevServer = `cross-env NODE_ENV=development rollup -c ${path.join(
       __dirname,
       "rollup.config.js"
@@ -47,10 +47,9 @@ program
   .action(() => {
     console.log("Starting the app...");
     runCommand(
-      `cross-env NODE_ENV=production node --conditions react-server ${path.join(
-        dinouPath,
-        "server.js"
-      )}`
+      `cross-env NODE_ENV=production node --conditions react-server --import ${
+        pathToFileURL(path.join(dinouPath, "register-loader.mjs")).href
+      } ${path.join(dinouPath, "server.js")}`
     );
   });
 

package/dinou/asset-extensions.js

@@ -0,0 +1,31 @@
+const extensions = [
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "avif",
+  "ico",
+  "mp4",
+  "webm",
+  "ogg",
+  "mov",
+  "avi",
+  "mkv",
+  "mp3",
+  "wav",
+  "flac",
+  "m4a",
+  "aac",
+  "mjpeg",
+  "mjpg",
+];
+
+// 🔹 regex útil para plugins tipo Rollup/PostCSS
+const regex = new RegExp(`\\.(${extensions.join("|")})$`, "i");
+
+// 🔹 versión con punto para comparaciones directas
+const extensionsWithDot = extensions.map((ext) => `.${ext}`);
+
+module.exports = { extensions, extensionsWithDot, regex };

package/dinou/babel-esm-loader.js

@@ -0,0 +1,190 @@
+const fs = require("fs");
+const path = require("path");
+const { transformAsync } = require("@babel/core");
+const { fileURLToPath, pathToFileURL } = require("url");
+const createScopedName = require("./createScopedName");
+const { extensionsWithDot } = require("./asset-extensions.js");
+
+require("css-modules-require-hook")({
+  generateScopedName: createScopedName,
+  extensions: [".css"],
+});
+
+// Lee tsconfig/jsconfig y construye un map de alias -> targetBase
+function loadTsconfigAliases() {
+  const cwd = process.cwd();
+  const tsconfigPath = path.resolve(cwd, "tsconfig.json");
+  const jsconfigPath = path.resolve(cwd, "jsconfig.json");
+  const configFile = fs.existsSync(tsconfigPath)
+    ? tsconfigPath
+    : fs.existsSync(jsconfigPath)
+    ? jsconfigPath
+    : null;
+  if (!configFile) return new Map();
+
+  let config;
+  try {
+    config = JSON.parse(fs.readFileSync(configFile, "utf8"));
+  } catch (err) {
+    // Malformed json
+    return new Map();
+  }
+
+  const paths = (config.compilerOptions && config.compilerOptions.paths) || {};
+  const baseUrl =
+    (config.compilerOptions && config.compilerOptions.baseUrl) || ".";
+  const absoluteBase = path.resolve(cwd, baseUrl);
+
+  const map = new Map();
+
+  for (const key of Object.keys(paths)) {
+    const targets = paths[key];
+    if (!targets || !targets.length) continue;
+
+    // Normaliza: el primer target es el que usaremos
+    let target = Array.isArray(targets) ? targets[0] : targets;
+
+    // Soportar patterns con /* al final: "@/*" -> "src/*"
+    const keyIsWildcard = key.endsWith("/*");
+    const targetIsWildcard = target.endsWith("/*");
+
+    const alias = keyIsWildcard ? key.slice(0, -1) : key; // "@/"
+    const targetBase = targetIsWildcard ? target.slice(0, -1) : target; // "src" o "../lib"
+
+    // resolvemos el targetBase relativo a baseUrl si no es absoluto
+    const resolvedTargetBase = path.resolve(absoluteBase, targetBase);
+
+    map.set(alias, {
+      resolvedTargetBase,
+      keyIsWildcard,
+      targetIsWildcard,
+    });
+  }
+
+  return map;
+}
+
+const aliasMap = loadTsconfigAliases();
+
+// Añadir extensiones si no existen
+function tryExtensions(filePath) {
+  if (fs.existsSync(filePath)) return filePath;
+  const exts = [".js", ".ts", ".jsx", ".tsx"];
+  for (const ext of exts) {
+    const f = filePath + ext;
+    if (fs.existsSync(f)) return f;
+  }
+  // Si es carpeta, probar index.*
+  if (fs.existsSync(filePath) && fs.statSync(filePath).isDirectory()) {
+    for (const ext of exts) {
+      const f = path.join(filePath, "index" + ext);
+      if (fs.existsSync(f)) return f;
+    }
+  }
+  return null;
+}
+
+exports.resolve = async function resolve(specifier, context, defaultResolve) {
+  if (aliasMap.size > 0) {
+    for (const [alias, info] of aliasMap.entries()) {
+      if (specifier.startsWith(alias)) {
+        const absPath = path.resolve(
+          info.resolvedTargetBase,
+          specifier.slice(alias.length)
+        );
+        const found = tryExtensions(absPath);
+        if (found) {
+          const url = pathToFileURL(found).href;
+
+          return {
+            url,
+            shortCircuit: true,
+          };
+        }
+      }
+    }
+  }
+
+  if (specifier.startsWith("./") || specifier.startsWith("../")) {
+    const parentURL = context.parentURL || pathToFileURL(process.cwd()).href;
+    const parentDir = path.dirname(fileURLToPath(parentURL));
+    const absPath = path.resolve(parentDir, specifier);
+    const found = tryExtensions(absPath);
+    if (found) return { url: pathToFileURL(found).href, shortCircuit: true };
+  }
+
+  // Fallback to default resolver
+  return defaultResolve(specifier, context, defaultResolve);
+};
+
+exports.load = async function load(url, context, defaultLoad) {
+  // --- 🟢 Handle non-JS assets (png, jpg, etc.)
+  const assetExts = extensionsWithDot;
+  const ext = path.extname(url.split("?")[0]); // remove query params if any
+
+  if (assetExts.includes(ext)) {
+    // Return a tiny stub that mimics what asset-require-hook would do
+    const filepath = fileURLToPath(url);
+    const localName = path.basename(filepath, ext);
+    const hashedName = createScopedName(localName, filepath);
+    const virtualExport = `export default "/assets/${hashedName}${ext}";`;
+
+    return {
+      format: "module",
+      source: virtualExport,
+      shortCircuit: true,
+      url,
+    };
+  }
+
+  if (ext === ".css") {
+    const mod = require(fileURLToPath(url));
+    const source = `export default ${JSON.stringify(mod)};`;
+    return { format: "module", source, shortCircuit: true, url };
+  }
+  if (/\.(jsx|tsx|ts|js)$/.test(url)) {
+    let filename;
+    try {
+      filename = fileURLToPath(
+        url.startsWith("file://") ? url : pathToFileURL(url).href
+      );
+    } catch (e) {
+      throw e;
+    }
+    const rel = path.relative(process.cwd(), filename);
+    if (ext === ".js" && !rel.startsWith("src" + path.sep))
+      return defaultLoad(url, context, defaultLoad);
+    const source = fs.readFileSync(filename, "utf-8");
+    if (ext === ".js") {
+      return {
+        format: "module",
+        source,
+        shortCircuit: true,
+        url,
+      };
+    }
+
+    const { code } = await transformAsync(source, {
+      filename,
+      presets: [
+        ["@babel/preset-react", { runtime: "automatic" }],
+        "@babel/preset-typescript",
+      ],
+      sourceMaps: "inline",
+      ast: false,
+    });
+
+    const urlToReturn = pathToFileURL(filename).href;
+
+    return {
+      format: "module",
+      source: code,
+      shortCircuit: true,
+      url: urlToReturn,
+    };
+  }
+
+  if (url) {
+    return defaultLoad(url, context, defaultLoad);
+  }
+};

package/dinou/build-static-pages.js

@@ -12,6 +12,7 @@ const { asyncRenderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
 const {
   getFilePathAndDynamicParams,
 } = require("./get-file-path-and-dynamic-params");
+const importModule = require("./import-module");
 
 async function buildStaticPages() {
   const srcFolder = path.resolve(process.cwd(), "src");
@@ -26,15 +27,18 @@ async function buildStaticPages() {
     mkdirSync(distFolder, { recursive: true });
   }
 
-  function collectPages(currentPath, segments = [], params = {}) {
+  async function collectPages(currentPath, segments = [], params = {}) {
     const entries = readdirSync(currentPath, { withFileTypes: true });
     const pages = [];
 
-    for (const entry of entries) {
+    for await (const entry of entries) {
       if (entry.isDirectory()) {
         if (entry.name.startsWith("(") && entry.name.endsWith(")")) {
           pages.push(
-            ...collectPages(path.join(currentPath, entry.name), segments)
+            ...(await collectPages(
+              path.join(currentPath, entry.name),
+              segments
+            ))
           );
         } else if (
           entry.name.startsWith("[[...") &&
@@ -66,7 +70,7 @@ async function buildStaticPages() {
           let dynamic;
           let getStaticPaths;
           if (pageFunctionsPath) {
-            const module = require(pageFunctionsPath);
+            const module = await importModule(pageFunctionsPath);
             getStaticPaths = module.getStaticPaths;
             dynamic = module.dynamic;
           }
@@ -81,10 +85,14 @@ async function buildStaticPages() {
                 const paths = getStaticPaths();
                 for (const path of paths) {
                   pages.push(
-                    ...collectPages(dynamicPath, [...segments, ...path], {
-                      ...params,
-                      [paramName]: path,
-                    })
+                    ...(await collectPages(
+                      dynamicPath,
+                      [...segments, ...path],
+                      {
+                        ...params,
+                        [paramName]: path,
+                      }
+                    ))
                   );
                 }
               }
@@ -118,7 +126,7 @@ async function buildStaticPages() {
           let dynamic;
           let getStaticPaths;
           if (pageFunctionsPath) {
-            const module = require(pageFunctionsPath);
+            const module = await importModule(pageFunctionsPath);
             getStaticPaths = module.getStaticPaths;
             dynamic = module.dynamic;
           }
@@ -133,10 +141,14 @@ async function buildStaticPages() {
                 const paths = getStaticPaths();
                 for (const path of paths) {
                   pages.push(
-                    ...collectPages(dynamicPath, [...segments, ...path], {
-                      ...params,
-                      [paramName]: path,
-                    })
+                    ...(await collectPages(
+                      dynamicPath,
+                      [...segments, ...path],
+                      {
+                        ...params,
+                        [paramName]: path,
+                      }
+                    ))
                   );
                 }
               }
@@ -171,7 +183,7 @@ async function buildStaticPages() {
           let dynamic;
           let getStaticPaths;
           if (pageFunctionsPath) {
-            const module = require(pageFunctionsPath);
+            const module = await importModule(pageFunctionsPath);
             getStaticPaths = module.getStaticPaths;
             dynamic = module.dynamic;
           }
@@ -186,10 +198,10 @@ async function buildStaticPages() {
                 const paths = getStaticPaths();
                 for (const path of paths) {
                   pages.push(
-                    ...collectPages(dynamicPath, [...segments, path], {
+                    ...(await collectPages(dynamicPath, [...segments, path], {
                       ...params,
                       [paramName]: path,
-                    })
+                    }))
                   );
                 }
               }
@@ -223,7 +235,7 @@ async function buildStaticPages() {
           let dynamic;
           let getStaticPaths;
           if (pageFunctionsPath) {
-            const module = require(pageFunctionsPath);
+            const module = await importModule(pageFunctionsPath);
             getStaticPaths = module.getStaticPaths;
             dynamic = module.dynamic;
           }
@@ -236,10 +248,10 @@ async function buildStaticPages() {
                 const paths = getStaticPaths();
                 for (const path of paths) {
                   pages.push(
-                    ...collectPages(dynamicPath, [...segments, path], {
+                    ...(await collectPages(dynamicPath, [...segments, path], {
                       ...params,
                       [paramName]: path,
-                    })
+                    }))
                   );
                 }
               }
@@ -249,11 +261,11 @@ async function buildStaticPages() {
           }
         } else if (!entry.name.startsWith("@")) {
           pages.push(
-            ...collectPages(
+            ...(await collectPages(
               path.join(currentPath, entry.name),
               [...segments, entry.name],
               params
-            )
+            ))
           );
         }
       }
@@ -282,7 +294,7 @@ async function buildStaticPages() {
     );
     let dynamic;
     if (pageFunctionsPath) {
-      const module = require(pageFunctionsPath);
+      const module = await importModule(pageFunctionsPath);
       dynamic = module.dynamic;
     }
     if (pagePath && !dynamic?.()) {
@@ -293,7 +305,7 @@ async function buildStaticPages() {
     return pages;
   }
 
-  const pages = collectPages(srcFolder);
+  const pages = await collectPages(srcFolder);
 
   for await (const { path: folderPath, segments, params } of pages) {
     try {
@@ -307,7 +319,7 @@ async function buildStaticPages() {
         undefined,
         segments.length
       );
-      const pageModule = require(pagePath);
+      const pageModule = await importModule(pagePath);
       const Page = pageModule.default ?? pageModule;
       // Set displayName for better serialization
       // if (!Page.displayName) Page.displayName = "Page";
@@ -329,7 +341,7 @@ async function buildStaticPages() {
       let revalidate;
 
       if (pageFunctionsPath) {
-        const pageFunctionsModule = require(pageFunctionsPath);
+        const pageFunctionsModule = await importModule(pageFunctionsPath);
         const getProps = pageFunctionsModule.getProps;
         revalidate = pageFunctionsModule.revalidate;
         pageFunctionsProps = await getProps?.(params, {}, {});
@@ -357,7 +369,7 @@ async function buildStaticPages() {
         if (layouts && Array.isArray(layouts)) {
           let index = 0;
           for (const [layoutPath, dParams, slots] of layouts.reverse()) {
-            const layoutModule = require(layoutPath);
+            const layoutModule = await importModule(layoutPath);
             const Layout = layoutModule.default ?? layoutModule;
             // if (!Layout.displayName) Layout.displayName = "Layout";
             const updatedSlots = {};
@@ -489,7 +501,7 @@ async function buildStaticPage(reqPath) {
     );
     if (!pagePath) throw new Error(`No page found for ${reqPath}`);
 
-    const pageModule = require(pagePath);
+    const pageModule = await importModule(pagePath);
     const Page = pageModule.default ?? pageModule;
 
     let props = { params: dParams, query: {} };
@@ -507,7 +519,7 @@ async function buildStaticPage(reqPath) {
     let pageFunctionsProps;
     let revalidate;
     if (pageFunctionsPath) {
-      const pageFunctionsModule = require(pageFunctionsPath);
+      const pageFunctionsModule = await importModule(pageFunctionsPath);
       const getProps = pageFunctionsModule.getProps;
       revalidate = pageFunctionsModule.revalidate;
       pageFunctionsProps = await getProps?.(dParams, {}, {});
@@ -533,8 +545,8 @@ async function buildStaticPage(reqPath) {
       );
       if (layouts && Array.isArray(layouts)) {
         let index = 0;
-        for (const [layoutPath, dParams, slots] of layouts.reverse()) {
-          const layoutModule = require(layoutPath);
+        for await (const [layoutPath, dParams, slots] of layouts.reverse()) {
+          const layoutModule = await importModule(layoutPath);
           const Layout = layoutModule.default ?? layoutModule;
           const updatedSlots = {};
           for (const [slotName, slotElement] of Object.entries(slots)) {

package/dinou/generate-static-page.js

@@ -12,7 +12,7 @@ async function generateStaticPage(reqPath) {
 
   try {
     // console.log("🔄 Rendering HTML for:", finalReqPath);
-    const htmlStream = await renderAppToHtml(finalReqPath, paramsString);
+    const htmlStream = renderAppToHtml(finalReqPath, paramsString);
 
     mkdirSync(path.dirname(htmlPath), { recursive: true });
     const fileStream = createWriteStream(htmlPath);

package/dinou/generate-static-pages.js

@@ -13,7 +13,7 @@ async function generateStaticPages(routes) {
 
     try {
       // console.log("🔄 Rendering HTML for:", reqPath);
-      const htmlStream = await renderAppToHtml(reqPath, paramsString);
+      const htmlStream = renderAppToHtml(reqPath, paramsString);
 
       mkdirSync(path.dirname(htmlPath), { recursive: true });
       const fileStream = createWriteStream(htmlPath);

package/dinou/get-error-jsx.js

@@ -4,8 +4,9 @@ const React = require("react");
 const {
   getFilePathAndDynamicParams,
 } = require("./get-file-path-and-dynamic-params");
+const importModule = require("./import-module");
 
-function getErrorJSX(reqPath, query, error) {
+async function getErrorJSX(reqPath, query, error) {
   const srcFolder = path.resolve(process.cwd(), "src");
   const reqSegments = reqPath.split("/").filter(Boolean);
   const folderPath = path.join(srcFolder, ...reqSegments);
@@ -49,7 +50,7 @@ function getErrorJSX(reqPath, query, error) {
   }
 
   if (pagePath) {
-    const pageModule = require(pagePath);
+    const pageModule = await importModule(pagePath);
     const Page = pageModule.default ?? pageModule;
     jsx = React.createElement(Page, {
       params: dynamicParams ?? {},
@@ -93,7 +94,7 @@ function getErrorJSX(reqPath, query, error) {
     if (layouts && Array.isArray(layouts)) {
       let index = 0;
       for (const [layoutPath, dParams, slots] of layouts.reverse()) {
-        const layoutModule = require(layoutPath);
+        const layoutModule = await importModule(layoutPath);
         const Layout = layoutModule.default ?? layoutModule;
         let props = { params: dParams, query, ...slots };
         jsx = React.createElement(Layout, props, jsx);

package/dinou/get-jsx.js

@@ -4,6 +4,7 @@ const React = require("react");
 const {
   getFilePathAndDynamicParams,
 } = require("./get-file-path-and-dynamic-params");
+const importModule = require("./import-module");
 
 async function getJSX(reqPath, query, cookies) {
   const srcFolder = path.resolve(process.cwd(), "src");
@@ -49,7 +50,7 @@ async function getJSX(reqPath, query, cookies) {
         `Page not found: no "page" file found for "${reqPath}"`
       );
     } else {
-      const pageModule = require(notFoundPath);
+      const pageModule = await importModule(notFoundPath);
       const Page = pageModule.default ?? pageModule;
       jsx = React.createElement(Page, {
         params: dParams ?? {},
@@ -66,7 +67,7 @@ async function getJSX(reqPath, query, cookies) {
       }
     }
   } else {
-    const pageModule = require(pagePath);
+    const pageModule = await importModule(pagePath);
     const Page = pageModule.default ?? pageModule;
 
     let props = {
@@ -86,7 +87,7 @@ async function getJSX(reqPath, query, cookies) {
       reqSegments.length
     );
     if (pageFunctionsPath) {
-      const pageFunctionsModule = require(pageFunctionsPath);
+      const pageFunctionsModule = await importModule(pageFunctionsPath);
       const getProps = pageFunctionsModule.getProps;
       pageFunctionsProps = await getProps?.(dynamicParams, query, cookies);
       props = { ...props, ...(pageFunctionsProps?.page ?? {}) };
@@ -123,7 +124,7 @@ async function getJSX(reqPath, query, cookies) {
   if (layouts && Array.isArray(layouts)) {
     let index = 0;
     for (const [layoutPath, dParams, slots] of layouts.reverse()) {
-      const layoutModule = require(layoutPath);
+      const layoutModule = await importModule(layoutPath);
       const layoutFolderPath = path.dirname(layoutPath);
       const resetLayoutPath = getFilePathAndDynamicParams(
         [],

package/dinou/get-ssg-jsx-or-jsx.js

@@ -10,7 +10,7 @@ async function getSSGJSXOrJSX(
   const result =
     Object.keys(query).length || isDevelopment || Object.keys(cookies).length
       ? await getJSX(reqPath, query, cookies)
-      : getSSGJSX(reqPath) ?? (await getJSX(reqPath, query, cookies));
+      : (await getSSGJSX(reqPath)) ?? (await getJSX(reqPath, query, cookies));
   return result;
 }
 

package/dinou/get-ssg-jsx.js

@@ -1,8 +1,9 @@
 const path = require("path");
 const { existsSync, readFileSync } = require("fs");
 const React = require("react");
+const importModule = require("./import-module");
 
-function deserializeReactElement(
+async function deserializeReactElement(
   serialized,
   returnUndefined = { value: false }
 ) {
@@ -17,7 +18,9 @@ function deserializeReactElement(
     let Component;
     if (modulePath) {
       try {
-        const module = require(path.resolve(process.cwd(), modulePath));
+        const module = await importModule(
+          path.resolve(process.cwd(), modulePath)
+        );
         Component = module.default ?? module;
       } catch (err) {
         console.error(`Error loading module ${modulePath}:`, err);
@@ -67,12 +70,12 @@ function deserializeReactElement(
   return returnUndefined.value ? undefined : serialized;
 }
 
-function getSSGJSX(reqPath) {
+async function getSSGJSX(reqPath) {
   const distFolder = path.resolve(process.cwd(), "dist");
   const jsonPath = path.join(distFolder, reqPath, "index.json");
   if (existsSync(jsonPath)) {
     const { jsx } = JSON.parse(readFileSync(jsonPath, "utf8"));
-    const deserializedJSX = deserializeReactElement(jsx);
+    const deserializedJSX = await deserializeReactElement(jsx);
     return deserializedJSX;
   }
 }

package/dinou/import-module.js

@@ -0,0 +1,24 @@
+const { pathToFileURL } = require("url");
+const path = require("path");
+
+async function importModule(modulePath) {
+  try {
+    return require(modulePath);
+  } catch (err) {
+    if (
+      err.code === "ERR_REQUIRE_ESM" ||
+      /require\(\) of ES Module/.test(err.message)
+    ) {
+      const absPath = path.isAbsolute(modulePath)
+        ? modulePath
+        : path.resolve(process.cwd(), modulePath);
+
+      const fileUrl = pathToFileURL(absPath).href;
+      const mod = await import(fileUrl);
+      return mod;
+    }
+    throw err;
+  }
+}
+
+module.exports = importModule;

package/dinou/register-loader.mjs

@@ -0,0 +1,12 @@
+// dinou/register-loader.mjs
+import { register } from "node:module";
+import { pathToFileURL } from "node:url";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+// Resuelve el loader dentro del propio paquete dinou
+const loaderPath = require.resolve("./babel-esm-loader.js");
+
+// Registra el loader ESM
+register(pathToFileURL(loaderPath).href, pathToFileURL("./"));

package/dinou/render-app-to-html.js

@@ -1,47 +1,45 @@
 const path = require("path");
 const { spawn } = require("child_process");
+const url = require("url");
 
-function renderAppToHtml(reqPath, paramsString, cookiesString = "{}") {
-  return new Promise((resolve, reject) => {
-    const child = spawn(
-      "node",
-      [
-        path.resolve(__dirname, "render-html.js"),
-        reqPath,
-        paramsString,
-        cookiesString,
-      ],
-      {
-        env: {
-          ...process.env,
-        },
-      }
-    );
+function toFileUrl(p) {
+  // Convierte a file://, cross-platform
+  return url.pathToFileURL(p).href;
+}
 
-    let errorOutput = "";
-    child.stderr.on("data", (data) => {
-      errorOutput += data.toString();
-    });
+const registerLoaderPath = toFileUrl(
+  path.join(__dirname, "register-loader.mjs")
+);
+const renderHtmlPath = path.resolve(__dirname, "render-html.js");
 
-    child.on("error", (error) => {
-      reject(new Error(`Failed to start child process: ${error.message}`));
-    });
+function renderAppToHtml(reqPath, paramsString, cookiesString = "{}") {
+  const child = spawn(
+    "node",
+    [
+      "--import",
+      registerLoaderPath,
+      renderHtmlPath,
+      reqPath,
+      paramsString,
+      cookiesString,
+    ],
+    {
+      env: { ...process.env },
+      stdio: ["ignore", "pipe", "pipe"], // stdin, stdout, stderr
+    }
+  );
 
-    child.on("spawn", () => {
-      resolve(child.stdout);
-    });
+  // Capturamos errores del child
+  child.on("error", (err) => {
+    console.error("Failed to start child process:", err);
+  });
 
-    child.on("close", (code) => {
-      if (code !== 0) {
-        try {
-          const errorResult = JSON.parse(errorOutput);
-          reject(new Error(errorResult.error || errorOutput));
-        } catch {
-          reject(new Error(`Child process failed: ${errorOutput}`));
-        }
-      }
-    });
+  // Opcional: puedes escuchar stderr y loguear
+  child.stderr.on("data", (chunk) => {
+    console.error(chunk.toString());
   });
+
+  return child.stdout; // <-- aquí devuelves un stream legible
 }
 
 module.exports = renderAppToHtml;

package/dinou/render-html.js

@@ -10,34 +10,13 @@ babelRegister({
   extensions: [".js", ".jsx", ".ts", ".tsx"],
 });
 const addHook = require("./asset-require-hook.js");
+const { extensions } = require("./asset-extensions.js");
 const createScopedName = require("./createScopedName");
 require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
 addHook({
-  extensions: [
-    "png",
-    "jpg",
-    "jpeg",
-    "gif",
-    "svg",
-    "webp",
-    "avif",
-    "ico",
-    "mp4",
-    "webm",
-    "ogg",
-    "mov",
-    "avi",
-    "mkv",
-    "mp3",
-    "wav",
-    "flac",
-    "m4a",
-    "aac",
-    "mjpeg",
-    "mjpg",
-  ],
+  extensions,
   name: function (localName, filepath) {
     const result = createScopedName(localName, filepath);
     return result + ".[ext]";
@@ -133,64 +112,64 @@ function formatErrorHtmlProduction(error) {
   `;
 }
 
+function writeErrorOutput(error, isProd) {
+  process.stdout.write(
+    isProd ? formatErrorHtmlProduction(error) : formatErrorHtml(error)
+  );
+  process.stderr.write(
+    JSON.stringify({ error: error.message, stack: error.stack })
+  );
+}
+
 async function renderToStream(reqPath, query, cookies = {}) {
   try {
     const jsx =
       Object.keys(query).length || isDevelopment || Object.keys(cookies).length
         ? renderJSXToClientJSX(await getJSX(reqPath, query, cookies))
-        : getSSGJSX(reqPath) ??
+        : (await getSSGJSX(reqPath)) ??
           renderJSXToClientJSX(await getJSX(reqPath, query, cookies));
 
     const stream = renderToPipeableStream(jsx, {
       onError(error) {
-        const isProd = process.env.NODE_ENV === "production";
+        process.nextTick(async () => {
+          if (stream && !stream.destroyed) {
+            try {
+              stream.unpipe(process.stdout);
+              stream.destroy();
+            } catch {}
+          }
+          const isProd = process.env.NODE_ENV === "production";
+
+          try {
+            const errorJSX = await getErrorJSX(reqPath, query, error);
 
-        try {
-          const errorJSX = getErrorJSX(reqPath, query, error);
+            if (errorJSX === undefined) {
+              writeErrorOutput(error, isProd);
+              process.exit(1);
+            }
 
-          if (errorJSX === undefined) {
-            process.stdout.write(
-              isProd ? formatErrorHtmlProduction(error) : formatErrorHtml(error)
-            );
-            process.stderr.write(
-              JSON.stringify({ error: error.message, stack: error.stack })
-            );
+            const errorStream = renderToPipeableStream(errorJSX, {
+              onShellReady() {
+                errorStream.pipe(process.stdout);
+              },
+              onError(err) {
+                console.error("Error rendering error JSX:", err);
+                writeErrorOutput(error, isProd);
+                process.exit(1);
+              },
+              bootstrapModules: ["/error.js"],
+              bootstrapScriptContent: `window.__DINOU_ERROR_MESSAGE__=${JSON.stringify(
+                error.message || "Unknown error"
+              )};window.__DINOU_ERROR_STACK__=${JSON.stringify(
+                error.stack || "No stack trace available"
+              )};`,
+            });
+          } catch (err) {
+            console.error("Render error (no error.tsx?):", err);
+            writeErrorOutput(error, isProd);
             process.exit(1);
           }
-
-          const errorStream = renderToPipeableStream(errorJSX, {
-            onShellReady() {
-              errorStream.pipe(process.stdout);
-            },
-            onError(err) {
-              console.error("Error rendering error JSX:", err);
-              process.stdout.write(
-                isProd
-                  ? formatErrorHtmlProduction(error)
-                  : formatErrorHtml(error)
-              );
-              process.stderr.write(
-                JSON.stringify({ error: error.message, stack: error.stack })
-              );
-              process.exit(1);
-            },
-            bootstrapModules: ["/error.js"],
-            bootstrapScriptContent: `window.__DINOU_ERROR_MESSAGE__=${JSON.stringify(
-              error.message || "Unknown error"
-            )};window.__DINOU_ERROR_STACK__=${JSON.stringify(
-              error.stack || "No stack trace available"
-            )};`,
-          });
-        } catch (err) {
-          console.error("Render error (no error.tsx?):", err);
-          process.stdout.write(
-            isProd ? formatErrorHtmlProduction(error) : formatErrorHtml(error)
-          );
-          process.stderr.write(
-            JSON.stringify({ error: error.message, stack: error.stack })
-          );
-          process.exit(1);
-        }
+        });
       },
       onShellReady() {
         stream.pipe(process.stdout);

package/dinou/server.js

@@ -8,6 +8,7 @@ const express = require("express");
 const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
 const { getErrorJSX } = require("./get-error-jsx.js");
 const addHook = require("./asset-require-hook.js");
+const { extensions } = require("./asset-extensions.js");
 webpackRegister();
 const babelRegister = require("@babel/register");
 babelRegister({
@@ -24,35 +25,14 @@ require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
 addHook({
-  extensions: [
-    "png",
-    "jpg",
-    "jpeg",
-    "gif",
-    "svg",
-    "webp",
-    "avif",
-    "ico",
-    "mp4",
-    "webm",
-    "ogg",
-    "mov",
-    "avi",
-    "mkv",
-    "mp3",
-    "wav",
-    "flac",
-    "m4a",
-    "aac",
-    "mjpeg",
-    "mjpg",
-  ],
+  extensions,
   name: function (localName, filepath) {
     const result = createScopedName(localName, filepath);
     return result + ".[ext]";
   },
   publicPath: "/assets/",
 });
+const importModule = require("./import-module");
 const generateStatic = require("./generate-static.js");
 const renderAppToHtml = require("./render-app-to-html.js");
 const revalidating = require("./revalidating.js");
@@ -117,18 +97,6 @@ if (isDevelopment) {
     }
   }
 
-  // function clearAllUserCache() {
-  //   const srcDir = path.resolve(process.cwd(), "src");
-  //   Object.keys(require.cache).forEach((file) => {
-  //     if (file.startsWith(srcDir)) {
-  //       delete require.cache[file];
-  //     }
-  //   });
-  //   console.log(
-  //     "[Server HMR] Cleared all src/ require caches due to directive change."
-  //   );
-  // }
-
   watcher.on("change", () => {
     try {
       const newManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
@@ -150,12 +118,7 @@ if (isDevelopment) {
           // console.log(`Cleared cache for ${absPath} (server -> client)`);
         }
       }
-      // if (
-      //   Object.keys(currentManifest).length !== Object.keys(newManifest).length
-      // ) {
-      //   // Only clear if there was a change (add/remove)
-      //   clearAllUserCache();
-      // }
+
       currentManifest = newManifest;
     } catch (err) {
       console.error("Error handling manifest change:", err);
@@ -261,7 +224,7 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
   }
 });
 
-app.get(/^\/.*\/?$/, async (req, res) => {
+app.get(/^\/.*\/?$/, (req, res) => {
   try {
     const reqPath = req.path.endsWith("/") ? req.path : req.path + "/";
 
@@ -275,7 +238,7 @@ app.get(/^\/.*\/?$/, async (req, res) => {
       }
     }
 
-    const appHtmlStream = await renderAppToHtml(
+    const appHtmlStream = renderAppToHtml(
       reqPath,
       JSON.stringify({ ...req.query }),
       JSON.stringify({ ...req.cookies })
@@ -302,7 +265,7 @@ app.post("/____server_function____", async (req, res) => {
     let relativePath = fileUrl.replace(/^file:\/\/\/?/, "");
     const absolutePath = path.resolve(process.cwd(), relativePath);
 
-    const mod = require(absolutePath);
+    const mod = await importModule(absolutePath);
 
     const fn = exportName === "default" ? mod.default : mod[exportName];
 
@@ -311,9 +274,7 @@ app.post("/____server_function____", async (req, res) => {
     }
 
     const context = { req, res };
-    if (fn.length === args.length + 1) {
-      args.push(context);
-    }
+    args.push(context);
     const result = await fn(...args);
 
     if (

package/eject.js

@@ -34,13 +34,14 @@ if (fs.existsSync(path.join(modulePath, "postcss.config.js"))) {
 }
 
 const pkg = require(path.join(projectRoot, "package.json"));
-pkg.scripts["start:express"] = "node --conditions react-server dinou/server.js";
+pkg.scripts["start:express"] =
+  "node --conditions react-server --import ./dinou/register-loader.mjs ./dinou/server.js";
 pkg.scripts["start:dev-server"] = "cross-env NODE_ENV=development rollup -c -w";
 pkg.scripts.dev =
   'concurrently "npm run start:express" "npm run start:dev-server"';
 pkg.scripts.build = "cross-env NODE_ENV=production rollup -c";
 pkg.scripts.start =
-  "cross-env NODE_ENV=production node --conditions react-server dinou/server.js";
+  "cross-env NODE_ENV=production node --conditions react-server --import ./dinou/register-loader.mjs ./dinou/server.js";
 delete pkg.scripts.eject;
 fs.writeFileSync(
   path.join(projectRoot, "package.json"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {

package/rollup-plugins/dinou-asset-plugin.js

@@ -1,10 +1,9 @@
 const fs = require("fs");
 const path = require("path");
 const createScopedName = require("../dinou/createScopedName.js");
+const { regex } = require("../dinou/asset-extensions.js");
 
-function dinouAssetPlugin({
-  include = /\.(png|jpe?g|gif|svg|webp|avif|ico|mp4|webm|ogg|mov|avi|mkv|mp3|wav|flac|m4a|aac|mjpeg|mjpg)$/i,
-} = {}) {
+function dinouAssetPlugin({ include = regex } = {}) {
   return {
     name: "dinou-asset-plugin",
     async load(id) {

package/rollup.config.js

@@ -13,6 +13,7 @@ const { esmHmrPlugin } = require("./react-refresh/rollup-plugin-esm-hmr.js");
 const dinouAssetPlugin = require("./rollup-plugins/dinou-asset-plugin.js");
 const tsconfigPaths = require("rollup-plugin-tsconfig-paths");
 const serverFunctionsPlugin = require("./rollup-plugins/rollup-plugin-server-functions");
+const { regex } = require("./dinou/asset-extensions.js");
 
 const isDevelopment = process.env.NODE_ENV !== "production";
 const outputDirectory = isDevelopment ? "public" : "dist3";
@@ -76,8 +77,7 @@ module.exports = async function () {
         transformMixedEsModules: true,
       }),
       dinouAssetPlugin({
-        include:
-          /\.(png|jpe?g|gif|svg|webp|avif|ico|mp4|webm|ogg|mov|avi|mkv|mp3|wav|flac|m4a|aac|mjpeg|mjpg)$/i,
+        include: regex,
       }),
       babel({
         babelHelpers: "bundled",