chocola 1.6.0 → 2.0.0-next.10

package/compiler/component-processor.js

@@ -1,510 +1,638 @@
-import { JSDOM } from "jsdom";
-import { extractContextFromElement } from "./dom-processor.js";
-import { genRandomId, incrementAlfabet, throwError, protectCurlyBraces } from "./utils.js";
-import chalk from "chalk";
-import beautify from "js-beautify";
-
-function hasCombinator(sel) {
-  let depth = 0;
-  for (const ch of sel) {
-    if (ch === '[') depth++;
-    else if (ch === ']') depth--;
-    else if (depth === 0 && (ch === ' ' || ch === '>' || ch === '+' || ch === '~')) return true;
+import path from "path";
+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,
+  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) {
+    this.loadedComponents = loadedComponents;
+    this.runtimeChunks = runtimeChunks;
+    this.compIdColl = compIdColl;
+    this.runtimeMap = runtimeMap;
+    this.cssScopes = cssScopes;
+    this.cssScopesMap = cssScopesMap;
+    this.scopedStyles = scopedStyles;
+    this.staticCtxRegistry = staticCtxRegistry;
+    this.csrClasses = csrClasses;
+    this.unusedWarned = new Set();
   }
-  return false;
 }
 
-function scopeSelector(sel, cssId) {
-  const s = sel.trim();
-  if (s.startsWith("." + cssId)) return s;
-  if (hasCombinator(s)) return `.${cssId} ${s}`;
-  return `.${cssId}${s}, .${cssId} ${s}`;
+function escapeForTemplateLiteral(str) {
+  return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\${/g, "\\${");
 }
 
-function scopeCss(cssString, cssId) {
-  const keyframeRegex = /@(-webkit-)?keyframes\s+(\S+)/gi;
-  const animNames = new Set();
-  let match;
-  while ((match = keyframeRegex.exec(cssString))) {
-    animNames.add(match[2]);
+function parseFragment(html, doc) {
+  const fragment = doc.createDocumentFragment();
+  const temp = doc.createElement("div");
+  temp.innerHTML = html;
+  const children = [...temp.childNodes];
+  for (const child of children) {
+    fragment.appendChild(child);
   }
+  return fragment;
+}
 
-  if (animNames.size > 0) {
-    const sorted = [...animNames].sort((a, b) => b.length - a.length);
-    const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    for (const name of sorted) {
-      cssString = cssString.replace(
-        new RegExp(`(@(?:-webkit-)?keyframes\\s+)${esc(name)}`, "gi"),
-        `$1${name}-${cssId}`
-      );
-      cssString = cssString.replace(
-        new RegExp(`((?:animation|animation-name)\\s*:\\s*[^;{]*?)\\b${esc(name)}\\b`, "gi"),
-        `$1${name}-${cssId}`
-      );
-    }
+function generateCSRClass(compName, cx, explicitClassName) {
+  if (cx.csrClasses.has(compName)) return;
+
+  let instance = cx.loadedComponents.get(compName);
+  if (!instance) return;
+
+  instance = protectCurlyBraces(instance);
+  const dom = parseHTML(instance);
+  const doc = dom.document;
+  const script = doc.querySelector("script")?.innerHTML;
+  const template = doc.querySelector("template")?.innerHTML;
+  const styles = doc.querySelector("style")?.innerHTML;
+
+  if (!template) return;
+
+  const compProps = extractPropsDefaults(script);
+  const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
+  const topVars = extractTopLevelVariables(script || "");
+  let runtime = extractRuntime(script || "", compName);
+
+  if (!cx.cssScopesMap.has(compName)) {
+    cx.cssScopesMap.set(compName, deterministicHash(compName, 8));
+  }
+  const cssId = cx.cssScopesMap.get(compName);
+
+  if (styles) {
+    cx.scopedStyles.push(scopeCss(styles, cssId));
   }
 
-  function findMatchingBrace(s, openIndex) {
-    let depth = 0;
-    for (let i = openIndex; i < s.length; i++) {
-      const ch = s[i];
-      if (ch === '{') depth++;
-      else if (ch === '}') {
-        depth--;
-        if (depth === 0) return i;
+  const childMappings = [];
+  const bindVarNames = new Set();
+  const templateDoc = parseFragment(template, doc);
+  const seenTags = new Set();
+  for (const el of templateDoc.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    if (!seenTags.has(tag)) {
+      seenTags.add(tag);
+      const childCompName = tag + ".html";
+      if (cx.loadedComponents.has(childCompName)) {
+        generateCSRClass(childCompName, cx);
+        const childClassName = childCompName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
+        childMappings.push({ tag, compClass: childClassName });
+      }
+    }
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith("bind:")) {
+        bindVarNames.add(attr.value);
       }
     }
-    return s.length - 1;
   }
 
-  const scopeInnerAtRules = new Set(["@media", "@supports", "@container", "@layer"]);
-
-  function processBlock(str) {
-    str = str.replaceAll(":root", `.${cssId}`);
-
-    let out = "";
-    let i = 0;
-    while (i < str.length) {
-      const braceIndex = str.indexOf('{', i);
-      if (braceIndex === -1) {
-        out += str.slice(i);
-        break;
+  let csrRuntimeSource = null;
+  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));
+  if (runtime) {
+    let injectCode = "";
+    for (const { name, defaultValue } of compProps) {
+      if (defaultValue !== undefined) {
+        injectCode += `let ${name} = ctx.${name}??(${defaultValue});\n`;
+      } else {
+        injectCode += `let ${name} = ctx.${name};\n`;
       }
-      const header = str.substring(i, braceIndex);
-      const endBrace = findMatchingBrace(str, braceIndex);
-      const inner = str.substring(braceIndex + 1, endBrace);
-
-      if (header.trim().startsWith("@")) {
-        const atKeyword = header.trim().split(/\s+/)[0].toLowerCase();
-        if (scopeInnerAtRules.has(atKeyword)) {
-          out += header + "{" + processBlock(inner) + "}";
-        } else {
-          out += header + "{" + inner + "}";
-        }
+    }
+    for (const { keyword, name, value } of topVarsToInject) {
+      if (value !== undefined) {
+        injectCode += `${keyword} ${name} = ctx.${name}??(${value});\n`;
       } else {
-        const innerScoped = processBlock(inner);
-        const selectors = header
-          .split(",")
-          .map(s => s.trim())
-          .filter(Boolean);
-        const scopedHeader = selectors.length > 0
-          ? selectors.map(sel => scopeSelector(sel, cssId)).join(", ")
-          : header;
-        out += scopedHeader + "{" + innerScoped + "}";
+        injectCode += `${keyword} ${name};\n`;
+      }
+    }
+    for (const varName of bindVarNames) {
+      if (varName !== "self") {
+        injectCode += `let ${varName} = ctx.${varName};\n`;
       }
+    }
+    if (topFuncSrc.length > 0) {
+      injectCode += "\n" + topFuncSrc.join("\n\n") + "\n";
+    }
+    runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
+    runtime = runtime.replace(`${RUNTIME_KW}()`, `function(self, ctx)`);
+    csrRuntimeSource = runtime.replace(/^(async\s+)?function\s+\w+/, "$1function");
+  }
 
-      i = endBrace + 1;
+  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 (const { name, value } of topVarsToInject) {
+    if (value !== undefined) {
+      propsParts.push(`${JSON.stringify(name)}: ${value}`);
     }
-    return out;
   }
 
-  return processBlock(cssString);
+  const childrenPart = childMappings.length > 0
+    ? ",\n      children: [" + childMappings.map(m => `{tag:"${m.tag}",compClass:${m.compClass}}`).join(",") + "]"
+    : "";
+  const runtimePart = csrRuntimeSource ? `,\n      runtime: ${csrRuntimeSource}` : "";
+  const propsPart = propsParts.length > 0 ? `{ ${propsParts.join(", ")} }` : "{}";
+  const classDef = `class ${className} extends ChocolaComponent {\n  constructor() {\n    super({\n      template: \`${escapeForTemplateLiteral(template)}\`,\n      hash: "${cssId}",\n      props: ${propsPart}${runtimePart}${childrenPart}\n    });\n  }\n}`;
+  cx.csrClasses.set(compName, classDef);
 }
 
-const warnedDeprecated = new Set();
-function hasDelIfAttr(el, sourceLoc) {
-  if (el.hasAttribute("del-if") && !el.hasAttribute("del:if") && !warnedDeprecated.has(sourceLoc)) {
-    warnedDeprecated.add(sourceLoc);
-    const name = sourceLoc ? sourceLoc.split(/[\\/]/).pop() : "unknown";
-    console.warn(chalk.yellow(`[deprecation] "del-if" is deprecated in ${chalk.cyan(name)} and will be removed in Chocola 2. Use "del:if" instead.`));
+const BARE_IDENTIFIER_RE = /(?<![.\w$])[a-zA-Z_$][0-9a-zA-Z_$]*/g;
+const PROPERTY_IDENTIFIER_RE = /\.([a-zA-Z_$][0-9a-zA-Z_$]*)/g;
+
+function countIdentifiers(text, counts) {
+  for (const re of [BARE_IDENTIFIER_RE, PROPERTY_IDENTIFIER_RE]) {
+    re.lastIndex = 0;
+    for (const m of text.matchAll(re)) counts.set(m[1] ?? m[0], (counts.get(m[1] ?? m[0]) || 0) + 1);
   }
-  return el.hasAttribute("del-if") || el.hasAttribute("del:if");
-}
-function getDelIfAttr(el) {
-  return el.getAttribute("del:if") ?? el.getAttribute("del-if");
+  return counts;
 }
-function removeDelIfAttr(el) {
-  el.removeAttribute("del-if");
-  el.removeAttribute("del:if");
+
+function escapeNameForRegex(name) {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-function interpolateNode(node, ctxProxy) {
-  if (node.nodeType === 3) {
-    node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
-      try {
-        return Function("ctx", `with(ctx) { return (${expr}); }`)(ctxProxy);
-      } catch {
-        return "";
-      }
-    });
-  } else {
-    node.childNodes.forEach(child => interpolateNode(child, ctxProxy));
-  }
+function findLineInSource(source, regex) {
+  const match = regex.exec(source);
+  if (!match) return null;
+  return source.substring(0, match.index).split("\n").length;
 }
 
-function validateChainStructure(parent, sourceFile, sourceContent, parentContent) {
-  const children = [...parent.children];
-  let chainActive = false;
-  const outerCounts = {};
+function warnUnusedDeclarations(cx, compName, instance, script, fragment) {
+  if (!script && !fragment.querySelector("[bind\\:]")) return;
+  if (cx.unusedWarned.has(compName)) return;
+  cx.unusedWarned.add(compName);
+
+  const props = extractPropsDefaults(script).map(p => p.name);
+  const topVars = extractTopLevelVariables(script).map(v => v.name);
+  const topFuncs = extractTopLevelFunctions(script, RUNTIME_KW)
+    .map(src => src.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)/)?.[1])
+    .filter(Boolean);
+
+  const bindings = [];
+  for (const el of fragment.querySelectorAll("*")) {
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith("bind:")) bindings.push({ name: attr.value, element: el });
+    }
+  }
 
-  for (const child of children) {
-    const hasIf = child.hasAttribute("if");
-    const hasDelIf = hasDelIfAttr(child, sourceFile);
-    const hasElif = child.hasAttribute("elif");
-    const hasElse = child.hasAttribute("else");
+  const counts = new Map();
+  if (script) countIdentifiers(script, counts);
 
-    if (hasElif || hasElse) {
-      if (!chainActive) {
-        const tag = child.tagName.toLowerCase();
-        const attr = hasElif ? "elif" : "else";
-        let loc = sourceFile;
-        if (sourceContent && parentContent) {
-          const outer = child.outerHTML;
-          outerCounts[outer] = (outerCounts[outer] || 0) + 1;
-          let searchIdx = 0;
-          let hits = 0;
-          while ((searchIdx = parentContent.indexOf(outer, searchIdx)) !== -1) {
-            hits++;
-            if (hits === outerCounts[outer]) {
-              let line = parentContent.substring(0, searchIdx).split("\n").length;
-              if (sourceContent !== parentContent) {
-                const anchor = parentContent.trim().slice(0, 80);
-                const vars = [
-                  anchor,
-                  anchor.replace(/=""/g, ' '),
-                  anchor.replace(/=""/g, ''),
-                  anchor.replace(/="/g, "='").replace(/"/g, "'"),
-                ];
-                let anchorIdx = -1;
-                for (const v of vars) {
-                  anchorIdx = sourceContent.indexOf(v);
-                  if (anchorIdx !== -1) break;
-                }
-                if (anchorIdx !== -1) {
-                  const offset = sourceContent.substring(0, anchorIdx).split("\n").length;
-                  line = offset + line - 1;
-                }
-              }
-              loc = `${sourceFile}:${line}`;
-              break;
-            }
-            searchIdx += outer.length;
-          }
+  const walk = (node) => {
+    if (node.nodeType === 3) {
+      for (const m of node.textContent.matchAll(/\{([^}]+)\}/g)) countIdentifiers(m[1], counts);
+      return;
+    }
+    if (node.attributes) {
+      for (const attr of node.attributes) {
+        if (attr.name.startsWith("bind:")) {
+          countIdentifiers(attr.value, counts);
+        } else {
+          for (const m of attr.value.matchAll(/\{([^}]+)\}/g)) countIdentifiers(m[1], counts);
         }
-        throwError(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
-      }
-      if (hasElse) {
-        chainActive = false;
       }
     }
-
-    if (hasIf || hasDelIf) {
-      chainActive = true;
-    } else if (!hasElif && !hasElse) {
-      chainActive = false;
+    for (const child of node.childNodes) walk(child);
+  };
+  walk(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);
+  };
+
+  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"));
+  }
+  for (const name of topFuncs) {
+    if (isUnused(name)) warn("function", name, new RegExp("(?:async\\s+)?function\\s+" + escapeNameForRegex(name) + "\\b"));
+  }
+  const seenBindings = new Set();
+  for (const { name, element } of bindings) {
+    if (seenBindings.has(name)) continue;
+    seenBindings.add(name);
+    if (isUnused(name)) {
+      const lineNum = findElementLine(instance, element.outerHTML);
+      warnUnusedDeclaration(lineNum !== null ? `${compName}:${lineNum}` : compName, "binding", name);
     }
-
-    validateChainStructure(child, sourceFile, sourceContent, parentContent);
   }
 }
 
-/**
- * Processes a single component element and inserts it into the DOM
- * @param {Element} element
- * @param {Map} loadedComponents
- * @param {Array} runtimeChunks
- * @param {Array} compIdColl
- * @param {object} letterState - { value: string }
- * @returns {boolean} - true if component was processed, false if not found
- */
 export function processComponentElement(
   element,
-  loadedComponents,
-  runtimeChunks,
-  compIdColl,
-  letterState,
-  runtimeMap,
-  cssScopes,
-  cssScopesMap,
-  scopedStyles,
+  cx,
   renderChain = [],
-  staticCtxRegistry,
   sourceFile,
-  sourceContent
+  sourceContent,
+  globalCtx = {}
 ) {
   const tagName = element.tagName.toLowerCase();
-  const compName = tagName + ".js";
-  const instance = loadedComponents.get(compName);
+  const compName = tagName + ".html";
+  let instance = cx.loadedComponents.get(compName);
 
   if (!instance || instance === undefined) return false;
   if (renderChain && renderChain.includes(compName)) return false;
 
+  instance = protectCurlyBraces(instance);
+  const dom = parseHTML(instance);
+  const doc = dom.document;
+  let script = doc.querySelector("script")?.innerHTML;
+  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 (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);
+      }
+      return "";
+    });
+  }
+
+  const compProps = extractPropsDefaults(script);
+
   let ctx;
-  if (staticCtxRegistry && staticCtxRegistry.has(element)) {
-    ctx = staticCtxRegistry.get(element);
+  if (cx.staticCtxRegistry && cx.staticCtxRegistry.has(element)) {
+    ctx = cx.staticCtxRegistry.get(element);
   } else {
-    ctx = extractContextFromElement(element);
-    staticCtxRegistry && staticCtxRegistry.set(element, ctx);
+    ctx = extractCtxFromEl(element, globalCtx);
+    if (globalCtx && typeof globalCtx === "object") {
+      for (const [k, v] of Object.entries(globalCtx)) {
+        if (!(k in ctx)) ctx[k] = v;
+      }
+    }
+    cx.staticCtxRegistry && cx.staticCtxRegistry.set(element, ctx);
+  }
+
+  if (compProps.length > 0) {
+    compProps.forEach(({ name, defaultValue }) => {
+      if (defaultValue !== undefined && !(name in ctx)) {
+        try {
+          ctx[name] = compileExpr(defaultValue, false)();
+        } catch {
+          ctx[name] = defaultValue;
+        }
+      }
+    });
   }
-  const srcInnerHtml = element.innerHTML;
+
+  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 {}
+    }
+  }
+  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;
 
   const ctxProxy = new Proxy(ctx, {
     has() { return true; },
     get(target, key) { return target[key]; }
   });
 
-  if (instance.body) {
-    let body = protectCurlyBraces(instance.body);
+  const fragment = parseFragment(template, doc);
+
+  warnUnusedDeclarations(cx, compName, instance, script, fragment);
 
-    const fragment = JSDOM.fragment(body);
+  const slotFragment = parseFragment(elInnerHtml, doc);
+  if (sourceFile) {
+    validateChainStructure(slotFragment, sourceFile, sourceContent, elInnerHtml);
+  }
+  validateChainStructure(fragment, instance.__sourceFile || compName, instance, template);
+  Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
+    slot.replaceWith(slotFragment);
+  });
 
-    const slotFragment = JSDOM.fragment(srcInnerHtml);
-    if (sourceFile) {
-      validateChainStructure(slotFragment, sourceFile, sourceContent, srcInnerHtml);
+  const childEntries = Array.from(fragment.querySelectorAll("*")).map(el => ({
+    el,
+    parent: el.parentNode
+  }));
+  const condChains = new Map();
+  const bindings = [];
+  const elBindIds = new Map();
+  let bindCounter = 0;
+
+  const conditionalLocations = new Map();
+  for (const { el } of childEntries) {
+    if (!el.hasAttribute("if") && !hasMountIf(el) && !el.hasAttribute("elif")) continue;
+    let location = sourceFile;
+    if (instance) {
+      const lineNum = findElementLine(instance, el.outerHTML);
+      if (lineNum !== null) location = `${compName}:${lineNum}`;
     }
-    validateChainStructure(fragment, instance.__sourceFile || compName, body, body);
-    Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
-      slot.replaceWith(slotFragment);
-    });
+    if (location === sourceFile && sourceContent) {
+      const lineNum = findElementLine(sourceContent, el.outerHTML);
+      if (lineNum !== null) location = `${sourceFile}:${lineNum}`;
+    }
+    conditionalLocations.set(el, location);
+  }
 
-    const childEntries = Array.from(fragment.querySelectorAll("*")).map(el => ({
-      el,
-      parent: el.parentNode
-    }));
-    const condChains = new Map();
+  childEntries.forEach(({ el: child, parent }) => {
+    if (!condChains.has(parent)) {
+      condChains.set(parent, { active: false, rendered: false });
+    }
+    const condChain = condChains.get(parent);
 
-    childEntries.forEach(({ el: child, parent }) => {
-      if (!condChains.has(parent)) {
-        condChains.set(parent, { active: false, rendered: false });
-      }
-      const condChain = condChains.get(parent);
+    const hasIf = child.hasAttribute("if");
+    const hasDelIf = hasMountIf(child);
+    const hasElif = child.hasAttribute("elif");
+    const hasElse = child.hasAttribute("else");
 
-      const hasIf = child.hasAttribute("if");
-      const hasDelIf = hasDelIfAttr(child, instance.__sourceFile || compName);
-      const hasElif = child.hasAttribute("elif");
-      const hasElse = child.hasAttribute("else");
+    if (hasIf || hasDelIf || hasElif) {
+      const location = conditionalLocations.get(child) || sourceFile;
+      const stripBraces = (raw) => raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const tag = child.tagName.toLowerCase();
+      const warnIfConstant = (expr, attr) => {
+        const { constant, value } = evaluateConstant(expr);
+        if (constant) warnConstantCondition(location, tag, attr, expr, Boolean(value));
+      };
+      if (hasIf) warnIfConstant(stripBraces(child.getAttribute("if")), "if");
+      if (hasDelIf) warnIfConstant(stripBraces(getMountIf(child)), "mount:if");
+      if (hasElif) warnIfConstant(stripBraces(child.getAttribute("elif")), "elif");
+    }
 
-      if (hasElif || hasElse) {
-        if (!condChain.active) {
-          throwError(`${instance.__sourceFile || compName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/del-if sibling`);
-        }
-        if (condChain.rendered) {
-          child.remove();
-          if (hasElse) {
-            condChain.active = false;
-          }
-          return;
+    if (hasElif || hasElse) {
+      if (!condChain.active) {
+        throwError(`${instance.__sourceFile || compName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/mount:if sibling`);
+      }
+      if (condChain.rendered) {
+        child.remove();
+        if (hasElse) {
+          condChain.active = false;
         }
+        return;
       }
+    }
 
-      if (child.tagName.toLowerCase() === "void") {
-        if (hasElif || hasElse) {
-          if (hasElif) {
-            const expr = child.getAttribute("elif").slice(1, -1);
-            const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-            if (!fn(ctxProxy)) {
-              child.remove();
-              return;
-            }
+    if (child.tagName.toLowerCase() === "void") {
+      if (hasElif || hasElse) {
+        if (hasElif) {
+          const expr = child.getAttribute("elif").slice(1, -1);
+          const fn = compileExpr(expr, true);
+          if (!fn(ctxProxy)) {
+            child.remove();
+            return;
           }
+        }
+        child.replaceWith(...child.children);
+        condChain.rendered = true;
+        if (hasElse) {
+          condChain.active = false;
+        }
+      } else if (hasIf || hasDelIf) {
+        const raw = hasIf ? child.getAttribute("if") : getMountIf(child);
+        const expr = raw.slice(1, -1);
+        const fn = compileExpr(expr, true);
+        condChain.active = true;
+        if (fn(ctxProxy)) {
           child.replaceWith(...child.children);
           condChain.rendered = true;
-          if (hasElse) {
-            condChain.active = false;
-          }
-        } else if (hasIf || hasDelIf) {
-          const raw = hasIf ? child.getAttribute("if") : getDelIfAttr(child);
-          const expr = raw.slice(1, -1);
-          const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-          condChain.active = true;
-          if (fn(ctxProxy)) {
-            child.replaceWith(...child.children);
-            condChain.rendered = true;
-          } else {
-            child.remove();
-            condChain.rendered = false;
-          }
         } else {
-          child.replaceWith(...child.children);
-          condChain.active = false;
+          child.remove();
           condChain.rendered = false;
         }
-        return;
+      } else {
+        child.replaceWith(...child.children);
+        condChain.active = false;
+        condChain.rendered = false;
       }
+      return;
+    }
 
-      const reservedAttrs = ["if", "del-if", "del:if", "elif", "else"];
+    Array.from(child.attributes).forEach(attribute => {
+      if (!attribute || attribute === undefined) return;
+      if (reservedAttrs.includes(attribute.name)) return;
+
+      if (attribute.name.startsWith("bind:")) {
+        const prop = attribute.name.slice(5);
+        const varName = attribute.value;
+        let bindId = elBindIds.get(child);
+        if (!bindId) {
+          bindId = "b" + (bindCounter++);
+          elBindIds.set(child, bindId);
+          child.setAttribute("data-chbind-" + bindId, "");
+        }
+        bindings.push({ prop, varName, bindId });
+        child.removeAttribute(attribute.name);
+        return;
+      }
 
-      Array.from(child.attributes).forEach(attribute => {
-        if (!attribute || attribute === undefined) return;
-        if (reservedAttrs.includes(attribute.name)) return;
-        attribute.value = attribute.value.replace(
+      child.setAttribute(
+        attribute.name,
+        attribute.value.replace(
           /\{([^}]+)\}/g,
           (_, expr) => {
             try {
-              return Function("ctx", `with(ctx) { return (${expr}); }`)(ctxProxy);
+              return compileExpr(expr, true)(ctxProxy);
             } catch {
               return "";
             }
           }
-        );
-      });
-
-      processComponentElement(
-        child,
-        loadedComponents,
-        runtimeChunks,
-        compIdColl,
-        letterState,
-        runtimeMap,
-        cssScopes,
-        cssScopesMap,
-        scopedStyles,
-        renderChain.concat(compName),
-        staticCtxRegistry,
-        instance.__sourceFile || compName,
-        body
+        )
       );
+    });
 
-      if (hasIf) {
-        const expr = child.getAttribute("if").slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-        condChain.active = true;
-        if (fn(ctxProxy)) {
-          condChain.rendered = true;
-        } else {
-          child.style.display = "none";
-          condChain.rendered = false;
-        }
-        child.removeAttribute("if");
-      } else if (hasDelIf) {
-        const expr = getDelIfAttr(child).slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-        condChain.active = true;
-        if (fn(ctxProxy)) {
-          condChain.rendered = true;
-        } else {
-          child.remove();
-          condChain.rendered = false;
+    const condAttrs = {};
+    if (hasIf) condAttrs["if"] = child.getAttribute("if");
+    if (hasDelIf) condAttrs["mount:if"] = getMountIf(child);
+    if (hasElif) condAttrs["elif"] = child.getAttribute("elif");
+    if (hasElse) condAttrs["else"] = "";
+
+    const processed = processComponentElement(
+      child,
+      cx,
+      renderChain.concat(compName),
+      compName,
+      template,
+      globalCtx
+    );
+
+    let condTarget = child;
+    if (processed && processed.nodeType === 1) {
+      condTarget = processed;
+      for (const [name, value] of Object.entries(condAttrs)) {
+        condTarget.setAttribute(name, value);
+      }
+    }
+
+    applyConditionalToElement(condTarget, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
+
+    interpolateNode(condTarget, ctxProxy)
+  });
+
+  let csrRuntimeSource = null;
+  const firstChild = fragment.children[0];
+
+  if (firstChild && firstChild.nodeType === 1) {
+    if (script) {
+      const compId = "chid-" + deterministicHash(compName + ":" + cx.compIdColl.length, 8);
+      cx.compIdColl.push(compId);
+      firstChild.setAttribute("chid", compId);
+
+      const ctxRegex = /ctx\s*=\s*({.*?})/;
+      const ctxMatch = script.match(ctxRegex);
+      let runtimeCtx = {};
+      if (ctxMatch) {
+        try {
+          runtimeCtx = JSON.parse(ctxMatch[1].replace(/(\w+):/g, '"$1":'));
+        } catch (e) {
+          runtimeCtx = {};
         }
-        removeDelIfAttr(child);
-      } else if (hasElif) {
-        const expr = child.getAttribute("elif").slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-        if (fn(ctxProxy)) {
-          condChain.rendered = true;
+      }
+      const ctxDefParts = [];
+      const declared = new Set();
+      for (const [key, value] of Object.entries(runtimeCtx)) {
+        ctxDefParts.push(`let ${key} = ctx.${key}??${JSON.stringify(value)};\n`);
+        declared.add(key);
+      }
+
+      for (const { name, defaultValue } of compProps) {
+        if (declared.has(name)) continue;
+        if (defaultValue !== undefined) {
+          ctxDefParts.push(`let ${name} = ctx.${name}??(${defaultValue});\n`);
         } else {
-          child.remove();
+          ctxDefParts.push(`let ${name} = ctx.${name};\n`);
         }
-        child.removeAttribute("elif");
-      } else if (hasElse) {
-        condChain.rendered = true;
-        condChain.active = false;
-        child.removeAttribute("else");
-      } else {
-        condChain.active = false;
-        condChain.rendered = false;
       }
 
-      interpolateNode(child, ctxProxy)
-    });
+      const ctxDef = ctxDefParts.join("");
 
-    const firstChild = fragment.firstChild;
+      script = script.replace(ctxRegex, "ctx");
 
-    if (firstChild && firstChild.nodeType === 1) {
-      if (instance.script || instance.effects) {
-        const compId = "chid-" + genRandomId(compIdColl);
-        firstChild.setAttribute("chid", compId);
+      let runtime = extractRuntime(script, compName);
 
-        let script = instance.script && instance.script.toString();
+      if (runtime) {
+        let fnEntry = cx.runtimeMap && cx.runtimeMap.get(compName);
+        let fnId;
+        if (!fnEntry) {
+          fnId = runtimeFunctionId(compName);
+          const topFuncs = topFuncSrc;
 
-        const ctxRegex = /ctx\s*=\s*({.*?})/;
-        const ctxMatch = script.match(ctxRegex);
-        let runtimeCtx = {};
-        if (ctxMatch) {
-          try {
-            runtimeCtx = JSON.parse(ctxMatch[1].replace(/(\w+):/g, '"$1":'));
-          } catch (e) {
-            runtimeCtx = {};
+          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});`
+              : `${v.keyword} ${v.name};`
+            ).join("\n") + "\n";
           }
-        }
-        let ctxDef = "";
-        for (const [key, value] of Object.entries(runtimeCtx)) {
-          ctxDef += `ctx.${key} = ctx.${key}||${JSON.stringify(value)};\n`;
-        }
-        script = script.replace(ctxRegex, "ctx");
-        script = script.replace(/RUNTIME\([^)]*\)\s*{/, match => match + "\n" + ctxDef);
-
-        let letterEntry = runtimeMap && runtimeMap.get(compName);
-        let letter;
-        if (!letterEntry) {
-          letter = getNextLetter(letterState);
-          script = script.replace(/RUNTIME/g, `${letter}RUNTIME`);
-          runtimeChunks.push(script);
-          runtimeMap && runtimeMap.set(compName, { letter });
+          if (bindings.length > 0) {
+            injectCode += "\n" + bindings.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";
+          }
+          runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
+
+          runtime = runtime.replace(`${RUNTIME_KW}()`, `${fnId}(self, ctx)`);
+          csrRuntimeSource = runtime.replace(/^function\s+\w+/, "function");
+          cx.runtimeChunks.push(runtime);
+          cx.runtimeMap && cx.runtimeMap.set(compName, { fnId });
         } else {
-          letter = letterEntry.letter;
+          fnId = fnEntry.fnId;
         }
 
-        runtimeChunks.push(`${letter}RUNTIME(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
+        cx.runtimeChunks.push(`${fnId}(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
       }
     }
+  }
 
-    let style = instance.styles && instance.styles.toString();
-    if (style) {
-      let cssId = cssScopesMap && cssScopesMap.get(compName);
-      if (!cssId) {
-        cssId = genRandomId(cssScopes, 8, true);
-        cssScopesMap.set(compName, cssId);
-      }
-      if (fragment.firstChild && fragment.firstChild.nodeType === 1) {
-        fragment.firstChild.classList.add(cssId);
-      }
-      style = scopeCss(style, cssId);
-      scopedStyles.push(style);
-    }
+  let cssId = cx.cssScopesMap && cx.cssScopesMap.get(compName);
+  if (!cssId) {
+    cssId = deterministicHash(compName, 8);
+    cx.cssScopesMap.set(compName, cssId);
+  }
+  if (fragment.children.length === 1 && firstChild.nodeType === 1) {
+    firstChild.classList.add(cssId);
+  }
+  if (styles) {
+    styles = scopeCss(styles, cssId);
+    cx.scopedStyles.push(styles);
+  }
 
-    if (fragment.firstChild && fragment.firstChild.nodeType === 1) {
-      fragment.firstChild.setAttribute("data-ch-source", instance.__sourceFile || compName);
-    }
+  if (csrRuntimeSource && !cx.csrClasses.has(compName)) {
+    generateCSRClass(compName, cx);
+  }
 
-    element.replaceWith(fragment);
-    return true;
+  if (element.style.display === "none" && firstChild && firstChild.nodeType === 1) {
+    firstChild.style.display = "none";
   }
 
-  console.warn(chalk.yellow(`${compName} — component could not be loaded (missing body or styles export)`));
-  return false;
+  element.replaceWith(fragment);
+  return firstChild && firstChild.nodeType === 1 ? firstChild : true;
 }
 
-/**
- * Processes all components in the app container
- * @param {Element[]} appElements
- * @param {Map} loadedComponents
- * @returns {{
- *   runtimeScript: string,
- *   hasComponents: boolean
- *   scopesCss: CSSString
- * }}
- */
-export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {
-  let runtimeChunks = [];
-  let compIdColl = [];
-  let letterState = { value: null };
-  let runtimeMap = new Map();
-  let cssScopes = [];
-  let cssScopesMap = new Map();
-  let scopedStyles = [];
-  let staticCtxRegistry = new Map();
+export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent, globalCtx = {}) {
+  const cx = new ProcessContext(
+    loadedComponents, [], [], new Map(), [], new Map(), [], new Map(), new Map()
+  );
+
+  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);
+        }
+      }
+    }
+  }
 
   appElements.forEach(el => {
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry, pageSourceFile, pageSourceContent);
+    if (!el.isConnected) return;
+    processComponentElement(el, cx, [], pageSourceFile, pageSourceContent, globalCtx);
   });
-  const runtimeScript = runtimeChunks.join("\n");
-  const hasComponents = runtimeChunks.length > 0;
-  const scopesCss = beautify.css(scopedStyles.join("\n"));
+  const runtimeScript = cx.runtimeChunks.join("\n");
+  const hasComponents = cx.runtimeChunks.length > 0;
+  const scopesCss = cx.scopedStyles.join("\n");
+  const csrClasses = [...cx.csrClasses.values()].join("\n\n");
+
+  const hashMap = {};
+  for (const [compName, hash] of cx.cssScopesMap) {
+    hashMap[compName] = hash;
+  }
 
-  return { runtimeScript, hasComponents, scopesCss };
+  return { runtimeScript, hasComponents, scopesCss, hashMap, csrClasses };
 }
 
-/**
- * Gets the next letter in sequence or starts with 'a'
- * @param {object} letterState - { value: string }
- * @returns {string}
- */
-function getNextLetter(letterState) {
-  if (!letterState.value) {
-    letterState.value = "a";
-  } else {
-    letterState.value = incrementAlfabet(letterState.value);
-  }
-  return letterState.value;
-}
+const RUNTIME_KW = "$runtime";