chocola 2.0.0-next.1 → 2.0.0-next.11

package/compiler/module-graph.js

@@ -0,0 +1,257 @@
+import path from "path";
+import { promises as fs } from "fs";
+import { parseHTML } from "linkedom";
+import chalk from "./chalk.js";
+import { loadConfig, resolvePaths } from "./config.js";
+import { getComponents, getSrcIndex } from "./pipeline.js";
+import { protectCurlyBraces } from "../utils.js";
+import { deterministicHash, runtimeFunctionId } from "./utils.js";
+import { createDOM, getAssetLinks, getScriptElements } from "./dom-processor.js";
+import {
+  extractPropsDefaults, extractTopLevelFunctions, extractTopLevelVariables, parseScript, computeReachable,
+} from "../parser/index.js";
+
+const RUNTIME_KW = "$runtime";
+const PAGE_ID = "index.html";
+
+export class ChocolaModule {
+  constructor({ id, kind, sourcePath, source, mtimeMs }) {
+    this.id = id;
+    this.kind = kind;
+    this.sourcePath = sourcePath;
+    this.source = source;
+    this.mtimeMs = mtimeMs;
+    this.compName = kind === "component" ? path.basename(id) : null;
+    this.deps = new Set();
+    this.parsed = false;
+    this.script = null;
+    this.template = null;
+    this.styles = null;
+    this.compProps = [];
+    this.topFuncs = [];
+    this.topVars = [];
+    this.imports = [];
+    this.neededClientImports = [];
+    this.cssId = null;
+    this.fnId = null;
+  }
+}
+
+export class ModuleGraph {
+  constructor(rootDir, config, paths) {
+    this.rootDir = rootDir;
+    this.config = config;
+    this.paths = paths;
+    this.modules = new Map();
+    this.components = new Map();
+    this.loadedComponents = new Map();
+    this.originalComponentNames = new Map();
+    this.page = null;
+  }
+
+  addModule(module) {
+    this.modules.set(module.id, module);
+    if (module.kind === "component") {
+      this.components.set(module.compName, module);
+      this.loadedComponents.set(module.compName, module.source);
+    }
+  }
+
+  component(compName) {
+    return this.components.get(compName);
+  }
+
+  moduleById(id) {
+    return this.modules.get(id);
+  }
+}
+
+async function getFileMtime(filePath) {
+  try {
+    return (await fs.stat(filePath)).mtimeMs;
+  } catch {
+    return null;
+  }
+}
+
+function isExternalUrl(url) {
+  return url.startsWith("http://") || url.startsWith("https://");
+}
+
+function compileComponentModule(module, graph) {
+  if (module.parsed) return module;
+
+  const dom = parseHTML(protectCurlyBraces(module.source));
+  const doc = dom.document;
+  module.script = doc.querySelector("script")?.innerHTML ?? null;
+  module.template = doc.querySelector("template")?.innerHTML ?? null;
+  module.styles = doc.querySelector("style")?.innerHTML ?? null;
+  module.compProps = extractPropsDefaults(module.script);
+  module.topFuncs = extractTopLevelFunctions(module.script || "", RUNTIME_KW);
+  module.topVars = extractTopLevelVariables(module.script || "");
+  module.cssId = deterministicHash(module.compName, 8);
+  module.fnId = runtimeFunctionId(module.compName);
+
+  const deps = new Set();
+  if (module.script) {
+    const parsed = parseScript(module.script);
+    if (parsed.ast) {
+      module.imports = parsed.imports;
+      let importsForDeps = parsed.imports;
+      const treeShake = graph.config.treeShakeRuntime !== false;
+      if (treeShake && parsed.runtimeNode) {
+        const reach = computeReachable(parsed, { bindings: [] });
+        if (!reach.fallback) {
+          const neededSet = new Set(reach.neededImports);
+          importsForDeps = parsed.imports.filter(imp => neededSet.has(imp));
+        }
+        module.neededClientImports = importsForDeps;
+      } else if (!treeShake) {
+        // Feature flag disabled: include all imports for deps
+        importsForDeps = parsed.imports;
+        module.neededClientImports = importsForDeps;
+      } else {
+        importsForDeps = [];
+        module.neededClientImports = [];
+      }
+      for (const imp of importsForDeps) {
+        const isComponent = imp.source.toLowerCase().endsWith(".html");
+        if (!isComponent) {
+          // Phase 1: JS imports that are client-reachable are warned in component-processor (render-time)
+          // to avoid duplicate warnings at graph build time. Silently skip for deps.
+          continue;
+        }
+        const importedCompName = path.basename(imp.source).toLowerCase();
+        const importedModule = graph.component(importedCompName);
+        if (importedModule) deps.add(importedModule.id);
+      }
+      // Template deps added below will cover component usage in template even when
+      // script import is not client-reachable (server-only).
+      // Keep full import list in module.imports for reference.
+    } else {
+      // Fallback to regex for scripts that failed to parse (e.g., syntax errors)
+      module.imports = [];
+      module.neededClientImports = [];
+      const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+      let match;
+      while ((match = importRegex.exec(module.script)) !== null) {
+        const importedCompName = path.basename(match[2]).toLowerCase();
+        const importedModule = graph.component(importedCompName);
+        if (importedModule) deps.add(importedModule.id);
+      }
+    }
+  } else {
+    module.imports = [];
+    module.neededClientImports = [];
+  }
+  if (module.template) {
+    const frag = parseHTML(module.template).document;
+    for (const el of frag.querySelectorAll("*")) {
+      const childModule = graph.component(el.tagName.toLowerCase() + ".html");
+      if (childModule) deps.add(childModule.id);
+    }
+  }
+  module.deps = deps;
+  module.parsed = true;
+  return module;
+}
+
+function scanComponentDeps(root, graph) {
+  const deps = new Set();
+  for (const el of root.querySelectorAll("*")) {
+    const childModule = graph.component(el.tagName.toLowerCase() + ".html");
+    if (childModule) deps.add(childModule.id);
+  }
+  return deps;
+}
+
+function scanAssetModules(doc, graph) {
+  const deps = new Set();
+  const { stylesheets, icons } = getAssetLinks(doc);
+  const scripts = getScriptElements(doc);
+
+  const collect = (href) => {
+    if (isExternalUrl(href)) return;
+    const id = href.split("\\").join("/");
+    const existing = graph.moduleById(id);
+    if (existing) {
+      deps.add(id);
+      return;
+    }
+    const asset = new ChocolaModule({
+      id,
+      kind: "asset",
+      sourcePath: path.join(graph.paths.src, href),
+      source: null,
+      mtimeMs: null,
+    });
+    graph.addModule(asset);
+    deps.add(id);
+  };
+
+  for (const link of stylesheets) collect(link.href);
+  for (const link of icons) collect(link.href);
+  for (const script of scripts) collect(script.getAttribute("src"));
+
+  return deps;
+}
+
+export async function buildModuleGraph(rootDir, { overrides } = {}) {
+  const config = overrides ? await loadConfig(rootDir, { silent: true, overrides }) : await loadConfig(rootDir);
+  const paths = resolvePaths(rootDir, config);
+
+  const graph = new ModuleGraph(rootDir, config, paths);
+
+  const indexFiles = await getSrcIndex(paths.src);
+  const pageModule = new ChocolaModule({
+    id: PAGE_ID,
+    kind: "page",
+    sourcePath: indexFiles.srcPath,
+    source: indexFiles.srcHtmlFile,
+    mtimeMs: await getFileMtime(indexFiles.srcPath),
+  });
+  graph.addModule(pageModule);
+  graph.page = pageModule;
+
+  const foundComponents = await getComponents(paths.components);
+  const { loadedComponents, originalNames, componentsLib, emptyComps } = foundComponents;
+
+  console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(paths.components) + ":");
+  console.log("   ", componentsLib, "\n\n");
+
+  if (emptyComps?.length > 0) {
+    console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
+    console.log("   ", emptyComps);
+  }
+
+  for (const filename of componentsLib) {
+    const compName = filename.toLowerCase();
+    const source = loadedComponents.get(compName);
+    if (source === undefined) continue;
+    const id = path.posix.join(config.libDir, compName);
+    const module = new ChocolaModule({
+      id,
+      kind: "component",
+      sourcePath: path.join(paths.components, filename),
+      source,
+      mtimeMs: await getFileMtime(path.join(paths.components, filename)),
+    });
+    graph.addModule(module);
+  }
+
+  // Track original filename casing for log display (fallback to lowercase tag)
+  graph.originalComponentNames = originalNames;
+
+  for (const module of graph.modules.values()) {
+    if (module.kind === "component") compileComponentModule(module, graph);
+  }
+
+  const pageDom = createDOM(pageModule.source);
+  const pageDeps = scanComponentDeps(pageDom.document, graph);
+  for (const dep of scanAssetModules(pageDom.document, graph)) {
+    pageDeps.add(dep);
+  }
+  pageModule.deps = pageDeps;
+
+  return graph;
+}

package/compiler/pipeline.js

@@ -1,26 +1,14 @@
 import { promises as fs } from "fs";
-import { loadWithAssets, throwError, genRandomId, isWebLink } from "./utils.js";
+import { throwError, deterministicHash } from "./utils.js";
 import { readMyFile, checkFile } from "./fs.js";
-import { JSDOM } from "jsdom";
 import path from "path";
 
-/**
- * Discovers and loads all components from a library directory.
- * Components are JavaScript files that start with an uppercase letter.
- * They must have a default export that is a function
- * @param {import("node:fs").PathLike} libDir - Directory containing component files
- * @returns {Promise<{
- *   componentsLib: string[],
- *   loadedComponents: Map<string, object>,
- *   notDefComps: string[]
- * }>}
- * @throws {Error} if libDir cannot be found
- */
 export async function getComponents(libDir) {
   try {
     let componentsLib = [];
     let loadedComponents = new Map();
-    let notDefComps = [];
+    let originalNames = new Map();
+    let emptyComps = [];
 
     const components = await fs.readdir(libDir);
 
@@ -28,46 +16,31 @@ export async function getComponents(libDir) {
       throw Error(`The specified components folder ${libDir} could not be found.`);
     }
 
-    for (const comp of components) {
-      if (!comp.endsWith(".js") || comp[0] !== comp[0].toUpperCase()) continue;
-
-      componentsLib.push(comp);
+    const reads = components
+      .filter(comp => comp.endsWith(".html"))
+      .map(async (comp) => {
+        try {
+          const compPath = path.join(libDir, comp);
+          const instance = await fs.readFile(compPath, "utf-8");
 
-      let module;
-      try {
-        module = await loadWithAssets(path.join(libDir, comp));
+          if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
 
-        if (typeof module.default !== "function") {
-          notDefComps.push(comp);
-          continue;
+          loadedComponents.set(comp.toLowerCase(), instance);
+          originalNames.set(comp.toLowerCase(), comp);
+          componentsLib.push(comp);
+        } catch (err) {
+          throwError(`Failed to load component "${comp}": ${err.message || err}`);
         }
+      });
 
-        const instance = module.default();
-        const compPath = path.join(libDir, comp);
-        instance.__sourceFile = compPath;
-
-        loadedComponents.set(comp.toLowerCase(), instance);
-      } catch (err) {
-        throwError(`Failed to load component "${comp}": ${err.message || err}`);
-      }
-    }
+    await Promise.all(reads);
 
-    return { componentsLib, loadedComponents, notDefComps };
+    return { componentsLib, loadedComponents, originalNames, emptyComps };
   } catch (err) {
     throwError(`Failed to load components from ${libDir}: ${err.message}`);
   }
 }
 
-/**
- * Loads the project index file (HTML or .choco)
- * If both HTML and .choco files exist, throws an error
- * @param {import("fs").PathLike} srcPath - Source directory
- * @returns {Promise<{
- *   srcHtmlFile: string | null,
- *   srcChocoFile: string | null
- * }>}
- * @throws {Error} if both index files exist or .choco is used (not yet supported)
- */
 export async function getSrcIndex(srcPath) {
   const srcHtmlPath = path.join(srcPath, "index.html");
 
@@ -85,24 +58,21 @@ export async function getSrcIndex(srcPath) {
   }
 }
 
-/**
- * Processes stylesheet links: copies CSS files to output and updates link href
- * @param {HTMLLinkElement} link - The link element to process
- * @param {import("fs").PathLike} rootDir - Root project directory
- * @param {string} srcDir - Source directory name
- * @param {import("fs").PathLike} outDirPath - Output directory path
- * @param {Array} fileIds - Array to track used file IDs
- * @throws {Error} if stylesheet cannot be read or written
- */
-export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileIds) {
+export async function processStylesheet(link, rootDir, srcDir, out) {
   try {
     const href = link.href;
     if (href.startsWith("http://") || href.startsWith("https://")) return;
     const stylesheetPath = path.join(rootDir, srcDir, href);
     const css = await fs.readFile(stylesheetPath, { encoding: "utf8" });
-    const cssFileName = "css-" + genRandomId(fileIds, 6) + ".css";
+    const base = deterministicHash(css + href, 6);
+    let cssFileName = "css-" + base + ".css";
+    let counter = 0;
+    while (out.ids.includes(cssFileName)) {
+      cssFileName = "css-" + deterministicHash(css + href + counter++, 6) + ".css";
+    }
+    out.ids.push(cssFileName);
 
-    await fs.writeFile(path.join(outDirPath, cssFileName), css);
+    out.files.push({ path: cssFileName, content: css });
     link.setAttribute("href", "./" + cssFileName);
 
     return css;
@@ -111,165 +81,55 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
   }
 }
 
-/**
- * Processes icon links: copies icon files to output directory
- * @param {HTMLLinkElement} link - The link element to process
- * @param {import("fs").PathLike} rootDir - Root project directory
- * @param {string} srcDir - Source directory name
- * @param {import("fs").PathLike} outDirPath - Output directory path
- * @throws {Error} if icon cannot be copied
- */
-export async function processIcons(link, rootDir, srcDir, outDirPath) {
+export async function processIcons(link, rootDir, srcDir, out) {
   try {
     const href = link.href;
     if (href.startsWith("http://") || href.startsWith("https://")) return;
     const iconPath = path.join(rootDir, srcDir, href);
-    await fs.copyFile(iconPath, path.join(outDirPath, href));
+    out.copies.push({ from: iconPath, to: path.join(out.outDir, href) });
   } catch (err) {
     throwError(`Failed to copy icon: ${err}`);
   }
 }
 
-export function getCssAssets(css) {
-  const results = new Set();
-  const urlRegex = /url\(([^)]+)\)/gi;
-  const importStringRegex = /@import\s+["']([^"']+)["']/gi;
-  const importUrlRegex = /@import\s+url\(([^)]+)\)/gi;
-
-  const clean = (raw) => {
-    let p = raw.trim();
-    if (
-      (p.startsWith('"') && p.endsWith('"')) ||
-      (p.startsWith("'") && p.endsWith("'"))
-    ) {
-      p = p.slice(1, -1);
-    }
-    if (p.startsWith("data:")) return null;
-    return p;
-  };
-
-  let match;
-  while ((match = urlRegex.exec(css))) {
-    const p = clean(match[1]);
-    if (p) results.add(p);
-  }
-  while ((match = importStringRegex.exec(css))) {
-    const p = clean(match[1]);
-    if (p) results.add(p);
-  }
-  while ((match = importUrlRegex.exec(css))) {
-    const p = clean(match[1]);
-    if (p) results.add(p);
-  }
-  return [...results];
-}
-
-function getComponentSource(el) {
-  let cur = el;
-  while (cur) {
-    const src = cur.getAttribute?.("data-ch-source");
-    if (src) return src;
-    cur = cur.parentElement;
-  }
-  return null;
-}
-
-/**
- * Copies all local resources (images, fonts, etc.) to output directory.
- * Excludes web links and script/link tags.
- * @param {import("fs").PathLike} rootDir - Root project directory
- * @param {string} scopesCss - Scoped CSS content
- * @param {string} globalCss - Global CSS content
- * @param {string} srcDir - Source directory name
- * @param {import("fs").PathLike} outDirPath - Output directory path
- */
-export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDirPath) {
+export async function processScript(doc, script, rootDir, srcDir, out) {
   try {
-    const newIndex = await fs.readFile(path.join(outDirPath, "index.html"), "utf8");
-    const newDoc = new JSDOM(newIndex);
-    const newElements = Array.from(newDoc.window.document.querySelectorAll("*"));
-    const inlinePathsRegex = /url\((.*?)\)/gi;
-
-    for (const el of newElements) {
-      if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
-
-      const attrName = el.getAttribute("src") ? "src" : "href";
-      const src = el.getAttribute(attrName);
-      if (src && !isWebLink(src) && !src.startsWith("#") && !src.startsWith("/")) {
-        const srcPath = path.join(rootDir, srcDir, src);
-        const destPath = path.join(outDirPath, src);
-        try {
-          await fs.mkdir(path.dirname(destPath), { recursive: true });
-          await fs.copyFile(srcPath, destPath);
-        } catch (err) {
-          throw new Error(
-            `Failed to copy resource referenced by <${el.tagName.toLowerCase()} ${attrName}="${src}">` +
-            (getComponentSource(el) ? ` in component "${getComponentSource(el)}"` : "") +
-            `: ${err.message || err}`
-          );
-        }
-      }
-
-      const styles = el.getAttribute("style");
-      if (styles) {
-        let stylesMatch;
-        while ((stylesMatch = inlinePathsRegex.exec(styles)) !== null) {
-          let filePath = stylesMatch[1].trim();
-          if (
-            (filePath.startsWith('"') && filePath.endsWith('"')) ||
-            (filePath.startsWith("'") && filePath.endsWith("'"))
-          ) {
-            filePath = filePath.slice(1, -1);
-          }
-          const srcPath = path.join(rootDir, srcDir, filePath);
-          const destPath = path.join(outDirPath, filePath);
-          try {
-            await fs.mkdir(path.dirname(destPath), { recursive: true });
-            await fs.copyFile(srcPath, destPath);
-          } catch (err) {
-          throw new Error(
-            `Failed to copy resource from inline style on <${el.tagName.toLowerCase()}> url("${filePath}")` +
-            (getComponentSource(el) ? ` in component "${getComponentSource(el)}"` : "") +
-            `: ${err.message || err}`
-          );
-          }
-        }
-      }
+    const src = script.getAttribute("src");
+    if (src.startsWith("http://") || src.startsWith("https://")) return;
+    const scriptPath = path.join(rootDir, srcDir, src);
+    const content = await fs.readFile(scriptPath, { encoding: "utf8" });
+    const base = deterministicHash(content + src, 6);
+    let jsFileName = "js-" + base + ".js";
+    let counter = 0;
+    while (out.ids.includes(jsFileName)) {
+      jsFileName = "js-" + deterministicHash(content + src + counter++, 6) + ".js";
     }
-
-    const cssAssets = [...getCssAssets(scopesCss || ""), ...getCssAssets(globalCss || "")];
-    for (const assetPath of cssAssets) {
-      try {
-        if (assetPath.startsWith('http:') || assetPath.startsWith('https:')) continue;
-        const srcPath = path.join(rootDir, srcDir, assetPath);
-        const destPath = path.join(outDirPath, assetPath);
-        await fs.mkdir(path.dirname(destPath), { recursive: true });
-        await fs.copyFile(srcPath, destPath);
-      } catch (err) {
-        throw new Error(
-          `Failed to copy CSS asset "${assetPath}" referenced from stylesheets: ${err.message || err}`
-        );
+    out.ids.push(jsFileName);
+    out.files.push({ path: jsFileName, content });
+
+    const newScript = doc.createElement("script");
+    for (const attr of script.attributes) {
+      if (attr.name === "src") {
+        newScript.setAttribute("src", "./" + jsFileName);
+      } else {
+        newScript.setAttribute(attr.name, attr.value);
       }
     }
+    if (script.textContent.trim()) {
+      newScript.textContent = script.textContent;
+    }
+    script.parentNode.replaceChild(newScript, script);
   } catch (err) {
-    throw err;
+    throwError(`Failed to process script: ${err}`);
   }
 }
 
-/**
- * Copies the static/ directory from source to output.
- * The entire static/ directory tree is copied recursively.
- * Silently skips if static/ does not exist.
- * @param {import("fs").PathLike} srcPath - Source directory path
- * @param {import("fs").PathLike} outDirPath - Output directory path
- */
-export async function copyStaticDir(srcPath, outDirPath) {
+export async function copyStaticDir(srcPath, out) {
   const staticSrc = path.join(srcPath, "static");
-  const staticDest = path.join(outDirPath, "static");
+  const staticDest = path.join(out.outDir, "static");
   try {
     await fs.access(staticSrc);
-    await fs.cp(staticSrc, staticDest, { recursive: true, force: true });
+    out.copies.push({ from: staticSrc, to: staticDest, recursive: true });
   } catch {
-    // static/ directory doesn't exist — nothing to copy
   }
 }