dinou 2.4.0 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.0]
+
+### Added
+
+- esbuild integration (the one used by default).
+- rollup integration (optionally used).
+- webpack integration (optionally used).
+
+## [2.4.1]
+
+### Fixed
+
+- Use hashed names for bundled files in production.
+
 ## [2.4.0]
 
 ### Fixed

package/cli.js

@@ -26,24 +26,90 @@ program
     const startExpress = `node --conditions react-server --import ${
       pathToFileURL(path.join(corePath, "register-loader.mjs")).href
     } ${path.join(corePath, "server.js")}`;
-    const startDevServer = `cross-env NODE_ENV=development rollup -c ${path.join(
+    const startDevServer = `node ${path.join(dinouPath, "esbuild/dev.mjs")}`;
+    runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
+  });
+
+program
+  .command("build")
+  .description("Builds the app for production")
+  .action(() => {
+    console.log("Building the app...");
+    const esbuildPath = path.join(dinouPath, "esbuild/build.mjs");
+    runCommand(`cross-env NODE_ENV=production node ${esbuildPath}`);
+  });
+
+program
+  .command("start")
+  .description("Start the app in production mode")
+  .action(() => {
+    console.log("Starting the app...");
+    runCommand(
+      `cross-env NODE_ENV=production node --conditions react-server --import ${
+        pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+      } ${path.join(corePath, "server.js")}`
+    );
+  });
+
+program
+  .command("dev:esbuild")
+  .description("Starts")
+  .action(() => {
+    console.log("Starting...");
+    const startExpress = `node --conditions react-server --import ${
+      pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+    } ${path.join(corePath, "server.js")}`;
+    const startDevServer = `node ${path.join(dinouPath, "esbuild/dev.mjs")}`;
+    runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
+  });
+
+program
+  .command("build:esbuild")
+  .description("Builds the app for production")
+  .action(() => {
+    console.log("Building the app...");
+    const esbuildPath = path.join(dinouPath, "esbuild/build.mjs");
+    runCommand(`cross-env NODE_ENV=production node ${esbuildPath}`);
+  });
+
+program
+  .command("start:esbuild")
+  .description("Start the app in production mode")
+  .action(() => {
+    console.log("Starting the app...");
+    runCommand(
+      `cross-env NODE_ENV=production node --conditions react-server --import ${
+        pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+      } ${path.join(corePath, "server.js")}`
+    );
+  });
+
+program
+  .command("dev:rollup")
+  .description("Starts")
+  .action(() => {
+    console.log("Starting...");
+    const startExpress = `node --conditions react-server --import ${
+      pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+    } ${path.join(corePath, "server.js")}`;
+    const startDevServer = `rollup -c ${path.join(
       dinouPath,
-      "rollup.config.js"
+      "rollup/rollup.config.js"
     )} -w`;
     runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
   });
 
 program
-  .command("build")
+  .command("build:rollup")
   .description("Builds the app for production")
   .action(() => {
     console.log("Building the app...");
-    const configPath = path.join(dinouPath, "rollup.config.js");
+    const configPath = path.join(dinouPath, "rollup/rollup.config.js");
     runCommand(`cross-env NODE_ENV=production npx rollup -c ${configPath}`);
   });
 
 program
-  .command("start")
+  .command("start:rollup")
   .description("Start the app in production mode")
   .action(() => {
     console.log("Starting the app...");
@@ -54,9 +120,47 @@ program
     );
   });
 
+program
+  .command("dev:webpack")
+  .description("Starts")
+  .action(() => {
+    console.log("Starting...");
+    const startExpress = `cross-env DINOU_BUILD_TOOL=webpack node --conditions react-server --import ${
+      pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+    } ${path.join(corePath, "server.js")}`;
+    const startDevServer = `webpack serve --config ${path.join(
+      dinouPath,
+      "webpack/webpack.config.js"
+    )}`;
+    runCommand(`npx concurrently "${startExpress}" "${startDevServer}"`);
+  });
+
+program
+  .command("build:webpack")
+  .description("Builds the app for production")
+  .action(() => {
+    console.log("Building the app...");
+    const configPath = path.join(dinouPath, "webpack/webpack.config.js");
+    runCommand(
+      `cross-env NODE_ENV=production npx webpack --config ${configPath}`
+    );
+  });
+
+program
+  .command("start:webpack")
+  .description("Start the app in production mode")
+  .action(() => {
+    console.log("Starting the app...");
+    runCommand(
+      `cross-env NODE_ENV=production DINOU_BUILD_TOOL=webpack node --conditions react-server --import ${
+        pathToFileURL(path.join(corePath, "register-loader.mjs")).href
+      } ${path.join(corePath, "server.js")}`
+    );
+  });
+
 program
   .command("eject")
-  .description("Copy the framework config to the root of the project")
+  .description("Copy the framework to the root of the project")
   .action(() => {
     console.log("Executing eject...");
     require("./eject");

package/dinou/core/asset-extensions.js

@@ -22,10 +22,12 @@ const extensions = [
   "mjpg",
 ];
 
+const globPattern = `**/*.{${extensions.join(",")}}`;
+
 // 🔹 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 };
+module.exports = { extensions, extensionsWithDot, regex, globPattern };

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

@@ -0,0 +1,36 @@
+import { use } from "react";
+import { createFromFetch } from "react-server-dom-webpack/client";
+import { hydrateRoot } from "react-dom/client";
+
+const cache = new Map();
+const route = window.location.href.replace(window.location.origin, "");
+
+function Root() {
+  let content = cache.get(route);
+  if (!content) {
+    content = createFromFetch(
+      fetch("/____rsc_payload_error____" + route, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown error",
+            stack: window.__DINOU_ERROR_STACK__ || "No stack trace available",
+          },
+        }),
+      })
+    );
+    cache.set(route, content);
+  }
+
+  return use(content);
+}
+
+hydrateRoot(document, <Root />);
+
+// HMR
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

package/dinou/core/client-webpack.jsx

@@ -0,0 +1,23 @@
+import { use } from "react";
+import { createFromFetch } from "react-server-dom-webpack/client";
+import { hydrateRoot } from "react-dom/client";
+
+const cache = new Map();
+const route = window.location.href.replace(window.location.origin, "");
+
+function Root() {
+  let content = cache.get(route);
+  if (!content) {
+    content = createFromFetch(fetch("/____rsc_payload____" + route));
+    cache.set(route, content);
+  }
+
+  return use(content);
+}
+
+hydrateRoot(document, <Root />);
+
+// HMR
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

package/dinou/core/get-asset-from-manifest.js

@@ -0,0 +1,25 @@
+const fs = require("fs");
+const path = require("path");
+
+let manifest = {};
+let read = false;
+const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
+
+function getAssetFromManifest(name) {
+  if (process.env.NODE_ENV === "production" && !read) {
+    const manifestPath = path.resolve(process.cwd(), "dist3/manifest.json");
+    if (fs.existsSync(manifestPath)) {
+      manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+      read = true;
+    }
+  } else if (isWebpack && !read) {
+    const manifestPath = path.resolve(process.cwd(), "public/manifest.json");
+    if (fs.existsSync(manifestPath)) {
+      manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+      read = true;
+    }
+  }
+  return "/" + (manifest[name] || name);
+}
+
+module.exports = getAssetFromManifest;

package/dinou/core/render-html.js

@@ -23,13 +23,14 @@ addHook({
   },
   publicPath: "/assets/",
 });
-
+const getAssetFromManifest = require("./get-asset-from-manifest.js");
 const { renderToPipeableStream } = require("react-dom/server");
 const getJSX = require("./get-jsx");
 const getSSGJSX = require("./get-ssg-jsx.js");
 const { getErrorJSX } = require("./get-error-jsx");
 const { renderJSXToClientJSX } = require("./render-jsx-to-client-jsx");
 const isDevelopment = process.env.NODE_ENV !== "production";
+const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
 
 function formatErrorHtml(error) {
   const message = error.message || "Unknown error";
@@ -157,7 +158,7 @@ async function renderToStream(reqPath, query, cookies = {}) {
                 writeErrorOutput(error, isProd);
                 process.exit(1);
               },
-              bootstrapModules: ["/error.js"],
+              bootstrapModules: [getAssetFromManifest("error.js")],
               bootstrapScriptContent: `window.__DINOU_ERROR_MESSAGE__=${JSON.stringify(
                 error.message || "Unknown error"
               )};window.__DINOU_ERROR_STACK__=${JSON.stringify(
@@ -175,8 +176,11 @@ async function renderToStream(reqPath, query, cookies = {}) {
         stream.pipe(process.stdout);
       },
       bootstrapModules: isDevelopment
-        ? ["/main.js", "/runtime.js"]
-        : ["/main.js"],
+        ? [
+            getAssetFromManifest("main.js"),
+            isWebpack ? undefined : getAssetFromManifest("runtime.js"),
+          ].filter(Boolean)
+        : [getAssetFromManifest("main.js")],
       ...(isDevelopment
         ? {
             bootstrapScriptContent: `window.HMR_WEBSOCKET_URL="ws://localhost:3001";`,

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

@@ -0,0 +1,23 @@
+// public/server-function-proxy.js
+import { createFromFetch } from "react-server-dom-webpack/client";
+
+export function createServerFunctionProxy(id) {
+  return new Proxy(() => {}, {
+    apply: async (_target, _thisArg, args) => {
+      const res = await fetch("/____server_function____", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id, args }),
+      });
+      if (!res.ok) throw new Error("Server function failed");
+
+      const contentType = res.headers.get("content-type") || "";
+
+      if (contentType.includes("text/x-component")) {
+        return createFromFetch(Promise.resolve(res));
+      } else {
+        return res.json();
+      }
+    },
+  });
+}

package/dinou/core/server.js

@@ -37,13 +37,13 @@ const generateStatic = require("./generate-static.js");
 const renderAppToHtml = require("./render-app-to-html.js");
 const revalidating = require("./revalidating.js");
 const isDevelopment = process.env.NODE_ENV !== "production";
-const webpackFolder = isDevelopment ? "public" : "dist3";
+const outputFolder = isDevelopment ? "public" : "dist3";
 const chokidar = require("chokidar");
 const { fileURLToPath } = require("url");
 if (isDevelopment) {
   const manifestPath = path.resolve(
     process.cwd(),
-    `${webpackFolder}/react-client-manifest.json`
+    `${outputFolder}/react-client-manifest.json`
   );
   let currentManifest = {};
 
@@ -151,7 +151,7 @@ const app = express();
 app.use(appUseCookieParser);
 app.use(express.json());
 
-app.use(express.static(path.resolve(process.cwd(), webpackFolder)));
+app.use(express.static(path.resolve(process.cwd(), outputFolder)));
 
 app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
   res.setHeader("Content-Type", "application/json");
@@ -159,7 +159,7 @@ app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
     name: "Dinou DevTools",
     description: "Dinou DevTools for Chrome",
     version: "1.0.0",
-    devtools_page: `/${webpackFolder}/devtools.html`,
+    devtools_page: `/${outputFolder}/devtools.html`,
   });
 });
 
@@ -189,7 +189,7 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
     );
     const manifest = JSON.parse(
       readFileSync(
-        path.resolve(`${webpackFolder}/react-client-manifest.json`),
+        path.resolve(`${outputFolder}/react-client-manifest.json`),
         "utf8"
       )
     );
@@ -209,10 +209,7 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
     ).replace("/____rsc_payload_error____", "");
     const jsx = await getErrorJSX(reqPath, { ...req.query }, req.body.error);
     const manifest = readFileSync(
-      path.resolve(
-        process.cwd(),
-        `${webpackFolder}/react-client-manifest.json`
-      ),
+      path.resolve(process.cwd(), `${outputFolder}/react-client-manifest.json`),
       "utf8"
     );
     const moduleMap = JSON.parse(manifest);
@@ -285,7 +282,7 @@ app.post("/____server_function____", async (req, res) => {
       const manifest = readFileSync(
         path.resolve(
           process.cwd(),
-          `${webpackFolder}/react-client-manifest.json`
+          `${outputFolder}/react-client-manifest.json`
         ),
         "utf8"
       );

package/dinou/esbuild/build.mjs

@@ -0,0 +1,65 @@
+import esbuild from "esbuild";
+import fs from "node:fs/promises";
+import getConfigEsbuildProd from "./helpers-esbuild/get-config-esbuild-prod.mjs";
+import getEsbuildEntries from "./helpers-esbuild/get-esbuild-entries.mjs";
+import { fileURLToPath } from "url";
+import path from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const outdir = "dist3";
+await fs.rm(outdir, { recursive: true, force: true });
+
+const frameworkEntryPoints = {
+  main: path.resolve(__dirname, "../core/client.jsx"),
+  error: path.resolve(__dirname, "../core/client-error.jsx"),
+  serverFunctionProxy: path.resolve(
+    __dirname,
+    "../core/server-function-proxy.js"
+  ),
+  runtime: path.resolve(__dirname, "react-refresh/react-refresh-runtime.mjs"),
+  "react-refresh-entry": path.resolve(
+    __dirname,
+    "react-refresh/react-refresh-entry.js"
+  ),
+};
+
+try {
+  const manifest = {};
+
+  const [esbuildEntries, detectedCSSEntries, detectedAssetEntries] =
+    await getEsbuildEntries({ manifest });
+
+  const componentEntryPoints = [...esbuildEntries].reduce(
+    (acc, dCE) => ({ ...acc, [dCE.outfileName]: dCE.absPath }),
+    {}
+  );
+
+  const cssEntryPoints = [...detectedCSSEntries].reduce(
+    (acc, dCSSE) => ({ ...acc, [dCSSE.outfileName]: dCSSE.absPath }),
+    {}
+  );
+
+  const assetEntryPoints = [...detectedAssetEntries].reduce(
+    (acc, dAE) => ({ ...acc, [dAE.outfileName]: dAE.absPath }),
+    {}
+  );
+
+  const entryPoints = {
+    ...frameworkEntryPoints,
+    ...componentEntryPoints,
+    ...cssEntryPoints,
+    ...assetEntryPoints,
+  };
+
+  await esbuild.build(
+    getConfigEsbuildProd({
+      entryPoints,
+      manifest,
+      outdir,
+    })
+  );
+} catch (err) {
+  console.error("Error in build:", err);
+}

package/dinou/esbuild/dev.mjs

@@ -0,0 +1,163 @@
+import esbuild from "esbuild";
+import fs from "node:fs/promises";
+import getConfigEsbuild from "./helpers-esbuild/get-config-esbuild.mjs";
+import getEsbuildEntries from "./helpers-esbuild/get-esbuild-entries.mjs";
+import chokidar from "chokidar";
+import path from "node:path";
+import { regex as assetRegex } from "../core/asset-extensions.js";
+import normalizePath from "./helpers-esbuild/normalize-path.mjs";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const outdir = "public";
+await fs.rm(outdir, { recursive: true, force: true });
+
+let currentCtx = null; // Track the active esbuild context
+let debounceTimer = null; // For debouncing recreations
+let clientComponentsPaths = [];
+
+const frameworkEntryPoints = {
+  main: path.resolve(__dirname, "../core/client.jsx"),
+  error: path.resolve(__dirname, "../core/client-error.jsx"),
+  serverFunctionProxy: path.resolve(
+    __dirname,
+    "../core/server-function-proxy.js"
+  ),
+  runtime: path.resolve(__dirname, "react-refresh/react-refresh-runtime.mjs"),
+  "react-refresh-entry": path.resolve(
+    __dirname,
+    "react-refresh/react-refresh-entry.js"
+  ),
+};
+
+const changedIds = new Set();
+const hmrEngine = { value: null };
+
+const watcher = chokidar.watch("src", {
+  ignoreInitial: true,
+  ignored: /node_modules|dist/,
+});
+
+const codeCssRegex = /.(js|jsx|ts|tsx|css|scss|less)$/i;
+
+// Function to (re)create esbuild context with current entries
+async function createEsbuildContext() {
+  try {
+    if (currentCtx) {
+      await currentCtx.dispose(); // Clean up old context
+      console.log("Disposed old esbuild context");
+    }
+
+    await fs.rm(outdir, { recursive: true, force: true });
+
+    const manifest = {};
+    const [esbuildEntries, detectedCSSEntries, detectedAssetEntries] =
+      await getEsbuildEntries({ manifest });
+
+    const componentEntryPoints = [...esbuildEntries].reduce(
+      (acc, dCE) => ({ ...acc, [dCE.outfileName]: dCE.absPath }),
+      {}
+    );
+
+    clientComponentsPaths = Object.values(componentEntryPoints);
+
+    const cssEntryPoints = [...detectedCSSEntries].reduce(
+      (acc, dCSSE) => ({ ...acc, [dCSSE.outfileName]: dCSSE.absPath }),
+      {}
+    );
+
+    const assetEntryPoints = [...detectedAssetEntries].reduce(
+      (acc, dAE) => ({ ...acc, [dAE.outfileName]: dAE.absPath }),
+      {}
+    );
+
+    const entryPoints = {
+      ...frameworkEntryPoints,
+      ...componentEntryPoints,
+      ...cssEntryPoints,
+      ...assetEntryPoints,
+    };
+
+    currentCtx = await esbuild.context(
+      getConfigEsbuild({
+        entryPoints,
+        manifest,
+        changedIds,
+        hmrEngine,
+      })
+    );
+
+    await currentCtx.watch();
+    // console.log("✓ Watching (changes will trigger rebuild)");
+  } catch (err) {
+    console.error("Error recreating context:", err);
+  }
+}
+
+// Initial setup on ready
+watcher.on("ready", async () => {
+  await createEsbuildContext();
+});
+
+const debounceRecreate = () => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(async () => {
+    await createEsbuildContext();
+  }, 300); // 300ms debounce — adjust as needed
+};
+
+const debounceRecreateAndReload = () => {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(async () => {
+    await createEsbuildContext();
+    hmrEngine.value.broadcastMessage({ type: "reload" });
+  }, 300);
+};
+
+watcher.on("add", (file) => {
+  const ext = path.extname(file);
+  if (codeCssRegex.test(ext) || assetRegex.test(ext)) {
+    // console.log(`New relevant file detected: ${file}. Recreating context...`);
+    debounceRecreateAndReload(file);
+  }
+});
+
+watcher.on("unlink", async (file) => {
+  const ext = path.extname(file);
+  if (codeCssRegex.test(ext) || assetRegex.test(ext)) {
+    // console.log(`File deleted: ${file}. Recreating context...`);
+    if (currentCtx) {
+      await currentCtx.dispose();
+      currentCtx = null;
+    }
+    debounceRecreate(file);
+  }
+});
+
+watcher.on("addDir", (dir) => {
+  // console.log(`New directory: ${dir}. Recreating context...`);
+  debounceRecreateAndReload(dir);
+});
+
+watcher.on("unlinkDir", async (dir) => {
+  // console.log(`Directory deleted: ${dir}. Recreating context...`);
+  if (currentCtx) {
+    await currentCtx.dispose();
+    currentCtx = null;
+  }
+  debounceRecreate(dir);
+});
+
+watcher.on("change", (file) => {
+  const resolvedFile = normalizePath(path.resolve(file));
+  // Check if changed file is a client component
+  const isClientModule = clientComponentsPaths.includes(resolvedFile);
+  if (isClientModule) {
+    changedIds.add(resolvedFile);
+    return;
+  }
+  // Server module, css module, or other file changed
+  debounceRecreateAndReload();
+});

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

@@ -0,0 +1,56 @@
+import { TsconfigPathsPlugin } from "@esbuild-plugins/tsconfig-paths";
+import reactClientManifestPlugin from "../plugins-esbuild/react-client-manifest-plugin.mjs";
+import serverFunctionsPlugin from "../plugins-esbuild/server-functions-plugin.mjs";
+import cssProcessorPlugin from "../plugins-esbuild/css-processor-plugin.mjs";
+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";
+
+const manifestData = {};
+
+export default function getConfigEsbuildProd({
+  entryPoints,
+  outdir = "dist3",
+  manifest = {},
+}) {
+  return {
+    entryPoints,
+    outdir,
+    format: "esm",
+    bundle: true,
+    splitting: true,
+    sourcemap: false,
+    chunkNames: "[name]-[hash]",
+    entryNames: "[name]-[hash]",
+    jsx: "automatic",
+    target: "es2022",
+    write: false,
+    conditions: ["style"],
+    metafile: true,
+    logLevel: "warning",
+    minify: true,
+    external: [
+      "/__SERVER_FUNCTION_PROXY__",
+      "/serverFunctionProxy.js",
+      "/__hmr_client__.js",
+      "/react-refresh-entry.js",
+    ],
+    plugins: [
+      copyStaticFiles({
+        src: "favicons",
+        dest: outdir,
+      }),
+      TsconfigPathsPlugin({}),
+      cssProcessorPlugin({ outdir }),
+      reactClientManifestPlugin({
+        manifest,
+        manifestPath: `${outdir}/react-client-manifest.json`,
+      }),
+      assetsPlugin(),
+      manifestGeneratorPlugin(manifestData),
+      serverFunctionsPlugin(manifestData),
+      writePlugin(),
+    ],
+  };
+}