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

package/LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -7,7 +7,7 @@
 
 Chocola is a new and sweeter way to build your web apps.
 
-No bundler config. No virtual DOM. No hydration ceremony. Just `.html` files with `<template>`, `<script>`, and `<style>` compiled to HTML with scoped CSS the browser already understands, and optional runtime when you need it.
+Just `.html` files with `<template>`, `<script>`, and `<style>` compiled to HTML with scoped CSS the browser already understands, and optional runtime when you need it.
 
 Import components. Instantiate them. Mount, update, remove. Client-side or server-side. Same file, minimal overhead.
 
@@ -15,11 +15,10 @@ Import components. Instantiate them. Mount, update, remove. Client-side or serve
 <script>
     import CoolButton from './CoolButton.html';
 
-    let self;
-    let input;
-
     export let title = "Hello";
 
+    let input;
+
     function $runtime() {
         input.focus();
     }
@@ -38,6 +37,26 @@ Import components. Instantiate them. Mount, update, remove. Client-side or serve
 </style>
 ```
 
+## Supporting Chocola
+
+As of now, Chocola is a project driven by one developer (me, [@sadgabi20](https://github.com/sadgabi20)), but made to be community driven in the future. Therefore, the only current way to support Chocola is via my [GitHub Sponsors](https://github.com/sponsors/sadgabi20).
+
+If this project achieves a wider support, it will have its own official support channels.
+
 ## Documentation
 
-https://github.com/chocolajs/chocola/tree/main/documentation
+- [Getting started](documentation/01-introduction/02-getting-started.md)
+- [Project structure](documentation/01-introduction/03-project-structure.md)
+- [Build API reference](documentation/07-reference/04-cli.md)
+
+## Roadmap
+
+If you want to know what is being worked on right now, see the [Roadmap](ROADMAP.md).
+
+## Contributing
+
+Please follow the [Contribution Guidelines](CONTRIBUTING.md) to know how to contribute to Chocola.
+
+## License
+
+[MIT](LICENSE)

package/compiler/component-processor.js

@@ -3,17 +3,14 @@ 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,
 } from "../parser/index.js";
-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 +21,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 +52,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 +68,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 +102,41 @@ 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
+    }
+  }
   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 +145,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 +165,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 +205,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 +247,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 +265,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 +280,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;
@@ -254,20 +293,59 @@ export function processComponentElement(
   let template = doc.querySelector("template")?.innerHTML;
   let styles = doc.querySelector("style")?.innerHTML;
 
-  if (!template) {
-    console.warn(chalk.yellow(`${compName} — component is missing a <template>`));
-    return false;
+   if (!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) {
+          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 +377,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 +453,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 +473,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 +508,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 +597,7 @@ export function processComponentElement(
       child,
       cx,
       renderChain.concat(compName),
-      compName,
+      displayName,
       template,
       globalCtx
     );
@@ -531,32 +654,112 @@ 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) {
+                 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 +801,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);
+          }
         }
       }
     }