chocola 2.0.0-next.7 → 2.0.0-next.9

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,
@@ -26,48 +27,47 @@ import {
   processScript,
   processStylesheet,
 } from "./pipeline.js";
+import { text } from "stream/consumers";
 
-
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
+const GOLD_COLOR = "#D87416";
+const WHITE_COLOR = "#FAFAF8";
+const TEXT_FAINT = "#E7EBE1";
 
 function logBanner() {
-  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-  console.log(logSeparation);
   console.log(
-    chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-     ░                         ░                                  
-
-
-        `)
+    chalk.hex(GOLD_COLOR)(`
+   ┌─────────────────────────────────────────────┐
+   │┌-------------------------------------------┐│
+   ││                                           ││`)
+  );
+  console.log(
+    chalk.hex(GOLD_COLOR)(`   ││            `) +
+    chalk.bold.hex(WHITE_COLOR)(`{`) +
+    chalk.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
+    chalk.bold.hex(WHITE_COLOR)(`}`) +
+    chalk.hex(GOLD_COLOR)(`            ││\n`) +
+    chalk.hex(GOLD_COLOR)(`   ││                                           ││
+   ││     `) +
+   chalk.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
+   chalk.hex(GOLD_COLOR)(`     ││
+   ││                                           ││
+   │└-------------------------------------------┘│
+   └─────────────────────────────────────────────┘
+   `)
   );
 }
 
-function logSuccess(outDirPath) {
-  console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
+function logSuccess(outDirPath, durationMs) {
   console.log(
     chalk.bold.green(">"),
     "Project bundled succesfully at",
-    chalk.green.underline(outDirPath) + "\n\n"
-  );
+    chalk.green.underline(outDirPath));
+    console.log(chalk.bold.green(`\nJOB DONE!`) + chalk.hex(TEXT_FAINT)(` (${formatDuration(durationMs)})\n`));
+}
+
+function formatDuration(ms) {
+  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
+  return Math.round(ms) + "ms";
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
@@ -81,9 +81,8 @@ async function loadAndDisplayComponents(srcComponentsPath) {
   const foundComponents = await getComponents(srcComponentsPath);
   const { loadedComponents, notDefComps: emptyComps, componentsLib } = foundComponents;
 
-  console.log(`       LOADING COMPONENTS`);
   console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-  console.log("   ", componentsLib, "\n");
+  console.log("   ", componentsLib, "\n\n");
 
   if (emptyComps?.length > 0) {
     console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
@@ -114,39 +113,62 @@ 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) {
         chainRendered = true;
       } else {
-        child.remove();
+        child.style.display = "none";
         chainRendered = false;
       }
       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) {
@@ -155,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;
@@ -177,18 +199,18 @@ 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);
   const paths = resolvePaths(rootDir, config);
-  !isHotReload && console.log(logSeparation);
 
   await setupOutputDirectory(paths.outDir, config.emptyOutDir);
 
@@ -197,16 +219,13 @@ export default async function compile(rootDir, buildConfig) {
   const pageSourcePath = indexFiles.srcPath;
 
   const loadedComponents = await loadAndDisplayComponents(paths.components);
-  !isHotReload && console.log(logSeparation);
-  !isHotReload && console.log(`       BUNDLING STATIC BUILD`);
-  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
-  !isHotReload && console.log(logSeparation);
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir));
 
   const dom = createDOM(srcIndexContent);
-  const doc = dom.window.document;
+  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);
@@ -236,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;
@@ -144,7 +144,7 @@ export async function serve(__rootdir) {
   });
 
   server.listen(__config.port, __config.hostname, () => {
-    console.log(`Chocola App running at http://${__config.hostname}:${__config.port}/`);
+    console.log('Live server running at', chalk.hex("#68C4EE").underline(`http://${__config.hostname}:${__config.port}/`));
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.9",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -35,6 +35,6 @@
     "./dev": "./dev/index.js"
   },
   "dependencies": {
-    "jsdom": "^27.4.0"
+    "linkedom": "^0.18.13"
   }
 }

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,15 +1,16 @@
-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;
-    const val = attr.value;
+    const val = restoreTemplateChars(attr.value);
     if (!val.includes("{")) { ctx[key] = val; continue; }
     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 {}
     }
@@ -18,12 +19,12 @@ export function extractContextFromElement(element) {
   return ctx;
 }
 
-export function hasDelIfAttr(el) {
-  return el.hasAttribute("del:if");
+export function hasMountIf(el) {
+  return el.hasAttribute("mount:if");
 }
-export function getDelIfAttr(el) {
-  return el.getAttribute("del:if");
+export function getMountIf(el) {
+  return el.getAttribute("mount:if");
 }
-export function removeDelIfAttr(el) {
-  el.removeAttribute("del:if");
+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", "del:if", "elif", "else"];
+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 "";
         }