dinou 3.0.0 → 3.0.2

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.2]
+
+### Fixed
+
+- Fix esbuild development change between server and client components.
+- Fix rollup development change between server and client components.
+- Fix CSS entries for webpack.
+
+## [3.0.1]
+
+### Fixed
+
+- esbuild doesn't give error when 'favicons' folder doesn't exist in root directory.
+
 ## [3.0.0]
 
 ### Added

package/dinou/core/generate-static-rsc.js

@@ -5,6 +5,7 @@ const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
 const { renderToPipeableStream } = require("react-server-dom-webpack/server");
 
 const OUT_DIR = path.resolve("dist2");
+const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
 
 async function generateStaticRSC(reqPath) {
   const finalReqPath = reqPath.endsWith("/") ? reqPath : reqPath + "/";
@@ -16,7 +17,14 @@ async function generateStaticRSC(reqPath) {
     // console.log("✅ JSX retrieved for:", finalReqPath);
 
     const manifest = JSON.parse(
-      fs.readFileSync(path.resolve("dist3/react-client-manifest.json"), "utf8")
+      fs.readFileSync(
+        path.resolve(
+          isWebpack
+            ? "dist3/react-client-manifest.json"
+            : "react_client_manifest/react-client-manifest.json"
+        ),
+        "utf8"
+      )
     );
 
     fs.mkdirSync(path.dirname(payloadPath), { recursive: true });

package/dinou/core/generate-static-rscs.js

@@ -5,10 +5,18 @@ const getSSGJSXOrJSX = require("./get-ssg-jsx-or-jsx.js");
 const { renderToPipeableStream } = require("react-server-dom-webpack/server");
 
 const OUT_DIR = path.resolve("dist2");
+const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
 
 async function generateStaticRSCs(routes) {
   const manifest = JSON.parse(
-    fs.readFileSync(path.resolve("dist3/react-client-manifest.json"), "utf8")
+    fs.readFileSync(
+      path.resolve(
+        isWebpack
+          ? "dist3/react-client-manifest.json"
+          : "react_client_manifest/react-client-manifest.json"
+      ),
+      "utf8"
+    )
   );
 
   for (const route of routes) {

package/dinou/core/server.js

@@ -40,68 +40,120 @@ const isDevelopment = process.env.NODE_ENV !== "production";
 const outputFolder = isDevelopment ? "public" : "dist3";
 const chokidar = require("chokidar");
 const { fileURLToPath } = require("url");
+const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
 if (isDevelopment) {
   const manifestPath = path.resolve(
     process.cwd(),
-    `${outputFolder}/react-client-manifest.json`
+    isWebpack
+      ? `${outputFolder}/react-client-manifest.json`
+      : `react_client_manifest/react-client-manifest.json`
+  );
+  const manifestFolderPath = path.resolve(
+    process.cwd(),
+    isWebpack ? outputFolder : "react_client_manifest"
   );
-  let currentManifest = {};
-
-  const watcher = chokidar.watch(manifestPath, { persistent: true });
-  let isInitial = true;
 
-  watcher.on("add", () => {
-    if (Object.keys(currentManifest).length === 0 && isInitial) {
-      // console.log("Initial manifest loaded.");
-      currentManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
-      isInitial = false;
-      return;
+  let manifestWatcher = null;
+
+  function startManifestWatcher() {
+    let currentManifest = {};
+    let isInitial = true;
+    // Si ya existe un watcher viejo, ciérralo primero
+    if (manifestWatcher) {
+      try {
+        manifestWatcher.close();
+      } catch (e) {
+        console.warn("Failed closing old watcher:", e);
+      }
     }
-  });
 
-  function getParents(resolvedPath) {
-    const parents = [];
-    Object.values(require.cache).forEach((mod) => {
-      if (
-        mod.children &&
-        mod.children.some((child) => child.id === resolvedPath)
-      ) {
-        parents.push(mod.id);
-      }
+    // console.log("[Watcher] Starting watcher");
+
+    manifestWatcher = chokidar.watch(manifestFolderPath, {
+      persistent: true,
+      ignored: /node_modules/,
     });
-    return parents;
-  }
 
-  function clearRequireCache(modulePath, visited = new Set()) {
-    try {
-      const resolved = require.resolve(modulePath);
-      if (visited.has(resolved)) return;
-      visited.add(resolved);
-
-      if (require.cache[resolved]) {
-        delete require.cache[resolved];
-        // console.log(`[Server HMR] Cleared cache for ${resolved}`);
-
-        const parents = getParents(resolved);
-        for (const parent of parents) {
-          // Optional: Skip if parent not in src/ (safety)
-          if (parent.startsWith(path.resolve(process.cwd(), "src"))) {
-            clearRequireCache(parent, visited);
+    async function loadManifestWithRetry({
+      manifestPath,
+      maxRetries = 10,
+      delayMs = 100,
+    } = {}) {
+      let attempts = 0;
+      while (attempts < maxRetries) {
+        try {
+          // console.log(`Attempting to load manifest (try ${attempts + 1})...`);
+          return JSON.parse(readFileSync(manifestPath, "utf8"));
+        } catch (err) {
+          if (err.code !== "ENOENT") {
+            throw err; // Rethrow if it's not a file not found error
           }
+          attempts++;
+          if (attempts >= maxRetries) {
+            throw err; // Rethrow after max retries
+          }
+          // Wait for the specified delay before retrying
+          await new Promise((resolve) => setTimeout(resolve, delayMs));
         }
       }
-    } catch (err) {
-      console.warn(
-        `[Server HMR] Could not resolve or clear ${modulePath}: ${err.message}`
-      );
     }
-  }
 
-  watcher.on("change", () => {
-    try {
-      const newManifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+    function getParents(resolvedPath) {
+      const parents = [];
+      Object.values(require.cache).forEach((mod) => {
+        if (
+          mod.children &&
+          mod.children.some((child) => child.id === resolvedPath)
+        ) {
+          parents.push(mod.id);
+        }
+      });
+      return parents;
+    }
+
+    function clearRequireCache(modulePath, visited = new Set()) {
+      try {
+        const resolved = require.resolve(modulePath);
+        if (visited.has(resolved)) return;
+        visited.add(resolved);
+
+        if (require.cache[resolved]) {
+          delete require.cache[resolved];
+          // console.log(`[Server HMR] Cleared cache for ${resolved}`);
+
+          const parents = getParents(resolved);
+          for (const parent of parents) {
+            // Optional: Skip if parent not in src/ (safety)
+            if (parent.startsWith(path.resolve(process.cwd(), "src"))) {
+              clearRequireCache(parent, visited);
+            }
+          }
+        }
+      } catch (err) {
+        console.warn(
+          `[Server HMR] Could not resolve or clear ${modulePath}: ${err.message}`
+        );
+      }
+    }
+
+    let manifestTimeout;
+
+    function readJSONWithRetry(pathToRead, retries = 4, delay = 10) {
+      for (let i = 0; i < retries; i++) {
+        try {
+          const text = readFileSync(pathToRead, "utf8");
+          if (!text.trim()) throw new Error("Empty JSON");
+          return JSON.parse(text);
+        } catch (err) {
+          if (i === retries - 1) throw err;
+          // tiny sleep
+          Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, delay);
+        }
+      }
+    }
 
-      // Handle removed entries: client -> server switch
+    function handleManifestUpdate(newManifest) {
+      // console.log("handle manifest update", newManifest, currentManifest);
       for (const key in currentManifest) {
         if (!(key in newManifest)) {
           const absPath = fileURLToPath(key);
@@ -120,30 +172,50 @@ if (isDevelopment) {
       }
 
       currentManifest = newManifest;
-    } catch (err) {
-      console.error("Error handling manifest change:", err);
     }
-  });
-
-  const srcWatcher = chokidar.watch(path.resolve(process.cwd(), "src"), {
-    persistent: true,
-    ignored: /node_modules/,
-  });
-
-  srcWatcher.on("change", (changedPath) => {
-    const posixPath = changedPath.split(path.sep).join(path.posix.sep);
 
-    const isClientComponent = Object.keys(currentManifest).some((key) =>
-      key.includes(posixPath)
-    );
-
-    if (!isClientComponent) {
-      clearRequireCache(changedPath);
-      // console.log(
-      //   `[Server HMR] Cleared cache for ${changedPath} in srcWatcher`
-      // );
+    async function onManifestChange(chokidarPath, stats, delayMs = 100) {
+      if (isWebpack && chokidarPath !== manifestPath) return;
+      if (Object.keys(currentManifest).length === 0 && isInitial) {
+        try {
+          currentManifest = await loadManifestWithRetry({
+            manifestPath,
+            delayMs,
+          });
+          // console.log("Loaded initial manifest for HMR.", currentManifest);
+          isInitial = false;
+        } catch (err) {
+          console.error("Failed to load initial manifest after retries:", err);
+        }
+        return;
+      }
+      try {
+        // console.log("change event");
+        clearTimeout(manifestTimeout);
+
+        manifestTimeout = setTimeout(() => {
+          try {
+            const newManifest = readJSONWithRetry(manifestPath);
+            handleManifestUpdate(newManifest);
+          } catch (err) {
+            console.error("Manifest not ready:", err.message);
+          }
+        }, 50);
+      } catch (err) {
+        console.error("Error handling manifest change:", err);
+      }
     }
-  });
+
+    manifestWatcher.on("add", onManifestChange);
+    manifestWatcher.on("unlinkDir", startManifestWatcher);
+    manifestWatcher.on("unlink", () => {
+      isInitial = true;
+      currentManifest = {};
+    });
+    // manifestWatcher.on("all", (event) => console.log("event", event));
+    manifestWatcher.on("change", onManifestChange);
+  }
+  startManifestWatcher();
 }
 const cookieParser = require("cookie-parser");
 const appUseCookieParser = cookieParser();
@@ -189,7 +261,11 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
     );
     const manifest = JSON.parse(
       readFileSync(
-        path.resolve(`${outputFolder}/react-client-manifest.json`),
+        path.resolve(
+          isWebpack
+            ? `${outputFolder}/react-client-manifest.json`
+            : `react_client_manifest/react-client-manifest.json`
+        ),
         "utf8"
       )
     );
@@ -209,7 +285,12 @@ 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(), `${outputFolder}/react-client-manifest.json`),
+      path.resolve(
+        process.cwd(),
+        isWebpack
+          ? `${outputFolder}/react-client-manifest.json`
+          : `react_client_manifest/react-client-manifest.json`
+      ),
       "utf8"
     );
     const moduleMap = JSON.parse(manifest);
@@ -282,7 +363,9 @@ app.post("/____server_function____", async (req, res) => {
       const manifest = readFileSync(
         path.resolve(
           process.cwd(),
-          `${outputFolder}/react-client-manifest.json`
+          isWebpack
+            ? `${outputFolder}/react-client-manifest.json`
+            : `react_client_manifest/react-client-manifest.json`
         ),
         "utf8"
       );

package/dinou/esbuild/build.mjs

@@ -10,6 +10,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 });
 
 const frameworkEntryPoints = {
   main: path.resolve(__dirname, "../core/client.jsx"),

package/dinou/esbuild/dev.mjs

@@ -6,17 +6,19 @@ 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";
+import { fileURLToPath, pathToFileURL } from "url";
 
 const __filename = fileURLToPath(import.meta.url);
 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 });
 
 let currentCtx = null; // Track the active esbuild context
 let debounceTimer = null; // For debouncing recreations
 let clientComponentsPaths = [];
+let currentServerFiles = new Set();
 
 const frameworkEntryPoints = {
   main: path.resolve(__dirname, "../core/client.jsx"),
@@ -42,44 +44,57 @@ const watcher = chokidar.watch("src", {
 
 const codeCssRegex = /.(js|jsx|ts|tsx|css|scss|less)$/i;
 
+let manifest = {};
+let entryPoints = {};
+
+async function updateEntriesAndComponents() {
+  manifest = {};
+  const [
+    esbuildEntries,
+    detectedCSSEntries,
+    detectedAssetEntries,
+    serverFiles,
+  ] = await getEsbuildEntries({ manifest });
+
+  currentServerFiles = new Set(
+    serverFiles.map((f) => normalizePath(path.resolve(f)))
+  );
+
+  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 }),
+    {}
+  );
+
+  entryPoints = {
+    ...frameworkEntryPoints,
+    ...componentEntryPoints,
+    ...cssEntryPoints,
+    ...assetEntryPoints,
+  };
+}
+
 // 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");
+      // 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,
-    };
-
+    // console.log("manifest before creating context:", manifest);
     currentCtx = await esbuild.context(
       getConfigEsbuild({
         entryPoints,
@@ -98,6 +113,7 @@ async function createEsbuildContext() {
 
 // Initial setup on ready
 watcher.on("ready", async () => {
+  await updateEntriesAndComponents();
   await createEsbuildContext();
 });
 
@@ -116,11 +132,12 @@ const debounceRecreateAndReload = () => {
   }, 300);
 };
 
-watcher.on("add", (file) => {
+watcher.on("add", async (file) => {
   const ext = path.extname(file);
   if (codeCssRegex.test(ext) || assetRegex.test(ext)) {
     // console.log(`New relevant file detected: ${file}. Recreating context...`);
-    debounceRecreateAndReload(file);
+    await updateEntriesAndComponents();
+    debounceRecreateAndReload();
   }
 });
 
@@ -128,33 +145,59 @@ watcher.on("unlink", async (file) => {
   const ext = path.extname(file);
   if (codeCssRegex.test(ext) || assetRegex.test(ext)) {
     // console.log(`File deleted: ${file}. Recreating context...`);
+    await updateEntriesAndComponents();
     if (currentCtx) {
       await currentCtx.dispose();
       currentCtx = null;
     }
-    debounceRecreate(file);
+    debounceRecreate();
   }
 });
 
-watcher.on("addDir", (dir) => {
+watcher.on("addDir", async () => {
   // console.log(`New directory: ${dir}. Recreating context...`);
-  debounceRecreateAndReload(dir);
+  await updateEntriesAndComponents();
+  debounceRecreateAndReload();
 });
 
-watcher.on("unlinkDir", async (dir) => {
+watcher.on("unlinkDir", async () => {
   // console.log(`Directory deleted: ${dir}. Recreating context...`);
+  await updateEntriesAndComponents();
   if (currentCtx) {
     await currentCtx.dispose();
     currentCtx = null;
   }
-  debounceRecreate(dir);
+  debounceRecreate();
 });
 
-watcher.on("change", (file) => {
+function existsInManifest(resolvedFile, manifest) {
+  const manifestKey = pathToFileURL(resolvedFile).href;
+  // console.log("Checking manifest for key:", manifestKey);
+  for (const key of Object.keys(manifest)) {
+    if (key === manifestKey) {
+      return true;
+    }
+  }
+  return false;
+}
+
+watcher.on("change", async (file) => {
   const resolvedFile = normalizePath(path.resolve(file));
+  const oldManifest = { ...manifest };
+  await updateEntriesAndComponents();
   // Check if changed file is a client component
   const isClientModule = clientComponentsPaths.includes(resolvedFile);
-  if (isClientModule) {
+  const isServerModule = currentServerFiles.has(resolvedFile);
+  // console.log(
+  //   `File changed: ${resolvedFile} | Client Module: ${isClientModule} | Server Module: ${isServerModule}`
+  // );
+  // console.log("currentServerFiles:", currentServerFiles);
+
+  if (
+    isClientModule &&
+    !isServerModule &&
+    existsInManifest(resolvedFile, oldManifest)
+  ) {
     changedIds.add(resolvedFile);
     return;
   }

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

@@ -6,6 +6,7 @@ import assetsPlugin from "../plugins-esbuild/assets-plugin.mjs";
 import copyStaticFiles from "esbuild-copy-static-files";
 import manifestGeneratorPlugin from "../plugins-esbuild/manifest-generator-plugin.mjs";
 import writePlugin from "../plugins-esbuild/write-plugin.mjs";
+import { existsSync } from "node:fs";
 
 const manifestData = {};
 
@@ -14,6 +15,29 @@ export default function getConfigEsbuildProd({
   outdir = "dist3",
   manifest = {},
 }) {
+  let plugins = [
+    TsconfigPathsPlugin({}),
+    cssProcessorPlugin({ outdir }),
+    reactClientManifestPlugin({
+      manifest,
+      manifestPath: `react_client_manifest/react-client-manifest.json`,
+    }),
+    assetsPlugin(),
+    manifestGeneratorPlugin(manifestData),
+    serverFunctionsPlugin(manifestData),
+    writePlugin(),
+  ];
+
+  if (existsSync("favicons")) {
+    plugins = [
+      copyStaticFiles({
+        src: "favicons",
+        dest: outdir,
+      }),
+      ...plugins,
+    ];
+  }
+
   return {
     entryPoints,
     outdir,
@@ -36,21 +60,6 @@ export default function getConfigEsbuildProd({
       "/__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(),
-    ],
+    plugins,
   };
 }

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

@@ -7,6 +7,7 @@ import stableChunkNamesAndMapsPlugin from "../plugins-esbuild/stable-chunk-names
 import assetsPlugin from "../plugins-esbuild/assets-plugin.mjs";
 import skipMissingEntryPointsPlugin from "../plugins-esbuild/skip-missing-entry-points-plugin.mjs";
 import copyStaticFiles from "esbuild-copy-static-files";
+import { existsSync } from "node:fs";
 
 export default function getConfigEsbuild({
   entryPoints,
@@ -15,6 +16,27 @@ export default function getConfigEsbuild({
   changedIds,
   hmrEngine,
 }) {
+  let plugins = [
+    skipMissingEntryPointsPlugin(),
+    TsconfigPathsPlugin({}),
+    cssProcessorPlugin(),
+    reactClientManifestPlugin({ manifest }),
+    assetsPlugin(),
+    stableChunkNamesAndMapsPlugin(),
+    serverFunctionsPlugin(),
+    esmHmrPlugin({ entryName: "main", changedIds, hmrEngine }),
+  ];
+
+  if (existsSync("favicons")) {
+    plugins = [
+      copyStaticFiles({
+        src: "favicons",
+        dest: outdir,
+      }),
+      ...plugins,
+    ];
+  }
+
   return {
     entryPoints,
     outdir,
@@ -37,19 +59,6 @@ export default function getConfigEsbuild({
       "/__hmr_client__.js",
       "/react-refresh-entry.js",
     ],
-    plugins: [
-      copyStaticFiles({
-        src: "favicons",
-        dest: outdir,
-      }),
-      skipMissingEntryPointsPlugin(),
-      TsconfigPathsPlugin({}),
-      cssProcessorPlugin(),
-      reactClientManifestPlugin({ manifest }),
-      assetsPlugin(),
-      stableChunkNamesAndMapsPlugin(),
-      serverFunctionsPlugin(),
-      esmHmrPlugin({ entryName: "main", changedIds, hmrEngine }),
-    ],
+    plugins,
   };
 }