chocola 2.0.0-next.10 → 2.0.0-next.11

package/compiler/component-processor.js

@@ -3,7 +3,7 @@ import { parseHTML } from "linkedom";
 import { protectCurlyBraces } from "../utils.js";
 import { genRandomId, runtimeFunctionId, throwError, deterministicHash, warnConstantCondition, warnUnusedDeclaration, findElementLine } from "./utils.js";
 import {
-  extractPropsDefaults, extractRuntime, extractTopLevelFunctions, extractTopLevelVariables,
+  extractPropsDefaults, extractRuntime, extractTopLevelFunctions, extractTopLevelVariables, parseScript, computeReachable,
   extractCtxFromEl, hasMountIf, getMountIf,
   reservedAttrs, validateChainStructure, applyConditionalToElement, interpolateNode,
   scopeCss, compileExpr, evaluateConstant,
@@ -13,7 +13,7 @@ import chalk from "./chalk.js";
 
 
 class ProcessContext {
-  constructor(loadedComponents, runtimeChunks, compIdColl, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry, csrClasses) {
+  constructor(loadedComponents, runtimeChunks, compIdColl, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry, csrClasses, treeShakeRuntime = true, originalNames = null) {
     this.loadedComponents = loadedComponents;
     this.runtimeChunks = runtimeChunks;
     this.compIdColl = compIdColl;
@@ -24,9 +24,19 @@ class ProcessContext {
     this.staticCtxRegistry = staticCtxRegistry;
     this.csrClasses = csrClasses;
     this.unusedWarned = new Set();
+    this.treeShakeRuntime = treeShakeRuntime !== false;
+    this.originalNames = originalNames || new Map();
   }
 }
 
+function resolveDisplayName(compName, cx) {
+  if (!compName) return compName;
+  if (cx?.originalNames?.has(compName)) return cx.originalNames.get(compName);
+  const lower = compName.toLowerCase();
+  if (cx?.originalNames?.has(lower)) return cx.originalNames.get(lower);
+  return compName;
+}
+
 function escapeForTemplateLiteral(str) {
   return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\${/g, "\\${");
 }
@@ -45,6 +55,7 @@ function parseFragment(html, doc) {
 function generateCSRClass(compName, cx, explicitClassName) {
   if (cx.csrClasses.has(compName)) return;
 
+  const displayName = resolveDisplayName(compName, cx);
   let instance = cx.loadedComponents.get(compName);
   if (!instance) return;
 
@@ -60,7 +71,7 @@ function generateCSRClass(compName, cx, explicitClassName) {
   const compProps = extractPropsDefaults(script);
   const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
   const topVars = extractTopLevelVariables(script || "");
-  let runtime = extractRuntime(script || "", compName);
+  let runtime = extractRuntime(script || "", displayName);
 
   if (!cx.cssScopesMap.has(compName)) {
     cx.cssScopesMap.set(compName, deterministicHash(compName, 8));
@@ -94,12 +105,42 @@ function generateCSRClass(compName, cx, explicitClassName) {
   }
 
   let csrRuntimeSource = null;
+  // Compute reachable for client bundling (Step B) - Feature flag: treeShakeRuntime
+  const parsedForReach = parseScript(script || "");
+  let reach = null;
+  if (cx.treeShakeRuntime !== false && parsedForReach.ast && runtime) {
+    reach = computeReachable(parsedForReach, { bindings: [...bindVarNames] });
+    if (reach.fallback) {
+      // conservative: include all and warn
+      console.warn(chalk.yellow(`WARN ${displayName} — dynamic $runtime, including all declarations`));
+    }
+  }
   const injectedNames = new Set(compProps.map(p => p.name));
   for (const varName of bindVarNames) injectedNames.add(varName);
-  const topVarsToInject = topVars.filter(v => !injectedNames.has(v.name));
+  let topVarsToInject = topVars.filter(v => !injectedNames.has(v.name));
+  let propsToInject = compProps;
+  let funcsToInject = topFuncSrc;
+  let bindingsToInject = [...bindVarNames];
+  if (cx.treeShakeRuntime !== false && reach && !reach.fallback) {
+    const neededVarNames = new Set(reach.neededVars.flatMap(v => v.names));
+    const neededPropNames = new Set(reach.neededProps.map(p => p.name));
+    const neededFuncNames = new Set(reach.neededFuncs.map(src => {
+      const m = src.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)/);
+      return m ? m[1] : null;
+    }).filter(Boolean));
+    const neededBindingSet = new Set(reach.neededBindings);
+    // Filter to reachable only
+    propsToInject = compProps.filter(p => neededPropNames.has(p.name));
+    topVarsToInject = topVars.filter(v => neededVarNames.has(v.name) && !injectedNames.has(v.name));
+    funcsToInject = topFuncSrc.filter(src => {
+      const m = src.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)/);
+      return m && neededFuncNames.has(m[1]);
+    });
+    bindingsToInject = [...bindVarNames].filter(b => neededBindingSet.has(b));
+  }
   if (runtime) {
     let injectCode = "";
-    for (const { name, defaultValue } of compProps) {
+    for (const { name, defaultValue } of propsToInject) {
       if (defaultValue !== undefined) {
         injectCode += `let ${name} = ctx.${name}??(${defaultValue});\n`;
       } else {
@@ -108,18 +149,18 @@ function generateCSRClass(compName, cx, explicitClassName) {
     }
     for (const { keyword, name, value } of topVarsToInject) {
       if (value !== undefined) {
-        injectCode += `${keyword} ${name} = ctx.${name}??(${value});\n`;
+        injectCode += `${keyword} ${name} = ${value};\n`;
       } else {
         injectCode += `${keyword} ${name};\n`;
       }
     }
-    for (const varName of bindVarNames) {
+    for (const varName of bindingsToInject) {
       if (varName !== "self") {
         injectCode += `let ${varName} = ctx.${varName};\n`;
       }
     }
-    if (topFuncSrc.length > 0) {
-      injectCode += "\n" + topFuncSrc.join("\n\n") + "\n";
+    if (funcsToInject.length > 0) {
+      injectCode += "\n" + funcsToInject.join("\n\n") + "\n";
     }
     runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
     runtime = runtime.replace(`${RUNTIME_KW}()`, `function(self, ctx)`);
@@ -128,13 +169,13 @@ function generateCSRClass(compName, cx, explicitClassName) {
 
   const className = explicitClassName || compName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
   const propsParts = [];
-  for (const { name, defaultValue } of compProps) {
-    propsParts.push(`${JSON.stringify(name)}: ${defaultValue !== undefined ? defaultValue : "null"}`);
+  // For CSR class props: when runtime exists, include only reachable; otherwise keep all (fallback for CSR-only)
+  let propsForClass = compProps;
+  if (cx.treeShakeRuntime !== false && runtime && reach && !reach.fallback) {
+    propsForClass = propsToInject;
   }
-  for (const { name, value } of topVarsToInject) {
-    if (value !== undefined) {
-      propsParts.push(`${JSON.stringify(name)}: ${value}`);
-    }
+  for (const { name, defaultValue } of propsForClass) {
+    propsParts.push(`${JSON.stringify(name)}: ${defaultValue !== undefined ? defaultValue : "null"}`);
   }
 
   const childrenPart = childMappings.length > 0
@@ -168,6 +209,7 @@ function findLineInSource(source, regex) {
 }
 
 function warnUnusedDeclarations(cx, compName, instance, script, fragment) {
+  const displayName = resolveDisplayName(compName, cx);
   if (!script && !fragment.querySelector("[bind\\:]")) return;
   if (cx.unusedWarned.has(compName)) return;
   cx.unusedWarned.add(compName);
@@ -209,14 +251,14 @@ function warnUnusedDeclarations(cx, compName, instance, script, fragment) {
   const isUnused = (name) => (counts.get(name) || 0) <= 1;
   const warn = (kind, name, declRegex) => {
     const lineNum = findLineInSource(instance, declRegex);
-    warnUnusedDeclaration(lineNum !== null ? `${compName}:${lineNum}` : compName, kind, name);
+    warnUnusedDeclaration(lineNum !== null ? `${displayName}:${lineNum}` : displayName, kind, name);
   };
 
   for (const name of props) {
     if (isUnused(name)) warn("prop", name, new RegExp("export\\s+let\\s+" + escapeNameForRegex(name) + "\\b"));
   }
   for (const name of topVars) {
-    if (isUnused(name)) warn("variable", name, new RegExp("(?:^|[^\\w])(?:let|const)\\s+" + escapeNameForRegex(name) + "\\b"));
+    if (isUnused(name)) warn("variable", name, new RegExp("(?:^|[^\\w])(?:let|const|var)\\s+" + escapeNameForRegex(name) + "\\b"));
   }
   for (const name of topFuncs) {
     if (isUnused(name)) warn("function", name, new RegExp("(?:async\\s+)?function\\s+" + escapeNameForRegex(name) + "\\b"));
@@ -227,7 +269,7 @@ function warnUnusedDeclarations(cx, compName, instance, script, fragment) {
     seenBindings.add(name);
     if (isUnused(name)) {
       const lineNum = findElementLine(instance, element.outerHTML);
-      warnUnusedDeclaration(lineNum !== null ? `${compName}:${lineNum}` : compName, "binding", name);
+      warnUnusedDeclaration(lineNum !== null ? `${displayName}:${lineNum}` : displayName, "binding", name);
     }
   }
 }
@@ -242,6 +284,7 @@ export function processComponentElement(
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".html";
+  const displayName = resolveDisplayName(compName, cx);
   let instance = cx.loadedComponents.get(compName);
 
   if (!instance || instance === undefined) return false;
@@ -255,19 +298,60 @@ export function processComponentElement(
   let styles = doc.querySelector("style")?.innerHTML;
 
   if (!template) {
-    console.warn(chalk.yellow(`${compName} — component is missing a <template>`));
+    console.warn(chalk.yellow(`${displayName} — component is missing a <template>`));
     return false;
   }
 
+  // Store original script for reachability (before stripping)
+  const originalScriptForReach = script;
   if (script) {
-    const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
-    script = script.replace(importRegex, (_, importedName, importPath) => {
-      const importedCompName = path.basename(importPath).toLowerCase();
-      if (cx.loadedComponents.has(importedCompName)) {
-        generateCSRClass(importedCompName, cx, importedName);
+    const parsed = parseScript(script);
+    if (parsed.ast && parsed.imports.length > 0) {
+      // Determine needed imports via reachability (Step B) - Feature flag
+      let importsToGenerate = parsed.imports;
+      if (cx.treeShakeRuntime === false) {
+        // keep all imports when tree-shaking disabled
+      } else if (parsed.runtimeNode) {
+        const reachForImports = computeReachable(parsed, { bindings: [] });
+        if (!reachForImports.fallback) {
+          const neededSet = new Set(reachForImports.neededImports);
+          importsToGenerate = parsed.imports.filter(imp => neededSet.has(imp));
+        }
+      } else {
+        // No runtime -> no client imports needed (server-only)
+        importsToGenerate = [];
       }
-      return "";
-    });
+      for (const imp of importsToGenerate) {
+        const isComponent = imp.source.toLowerCase().endsWith(".html");
+        if (!isComponent) {
+          console.warn(chalk.yellow(`WARN ${displayName} — JS import "${imp.source}" is client-reachable but not bundled (Phase 1: dropping)`));
+          continue;
+        }
+        const importedCompName = path.basename(imp.source).toLowerCase();
+        if (cx.loadedComponents.has(importedCompName)) {
+          if (imp.specifiers.length === 0) {
+            generateCSRClass(importedCompName, cx);
+          } else {
+            for (const spec of imp.specifiers) {
+              generateCSRClass(importedCompName, cx, spec.local);
+            }
+          }
+        }
+      }
+      const sorted = [...parsed.imports].sort((a, b) => b.start - a.start);
+      for (const imp of sorted) {
+        script = script.slice(0, imp.start) + script.slice(imp.end);
+      }
+    } else if (parsed.parseError) {
+      const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+      script = script.replace(importRegex, (_, importedName, importPath) => {
+        const importedCompName = path.basename(importPath).toLowerCase();
+        if (cx.loadedComponents.has(importedCompName)) {
+          generateCSRClass(importedCompName, cx, importedName);
+        }
+        return "";
+      });
+    }
   }
 
   const compProps = extractPropsDefaults(script);
@@ -299,20 +383,65 @@ export function processComponentElement(
 
   const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
   const topVars = extractTopLevelVariables(script || "");
-  for (const { name, value } of topVars) {
-    if (name in ctx) continue;
-    if (value !== undefined) {
-      try {
-        ctx[name] = compileExpr(value, false)();
-      } catch {}
+  // Server resolution: evaluate all top-level declarations into ctx for template rendering
+  // Use AST-derived parsed data when available to correctly handle destructuring and comma declarators
+  // Use ctx-aware evaluation so initializers can reference earlier ctx vars (e.g., let a = x + y)
+  const ctxProxyForServer = new Proxy(ctx, { has() { return true; }, get(t,k){ return t[k]; } });
+  if (originalScriptForReach) {
+    const parsedForServer = parseScript(originalScriptForReach);
+    if (parsedForServer.ast) {
+      for (const v of parsedForServer.topVars) {
+        if (v.isDestructuring) {
+          if (v.names.every(n => n in ctx)) continue;
+          if (v.value === undefined) {
+            for (const n of v.names) if (!(n in ctx)) ctx[n] = undefined;
+            continue;
+          }
+          try {
+            const initVal = compileExpr(v.value, true)(ctxProxyForServer);
+            const fnBody = `${v.keyword} ${v.name} = initVal; return {${v.names.join(", ")}};`;
+            const result = new Function("initVal", fnBody)(initVal);
+            for (const n of v.names) if (!(n in ctx)) ctx[n] = result[n];
+          } catch {}
+        } else {
+          const { name, value } = v;
+          if (name in ctx) continue;
+          if (value !== undefined) {
+            try { ctx[name] = compileExpr(value, true)(ctxProxyForServer); } catch {}
+          } else {
+            if (!(name in ctx)) ctx[name] = undefined;
+          }
+        }
+      }
+      for (const src of parsedForServer.topFuncs) {
+        try {
+          const fn = (0, eval)("(" + src + ")");
+          const name = fn.name;
+          if (name && !(name in ctx)) ctx[name] = fn;
+        } catch {}
+      }
+    } else {
+      // Fallback to shim evaluation (ctx-aware for inter-var deps)
+      for (const { name, value } of topVars) {
+        if (name in ctx) continue;
+        if (value !== undefined) {
+          try { ctx[name] = compileExpr(value, true)(ctxProxyForServer); } catch {}
+        }
+      }
+      for (const src of topFuncSrc) {
+        try { const fn = (0, eval)("(" + src + ")"); const name = fn.name; if (name && !(name in ctx)) ctx[name] = fn; } catch {}
+      }
+    }
+  } else {
+    for (const { name, value } of topVars) {
+      if (name in ctx) continue;
+      if (value !== undefined) {
+        try { ctx[name] = compileExpr(value, true)(ctxProxyForServer); } catch {}
+      }
+    }
+    for (const src of topFuncSrc) {
+      try { const fn = (0, eval)("(" + src + ")"); const name = fn.name; if (name && !(name in ctx)) ctx[name] = fn; } catch {}
     }
-  }
-  for (const src of topFuncSrc) {
-    try {
-      const fn = (0, eval)("(" + src + ")");
-      const name = fn.name;
-      if (name && !(name in ctx)) ctx[name] = fn;
-    } catch {}
   }
 
   const elInnerHtml = element.innerHTML;
@@ -330,7 +459,7 @@ export function processComponentElement(
   if (sourceFile) {
     validateChainStructure(slotFragment, sourceFile, sourceContent, elInnerHtml);
   }
-  validateChainStructure(fragment, instance.__sourceFile || compName, instance, template);
+  validateChainStructure(fragment, instance.__sourceFile || displayName, instance, template);
   Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
     slot.replaceWith(slotFragment);
   });
@@ -350,7 +479,7 @@ export function processComponentElement(
     let location = sourceFile;
     if (instance) {
       const lineNum = findElementLine(instance, el.outerHTML);
-      if (lineNum !== null) location = `${compName}:${lineNum}`;
+      if (lineNum !== null) location = `${displayName}:${lineNum}`;
     }
     if (location === sourceFile && sourceContent) {
       const lineNum = findElementLine(sourceContent, el.outerHTML);
@@ -385,7 +514,7 @@ export function processComponentElement(
 
     if (hasElif || hasElse) {
       if (!condChain.active) {
-        throwError(`${instance.__sourceFile || compName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/mount:if sibling`);
+        throwError(`${instance.__sourceFile || displayName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/mount:if sibling`);
       }
       if (condChain.rendered) {
         child.remove();
@@ -474,7 +603,7 @@ export function processComponentElement(
       child,
       cx,
       renderChain.concat(compName),
-      compName,
+      displayName,
       template,
       globalCtx
     );
@@ -531,32 +660,113 @@ export function processComponentElement(
 
       script = script.replace(ctxRegex, "ctx");
 
-      let runtime = extractRuntime(script, compName);
+      let runtime = extractRuntime(script, displayName);
 
       if (runtime) {
         let fnEntry = cx.runtimeMap && cx.runtimeMap.get(compName);
         let fnId;
         if (!fnEntry) {
           fnId = runtimeFunctionId(compName);
-          const topFuncs = topFuncSrc;
-
-          let injectCode = ctxDef;
-          for (const b of bindings) declared.add(b.varName);
-          const undeclaredTopVars = topVars.filter(v => !declared.has(v.name));
-          if (undeclaredTopVars.length > 0) {
-            injectCode += "\n" + undeclaredTopVars.map(v => v.value !== undefined
-              ? `${v.keyword} ${v.name} = ctx.${v.name}??(${v.value});`
+          // Step B: filter to client-reachable declarations - Feature flag
+          let reachInject = null;
+          if (cx.treeShakeRuntime !== false && originalScriptForReach) {
+            const parsedReach = parseScript(originalScriptForReach);
+            if (parsedReach.ast) {
+              const bindNames = bindings.map(b => b.varName);
+              reachInject = computeReachable(parsedReach, { bindings: bindNames });
+              if (reachInject.fallback) {
+                console.warn(chalk.yellow(`WARN ${displayName} — dynamic $runtime, including all declarations`));
+                reachInject = null;
+              }
+            }
+          }
+          // Prepare filtered sets
+          let compPropsToInject = compProps;
+          let topVarsToInject = topVars;
+          let bindingsToInject = bindings;
+          let topFuncsToInject = topFuncSrc;
+          if (reachInject) {
+            const neededPropNames = new Set(reachInject.neededProps.map(p => p.name));
+            const neededVarNames = new Set(reachInject.neededVars.flatMap(v => v.names));
+            const neededBindingSet = new Set(reachInject.neededBindings);
+            const neededFuncNames = new Set(reachInject.neededFuncs.map(src => {
+              const m = src.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)/);
+              return m ? m[1] : null;
+            }).filter(Boolean));
+            // Rebuild ctxDef filtered to needed props (inject only reachable props)
+            // Note: declared handling below will be updated to use filtered props
+            compPropsToInject = compProps.filter(p => neededPropNames.has(p.name));
+            topVarsToInject = topVars.filter(v => neededVarNames.has(v.name));
+            bindingsToInject = bindings.filter(b => neededBindingSet.has(b.varName));
+            topFuncsToInject = topFuncSrc.filter(src => {
+              const m = src.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)/);
+              return m && neededFuncNames.has(m[1]);
+            });
+            // Rebuild ctxDef to only include reachable props
+            // declared already has runtimeCtx keys; now add only needed props
+            // Recreate ctxDef parts filtered
+            const ctxDefPartsFiltered = [];
+            const declaredForCtx = new Set(Object.keys(runtimeCtx));
+            for (const { name, defaultValue } of compPropsToInject) {
+              if (declaredForCtx.has(name)) continue;
+              if (defaultValue !== undefined) {
+                ctxDefPartsFiltered.push(`let ${name} = ctx.${name}??(${defaultValue});\n`);
+              } else {
+                ctxDefPartsFiltered.push(`let ${name} = ctx.${name};\n`);
+              }
+              declaredForCtx.add(name);
+            }
+            // Prepend runtimeCtx parts (already in ctxDefParts) but we need to reconstruct
+            // Simpler: rebuild ctxDef from scratch filtered
+            const runtimeCtxParts = [];
+            for (const [k,v] of Object.entries(runtimeCtx)) {
+              runtimeCtxParts.push(`let ${k} = ctx.${k}??${JSON.stringify(v)};\n`);
+            }
+            const filteredCtxDef = runtimeCtxParts.join("") + ctxDefPartsFiltered.join("");
+            // Use filtered ctxDef for injection
+            // declared set for topVars should include runtimeCtx + needed props + bindingsToInject
+            // We'll set injectCode later using filteredCtxDef
+            // Override ctxDef and declared handling
+            // Store for later use
+            reachInject._filteredCtxDef = filteredCtxDef;
+            reachInject._compPropsToInject = compPropsToInject;
+            reachInject._topVarsToInject = topVarsToInject;
+            reachInject._bindingsToInject = bindingsToInject;
+            reachInject._topFuncsToInject = topFuncsToInject;
+          }
+
+          let injectCode;
+          let effectiveTopVars;
+          let effectiveBindings;
+          let effectiveFuncs;
+          if (reachInject && reachInject._filteredCtxDef !== undefined) {
+            injectCode = reachInject._filteredCtxDef;
+            // declared for topVars filtering should include runtimeCtx + needed props + needed bindings
+            const filteredDeclared = new Set([...Object.keys(runtimeCtx), ...reachInject._compPropsToInject.map(p=>p.name), ...reachInject._bindingsToInject.map(b=>b.varName)]);
+            effectiveTopVars = reachInject._topVarsToInject.filter(v => !filteredDeclared.has(v.name));
+            effectiveBindings = reachInject._bindingsToInject;
+            effectiveFuncs = reachInject._topFuncsToInject;
+          } else {
+            injectCode = ctxDef;
+            for (const b of bindings) declared.add(b.varName);
+            effectiveTopVars = topVars.filter(v => !declared.has(v.name));
+            effectiveBindings = bindings;
+            effectiveFuncs = topFuncSrc;
+          }
+          if (effectiveTopVars.length > 0) {
+            injectCode += "\n" + effectiveTopVars.map(v => v.value !== undefined
+              ? `${v.keyword} ${v.name} = ${v.value};`
               : `${v.keyword} ${v.name};`
             ).join("\n") + "\n";
           }
-          if (bindings.length > 0) {
-            injectCode += "\n" + bindings.map(b => {
+          if (effectiveBindings.length > 0) {
+            injectCode += "\n" + effectiveBindings.map(b => {
               const accessor = b.prop === "self" ? "" : "." + b.prop;
               return "let " + b.varName + " = self.querySelector('[data-chbind-" + b.bindId + "]')" + accessor + ";";
             }).join("\n") + "\n";
           }
-          if (topFuncs.length > 0) {
-            injectCode += "\n" + topFuncs.join("\n\n") + "\n";
+          if (effectiveFuncs.length > 0) {
+            injectCode += "\n" + effectiveFuncs.join("\n\n") + "\n";
           }
           runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
 
@@ -598,21 +808,52 @@ export function processComponentElement(
   return firstChild && firstChild.nodeType === 1 ? firstChild : true;
 }
 
-export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent, globalCtx = {}) {
+export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent, globalCtx = {}, treeShakeRuntime = true, originalNames = null) {
   const cx = new ProcessContext(
-    loadedComponents, [], [], new Map(), [], new Map(), [], new Map(), new Map()
+    loadedComponents, [], [], new Map(), [], new Map(), [], new Map(), new Map(), treeShakeRuntime, originalNames
   );
 
   for (const [compName, instance] of cx.loadedComponents) {
-    const script = instance.match(/<script>([\s\S]*?)<\/script>/i);
-    if (script) {
-      const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
-      let match;
-      while ((match = importRegex.exec(script[1])) !== null) {
-        const importedName = match[1];
-        const importedCompName = path.basename(match[2]).toLowerCase();
-        if (cx.loadedComponents.has(importedCompName)) {
-          generateCSRClass(importedCompName, cx, importedName);
+    const scriptMatch = instance.match(/<script>([\s\S]*?)<\/script>/i);
+    if (scriptMatch) {
+      const scriptContent = scriptMatch[1];
+      const parsed = parseScript(scriptContent);
+      if (parsed.ast) {
+        let importsToGenerate = parsed.imports;
+        if (cx.treeShakeRuntime === false) {
+          // keep all when disabled
+        } else if (parsed.runtimeNode) {
+          const reach = computeReachable(parsed, { bindings: [] });
+          if (!reach.fallback) {
+            const neededSet = new Set(reach.neededImports);
+            importsToGenerate = parsed.imports.filter(imp => neededSet.has(imp));
+          }
+        } else {
+          importsToGenerate = [];
+        }
+        for (const imp of importsToGenerate) {
+          const isComponent = imp.source.toLowerCase().endsWith(".html");
+          if (!isComponent) continue;
+          const importedCompName = path.basename(imp.source).toLowerCase();
+          if (cx.loadedComponents.has(importedCompName)) {
+            if (imp.specifiers.length === 0) {
+              generateCSRClass(importedCompName, cx);
+            } else {
+              for (const spec of imp.specifiers) {
+                generateCSRClass(importedCompName, cx, spec.local);
+              }
+            }
+          }
+        }
+      } else {
+        const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+        let match;
+        while ((match = importRegex.exec(scriptContent)) !== null) {
+          const importedName = match[1];
+          const importedCompName = path.basename(match[2]).toLowerCase();
+          if (cx.loadedComponents.has(importedCompName)) {
+            generateCSRClass(importedCompName, cx, importedName);
+          }
         }
       }
     }

package/compiler/config.js

@@ -1,22 +1,52 @@
 import path from "path";
-import { getConfig } from "../utils.js";
+import { promises as fsp } from "fs";
+import chalk from "./chalk.js";
+import { getConfig, isMissingConfigFile, queueConfigWarning } from "../utils.js";
 
-export async function loadConfig(rootDir) {
-  const config = await getConfig(rootDir);
-  const bundleConfig = config.bundle || {};
+const warnedBundleFields = new Set();
 
-  const srcDir = bundleConfig.srcDir || "src";
-  const outDir = bundleConfig.outDir || "dist";
-  const libDir = bundleConfig.libDir || "lib";
-  const emptyOutDir = bundleConfig.emptyOutDir !== false;
+export async function loadConfig(rootDir, { silent, customPath, overrides } = {}) {
+  const config = customPath
+    ? await fsp.readFile(customPath, "utf-8").then(r => JSON.parse(r))
+    : await getConfig(rootDir, { silent });
 
-  return { srcDir, outDir, libDir, emptyOutDir };
+  let srcDir = "src", outDir = "dist", libDir = "lib", emptyOutDir = true, treeShakeRuntime = true;
+
+  if (!customPath || !isMissingConfigFile(config)) {
+    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;
+
+    if (!silent && hasBundle) {
+      if (bundleConfig.srcDir == null && !warnedBundleFields.has(rootDir + ":srcDir")) {
+        warnedBundleFields.add(rootDir + ":srcDir");
+        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.srcDir not defined in chocola.config.json file: using default "src" bundle.srcDir.`);
+      }
+      if (bundleConfig.outDir == null && !warnedBundleFields.has(rootDir + ":outDir")) {
+        warnedBundleFields.add(rootDir + ":outDir");
+        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.outDir not defined in chocola.config.json file: using default "dist" bundle.outDir.`);
+      }
+      if (bundleConfig.libDir == null && !warnedBundleFields.has(rootDir + ":libDir")) {
+        warnedBundleFields.add(rootDir + ":libDir");
+        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.libDir not defined in chocola.config.json file: using default "lib" bundle.libDir.`);
+      }
+    }
+  }
+
+  const result = { srcDir, outDir, libDir, emptyOutDir, treeShakeRuntime };
+  if (overrides) { Object.assign(result, overrides); }
+  return result;
 }
 
 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),
+    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),
   };
 }