chocola 2.0.0-next.8 → 2.0.0-next.9

package/README.md

@@ -1,4 +1,7 @@
-![Chochola • The sweetest way to build the web](https://chocolaframework.web.app/static/img/banner.jpg)
+<picture>
+    <source media="(prefers-color-scheme: dark)" srcset="assets/banner_dark.jpg">
+    <img src="assets/banner.jpg" alt="Chocola • The sweetest way to build the web" />
+</picture>
 
 ## What is Chocola
 

package/compiler/component-processor.js

@@ -1,12 +1,12 @@
 import path from "path";
 import { parseHTML } from "linkedom";
 import { protectCurlyBraces } from "../utils.js";
-import { genRandomId, incrementAlfabet, throwError, deterministicHash } from "./utils.js";
+import { genRandomId, incrementAlfabet, throwError, deterministicHash, warnConstantCondition, warnUnusedDeclaration, findElementLine } from "./utils.js";
 import {
-  extractPropsDefaults, extractRuntime, extractTopLevelFunctions,
-  extractContextFromElement, hasDelIfAttr, getDelIfAttr, removeDelIfAttr,
+  extractPropsDefaults, extractRuntime, extractTopLevelFunctions, extractTopLevelVariables,
+  extractCtxFromEl, hasMountIf, getMountIf,
   reservedAttrs, validateChainStructure, applyConditionalToElement, interpolateNode,
-  scopeCss, compileExpression,
+  scopeCss, compileExpr, evaluateConstant,
 } from "../parser/index.js";
 import chalk from "./chalk.js";
 
@@ -24,6 +24,7 @@ class ProcessContext {
     this.scopedStyles = scopedStyles;
     this.staticCtxRegistry = staticCtxRegistry;
     this.csrClasses = csrClasses;
+    this.unusedWarned = new Set();
   }
 }
 
@@ -59,6 +60,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);
 
   if (!cx.cssScopesMap.has(compName)) {
@@ -93,15 +95,25 @@ function generateCSRClass(compName, cx, explicitClassName) {
   }
 
   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`;
+        injectCode += `let ${name} = ctx.${name}??(${defaultValue});\n`;
       } else {
         injectCode += `let ${name} = ctx.${name};\n`;
       }
     }
+    for (const { keyword, name, value } of topVarsToInject) {
+      if (value !== undefined) {
+        injectCode += `${keyword} ${name} = ctx.${name}??(${value});\n`;
+      } else {
+        injectCode += `${keyword} ${name};\n`;
+      }
+    }
     for (const varName of bindVarNames) {
       if (varName !== "self") {
         injectCode += `let ${varName} = ctx.${varName};\n`;
@@ -116,20 +128,110 @@ function generateCSRClass(compName, cx, explicitClassName) {
   }
 
   const className = explicitClassName || compName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
-  const propsObj = {};
+  const propsParts = [];
   for (const { name, defaultValue } of compProps) {
-    propsObj[name] = defaultValue !== undefined ? defaultValue : null;
+    propsParts.push(`${JSON.stringify(name)}: ${defaultValue !== undefined ? defaultValue : "null"}`);
+  }
+  for (const { name, value } of topVarsToInject) {
+    if (value !== undefined) {
+      propsParts.push(`${JSON.stringify(name)}: ${value}`);
+    }
   }
 
   const childrenPart = childMappings.length > 0
     ? ",\n      children: [" + childMappings.map(m => `{tag:"${m.tag}",compClass:${m.compClass}}`).join(",") + "]"
     : "";
   const runtimePart = csrRuntimeSource ? `,\n      runtime: ${csrRuntimeSource}` : "";
-  const classDef = `class ${className} extends ChocolaComponent {\n  constructor() {\n    super({\n      template: \`${escapeForTemplateLiteral(template)}\`,\n      hash: "${cssId}",\n      props: ${JSON.stringify(propsObj)}${runtimePart}${childrenPart}\n    });\n  }\n}`;
+  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 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 counts;
+}
+
+function escapeNameForRegex(name) {
+  return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function findLineInSource(source, regex) {
+  const match = regex.exec(source);
+  if (!match) return null;
+  return source.substring(0, match.index).split("\n").length;
+}
+
+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 });
+    }
+  }
+
+  const counts = new Map();
+  if (script) countIdentifiers(script, counts);
+
+  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);
+        }
+      }
+    }
+    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);
+    }
+  }
+}
 
 export function processComponentElement(
   element,
@@ -174,7 +276,7 @@ export function processComponentElement(
   if (cx.staticCtxRegistry && cx.staticCtxRegistry.has(element)) {
     ctx = cx.staticCtxRegistry.get(element);
   } else {
-    ctx = extractContextFromElement(element);
+    ctx = extractCtxFromEl(element);
     cx.staticCtxRegistry && cx.staticCtxRegistry.set(element, ctx);
   }
 
@@ -182,7 +284,7 @@ export function processComponentElement(
     compProps.forEach(({ name, defaultValue }) => {
       if (defaultValue !== undefined && !(name in ctx)) {
         try {
-          ctx[name] = compileExpression(defaultValue, false)();
+          ctx[name] = compileExpr(defaultValue, false)();
         } catch {
           ctx[name] = defaultValue;
         }
@@ -191,6 +293,15 @@ 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 {}
+    }
+  }
   for (const src of topFuncSrc) {
     try {
       const fn = (0, eval)("(" + src + ")");
@@ -208,6 +319,8 @@ export function processComponentElement(
 
   const fragment = parseFragment(template, doc);
 
+  warnUnusedDeclarations(cx, compName, instance, script, fragment);
+
   const slotFragment = parseFragment(elInnerHtml, doc);
   if (sourceFile) {
     validateChainStructure(slotFragment, sourceFile, sourceContent, elInnerHtml);
@@ -226,6 +339,21 @@ export function processComponentElement(
   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}`;
+    }
+    if (location === sourceFile && sourceContent) {
+      const lineNum = findElementLine(sourceContent, el.outerHTML);
+      if (lineNum !== null) location = `${sourceFile}:${lineNum}`;
+    }
+    conditionalLocations.set(el, location);
+  }
+
   childEntries.forEach(({ el: child, parent }) => {
     if (!condChains.has(parent)) {
       condChains.set(parent, { active: false, rendered: false });
@@ -233,13 +361,26 @@ export function processComponentElement(
     const condChain = condChains.get(parent);
 
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = hasDelIfAttr(child);
+    const hasDelIf = hasMountIf(child);
     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, 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`);
+        throwError(`${instance.__sourceFile || compName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/mount:if sibling`);
       }
       if (condChain.rendered) {
         child.remove();
@@ -254,7 +395,7 @@ export function processComponentElement(
       if (hasElif || hasElse) {
         if (hasElif) {
           const expr = child.getAttribute("elif").slice(1, -1);
-          const fn = compileExpression(expr, true);
+          const fn = compileExpr(expr, true);
           if (!fn(ctxProxy)) {
             child.remove();
             return;
@@ -266,9 +407,9 @@ export function processComponentElement(
           condChain.active = false;
         }
       } else if (hasIf || hasDelIf) {
-        const raw = hasIf ? child.getAttribute("if") : getDelIfAttr(child);
+        const raw = hasIf ? child.getAttribute("if") : getMountIf(child);
         const expr = raw.slice(1, -1);
-        const fn = compileExpression(expr, true);
+        const fn = compileExpr(expr, true);
         condChain.active = true;
         if (fn(ctxProxy)) {
           child.replaceWith(...child.children);
@@ -309,7 +450,7 @@ export function processComponentElement(
           /\{([^}]+)\}/g,
           (_, expr) => {
             try {
-              return compileExpression(expr, true)(ctxProxy);
+              return compileExpr(expr, true)(ctxProxy);
             } catch {
               return "";
             }
@@ -320,7 +461,7 @@ export function processComponentElement(
 
     const condAttrs = {};
     if (hasIf) condAttrs["if"] = child.getAttribute("if");
-    if (hasDelIf) condAttrs["mount:if"] = getDelIfAttr(child);
+    if (hasDelIf) condAttrs["mount:if"] = getMountIf(child);
     if (hasElif) condAttrs["elif"] = child.getAttribute("elif");
     if (hasElse) condAttrs["else"] = "";
 
@@ -373,7 +514,7 @@ export function processComponentElement(
       for (const { name, defaultValue } of compProps) {
         if (declared.has(name)) continue;
         if (defaultValue !== undefined) {
-          ctxDefParts.push(`let ${name} = ctx.${name}??${defaultValue};\n`);
+          ctxDefParts.push(`let ${name} = ctx.${name}??(${defaultValue});\n`);
         } else {
           ctxDefParts.push(`let ${name} = ctx.${name};\n`);
         }
@@ -393,6 +534,14 @@ export function processComponentElement(
           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});`
+              : `${v.keyword} ${v.name};`
+            ).join("\n") + "\n";
+          }
           if (bindings.length > 0) {
             injectCode += "\n" + bindings.map(b => {
               const accessor = b.prop === "self" ? "" : "." + b.prop;

package/compiler/config.js

@@ -1,8 +1,8 @@
 import path from "path";
-import { getChocolaConfig } from "../utils.js";
+import { getConfig } from "../utils.js";
 
 export async function loadConfig(rootDir) {
-  const config = await getChocolaConfig(rootDir);
+  const config = await getConfig(rootDir);
   const bundleConfig = config.bundle || {};
 
   const srcDir = bundleConfig.srcDir || "src";

package/compiler/dom-processor.js

@@ -2,12 +2,14 @@ import { parseHTML } from "linkedom";
 import { promises as fs } from "fs";
 import path from "path";
 import { protectCurlyBraces, restoreCurlyBraces } from "../utils.js";
-import { extractContextFromElement } from "../parser/context.js";
 import { throwError } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 export function createDOM(srcIndexContent) {
-  return parseHTML(protectCurlyBraces(srcIndexContent));
+  const protectedContent = protectCurlyBraces(srcIndexContent);
+  const dom = parseHTML(protectedContent);
+  dom.protectedContent = protectedContent;
+  return dom;
 }
 
 export function validateAppContainer(doc) {

package/compiler/index.js

@@ -1,5 +1,6 @@
 import { promises as fs } from "fs";
 import path from "path";
+import { performance } from "perf_hooks";
 import chalk from "./chalk.js";
 import { loadConfig, resolvePaths } from "./config.js";
 import {
@@ -16,8 +17,8 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError } from "./utils.js";
-import { compileExpression, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "../parser/index.js";
+import { genRandomId, throwError, warnConstantCondition, findElementLine } from "./utils.js";
+import { compileExpr, evaluateConstant, hasMountIf, getMountIf, removeMountIf } from "../parser/index.js";
 import {
   copyStaticDir,
   getComponents,
@@ -56,12 +57,17 @@ function logBanner() {
   );
 }
 
-function logSuccess(outDirPath) {
+function logSuccess(outDirPath, durationMs) {
   console.log(
     chalk.bold.green(">"),
     "Project bundled succesfully at",
     chalk.green.underline(outDirPath));
-    console.log(chalk.bold.green(`\nJOB DONE!\n`));
+    console.log(chalk.bold.green(`\nJOB DONE!`) + chalk.hex(TEXT_FAINT)(` (${formatDuration(durationMs)})\n`));
+}
+
+function formatDuration(ms) {
+  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
+  return Math.round(ms) + "ms";
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
@@ -107,26 +113,49 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
   return cssContents
 }
 
-function processPageConditionals(parent) {
+function processPageConditionals(parent, sourceFile, sourceContent) {
   const children = [...parent.children];
   let chainActive = false;
   let chainRendered = false;
 
+  const getLocation = (child) => {
+    if (!sourceContent) return sourceFile;
+    const lineNum = findElementLine(sourceContent, child.outerHTML);
+    return lineNum !== null ? `${sourceFile}:${lineNum}` : sourceFile;
+  };
+
+  const warnIfConstant = (expr, child, attr) => {
+    const { constant, value } = evaluateConstant(expr);
+    if (!constant) return;
+    warnConstantCondition(getLocation(child), child.tagName.toLowerCase(), attr, Boolean(value));
+  };
+
   for (const child of children) {
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = hasDelIfAttr(child);
+    const hasDelIf = hasMountIf(child);
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
+    if (hasIf || hasDelIf || hasElif) {
+      const stripBraces = (raw) => raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      if (hasIf) warnIfConstant(stripBraces(child.getAttribute("if")), child, "if");
+      if (hasDelIf) warnIfConstant(stripBraces(getMountIf(child)), child, "mount:if");
+      if (hasElif) warnIfConstant(stripBraces(child.getAttribute("elif")), child, "elif");
+    }
+
     if (hasElif || hasElse) {
-      if (!chainActive) continue;
+      if (!chainActive) {
+        const tag = child.tagName.toLowerCase();
+        const attr = hasElif ? "elif" : "else";
+        throwError(`${getLocation(child)}\n    <${tag}> has ${attr} without a preceding if/mount:if sibling`);
+      }
       if (chainRendered) { child.remove(); continue; }
     }
 
     if (hasIf) {
       const raw = child.getAttribute("if");
       const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-      const fn = compileExpression(expr, false);
+      const fn = compileExpr(expr, false);
       const result = fn();
       chainActive = true;
       if (result) {
@@ -137,9 +166,9 @@ function processPageConditionals(parent) {
       }
       child.removeAttribute("if");
     } else if (hasDelIf) {
-      const raw = getDelIfAttr(child);
+      const raw = getMountIf(child);
       const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-      const fn = compileExpression(expr, false);
+      const fn = compileExpr(expr, false);
       const result = fn();
       chainActive = true;
       if (result) {
@@ -148,11 +177,11 @@ function processPageConditionals(parent) {
         child.remove();
         chainRendered = false;
       }
-      removeDelIfAttr(child);
+      removeMountIf(child);
     } else if (hasElif) {
       const raw = child.getAttribute("elif");
       const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-      const fn = compileExpression(expr, false);
+      const fn = compileExpr(expr, false);
       const result = fn();
       if (result) {
         chainRendered = true;
@@ -170,13 +199,14 @@ function processPageConditionals(parent) {
     }
 
     if (child.parentNode) {
-      processPageConditionals(child);
+      processPageConditionals(child, sourceFile, sourceContent);
     }
   }
 }
 
 export default async function compile(rootDir, buildConfig) {
   const isHotReload = buildConfig?.isHotReload || null;
+  const startTime = performance.now();
   !isHotReload && logBanner();
 
   const config = await loadConfig(rootDir);
@@ -195,7 +225,7 @@ export default async function compile(rootDir, buildConfig) {
   const doc = dom.document;
   const appContainer = validateAppContainer(doc);
 
-  processPageConditionals(appContainer);
+  processPageConditionals(appContainer, pageSourcePath, dom.protectedContent);
 
   const appElements = getAppElements(appContainer);
   const { runtimeScript, scopesCss, hashMap, csrClasses } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
@@ -225,8 +255,10 @@ export default async function compile(rootDir, buildConfig) {
   await fs.mkdir(chocolaDir, { recursive: true });
   await fs.writeFile(path.join(chocolaDir, "hashes.json"), JSON.stringify(hashMap, null, 2) + "\n");
 
-  !isHotReload && logSuccess(paths.outDir);
-  isHotReload && console.log("Dev server updated");
+  const durationMs = performance.now() - startTime;
+
+  !isHotReload && logSuccess(paths.outDir, durationMs);
+  isHotReload && console.log("Dev server updated " + chalk.hex(TEXT_FAINT)(`(${formatDuration(durationMs)})`));
 }
 
 /**

package/compiler/utils.js

@@ -6,6 +6,84 @@ export function throwError(err) {
   throw new Error(err);
 }
 
+export function warnConstantCondition(location, tag, attr, truthy) {
+  const article = /^[aeiou]/.test(attr) ? "an" : "a";
+  console.warn(
+    chalk.bold.yellow("WARNING!"),
+    `${location}: <${tag}> has ${article} \`${attr}\` condition that is always ${truthy ? "truthy" : "falsy"}`
+  );
+}
+
+export function warnUnusedDeclaration(location, kind, name) {
+  console.warn(
+    chalk.bold.yellow("WARNING!"),
+    `${location}: ${kind} \`${name}\` is never used`
+  );
+}
+
+function normalizeAttributeQuotes(html) {
+  return html
+    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
+    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
+}
+
+function getStartTag(outerHTML) {
+  let inQuote = null;
+  for (let i = 0; i < outerHTML.length; i++) {
+    const c = outerHTML[i];
+    if (inQuote) {
+      if (c === inQuote) inQuote = null;
+    } else if (c === '"' || c === "'") {
+      inQuote = c;
+    } else if (c === ">") {
+      return outerHTML.slice(0, i + 1);
+    }
+  }
+  return outerHTML;
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function flexibleStartTagRegex(startTag) {
+  return new RegExp(
+    startTag
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(escapeRegex)
+      .join("\\s+")
+  );
+}
+
+export function findElementLine(sourceContent, outerHTML) {
+  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
+  const startTags = [
+    normalizeAttributeQuotes(getStartTag(outerHTML)),
+    normalizeAttributeQuotes(
+      getStartTag(
+        outerHTML
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, "&")
+          .replace(/&lt;/g, "<")
+          .replace(/&gt;/g, ">")
+      )
+    ),
+  ].map(tag => tag.toLowerCase());
+  const candidates = [
+    flexibleStartTagRegex(startTags[0]),
+    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
+    flexibleStartTagRegex(startTags[1]),
+  ];
+  for (const re of candidates) {
+    const match = re.exec(source);
+    if (match) {
+      return source.substring(0, match.index).split("\n").length;
+    }
+  }
+  return null;
+}
+
 export function genRandomId(collection = null, length = 10, lettersOnly = false) {
   let id;
   if (lettersOnly) {

package/dev/index.js

@@ -4,7 +4,7 @@ import path from "path";
 import chalk from "../compiler/chalk.js";
 import compile from "../compiler/index.js";
 import { loadConfig, resolvePaths } from "../compiler/config.js";
-import { getChocolaConfig } from "../utils.js";
+import { getConfig } from "../utils.js";
 
 export async function serve(__rootdir) {
   await compile(__rootdir);
@@ -17,7 +17,7 @@ export async function serve(__rootdir) {
 
   let lastBuildTime = Date.now();
 
-  const fullConfig = await getChocolaConfig(__rootdir);
+  const fullConfig = await getConfig(__rootdir);
   const config = await loadConfig(__rootdir);
   const paths = resolvePaths(__rootdir, config);
   const devConfig = fullConfig.dev;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",

package/parser/component.js

@@ -44,7 +44,146 @@ export function extractRuntime(script, compName) {
     }
   }
 
-  throw new Error(`${compName} $runtime function has unclosed curly braces.`);
+  throw new Error(`${compName} $runtime function has unclosed curly braces`);
+}
+
+export function extractTopLevelVariables(script) {
+  if (!script) return [];
+  const vars = [];
+  let i = 0;
+  let depth = 0;
+  let parenDepth = 0;
+  let bracketDepth = 0;
+  let inStr = false;
+  let strChar = null;
+
+  while (i < script.length) {
+    const ch = script[i];
+
+    if (inStr) {
+      if (ch === "\\") i++;
+      else if (ch === strChar) inStr = false;
+      i++;
+      continue;
+    }
+
+    if (ch === '"' || ch === "'" || ch === "`") {
+      inStr = true;
+      strChar = ch;
+      i++;
+      continue;
+    }
+
+    if (ch === "/" && script[i + 1] === "/") {
+      while (i < script.length && script[i] !== "\n") i++;
+      continue;
+    }
+    if (ch === "/" && script[i + 1] === "*") {
+      i += 2;
+      while (i < script.length && !(script[i] === "*" && script[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+
+    if (ch === "{") { depth++; i++; continue; }
+    if (ch === "}") { depth--; i++; continue; }
+    if (ch === "(") { parenDepth++; i++; continue; }
+    if (ch === ")") { parenDepth--; i++; continue; }
+    if (ch === "[") { bracketDepth++; i++; continue; }
+    if (ch === "]") { bracketDepth--; i++; continue; }
+
+    if (depth === 0 && parenDepth === 0 && bracketDepth === 0) {
+      const rest = script.slice(i);
+      const m = rest.match(/^(let|const)\s+([a-zA-Z_$][0-9a-zA-Z_$]*)\s*/);
+      if (m) {
+        const keyword = m[1];
+        const before = script.slice(0, i).trimEnd();
+        if (!before.endsWith("export")) {
+          let name = m[2];
+          let p = i + m[0].length;
+          while (p < script.length && /\s/.test(script[p])) p++;
+          i = p;
+
+          while (p < script.length) {
+            i = p;
+            let q = p;
+
+            if (script[q] === "=") {
+              q++;
+              while (q < script.length && /\s/.test(script[q])) q++;
+              const delim = findDeclaratorEnd(script, q);
+              if (name !== "self" && name !== "ctx") {
+                vars.push({ keyword, name, value: script.slice(q, delim).trim() });
+              }
+              if (script[delim] === ";") { i = delim + 1; break; }
+              p = delim + 1;
+              while (p < script.length && /\s/.test(script[p])) p++;
+            } else {
+              if (name !== "self" && name !== "ctx") {
+                vars.push({ keyword, name, value: undefined });
+              }
+              if (script[q] === ";") { i = q + 1; break; }
+              if (script[q] !== ",") { i = q; break; }
+              p = q + 1;
+              while (p < script.length && /\s/.test(script[p])) p++;
+            }
+
+            const nameMatch = script.slice(p).match(/^([a-zA-Z_$][0-9a-zA-Z_$]*)\s*/);
+            if (!nameMatch) { i = p; break; }
+            name = nameMatch[1];
+            p += nameMatch[0].length;
+          }
+          continue;
+        }
+      }
+    }
+    i++;
+  }
+
+  return vars;
+}
+
+function findDeclaratorEnd(script, start) {
+  let i = start;
+  let parens = 0;
+  let brackets = 0;
+  let braces = 0;
+  let inStr = false;
+  let strChar = null;
+
+  while (i < script.length) {
+    const c = script[i];
+
+    if (inStr) {
+      if (c === "\\") i++;
+      else if (c === strChar) inStr = false;
+      i++;
+      continue;
+    }
+
+    if (c === "/" && script[i + 1] === "/") {
+      while (i < script.length && script[i] !== "\n") i++;
+      continue;
+    }
+    if (c === "/" && script[i + 1] === "*") {
+      i += 2;
+      while (i < script.length && !(script[i] === "*" && script[i + 1] === "/")) i++;
+      i += 2;
+      continue;
+    }
+
+    if (c === '"' || c === "'" || c === "`") { inStr = true; strChar = c; i++; continue; }
+    if (c === "(") { parens++; i++; continue; }
+    if (c === ")") { parens--; i++; continue; }
+    if (c === "[") { brackets++; i++; continue; }
+    if (c === "]") { brackets--; i++; continue; }
+    if (c === "{") { braces++; i++; continue; }
+    if (c === "}") { braces--; i++; continue; }
+    if ((c === ";" || c === ",") && parens === 0 && brackets === 0 && braces === 0) return i;
+    i++;
+  }
+
+  return i;
 }
 
 export function extractTopLevelFunctions(script, excludeName) {

package/parser/context.js

@@ -1,7 +1,7 @@
-import { compileExpression } from "./utils.js";
+import { compileExpr } from "./utils.js";
 import { restoreTemplateChars } from "../utils.js";
 
-export function extractContextFromElement(element) {
+export function extractCtxFromEl(element) {
   const ctx = {};
   for (const attr of element.attributes) {
     const key = attr.name;
@@ -10,7 +10,7 @@ export function extractContextFromElement(element) {
     const matches = [...val.matchAll(/\{([^}]+)\}/g)];
     if (matches.length === 1 && matches[0][0] === val) {
       try {
-        ctx[key] = compileExpression(matches[0][1], false)();
+        ctx[key] = compileExpr(matches[0][1], false)();
         continue;
       } catch {}
     }
@@ -19,12 +19,12 @@ export function extractContextFromElement(element) {
   return ctx;
 }
 
-export function hasDelIfAttr(el) {
+export function hasMountIf(el) {
   return el.hasAttribute("mount:if");
 }
-export function getDelIfAttr(el) {
+export function getMountIf(el) {
   return el.getAttribute("mount:if");
 }
-export function removeDelIfAttr(el) {
+export function removeMountIf(el) {
   el.removeAttribute("mount:if");
 }

package/parser/css.js

@@ -38,7 +38,7 @@ export function scopeCss(cssString, cssId) {
     }
   }
 
-  function findMatchingBrace(s, openIndex) {
+  function findClosure(s, openIndex) {
     let depth = 0;
     for (let i = openIndex; i < s.length; i++) {
       const ch = s[i];
@@ -65,7 +65,7 @@ export function scopeCss(cssString, cssId) {
         break;
       }
       const header = str.substring(i, braceIndex);
-      const endBrace = findMatchingBrace(str, braceIndex);
+      const endBrace = findClosure(str, braceIndex);
       const inner = str.substring(braceIndex + 1, endBrace);
 
       if (header.trim().startsWith("@")) {

package/parser/index.js

@@ -1,5 +1,5 @@
-export { extractPropsDefaults, extractRuntime, extractTopLevelFunctions } from "./component.js";
-export { extractContextFromElement, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
+export { extractPropsDefaults, extractRuntime, extractTopLevelFunctions, extractTopLevelVariables } from "./component.js";
+export { extractCtxFromEl, hasMountIf, getMountIf, removeMountIf } from "./context.js";
 export { reservedAttrs, getLineNumber, validateChainStructure, applyConditionalToElement, interpolateNode } from "./template.js";
 export { scopeCss } from "./css.js";
-export { compileExpression } from "./utils.js";
+export { compileExpr, evaluateConstant } from "./utils.js";

package/parser/template.js

@@ -1,16 +1,16 @@
-import { compileExpression } from "./utils.js";
-import { hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
+import { compileExpr } from "./utils.js";
+import { hasMountIf, getMountIf, removeMountIf } from "./context.js";
 
 export const reservedAttrs = ["if", "mount:if", "elif", "else"];
 
-export function getLineNumber(sourceContent, parentContent, idxInParent) {
-  if (sourceContent === parentContent) {
+export function getLineNumber(srcContent, parentContent, idxInParent) {
+  if (srcContent === parentContent) {
     return parentContent.substring(0, idxInParent).split("\n").length;
   }
-  const templateStartMatch = sourceContent.match(/<template[^>]*>/);
+  const templateStartMatch = srcContent.match(/<template[^>]*>/);
   if (templateStartMatch) {
     const contentStart = templateStartMatch.index + templateStartMatch[0].length;
-    const beforeContent = sourceContent.substring(0, contentStart);
+    const beforeContent = srcContent.substring(0, contentStart);
     const linesInBefore = beforeContent.split("\n").length;
     const linesInTemplate = parentContent.substring(0, idxInParent).split("\n").length;
     return linesInBefore + linesInTemplate - 1;
@@ -24,7 +24,7 @@ export function validateChainStructure(parent, sourceFile, sourceContent, parent
 
   for (const child of children) {
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = hasDelIfAttr(child);
+    const hasDelIf = hasMountIf(child);
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
@@ -40,7 +40,7 @@ export function validateChainStructure(parent, sourceFile, sourceContent, parent
             if (lineNum !== null) loc = `${sourceFile}:${lineNum}`;
           }
         }
-        throw new Error(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
+        throw new Error(`${loc}\n    <${tag}> has ${attr} without a preceding if/mount:if sibling`);
       }
       if (hasElse) {
         chainActive = false;
@@ -60,7 +60,7 @@ export function validateChainStructure(parent, sourceFile, sourceContent, parent
 export function applyConditionalToElement(child, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse) {
   if (hasIf) {
     const expr = child.getAttribute("if").slice(1, -1);
-    const fn = compileExpression(expr, true);
+    const fn = compileExpr(expr, true);
     condChain.active = true;
     if (fn(ctxProxy)) {
       condChain.rendered = true;
@@ -70,8 +70,8 @@ export function applyConditionalToElement(child, ctxProxy, condChain, hasIf, has
     }
     child.removeAttribute("if");
   } else if (hasDelIf) {
-    const expr = getDelIfAttr(child).slice(1, -1);
-    const fn = compileExpression(expr, true);
+    const expr = getMountIf(child).slice(1, -1);
+    const fn = compileExpr(expr, true);
     condChain.active = true;
     if (fn(ctxProxy)) {
       condChain.rendered = true;
@@ -79,10 +79,10 @@ export function applyConditionalToElement(child, ctxProxy, condChain, hasIf, has
       child.remove();
       condChain.rendered = false;
     }
-    removeDelIfAttr(child);
+    removeMountIf(child);
   } else if (hasElif) {
     const expr = child.getAttribute("elif").slice(1, -1);
-    const fn = compileExpression(expr, true);
+    const fn = compileExpr(expr, true);
     if (fn(ctxProxy)) {
       condChain.rendered = true;
     } else {
@@ -106,7 +106,7 @@ export function interpolateNode(root, ctxProxy) {
     if (node.nodeType === 3) {
       node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
         try {
-          return compileExpression(expr, true)(ctxProxy);
+          return compileExpr(expr, true)(ctxProxy);
         } catch {
           return "";
         }

package/parser/utils.js

@@ -2,7 +2,7 @@ import { restoreTemplateChars } from "../utils.js";
 
 const compiledCache = new Map();
 
-export function compileExpression(expr, useCtx) {
+export function compileExpr(expr, useCtx) {
   expr = restoreTemplateChars(expr);
   const key = useCtx ? `ctx:${expr}` : `raw:${expr}`;
   let fn = compiledCache.get(key);
@@ -14,3 +14,19 @@ export function compileExpression(expr, useCtx) {
   }
   return fn;
 }
+
+const constantEvalError = Symbol("constant-eval-error");
+
+export function evaluateConstant(expr) {
+  const trap = new Proxy({}, {
+    has() { return true; },
+    get() { throw constantEvalError; },
+  });
+  try {
+    const fn = compileExpr(expr, true);
+    const value = fn(trap);
+    return { constant: true, value };
+  } catch {
+    return { constant: false };
+  }
+}

package/runtime/index.js

@@ -3,7 +3,7 @@ const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
 
 const exprCache = new Map();
 
-function compileExpression(expr, useCtx) {
+function compileExp(expr, useCtx) {
   expr = expr.replace(/_%%CHOCOLA-(?:AMP|LT|GT)\d+%%_/g, char =>
     char.includes("AMP") ? "&" : char.includes("LT") ? "<" : ">"
   );
@@ -28,7 +28,7 @@ function interpolateNode(root, ctx) {
         .replace(new RegExp(RBRACE_PH, "g"), "}");
       node.textContent = text.replace(/\{([^}]+)\}/g, (_, expr) => {
         try {
-          return String(compileExpression(expr, true)(ctx));
+          return String(compileExp(expr, true)(ctx));
         } catch {
           return "";
         }
@@ -41,21 +41,21 @@ function interpolateNode(root, ctx) {
   }
 }
 
-function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif, hasElse) {
+function applyDirectiveToEl(child, ctx, chain, hasIf, hasMountIf, hasElif, hasElse) {
   if (hasIf) {
     const expr = child.getAttribute("if").slice(1, -1);
     chain.active = true;
-    if (compileExpression(expr, true)(ctx)) {
+    if (compileExp(expr, true)(ctx)) {
       chain.rendered = true;
     } else {
       child.style.display = "none";
       chain.rendered = false;
     }
     child.removeAttribute("if");
-  } else if (hasDelIf) {
+  } else if (hasMountIf) {
     const expr = child.getAttribute("mount:if").slice(1, -1);
     chain.active = true;
-    if (compileExpression(expr, true)(ctx)) {
+    if (compileExp(expr, true)(ctx)) {
       chain.rendered = true;
     } else {
       child.remove();
@@ -64,7 +64,7 @@ function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif,
     child.removeAttribute("mount:if");
   } else if (hasElif) {
     const expr = child.getAttribute("elif").slice(1, -1);
-    if (compileExpression(expr, true)(ctx)) {
+    if (compileExp(expr, true)(ctx)) {
       chain.rendered = true;
     } else {
       child.remove();
@@ -90,7 +90,7 @@ function interpolateAttributes(element, ctx) {
         .replace(new RegExp(RBRACE_PH, "g"), "}");
       attr.value = raw.replace(/\{([^}]+)\}/g, (_, expr) => {
         try {
-          return String(compileExpression(expr, true)(ctx));
+          return String(compileExp(expr, true)(ctx));
         } catch {
           return "";
         }
@@ -99,10 +99,10 @@ function interpolateAttributes(element, ctx) {
   }
 }
 
-function processConditionals(element, ctx, chain) {
+function processDirectives(element, ctx, chain) {
   for (const child of [...element.children]) {
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = child.hasAttribute("mount:if");
+    const hasMountIf = child.hasAttribute("mount:if");
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
@@ -112,46 +112,46 @@ function processConditionals(element, ctx, chain) {
       continue;
     }
 
-    applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif, hasElse);
+    applyDirectiveToEl(child, ctx, chain, hasIf, hasMountIf, hasElif, hasElse);
 
     if (child.parentNode) {
-      processConditionals(child, ctx, chain);
+      processDirectives(child, ctx, chain);
     }
   }
 }
 
-function processSlots(element, projectedChildren) {
-  const slots = element.querySelectorAll("slot");
+function processSlots(el, projected) {
+  const slots = el.querySelectorAll("slot");
   for (const slot of slots) {
-    const clone = projectedChildren.map(c => c.cloneNode(true));
+    const clone = projected.map(c => c.cloneNode(true));
     slot.replaceWith(...clone);
   }
 }
 
 let bindCounter = 0;
 
-function processBindAttributes(element) {
+function processBindings(el) {
   const bindings = [];
-  for (const attr of [...element.attributes]) {
+  for (const attr of [...el.attributes]) {
     if (attr.name.startsWith("bind:")) {
       const prop = attr.name.slice(5);
       const varName = attr.value;
       const bindId = "b" + (bindCounter++);
-      element.setAttribute("data-chbind-" + bindId, "");
+      el.setAttribute("data-chbind-" + bindId, "");
       bindings.push({ prop, varName, bindId });
-      element.removeAttribute(attr.name);
+      el.removeAttribute(attr.name);
     }
   }
   return bindings;
 }
 
-function resolveDataBindings(element) {
+function resolveBindings(el) {
   const ids = [];
-  for (const attr of [...element.attributes]) {
+  for (const attr of [...el.attributes]) {
     const match = attr.name.match(/^data-chbind-(b\d+)$/);
     if (match) {
       ids.push(match[1]);
-      element.removeAttribute(attr.name);
+      el.removeAttribute(attr.name);
     }
   }
   return ids;
@@ -162,8 +162,8 @@ function collectBindings(root) {
   const idToEl = {};
 
   for (const el of [root, ...root.querySelectorAll("*")]) {
-    bindingDefs.push(...processBindAttributes(el));
-    for (const id of resolveDataBindings(el)) {
+    bindingDefs.push(...processBindings(el));
+    for (const id of resolveBindings(el)) {
       idToEl[id] = el;
     }
   }
@@ -225,7 +225,7 @@ class ChocolaComponent {
     }
 
     processSlots(root, this.#children || []);
-    processConditionals(root, mergedCtx, { active: false, rendered: false });
+    processDirectives(root, mergedCtx, { active: false, rendered: false });
     interpolateAttributes(root, mergedCtx);
     interpolateNode(root, mergedCtx);
     root.classList.add(this.#hash);

package/utils.js

@@ -2,7 +2,7 @@ import { promises as fs } from "fs";
 import path from "path";
 import { throwError } from "./compiler/utils.js";
 
-export async function getChocolaConfig(__rootdir) {
+export async function getConfig(__rootdir) {
     try {
         const config = await fs.readFile(path.join(__rootdir, "chocola.config.json"), "utf-8");
         return JSON.parse(config);