dinou 6.1.0 → 7.0.0

package/dinou/esbuild/plugins-esbuild/assets-plugin.mjs

@@ -4,10 +4,23 @@ import createScopedName from "../../core/createScopedName.js";
 import { regex } from "../../core/asset-extensions.js";
 import { getAbsPathWithExt } from "../../core/get-abs-path-with-ext.js";
 import { pathToFileURL } from "node:url";
+import stripNamespace from "../helpers-esbuild/strip-namespace.mjs";
 
 const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
-export default function assetsPlugin({ include = regex } = {}) {
+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;
+};
+
+export default function assetsPlugin({ include = regex, changedIds } = {}) {
+  let isInitial = true;
+  let cachedRenames = new Map();
+
   return {
     name: "assets-plugin",
     setup(build) {
@@ -19,16 +32,30 @@ export default function assetsPlugin({ include = regex } = {}) {
       build.initialOptions.assetNames = "assets/[name]-[hash]";
 
       // Handle asset loading with different namespaces
-      build.onResolve({ filter: include }, (args) => {
-        // console.log("[assets-plugin] onResolve", args);
-        const resolvedAlias =
+      build.onResolve({ filter: include }, async (args) => {
+        if (args.pluginData?.inAssetPlugin) return null;
+        let resolvedAlias =
           args.kind === "entry-point"
             ? args.path
             : getAbsPathWithExt(args.path, {
                 parentURL: pathToFileURL(args.importer).href,
               });
 
-        // CRUCIAL: Different namespace for entry points
+        if (!resolvedAlias) {
+          try {
+            const res = await build.resolve(args.path, {
+              resolveDir: args.resolveDir,
+              kind: args.kind,
+              pluginData: { inAssetPlugin: true },
+            });
+            if (res && res.path) {
+              resolvedAlias = res.path;
+            }
+          } catch (e) {}
+        }
+
+        if (!resolvedAlias) return null;
+
         if (args.kind === "entry-point") {
           return {
             path: resolvedAlias,
@@ -42,199 +69,247 @@ export default function assetsPlugin({ include = regex } = {}) {
         };
       });
 
+      // Cache asset file buffers in memory
+      const assetCache = new Map();
+      const emittedAssets = new Map();
+
       // Loader for normal assets
       build.onLoad({ filter: /.*/, namespace: "dinou-asset" }, async (args) => {
-        const contents = await fs.readFile(args.path);
-        return { contents, loader: "file" };
+        let contents = assetCache.get(args.path);
+        if (!contents) {
+          contents = await fs.readFile(args.path);
+          assetCache.set(args.path, contents);
+        }
+        const ext = path.extname(args.path);
+        const base = path.basename(args.path, ext);
+        const scoped = createScopedName(base, args.path);
+        const assetUrl = `/assets/${scoped}${ext}`;
+        const newLocal = `assets/${scoped}${ext}`;
+
+        emittedAssets.set(newLocal, {
+          path: path.join(outdir, newLocal),
+          contents,
+          get text() {
+            return new TextDecoder().decode(this.contents);
+          },
+        });
+
+        return {
+          contents: `export default "${assetUrl}";`,
+          loader: "js",
+          watchFiles: [args.path],
+        };
       });
 
       // Loader for asset entry points
       build.onLoad(
         { filter: /.*/, namespace: "dinou-asset-entry" },
         async (args) => {
-          const contents = await fs.readFile(args.path);
-          return { contents, loader: "file" };
+          let contents = assetCache.get(args.path);
+          if (!contents) {
+            contents = await fs.readFile(args.path);
+            assetCache.set(args.path, contents);
+          }
+          return { contents, loader: "file", watchFiles: [args.path] };
         }
       );
 
       build.onEnd(async (result) => {
-        if (!result.metafile || !result.outputFiles?.length) return;
-
-        const renames = new Map();
-        const normalizeRel = (p) => p.replace(/\\/g, "/");
-        const processedSourceFiles = new Set();
-
-        // First pass: normal assets (individual files)
-        for (const [oldRelPath, info] of Object.entries(
-          result.metafile.outputs
-        )) {
-          if (info.entryPoint || Object.keys(info.inputs).length !== 1)
-            continue;
-
-          const inputPath = Object.keys(info.inputs)[0];
-          const sourceFile = inputPath
-            .replace(/^dinou-asset:/, "")
-            .replace(/^dinou-asset-entry:/, "");
-          if (!include.test(sourceFile)) continue;
-
-          const ext = path.extname(sourceFile);
-          if (!oldRelPath.endsWith(ext)) continue;
-          const base = path.basename(sourceFile, ext);
-          const scoped = createScopedName(base, sourceFile);
-          const newLocal = `assets/${scoped}${ext}`;
-          const oldLocal = normalizeRel(path.relative(outdir, oldRelPath));
-
-          renames.set(oldLocal, newLocal);
-          processedSourceFiles.add(sourceFile);
-        }
+        const tAssets0 = Date.now();
+        try {
+          if (!result.metafile || !result.outputFiles?.length) return;
+
+          const normalizeRel = (p) => p.replace(/\\/g, "/");
+          const isIncremental = !isInitial && changedIds && changedIds.size > 0;
+          const hasAssetChanged = isIncremental && Array.from(changedIds).some((id) => include.test(id));
+
+          // Ensure JS-loaded assets are included in output files
+          for (const asset of emittedAssets.values()) {
+            if (!result.outputFiles.some((f) => f.path === asset.path)) {
+              result.outputFiles.push(asset);
+            }
+          }
 
-        // Second pass: find assets that are inside chunks
-        for (const [outputPath, info] of Object.entries(
-          result.metafile.outputs
-        )) {
-          // Only search in JavaScript chunks
-          if (!outputPath.endsWith(".js") || info.entryPoint) continue;
+          let renames = cachedRenames;
 
-          for (const inputPath of Object.keys(info.inputs)) {
-            if (!inputPath.startsWith("dinou-asset:")) continue;
+          // Only re-scan all asset outputs on initial build or if an asset file actually changed
+          if (isInitial || hasAssetChanged) {
+            renames = new Map();
+            const processedSourceFiles = new Set();
 
-            const sourceFile = inputPath.replace(/^dinou-asset:/, "");
-            if (
-              !include.test(sourceFile) ||
-              processedSourceFiles.has(sourceFile)
-            )
-              continue;
+            // First pass: normal assets (individual files)
+            for (const [oldRelPath, info] of Object.entries(
+              result.metafile.outputs
+            )) {
+              if (info.entryPoint || Object.keys(info.inputs).length !== 1)
+                continue;
+
+              const inputPath = Object.keys(info.inputs)[0];
+              const sourceFile = inputPath
+                .replace(/^dinou-asset:/, "")
+                .replace(/^dinou-asset-entry:/, "");
+              if (!include.test(sourceFile)) continue;
 
-            try {
               const ext = path.extname(sourceFile);
+              if (!oldRelPath.endsWith(ext)) continue;
               const base = path.basename(sourceFile, ext);
               const scoped = createScopedName(base, sourceFile);
               const newLocal = `assets/${scoped}${ext}`;
+              const oldLocal = normalizeRel(path.relative(outdir, oldRelPath));
 
-              // Read the original asset
-              const assetContent = await fs.readFile(sourceFile);
-
-              // Create a new output file for this asset
-              const newOutputFile = {
-                path: path.join(outdir, newLocal),
-                contents: assetContent,
-                get text() {
-                  return new TextDecoder().decode(this.contents);
-                },
-              };
-
-              result.outputFiles.push(newOutputFile);
+              renames.set(oldLocal, newLocal);
               processedSourceFiles.add(sourceFile);
+            }
 
-              // console.log(
-              //   `Extracted asset from chunk: ${sourceFile} → ${newLocal}`
-              // );
-
-              // Find the chunk that contains this asset
-              const chunkFile = result.outputFiles.find(
-                (f) =>
-                  normalizeRel(path.relative(process.cwd(), f.path)) ===
-                  outputPath
-              );
-
-              if (chunkFile) {
-                let chunkContent = new TextDecoder().decode(chunkFile.contents);
-
-                // MORE PRECISE APPROACH: Find the specific comment for this asset
-                const assetComment = `// ${inputPath}`;
-                const commentIndex = chunkContent.indexOf(assetComment);
-
-                if (commentIndex !== -1) {
-                  // Find the next line containing the variable assignment
-                  const nextLineStart =
-                    chunkContent.indexOf("\n", commentIndex) + 1;
-                  const nextLineEnd = chunkContent.indexOf("\n", nextLineStart);
-                  const assignmentLine = chunkContent.substring(
-                    nextLineStart,
-                    nextLineEnd
-                  );
+            // Pre-index outputFiles for O(1) lookup
+            const outputFilesByRelPath = new Map();
+            for (const f of result.outputFiles) {
+              outputFilesByRelPath.set(normalizeRel(path.relative(process.cwd(), f.path)), f);
+            }
 
-                  // Extract the variable name (e.g., "dinou_default")
-                  const varMatch = assignmentLine.match(
-                    /var (\w+)_default = "([^"]+)"/
+            // Second pass: find assets that are inside chunks
+            for (const [outputPath, info] of Object.entries(
+              result.metafile.outputs
+            )) {
+              if (!outputPath.endsWith(".js") || info.entryPoint) continue;
+
+              for (const inputPath of Object.keys(info.inputs)) {
+                if (!inputPath.startsWith("dinou-asset:")) continue;
+
+                const sourceFile = inputPath.replace(/^dinou-asset:/, "");
+                if (
+                  !include.test(sourceFile) ||
+                  processedSourceFiles.has(sourceFile)
+                )
+                  continue;
+
+                try {
+                  const ext = path.extname(sourceFile);
+                  const base = path.basename(sourceFile, ext);
+                  const scoped = createScopedName(base, sourceFile);
+                  const newLocal = `assets/${scoped}${ext}`;
+
+                  const assetContent = await fs.readFile(sourceFile);
+
+                  const newOutputFile = {
+                    path: path.join(outdir, newLocal),
+                    contents: assetContent,
+                    get text() {
+                      return new TextDecoder().decode(this.contents);
+                    },
+                  };
+
+                  result.outputFiles.push(newOutputFile);
+                  processedSourceFiles.add(sourceFile);
+
+                  const chunkFile = outputFilesByRelPath.get(outputPath);
+
+                  if (chunkFile) {
+                    let chunkContent = new TextDecoder().decode(chunkFile.contents);
+                    const assetComment = `// ${inputPath}`;
+                    const commentIndex = chunkContent.indexOf(assetComment);
+
+                    if (commentIndex !== -1) {
+                      const nextLineStart = chunkContent.indexOf("\n", commentIndex) + 1;
+                      const nextLineEnd = chunkContent.indexOf("\n", nextLineStart);
+                      const assignmentLine = chunkContent.substring(nextLineStart, nextLineEnd);
+                      const varMatch = assignmentLine.match(/var (\w+)_default = "([^"]+)"/);
+
+                      if (varMatch) {
+                        const varName = varMatch[1];
+                        const newAssignmentLine = `var ${varName}_default = "/${newLocal}";`;
+                        chunkContent =
+                          chunkContent.substring(0, nextLineStart) +
+                          newAssignmentLine +
+                          chunkContent.substring(nextLineEnd);
+                      }
+                    } else {
+                      const assetName = path.basename(sourceFile);
+                      const escapedAssetName = escapeRegExp(assetName);
+                      const pattern = new RegExp(
+                        `(var \\w+_default = ")([^"]*${escapedAssetName}[^"]*)(";)`,
+                        "g"
+                      );
+
+                      if (pattern.test(chunkContent)) {
+                        chunkContent = chunkContent.replace(
+                          pattern,
+                          `$1/${newLocal}$3`
+                        );
+                      }
+                    }
+
+                    chunkFile.contents = new TextEncoder().encode(chunkContent);
+                  }
+                } catch (error) {
+                  console.error(
+                    `Error extracting asset ${sourceFile} from chunk:`,
+                    error
                   );
+                }
+              }
+            }
 
-                  if (varMatch) {
-                    const varName = varMatch[1];
-                    const oldPath = varMatch[2];
+            cachedRenames = renames;
+          }
 
-                    // Replace ONLY this specific assignment
-                    const newAssignmentLine = `var ${varName}_default = "/${newLocal}";`;
-                    chunkContent =
-                      chunkContent.substring(0, nextLineStart) +
-                      newAssignmentLine +
-                      chunkContent.substring(nextLineEnd);
+          if (renames.size === 0) return;
 
-                    // console.log(
-                    //   `Updated reference in chunk: ${oldPath} → /${newLocal}`
-                    // );
-                  }
-                } else {
-                  // Fallback: search by filename in the path
-                  const assetName = path.basename(sourceFile);
-                  const escapedAssetName = escapeRegExp(assetName);
-                  const pattern = new RegExp(
-                    `(var \\w+_default = ")([^"]*${escapedAssetName}[^"]*)(";)`,
-                    "g"
-                  );
+          // Update references in JS/CSS files:
+          // On incremental rebuild, only process output files belonging to changed modules!
+          for (const file of result.outputFiles) {
+            const relPath = normalizeRel(path.relative(process.cwd(), file.path));
+            if (!relPath.endsWith(".js") && !relPath.endsWith(".css")) continue;
 
-                  if (pattern.test(chunkContent)) {
-                    chunkContent = chunkContent.replace(
-                      pattern,
-                      `$1/${newLocal}$3`
-                    );
-                  }
-                }
+            if (isIncremental && !hasAssetChanged) {
+              const outputInfo = result.metafile.outputs[relPath];
+              const inputFiles = Object.keys(outputInfo?.inputs || {});
+              const touchesChanged = inputFiles.some((m) => {
+                const clean = stripNamespace(m);
+                return changedIds.has(normKey(clean));
+              });
+              if (!touchesChanged) continue;
+            }
 
-                chunkFile.contents = new TextEncoder().encode(chunkContent);
+            let content = new TextDecoder().decode(file.contents);
+            let modified = false;
+            for (const [oldLocal, newLocal] of renames) {
+              if (!content.includes(oldLocal)) continue;
+              const patterns = [
+                [`"./${escapeRegExp(oldLocal)}"`, `"/${newLocal}"`],
+                [`"${escapeRegExp(oldLocal)}"`, `"${newLocal}"`],
+                [`'./${escapeRegExp(oldLocal)}'`, `'/${newLocal}'`],
+                [`'${escapeRegExp(oldLocal)}'`, `'${newLocal}'`],
+              ];
+
+              for (const [oldPattern, newPattern] of patterns) {
+                const reg = new RegExp(oldPattern, "g");
+                if (reg.test(content)) {
+                  content = content.replace(reg, newPattern);
+                  modified = true;
+                }
               }
-            } catch (error) {
-              console.error(
-                `Error extracting asset ${sourceFile} from chunk:`,
-                error
-              );
             }
-          }
-        }
-
-        // Update references in JS/CSS files (existing code)
-        for (const file of result.outputFiles) {
-          const relPath = normalizeRel(path.relative(process.cwd(), file.path));
-          if (!relPath.endsWith(".js") && !relPath.endsWith(".css")) continue;
-
-          let content = new TextDecoder().decode(file.contents);
-          for (const [oldLocal, newLocal] of renames) {
-            const patterns = [
-              [`"./${escapeRegExp(oldLocal)}"`, `"/${newLocal}"`],
-              [`"${escapeRegExp(oldLocal)}"`, `"${newLocal}"`],
-              [`'./${escapeRegExp(oldLocal)}'`, `'/${newLocal}'`],
-              [`'${escapeRegExp(oldLocal)}'`, `'${newLocal}'`],
-            ];
-
-            for (const [oldPattern, newPattern] of patterns) {
-              content = content.replace(
-                new RegExp(oldPattern, "g"),
-                newPattern
-              );
+            if (modified) {
+              file.contents = new TextEncoder().encode(content);
             }
           }
-          file.contents = new TextEncoder().encode(content);
-        }
 
-        // Update paths (existing code)
-        for (const file of result.outputFiles) {
-          const relPath = normalizeRel(path.relative(process.cwd(), file.path));
-          const oldLocal = normalizeRel(path.relative(outdir, relPath));
-          const newLocal = renames.get(oldLocal);
+          // Update paths in outputFiles
+          if (!isIncremental) {
+            for (const file of result.outputFiles) {
+              const relPath = normalizeRel(path.relative(process.cwd(), file.path));
+              const oldLocal = normalizeRel(path.relative(outdir, relPath));
+              const newLocal = renames.get(oldLocal);
 
-          if (newLocal) {
-            file.path = path.join(outdir, newLocal);
+              if (newLocal) {
+                file.path = path.join(outdir, newLocal);
+              }
+            }
           }
+        } finally {
+          isInitial = false;
+          globalThis.__DINOU_ASSETS_TIME__ = Date.now() - tAssets0;
         }
       });
     },

package/dinou/esbuild/plugins-esbuild/css-processor-plugin.mjs

@@ -1,4 +1,5 @@
 import fs from "node:fs/promises";
+import fsSync from "node:fs";
 import path from "node:path";
 import tailwindcss from "@tailwindcss/postcss";
 import autoprefixer from "autoprefixer";
@@ -11,19 +12,94 @@ import { pathToFileURL } from "node:url";
 import resolve from "resolve";
 import createPostCSSExtractPlugin from "../plugins-postcss/postcss-extract-plugin.js";
 
-export default function cssProcessorPlugin({ outdir = ".dinou/public" } = {}) {
-  const { finalize, plugin: extractor } = createPostCSSExtractPlugin({
+const cssCache = new Map();
+let cssCacheLoaded = false;
+let cssCacheDirty = false;
+
+function getCssCachePath() {
+  const dir = path.resolve(process.cwd(), ".dinou/cache");
+  return { dir, file: path.join(dir, "css-dev-cache.json") };
+}
+
+function loadCssCache() {
+  if (cssCacheLoaded) return;
+  cssCacheLoaded = true;
+  try {
+    const { file } = getCssCachePath();
+    if (fsSync.existsSync(file)) {
+      const parsed = JSON.parse(fsSync.readFileSync(file, "utf8"));
+      for (const [k, v] of Object.entries(parsed)) {
+        cssCache.set(k, v);
+      }
+    }
+  } catch (e) {}
+}
+
+async function saveCssCache() {
+  if (!cssCacheDirty) return;
+  cssCacheDirty = false;
+  try {
+    const { dir, file } = getCssCachePath();
+    if (!fsSync.existsSync(dir)) {
+      fsSync.mkdirSync(dir, { recursive: true });
+    }
+    const data = {};
+    for (const [k, v] of cssCache.entries()) {
+      data[k] = v;
+    }
+    await fs.writeFile(file, JSON.stringify(data), "utf8");
+  } catch (e) {}
+}
+
+export default function cssProcessorPlugin({ outdir = ".dinou/public", hmrEngine } = {}) {
+  const { finalize, plugin: extractor, addExtractedCss } = createPostCSSExtractPlugin({
     outputFile: `${outdir}/styles.css`,
   });
 
+  let isInitial = true;
+  let hasCssChange = false;
+  let postCssTotalTime = 0;
+  let postCssCount = 0;
+
   return {
     name: "css-processor",
     setup(build) {
+      build.onStart(() => {
+        hasCssChange = false;
+        postCssTotalTime = 0;
+        postCssCount = 0;
+      });
+
       build.onLoad({ filter: /\.css$/ }, async (args) => {
         const filePath = args.path;
+        loadCssCache();
+        const stat = await fs.stat(filePath);
+        const cached = cssCache.get(filePath);
+
+        const isModule = filePath.endsWith(".module.css");
+        if (isModule && cached && cached.mtime === stat.mtimeMs) {
+          if (cached.extractedCss && typeof addExtractedCss === "function") {
+            addExtractedCss(cached.extractedCss);
+          }
+          return {
+            contents: `export default ${JSON.stringify(cached.map || {})};`,
+            loader: "js",
+            watchFiles: [filePath],
+          };
+        }
+
+        hasCssChange = true;
+        const tPostCss0 = Date.now();
         const source = await fs.readFile(filePath, "utf8");
 
         let map = {};
+        let extractedForFile = "";
+        const fileCapturePlugin = {
+          postcssPlugin: "file-capture",
+          OnceExit(root) {
+            extractedForFile = root.toString();
+          },
+        };
 
         await postcss([
           postcssImport({
@@ -32,11 +108,9 @@ export default function cssProcessorPlugin({ outdir = ".dinou/public" } = {}) {
                 parentURL: pathToFileURL(basedir).href,
               });
               if (resolvedAlias) {
-                console.log("ALIAS RESOLVED:", resolvedAlias);
                 return resolvedAlias;
               }
               if (id.startsWith("tailwindcss/")) {
-                console.log("TAILWIND INTERNAL:", id);
                 return resolve.sync(id, { basedir, extensions: [".css"] });
               }
               try {
@@ -58,24 +132,46 @@ export default function cssProcessorPlugin({ outdir = ".dinou/public" } = {}) {
               map = json;
             },
           }),
+          fileCapturePlugin,
           extractor,
         ]).process(source, { from: filePath });
 
+        postCssTotalTime += Date.now() - tPostCss0;
+        postCssCount++;
+        globalThis.__DINOU_POSTCSS_TIME__ = postCssTotalTime;
+        globalThis.__DINOU_POSTCSS_COUNT__ = postCssCount;
+
+        cssCache.set(filePath, {
+          mtime: stat.mtimeMs,
+          map,
+          extractedCss: extractedForFile,
+        });
+        cssCacheDirty = true;
+
         if (filePath.endsWith(".module.css")) {
-          // console.log(`[CSS MODULE] ${path.basename(filePath)} →`, map);
           return {
             contents: `export default ${JSON.stringify(map)};`,
             loader: "js",
+            watchFiles: [filePath],
           };
         } else {
           return {
             contents: `/* global: ${path.basename(filePath)} */`,
             loader: "js",
+            watchFiles: [filePath],
           };
         }
       });
       build.onEnd(() => {
         finalize();
+        saveCssCache().catch(() => {});
+        globalThis.__DINOU_POSTCSS_TIME__ = postCssTotalTime;
+        globalThis.__DINOU_POSTCSS_COUNT__ = postCssCount;
+        if (!isInitial && hasCssChange && hmrEngine?.value?.broadcastMessage) {
+          hmrEngine.value.broadcastMessage({ type: "style-update", url: "/styles.css" });
+        }
+        isInitial = false;
+        hasCssChange = false;
       });
     },
   };