chocola 2.0.0-next.10 → 2.0.0-next.12

package/compiler/config.js

@@ -1,22 +1,40 @@
-import path from "path";
-import { getConfig } from "../utils.js";
-
-export async function loadConfig(rootDir) {
-  const config = await getConfig(rootDir);
-  const bundleConfig = config.bundle || {};
-
-  const srcDir = bundleConfig.srcDir || "src";
-  const outDir = bundleConfig.outDir || "dist";
-  const libDir = bundleConfig.libDir || "lib";
-  const emptyOutDir = bundleConfig.emptyOutDir !== false;
-
-  return { srcDir, outDir, libDir, emptyOutDir };
-}
-
-export function resolvePaths(rootDir, config) {
-  return {
-    outDir: path.join(rootDir, config.outDir),
-    src: path.join(rootDir, config.srcDir),
-    components: path.join(rootDir, config.srcDir, config.libDir),
-  };
-}
+import path from "path";
+import { promises as fsp } from "fs";
+
+export async function loadConfig(rootDir, { silent, customPath, overrides } = {}) {
+  let config;
+  try {
+    const raw = customPath
+      ? await fsp.readFile(customPath, "utf-8").then(r => JSON.parse(r))
+      : await fsp.readFile(path.join(rootDir, "chocola.config.json"), "utf-8").then(r => JSON.parse(r));
+    config = raw;
+  } catch {
+    if (!silent) {
+      // Config file missing — silently use defaults
+    }
+    config = {};
+  }
+
+  let srcDir = "src", outDir = "dist", libDir = "lib", emptyOutDir = true, treeShakeRuntime = true;
+
+  const hasBundle = (config.bundle !== undefined && config.bundle !== null) || (config.build !== undefined && config.build !== null);
+  const bundleConfig = config.bundle || config.build || {};
+  const compilerConfig = config.compiler || {};
+  srcDir = bundleConfig.srcDir || "src";
+  outDir = bundleConfig.outDir || "dist";
+  libDir = bundleConfig.libDir || "lib";
+  emptyOutDir = bundleConfig.emptyOutDir !== false;
+  treeShakeRuntime = compilerConfig.treeShakeRuntime !== false;
+
+  const result = { srcDir, outDir, libDir, emptyOutDir, treeShakeRuntime };
+  if (overrides) { Object.assign(result, overrides); }
+  return result;
+}
+
+export function resolvePaths(rootDir, config) {
+  return {
+    outDir: path.isAbsolute(config.outDir) ? config.outDir : path.join(rootDir, config.outDir),
+    src: path.isAbsolute(config.srcDir) ? config.srcDir : path.join(rootDir, config.srcDir),
+    components: path.isAbsolute(config.srcDir) ? path.join(config.srcDir, config.libDir) : path.join(rootDir, config.srcDir, config.libDir),
+  };
+}

package/compiler/index.js

@@ -1,126 +1,61 @@
-import { promises as fs } from "fs";
-import path from "path";
-import { performance } from "perf_hooks";
-import chalk from "./chalk.js";
-import { buildModuleGraph } from "./module-graph.js";
-import { renderPage } from "./render.js";
-import { writeHTMLOutput } from "./dom-processor.js";
-
-export { buildModuleGraph } from "./module-graph.js";
-export { renderPage } from "./render.js";
-export { ChocolaModule, ModuleGraph } from "./module-graph.js";
-
-const GOLD_COLOR = "#D87416";
-const WHITE_COLOR = "#FAFAF8";
-const TEXT_FAINT = "#E7EBE1";
-
-function logBanner() {
-  console.log(
-    chalk.hex(GOLD_COLOR)(`
-   ┌─────────────────────────────────────────────┐
-   │┌-------------------------------------------┐│
-   ││                                           ││`)
-  );
-  console.log(
-    chalk.hex(GOLD_COLOR)(`   ││            `) +
-    chalk.bold.hex(WHITE_COLOR)(`{`) +
-    chalk.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
-    chalk.bold.hex(WHITE_COLOR)(`}`) +
-    chalk.hex(GOLD_COLOR)(`            ││\n`) +
-    chalk.hex(GOLD_COLOR)(`   ││                                           ││
-   ││     `) +
-   chalk.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
-   chalk.hex(GOLD_COLOR)(`     ││
-   ││                                           ││
-   │└-------------------------------------------┘│
-   └─────────────────────────────────────────────┘
-   `)
-  );
-}
-
-function logSuccess(outDirPath, durationMs) {
-  console.log(
-    chalk.bold.green(">"),
-    "Project bundled succesfully at",
-    chalk.green.underline(outDirPath));
-    console.log(chalk.bold.green(`\nJOB DONE!`) + chalk.hex(TEXT_FAINT)(` (${formatDuration(durationMs)})\n`));
-}
-
-function formatDuration(ms) {
-  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
-  return Math.round(ms) + "ms";
-}
-
-async function setupOutputDirectory(outDirPath, emptyOutDir) {
-  if (emptyOutDir) {
-    await fs.rm(outDirPath, { recursive: true, force: true });
-    await fs.mkdir(outDirPath);
-  }
-}
-
-export async function emit(graph, options = {}) {
-  const outDir = graph.paths.outDir;
-  await setupOutputDirectory(outDir, graph.config.emptyOutDir);
-
-  const result = await renderPage(graph, options.ctx);
-
-  for (const file of result.files) {
-    await fs.writeFile(path.join(outDir, file.path), file.content);
-  }
-
-  for (const copy of result.copies) {
-    if (copy.recursive) {
-      await fs.cp(copy.from, copy.to, { recursive: true, force: true });
-    } else {
-      await fs.copyFile(copy.from, copy.to);
-    }
-  }
-
-  await writeHTMLOutput(result.html, outDir);
-
-  const chocolaDir = path.join(graph.rootDir, ".chocola");
-  await fs.mkdir(chocolaDir, { recursive: true });
-  await fs.writeFile(path.join(chocolaDir, "hashes.json"), JSON.stringify(result.hashMap, null, 2) + "\n");
-
-  return result;
-}
-
-export default async function compile(rootDir, buildConfig) {
-  const isHotReload = buildConfig?.isHotReload || null;
-  const startTime = performance.now();
-  !isHotReload && logBanner();
-
-  const graph = await buildModuleGraph(rootDir);
-
-  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(graph.paths.outDir));
-
-  await emit(graph);
-
-  const durationMs = performance.now() - startTime;
-
-  !isHotReload && logSuccess(graph.paths.outDir, durationMs);
-  isHotReload && console.log("Dev server updated " + chalk.hex(TEXT_FAINT)(`(${formatDuration(durationMs)})`));
-}
-
-/**
- * An intrinsic object that contains the Chocola App methods.
- */
-export const app = {
-  /**
- *  Initializes your Chocola App using a root directory.
- * 
- * ```js
- * import { app } from "chocola/compiler"
-  import path from "path";
-  import { fileURLToPath } from "url";
-  
-  const __filename = fileURLToPath(import.meta.url);
-  const __dirname = path.dirname(__filename);
-  
-  app.build(__dirname);
-  ```
- * @example
- * @param {PathLike} __rootdir the directory where your Chocola App is
- */
-  async build(__rootdir) { return compile(__rootdir) }
-};
+import { promises as fs } from "fs";
+import path from "path";
+import { performance } from "perf_hooks";
+import { buildModuleGraph } from "./module-graph.js";
+import { renderPage } from "./render.js";
+import { writeHTMLOutput } from "./dom-processor.js";
+
+export { buildModuleGraph } from "./module-graph.js";
+export { renderPage } from "./render.js";
+export { ChocolaModule, ModuleGraph } from "./module-graph.js";
+
+async function setupOutputDirectory(outDirPath, emptyOutDir) {
+  if (emptyOutDir) {
+    await fs.rm(outDirPath, { recursive: true, force: true });
+    await fs.mkdir(outDirPath);
+  }
+}
+
+export async function emit(graph, options = {}) {
+  const outDir = graph.paths.outDir;
+  await setupOutputDirectory(outDir, graph.config.emptyOutDir);
+
+  const result = await renderPage(graph, options.ctx);
+
+  for (const file of result.files) {
+    await fs.writeFile(path.join(outDir, file.path), file.content);
+  }
+
+  for (const copy of result.copies) {
+    if (copy.recursive) {
+      await fs.cp(copy.from, copy.to, { recursive: true, force: true });
+    } else {
+      await fs.copyFile(copy.from, copy.to);
+    }
+  }
+
+  await writeHTMLOutput(result.html, outDir);
+
+  const chocolaDir = path.join(graph.rootDir, ".chocola");
+  await fs.mkdir(chocolaDir, { recursive: true });
+  await fs.writeFile(path.join(chocolaDir, "hashes.json"), JSON.stringify(result.hashMap, null, 2) + "\n");
+
+  return result;
+}
+
+export default async function compile(rootDir, buildConfig = {}) {
+  const isHotReload = buildConfig?.isHotReload || null;
+  const overrides = buildConfig?.overrides || null;
+  const silent = buildConfig?.silent || false;
+  const startTime = performance.now();
+
+  const graph = await buildModuleGraph(rootDir, { overrides });
+
+  await emit(graph);
+
+  const durationMs = performance.now() - startTime;
+}
+
+export const app = {
+  async build(__rootdir) { return compile(__rootdir) }
+};

package/compiler/module-graph.js

@@ -1,14 +1,13 @@
 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,
+  extractPropsDefaults, extractTopLevelFunctions, extractTopLevelVariables, parseScript, computeReachable,
 } from "../parser/index.js";
 
 const RUNTIME_KW = "$runtime";
@@ -31,6 +30,7 @@ export class ChocolaModule {
     this.topFuncs = [];
     this.topVars = [];
     this.imports = [];
+    this.neededClientImports = [];
     this.cssId = null;
     this.fnId = null;
   }
@@ -44,6 +44,7 @@ export class ModuleGraph {
     this.modules = new Map();
     this.components = new Map();
     this.loadedComponents = new Map();
+    this.originalComponentNames = new Map();
     this.page = null;
   }
 
@@ -92,13 +93,55 @@ function compileComponentModule(module, graph) {
 
   const deps = new Set();
   if (module.script) {
-    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);
+    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;
@@ -152,8 +195,8 @@ function scanAssetModules(doc, graph) {
   return deps;
 }
 
-export async function buildModuleGraph(rootDir) {
-  const config = await loadConfig(rootDir);
+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);
@@ -170,15 +213,7 @@ export async function buildModuleGraph(rootDir) {
   graph.page = pageModule;
 
   const foundComponents = await getComponents(paths.components);
-  const { loadedComponents, 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);
-  }
+  const { loadedComponents, originalNames, componentsLib, emptyComps } = foundComponents;
 
   for (const filename of componentsLib) {
     const compName = filename.toLowerCase();
@@ -195,6 +230,9 @@ export async function buildModuleGraph(rootDir) {
     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);
   }

package/compiler/pipeline.js

@@ -7,6 +7,7 @@ export async function getComponents(libDir) {
   try {
     let componentsLib = [];
     let loadedComponents = new Map();
+    let originalNames = new Map();
     let emptyComps = [];
 
     const components = await fs.readdir(libDir);
@@ -25,6 +26,7 @@ export async function getComponents(libDir) {
           if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
 
           loadedComponents.set(comp.toLowerCase(), instance);
+          originalNames.set(comp.toLowerCase(), comp);
           componentsLib.push(comp);
         } catch (err) {
           throwError(`Failed to load component "${comp}": ${err.message || err}`);
@@ -33,7 +35,7 @@ export async function getComponents(libDir) {
 
     await Promise.all(reads);
 
-    return { componentsLib, loadedComponents, emptyComps };
+    return { componentsLib, loadedComponents, originalNames, emptyComps };
   } catch (err) {
     throwError(`Failed to load components from ${libDir}: ${err.message}`);
   }

package/compiler/render.js

@@ -154,7 +154,9 @@ export async function renderPage(graph, ctx = {}) {
     graph.loadedComponents,
     page.sourcePath,
     page.source,
-    ctx
+    ctx,
+    graph.config.treeShakeRuntime,
+    graph.originalComponentNames
   );
 
   const csrSource = await fs.readFile(new URL("../runtime/index.js", import.meta.url), "utf-8");

package/compiler/utils.js

@@ -1,116 +1,102 @@
-import { createHash } from "crypto";
-import chalk from "./chalk.js";
-
-export function throwError(err) {
-  console.log(chalk.red.bold("Error!"), "A fatal error has occurred:\n");
-  throw new Error(err);
-}
-
-export function warnConstantCondition(location, tag, attr, expr, truthy) {
-  const article = /^[aeiou]/.test(attr) ? "an" : "a";
-  console.warn(
-    chalk.bold.yellow("WARN "),
-    `${chalk.bold.green(location)} ${chalk.dim('—')} ${chalk.blue(`<${tag}>`)} \`${chalk.bold(attr + "={" + expr + "}")}\` is always ${chalk.green(truthy ? "truthy" : "falsy")}`
-  );
-}
-
-export function warnUnusedDeclaration(location, kind, name) {
-  console.warn(
-    chalk.bold.yellow("WARN "),
-    `${chalk.bold.green(location)} ${chalk.dim('—')} ${kind} \`${chalk.blue(name)}\` is never used`
-  );
-}
-
-function normalizeAttributeQuotes(html) {
-  return html
-    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
-    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
-}
-
-function getStartTag(outerHTML) {
-  let inQuote = null;
-  for (let i = 0; i < outerHTML.length; i++) {
-    const c = outerHTML[i];
-    if (inQuote) {
-      if (c === inQuote) inQuote = null;
-    } else if (c === '"' || c === "'") {
-      inQuote = c;
-    } else if (c === ">") {
-      return outerHTML.slice(0, i + 1);
-    }
-  }
-  return outerHTML;
-}
-
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function flexibleStartTagRegex(startTag) {
-  return new RegExp(
-    startTag
-      .split(/\s+/)
-      .filter(Boolean)
-      .map(escapeRegex)
-      .join("\\s+")
-  );
-}
-
-export function findElementLine(sourceContent, outerHTML) {
-  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
-  const startTags = [
-    normalizeAttributeQuotes(getStartTag(outerHTML)),
-    normalizeAttributeQuotes(
-      getStartTag(
-        outerHTML
-          .replace(/&quot;/g, '"')
-          .replace(/&amp;/g, "&")
-          .replace(/&lt;/g, "<")
-          .replace(/&gt;/g, ">")
-      )
-    ),
-  ].map(tag => tag.toLowerCase());
-  const candidates = [
-    flexibleStartTagRegex(startTags[0]),
-    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
-    flexibleStartTagRegex(startTags[1]),
-  ];
-  for (const re of candidates) {
-    const match = re.exec(source);
-    if (match) {
-      return source.substring(0, match.index).split("\n").length;
-    }
-  }
-  return null;
-}
-
-export function genRandomId(collection = null, length = 10, lettersOnly = false) {
-  let id;
-  if (lettersOnly) {
-    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
-  } else {
-    id = Math.random().toString(36).substring(2, length + 2);
-  }
-  if (!collection) return id;
-  if (collection.includes(id)) {
-    return genRandomId(collection, length, lettersOnly);
-  } else {
-    collection.push(id);
-    return id;
-  }
-}
-
-export function deterministicHash(content, length = 8) {
-  const hash = createHash("sha256").update(content).digest();
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += String.fromCharCode(97 + (hash[i % hash.length] % 26));
-  }
-  return result;
-}
-
-export function runtimeFunctionId(compName) {
-  return "r_" + deterministicHash(compName, 8);
-}
-
-const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";
+import { createHash } from "crypto";
+
+export function throwError(err) {
+  throw new Error(err);
+}
+
+export function warnConstantCondition() {}
+export function warnUnusedDeclaration() {}
+
+function normalizeAttributeQuotes(html) {
+  return html
+    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
+    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
+}
+
+function getStartTag(outerHTML) {
+  let inQuote = null;
+  for (let i = 0; i < outerHTML.length; i++) {
+    const c = outerHTML[i];
+    if (inQuote) {
+      if (c === inQuote) inQuote = null;
+    } else if (c === '"' || c === "'") {
+      inQuote = c;
+    } else if (c === ">") {
+      return outerHTML.slice(0, i + 1);
+    }
+  }
+  return outerHTML;
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function flexibleStartTagRegex(startTag) {
+  return new RegExp(
+    startTag
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(escapeRegex)
+      .join("\\s+")
+  );
+}
+
+export function findElementLine(sourceContent, outerHTML) {
+  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
+  const startTags = [
+    normalizeAttributeQuotes(getStartTag(outerHTML)),
+    normalizeAttributeQuotes(
+      getStartTag(
+        outerHTML
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, "&")
+          .replace(/&lt;/g, "<")
+          .replace(/&gt;/g, ">")
+      )
+    ),
+  ].map(tag => tag.toLowerCase());
+  const candidates = [
+    flexibleStartTagRegex(startTags[0]),
+    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
+    flexibleStartTagRegex(startTags[1]),
+  ];
+  for (const re of candidates) {
+    const match = re.exec(source);
+    if (match) {
+      return source.substring(0, match.index).split("\n").length;
+    }
+  }
+  return null;
+}
+
+export function genRandomId(collection = null, length = 10, lettersOnly = false) {
+  let id;
+  if (lettersOnly) {
+    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random) * ID_LETTERS.length]).join("");
+  } else {
+    id = Math.random().toString(36).substring(2, length + 2);
+  }
+  if (!collection) return id;
+  if (collection.includes(id)) {
+    return genRandomId(collection, length, lettersOnly);
+  } else {
+    collection.push(id);
+    return id;
+  }
+}
+
+export function deterministicHash(content, length = 8) {
+  const hash = createHash("sha256").update(content).digest();
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += String.fromCharCode(97 + (hash[i % hash.length] % 26));
+  }
+  return result;
+}
+
+export function runtimeFunctionId(compName) {
+  return "r_" + deterministicHash(compName, 8);
+}
+
+const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";