dinou 6.1.1 → 7.1.0

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

@@ -1,25 +1,81 @@
 // plugins-esbuild/esm-hmr-plugin.mjs
 import fs from "node:fs/promises";
+import fsSync from "node:fs";
 import path from "node:path";
-import { transformSync } from "@swc/core";
+import { transform } from "@swc/core";
 import { createServer } from "node:http";
 import { EsmHmrEngine } from "./esm-hmr/server.js";
 import { fileURLToPath } from "node:url";
 import write from "../helpers-esbuild/write.mjs";
 import normalizePath from "../helpers-esbuild/normalize-path.mjs";
+import stripNamespace from "../helpers-esbuild/strip-namespace.mjs";
 
 const norm = (p) => path.resolve(p).replace(/\\/g, "/");
+const normKey = (p) => {
+  if (!p) return "";
+  let s = path.resolve(p).replace(/\\/g, "/");
+  if (process.platform === "win32") {
+    s = s.replace(/^([a-zA-Z]):/, (_, d) => d.toLowerCase() + ":");
+  }
+  return s;
+};
+
 let serverStarted = false;
 
+const swcGlobalCache = new Map();
+let swcCacheLoaded = false;
+let swcCacheDirty = false;
+
+function getSwcCachePath() {
+  const dir = path.resolve(process.cwd(), ".dinou/cache");
+  return { dir, file: path.join(dir, "swc-dev-cache.json") };
+}
+
+function loadSwcCache() {
+  if (swcCacheLoaded) return;
+  swcCacheLoaded = true;
+  try {
+    const { file } = getSwcCachePath();
+    if (fsSync.existsSync(file)) {
+      const parsed = JSON.parse(fsSync.readFileSync(file, "utf8"));
+      for (const [k, v] of Object.entries(parsed)) {
+        swcGlobalCache.set(k, v);
+      }
+    }
+  } catch (e) {}
+}
+
+async function saveSwcCache() {
+  if (!swcCacheDirty) return;
+  swcCacheDirty = false;
+  try {
+    const { dir, file } = getSwcCachePath();
+    if (!fsSync.existsSync(dir)) {
+      fsSync.mkdirSync(dir, { recursive: true });
+    }
+    const data = {};
+    for (const [k, v] of swcGlobalCache.entries()) {
+      data[k] = v;
+    }
+    await fs.writeFile(file, JSON.stringify(data), "utf8");
+  } catch (e) {}
+}
+
 export default function esmHmrPlugin({
   entryNames = ["main", "error"],
   changedIds,
   hmrEngine,
+  hmrPort,
 } = {}) {
+  const port = hmrPort || Number(process.env.HMR_PORT || (Number(process.env.PORT || 3000) + 1));
+
   return {
     name: "esm-hmr",
 
     setup(build) {
+      let isInitialBuild = true;
+      let swcTotalTime = 0;
+      let swcCount = 0;
       const outdir = build.initialOptions.outdir || ".dinou/public";
       const entryPoints = build.initialOptions.entryPoints;
 
@@ -29,94 +85,69 @@ export default function esmHmrPlugin({
 
       if (!serverStarted) {
         const server = createServer();
+        server.on("error", (err) => {
+          if (err.code === "EADDRINUSE") {
+            console.warn(`⚠️ [esm-hmr] Port ${port} already in use. HMR may be affected if another server is running.`);
+          } else {
+            console.error("❌ [esm-hmr] Server error:", err);
+          }
+        });
         hmrEngine.value = new EsmHmrEngine({ server });
-        server.listen(3001, () => {
-          // console.log("[esm-hmr] WebSocket server listening on port 3001");
+        hmrEngine.value.server = server;
+        server.listen(port, () => {
+          // console.log(`[esm-hmr] WebSocket server listening on port ${port}`);
         });
         serverStarted = true;
       }
 
-      build.onStart(async () => {
-        for (const entryName of entryNames) {
-          const entryPath = entryPoints?.[entryName];
-          if (!entryPath) return;
-
-          const absPath = path.resolve(entryPath);
-          entryAbsPaths.push(absPath);
-          entrySources.push(await fs.readFile(absPath, "utf8"));
-          entryOutputNames.push(entryName + ".js");
-        }
-      });
-
-      build.onLoad({ filter: /.*/ }, async (args) => {
-        const abs = path.resolve(args.path);
+      const rootEntryMap = new Map();
+      let entryPointsSet = null;
 
-        const absNorm = norm(abs);
+      let onLoadCount = 0;
+      let onLoadTime = 0;
 
-        // 1. Check if it is a ROOT Entry (client.jsx or error.tsx)
-        // These are the ones saved in 'entryAbsPaths'
-        const rootIndex = entryAbsPaths.findIndex(
-          (entryPath) => norm(entryPath) === absNorm,
-        );
+      build.onStart(async () => {
+        swcTotalTime = 0;
+        swcCount = 0;
+        onLoadCount = 0;
+        onLoadTime = 0;
+        if (!entryPointsSet) {
+          entryPointsSet = new Set(
+            Object.values(entryPoints || {}).map((val) => normKey(path.resolve(val)))
+          );
+        }
+        if (rootEntryMap.size === 0) {
+          for (const entryName of entryNames) {
+            const entryPath = entryPoints?.[entryName];
+            if (!entryPath) continue;
 
-        // CASE A: It is Main or Error (Roots)
-        if (rootIndex !== -1) {
-          const source = entrySources[rootIndex];
-          if (source) {
-            let injectCode = `import { createHotContext } from "/__hmr_client__.js";\n`;
-            injectCode += `window.__hotContext = createHotContext;\n`;
-
-            // IMPORTANT: We return RAW 'source' + injection.
-            // Without passing through Babel/SWC to prevent $RefreshSig$ from breaking initialization.
-            return {
-              contents: injectCode + source,
-              loader: "jsx",
-            };
+            const absPath = path.resolve(entryPath);
+            const source = await fs.readFile(absPath, "utf8");
+            entryAbsPaths.push(absPath);
+            entrySources.push(source);
+            entryOutputNames.push(entryName + ".js");
+            rootEntryMap.set(normKey(absPath), source);
           }
-          return null;
         }
+      });
 
-        // 2. Check if it is any OTHER Entry Point from the esbuild configuration
-        // (Here are your pages, layouts, components...)
-        const isAnEntryPoint = Object.values(entryPoints).some(
-          (val) => norm(path.resolve(val)) === absNorm,
-        );
+      build.onLoad({ filter: /[/\\]client\.[jt]sx?$/i }, async (args) => {
+        const abs = path.resolve(args.path);
+        const absNorm = normKey(abs);
 
-        // CASE B: It is a user page or component
-        if (isAnEntryPoint) {
-          // HERE we DO apply SWC transformation to enable React Fast Refresh
-          const source = await fs.readFile(args.path, "utf8");
-          try {
-            const { code } = transformSync(source, {
-              filename: abs,
-              jsc: {
-                parser: {
-                  syntax: "typescript",
-                  tsx: true,
-                  dynamicImport: true,
-                },
-                target: "es2022",
-                transform: {
-                  react: {
-                    refresh: true,
-                    development: true,
-                    runtime: "automatic",
-                  },
-                },
-              },
-            });
+        // Check if it is a ROOT Entry (client.jsx)
+        const rootSource = rootEntryMap.get(absNorm);
+        if (rootSource) {
+          let injectCode = `import { createHotContext } from "/__hmr_client__.js";\n`;
+          injectCode += `window.__hotContext = createHotContext;\n`;
 
-            return {
-              contents: code,
-              loader: "js",
-            };
-          } catch (e) {
-            console.error("SWC Error:", e);
-            return null;
-          }
+          return {
+            contents: injectCode + rootSource,
+            loader: "jsx",
+            watchFiles: [abs],
+          };
         }
 
-        // CASE C: It is not an entry point (libraries, internal helpers, node_modules...)
         return null;
       });
 
@@ -126,7 +157,15 @@ export default function esmHmrPlugin({
           path.dirname(fileURLToPath(import.meta.url)),
           "./esm-hmr/client.mjs",
         );
-        const clientCode = await fs.readFile(clientPath, "utf8");
+        let clientCode = await fs.readFile(clientPath, "utf8");
+        const isDebug =
+          process.env.DINOU_DEBUG === "true" ||
+          process.env.DINOU_DEBUG === "1" ||
+          process.env.DEBUG === "true" ||
+          process.env.DEBUG === "1";
+        if (isDebug) {
+          clientCode = `window.__DINOU_DEBUG__ = true;\n` + clientCode;
+        }
         const assetPath = path.join(outdir, "__hmr_client__.js");
         result.outputFiles.push({
           path: assetPath,
@@ -135,6 +174,7 @@ export default function esmHmrPlugin({
       });
 
       build.onEnd(async (result) => {
+        const tWrap0 = Date.now();
         if (!result.metafile) {
           // console.warn(
           //   "[hmr-plugin] Metafile is missing. Enable 'metafile: true'"
@@ -144,15 +184,17 @@ export default function esmHmrPlugin({
         const bundleFiles = Object.keys(result.metafile.outputs);
         const normalizeRel = (p) => p.replace(/\\/g, "/");
 
+        const outputFilesByRelPath = new Map();
+        for (const f of result.outputFiles) {
+          outputFilesByRelPath.set(normalizeRel(path.relative(process.cwd(), f.path)), f);
+        }
+
         for (const bF of bundleFiles) {
           if (!bF.endsWith(".js")) {
             continue;
           }
           const relPath = normalizeRel(bF);
-          const outputFile = result.outputFiles.find(
-            (f) =>
-              normalizeRel(path.relative(process.cwd(), f.path)) === relPath,
-          );
+          const outputFile = outputFilesByRelPath.get(relPath);
           if (!outputFile) continue;
           const baseName = path.basename(bF, ".js");
 
@@ -160,27 +202,47 @@ export default function esmHmrPlugin({
           const outfile_basename = path.basename(outfile);
           const urlId = "/" + outfile_basename;
           const safeId = JSON.stringify(urlId);
-          const frameworkEntries = [
+          const frameworkEntries = new Set([
             "main.js",
-            "error.js",
             "serverFunctionProxy.js",
             "runtime.js",
             "react-refresh-entry.js",
-          ];
-          if (frameworkEntries.some((e) => e === outfile_basename)) continue;
+          ]);
+          if (frameworkEntries.has(outfile_basename)) continue;
+
+          // Only wrap user component chunks that contain actual app code (not third-party libraries/vendor)
+          const outputInfo = result.metafile.outputs[bF];
+          const inputFiles = Object.keys(outputInfo?.inputs || {});
+          const hasUserCode = inputFiles.some(
+            (f) =>
+              !f.includes("node_modules") &&
+              !f.includes("/dinou/core/") &&
+              !f.includes("\\dinou\\core\\") &&
+              /\.(jsx?|tsx?)$/.test(f)
+          );
+          if (!hasUserCode) continue;
+
           const source = new TextDecoder().decode(outputFile.contents);
+          if (source.includes("__reactRefreshRuntime")) {
+            continue;
+          }
 
           const imports = Array.from(
             source.matchAll(/import\s+["'](.+?)["']/g),
           ).map((m) => m[1]);
 
-          hmrEngine.value.setEntry(urlId, imports, true);
+          if (hmrEngine.value) {
+            hmrEngine.value.setEntry(urlId, imports, true);
+            const acceptedEntry = hmrEngine.value.getEntry(urlId, true);
+            if (acceptedEntry) acceptedEntry.isHmrAccepted = true;
+          }
           const wrappedCode = `
           const RefreshRuntime = window.__reactRefreshRuntime;
           let prevRefreshReg = window.$RefreshReg$;
           let prevRefreshSig = window.$RefreshSig$;
           window.$RefreshReg$ = (type, id) => {
-            RefreshRuntime.register(type, ${safeId} + '#' + id);
+            const fullId = (id && id.includes('#')) ? id : (${safeId} + '#' + id);
+            RefreshRuntime.register(type, fullId);
           };
           window.$RefreshSig$ = RefreshRuntime?.createSignatureFunctionForTransform;
           if (!import.meta.hot) import.meta.hot = window.__hotContext?.(${safeId});
@@ -200,49 +262,124 @@ export default function esmHmrPlugin({
           window.$RefreshReg$ = prevRefreshReg;
           window.$RefreshSig$ = prevRefreshSig;
         `;
-          outputFile.contents = new TextEncoder().encode(wrappedCode);
+          const encodedWrapped = new TextEncoder().encode(wrappedCode);
+          outputFile.contents = encodedWrapped;
         }
+        globalThis.__DINOU_WRAP_TIME__ = Date.now() - tWrap0;
       });
 
       build.onEnd(write);
 
       build.onEnd(async (result) => {
+        const tBroadcast0 = Date.now();
+        if (!globalThis.__DINOU_SWC_TIME__) {
+          globalThis.__DINOU_SWC_TIME__ = swcTotalTime;
+          globalThis.__DINOU_SWC_COUNT__ = swcCount;
+        }
+        if (isInitialBuild) {
+          isInitialBuild = false;
+          changedIds?.clear();
+          return;
+        }
+
         if (!result.metafile) {
-          // console.warn(
-          //   "[hmr-plugin] Metafile is missing. Enable 'metafile: true'"
-          // );
           return;
         }
 
         if (changedIds.size === 0) return;
+
+        // If only CSS files were modified, styles are updated via style-update in cssProcessorPlugin.
+        // Do NOT trigger full reload or JS component updates.
+        const isCssOnly = Array.from(changedIds).every((id) => {
+          const lower = id.toLowerCase();
+          return (
+            (lower.endsWith(".css") || lower.endsWith(".scss") || lower.endsWith(".less")) &&
+            !lower.endsWith(".module.css")
+          );
+        });
+        if (isCssOnly) {
+          changedIds.clear();
+          return;
+        }
+
         const bundleFiles = Object.keys(result.metafile.outputs);
         const pendingUpdateUrls = new Set();
         let needsFullReload = false;
+
+        const frameworkEntries = new Set([
+          "main.js",
+          "serverFunctionProxy.js",
+          "runtime.js",
+          "react-refresh-entry.js",
+        ]);
+
         for (const fileName of bundleFiles) {
+          // Only inspect actual JavaScript output chunks (skip sourcemaps, css, images, etc.)
+          if (!fileName.endsWith(".js") || fileName.endsWith(".js.map")) {
+            continue;
+          }
+          const baseName = path.basename(fileName);
+          if (frameworkEntries.has(baseName)) {
+            continue;
+          }
+
           const chunk = result.metafile.outputs[fileName];
           const modules = Object.keys(chunk?.inputs ?? {});
 
-          for (const modulePath of modules) {
-            if (changedIds.has(normalizePath(path.resolve(modulePath)))) {
-              const url = "/" + path.relative(outdir, fileName);
-              const entry = hmrEngine.value.getEntry(url);
-              if (entry?.isHmrAccepted) {
-                pendingUpdateUrls.add(url);
-              } else {
-                needsFullReload = true;
-              }
+          const isChangedByModule = modules.some((modulePath) => {
+            const cleanPath = stripNamespace(modulePath);
+            const norm = normKey(cleanPath);
+            const lower = norm.toLowerCase();
+            if (
+              (lower.endsWith(".css") || lower.endsWith(".scss") || lower.endsWith(".less")) &&
+              !lower.endsWith(".module.css")
+            ) {
+              return false;
+            }
+            return changedIds.has(norm);
+          });
+
+          if (isChangedByModule) {
+            const url = "/" + path.relative(outdir, fileName).replace(/\\/g, "/");
+            const baseNameUrl = "/" + baseName;
+            const entry = hmrEngine.value.getEntry(url) || hmrEngine.value.getEntry(baseNameUrl);
+            if (entry?.isHmrAccepted) {
+              pendingUpdateUrls.add(baseNameUrl);
+            } else {
+              needsFullReload = true;
             }
           }
         }
 
-        if (needsFullReload || pendingUpdateUrls.size === 0) {
-          hmrEngine.value.broadcastMessage({ type: "reload" });
-        } else {
+        const timelineTime = () => new Date().toTimeString().slice(0, 8) + "." + String(Date.now() % 1000).padStart(3, "0");
+        const timelineRel = () => globalThis.__TIMELINE_T0__ ? `[+${Date.now() - globalThis.__TIMELINE_T0__}ms]` : ``;
+
+        const isDebug =
+          process.env.DINOU_DEBUG === "true" ||
+          process.env.DINOU_DEBUG === "1" ||
+          process.env.DEBUG === "true" ||
+          process.env.DEBUG === "1";
+
+        if (pendingUpdateUrls.size > 0 && !needsFullReload) {
           for (const url of pendingUpdateUrls) {
+            if (isDebug) {
+              console.log(`⏱️ [TIMELINE ${timelineTime()}] ${timelineRel()} ⚡ [HMR Broadcast] Sending update to browser: ${url}`);
+            } else {
+              console.log(`⚡ [HMR] Updating client component: ${url}`);
+            }
             hmrEngine.value.broadcastMessage({ type: "update", url });
           }
+        } else if (needsFullReload) {
+          if (isDebug) {
+            console.log(`⏱️ [TIMELINE ${timelineTime()}] ${timelineRel()} ⚡ [HMR Broadcast] Full reload triggered (needsFullReload: ${needsFullReload})`);
+          } else {
+            console.log(`⚡ [HMR] Full reload triggered`);
+          }
+          hmrEngine.value.broadcastMessage({ type: "reload" });
         }
+        saveSwcCache().catch(() => {});
         changedIds.clear();
+        globalThis.__DINOU_BROADCAST_TIME__ = Date.now() - tBroadcast0;
       });
     },
   };

package/dinou/esbuild/react-refresh/is-react-refresh-boundary.mjs

@@ -9,12 +9,26 @@ export function isReactRefreshBoundary(RefreshRuntime, moduleExports) {
   let hasExports = false;
   let areAllExportsComponents = true;
   for (const key in moduleExports) {
-    if (key === "__esModule") continue;
+    if (
+      key === "__esModule" ||
+      key === "metadata" ||
+      key === "revalidate" ||
+      key === "dynamic" ||
+      key === "dynamicParams" ||
+      key === "fetchCache" ||
+      key === "preferredRegion" ||
+      key === "runtime" ||
+      key === "maxDuration" ||
+      key === "generateStaticParams" ||
+      key === "generateMetadata" ||
+      key === "frontmatter" ||
+      key === "toc" ||
+      key === "headings"
+    ) {
+      continue;
+    }
 
     hasExports = true;
-    const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
-    if (desc && desc.get) return false;
-
     const exportValue = moduleExports[key];
     if (!RefreshRuntime.isLikelyComponentType(exportValue)) {
       areAllExportsComponents = false;