chocola 1.6.0 → 2.0.0-next.2

package/compiler/component-processor.js

@@ -1,6 +1,6 @@
 import { JSDOM } from "jsdom";
 import { extractContextFromElement } from "./dom-processor.js";
-import { genRandomId, incrementAlfabet, throwError, protectCurlyBraces } from "./utils.js";
+import { genRandomId, incrementAlfabet, throwError, protectCurlyBraces, compileExpression } from "./utils.js";
 import chalk from "chalk";
 import beautify from "js-beautify";
 
@@ -118,24 +118,29 @@ function removeDelIfAttr(el) {
   el.removeAttribute("del:if");
 }
 
-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 "";
+function interpolateNode(root, ctxProxy) {
+  const stack = [root];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.nodeType === 3) {
+      node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
+        try {
+          return compileExpression(expr, true)(ctxProxy);
+        } catch {
+          return "";
+        }
+      });
+    } else {
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        stack.push(node.childNodes[i]);
       }
-    });
-  } else {
-    node.childNodes.forEach(child => interpolateNode(child, ctxProxy));
+    }
   }
 }
 
 function validateChainStructure(parent, sourceFile, sourceContent, parentContent) {
   const children = [...parent.children];
   let chainActive = false;
-  const outerCounts = {};
 
   for (const child of children) {
     const hasIf = child.hasAttribute("if");
@@ -148,37 +153,10 @@ function validateChainStructure(parent, sourceFile, sourceContent, parentContent
         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;
+        if (sourceContent && sourceContent === parentContent) {
+          const idx = parentContent.indexOf(child.outerHTML);
+          if (idx !== -1) {
+            loc = `${sourceFile}:${parentContent.substring(0, idx).split("\n").length}`;
           }
         }
         throwError(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
@@ -291,7 +269,7 @@ export function processComponentElement(
         if (hasElif || hasElse) {
           if (hasElif) {
             const expr = child.getAttribute("elif").slice(1, -1);
-            const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+            const fn = compileExpression(expr, true);
             if (!fn(ctxProxy)) {
               child.remove();
               return;
@@ -305,7 +283,7 @@ export function processComponentElement(
         } 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}); }`);
+          const fn = compileExpression(expr, true);
           condChain.active = true;
           if (fn(ctxProxy)) {
             child.replaceWith(...child.children);
@@ -331,7 +309,7 @@ export function processComponentElement(
           /\{([^}]+)\}/g,
           (_, expr) => {
             try {
-              return Function("ctx", `with(ctx) { return (${expr}); }`)(ctxProxy);
+              return compileExpression(expr, true)(ctxProxy);
             } catch {
               return "";
             }
@@ -357,7 +335,7 @@ export function processComponentElement(
 
       if (hasIf) {
         const expr = child.getAttribute("if").slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        const fn = compileExpression(expr, true);
         condChain.active = true;
         if (fn(ctxProxy)) {
           condChain.rendered = true;
@@ -368,7 +346,7 @@ export function processComponentElement(
         child.removeAttribute("if");
       } else if (hasDelIf) {
         const expr = getDelIfAttr(child).slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        const fn = compileExpression(expr, true);
         condChain.active = true;
         if (fn(ctxProxy)) {
           condChain.rendered = true;
@@ -379,7 +357,7 @@ export function processComponentElement(
         removeDelIfAttr(child);
       } else if (hasElif) {
         const expr = child.getAttribute("elif").slice(1, -1);
-        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        const fn = compileExpression(expr, true);
         if (fn(ctxProxy)) {
           condChain.rendered = true;
         } else {
@@ -486,6 +464,7 @@ export function processAllComponents(appElements, loadedComponents, pageSourceFi
   let staticCtxRegistry = new Map();
 
   appElements.forEach(el => {
+    if (!el.isConnected) return;
     processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry, pageSourceFile, pageSourceContent);
   });
   const runtimeScript = runtimeChunks.join("\n");

package/compiler/dom-processor.js

@@ -1,7 +1,7 @@
 import { JSDOM } from "jsdom";
 import { promises as fs } from "fs";
 import path from "path";
-import { throwError, protectCurlyBraces, restoreCurlyBraces } from "./utils.js";
+import { throwError, protectCurlyBraces, restoreCurlyBraces, compileExpression } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 /**
@@ -45,10 +45,11 @@ export function extractContextFromElement(element) {
   for (const attr of element.attributes) {
     const key = attr.name;
     const val = 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] = Function(`"use strict"; return (${matches[0][1]})`)();
+        ctx[key] = compileExpression(matches[0][1], false)();
         continue;
       } catch {}
     }

package/compiler/index.js

@@ -1,254 +1,277 @@
-import { promises as fs } from "fs";
-import chalk from "chalk";
-import { loadConfig, resolvePaths } from "./config.js";
-import {
-    createDOM,
-    validateAppContainer,
-    getAppElements,
-    getAssetLinks,
-    appendRuntimeScript,
-    appendStylesheetLink,
-    serializeDOM,
-    writeHTMLOutput,
-    writeCSSOutput,
-} from "./dom-processor.js";
-import { processAllComponents } from "./component-processor.js";
-import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError } from "./utils.js";
-import {
-    copyResources,
-    copyStaticDir,
-    getComponents,
-    getSrcIndex,
-    processIcons,
-    processStylesheet,
-} from "./pipeline.js";
-
-
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
-
-function logBanner() {
-    console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-    console.log(logSeparation);
-    console.log(
-        chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-     ░                         ░                                  
-
-
-        `)
-    );
-}
-
-function logSuccess(outDirPath) {
-    console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
-    console.log(
-        chalk.bold.green(">"),
-        "Project bundled succesfully at",
-        chalk.green.underline(outDirPath) + "\n\n"
-    );
-}
-
-async function setupOutputDirectory(outDirPath, emptyOutDir) {
-    if (emptyOutDir) {
-        await fs.rm(outDirPath, { recursive: true, force: true });
-        await fs.mkdir(outDirPath);
-    }
-}
-
-async function loadAndDisplayComponents(srcComponentsPath) {
-    const foundComponents = await getComponents(srcComponentsPath);
-    const { loadedComponents, notDefComps, componentsLib } = foundComponents;
-
-    console.log(`       LOADING COMPONENTS`);
-    console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-    console.log("   ", componentsLib, "\n");
-
-    if (notDefComps.length > 0) {
-        console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-        console.log("   ", notDefComps);
-    }
-
-    return loadedComponents;
-}
-
-async function processAssets(doc, rootDir, srcDir, outDirPath) {
-    const { stylesheets, icons } = getAssetLinks(doc);
-    const fileIds = [];
-    let cssContents = [];
-
-    for (const link of stylesheets) {
-        const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
-        cssContents.push(css);
-    }
-
-    for (const link of icons) {
-        await processIcons(link, rootDir, srcDir, outDirPath);
-    }
-    return cssContents
-}
-
-/**
- * Compiles a static build of your Chocola project from the directory provided.
- * @param {import("fs").PathLike} rootDir
- * @param {Object<{
- * isHotReload?: boolean
- * }
- * >} config
- */
-export default async function runtime(rootDir, buildConfig) {
-    const isHotReload = buildConfig?.isHotReload || null;
-    !isHotReload && logBanner();
-
-    const config = await loadConfig(rootDir);
-    const paths = resolvePaths(rootDir, config);
-    !isHotReload && console.log(logSeparation);
-
-    await setupOutputDirectory(paths.outDir, config.emptyOutDir);
-
-    const indexFiles = await getSrcIndex(paths.src);
-    const srcIndexContent = indexFiles.srcHtmlFile;
-    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);
-
-    const dom = createDOM(srcIndexContent);
-    const doc = dom.window.document;
-    const appContainer = validateAppContainer(doc);
-
-    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.`));
-      }
-      return el.hasAttribute("del-if") || el.hasAttribute("del:if");
-    }
-    function getDelIfAttr(el) {
-      return el.getAttribute("del:if") ?? el.getAttribute("del-if");
-    }
-    function removeDelIfAttr(el) {
-      el.removeAttribute("del-if");
-      el.removeAttribute("del:if");
-    }
-
-    function processPageConditionals(parent) {
-      const children = [...parent.children];
-      let chainActive = false;
-      let chainRendered = false;
-
-      for (const child of children) {
-        const hasIf = child.hasAttribute("if");
-        const hasDelIf = hasDelIfAttr(child, pageSourcePath);
-        const hasElif = child.hasAttribute("elif");
-        const hasElse = child.hasAttribute("else");
-
-        if (hasElif || hasElse) {
-          if (!chainActive) continue;
-          if (chainRendered) { child.remove(); continue; }
-        }
-
-        if (hasIf) {
-          const raw = child.getAttribute("if");
-          const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-          const fn = new Function(`"use strict"; return (${expr})`);
-          const result = fn();
-          chainActive = true;
-          if (result) {
-            chainRendered = true;
-          } else {
-            child.remove();
-            chainRendered = false;
-          }
-          child.removeAttribute("if");
-        } else if (hasDelIf) {
-          const raw = getDelIfAttr(child);
-          const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-          const fn = new Function(`"use strict"; return (${expr})`);
-          const result = fn();
-          chainActive = true;
-          if (result) {
-            chainRendered = true;
-          } else {
-            child.remove();
-            chainRendered = false;
-          }
-          removeDelIfAttr(child);
-        } else if (hasElif) {
-          const raw = child.getAttribute("elif");
-          const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-          const fn = new Function(`"use strict"; return (${expr})`);
-          const result = fn();
-          if (result) {
-            chainRendered = true;
-          } else {
-            child.remove();
-          }
-          child.removeAttribute("elif");
-        } else if (hasElse) {
-          chainRendered = true;
-          chainActive = false;
-          child.removeAttribute("else");
-        } else {
-          chainActive = false;
-          chainRendered = false;
-        }
-
-        if (child.parentNode) {
-          processPageConditionals(child);
-        }
-      }
-    }
-    processPageConditionals(appContainer);
-
-    const appElements = getAppElements(appContainer);
-    const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
-    const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
-    const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
-
-    if (scopesCss) {
-        const fileName = "sc-" + genRandomId(null, 6) + ".css";
-        await writeCSSOutput(scopesCss, paths.outDir, fileName);
-        appendStylesheetLink(doc, fileName);
-    };
-
-    appendRuntimeScript(doc, runtimeFilename);
-    const html = await serializeDOM(dom);
-    await writeHTMLOutput(html, paths.outDir);
-
-    try {
-        if (config.assetImport === "static") {
-            await copyStaticDir(paths.src, paths.outDir);
-        } else {
-            await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
-        }
-    } catch (err) {
-        throwError(err.message || err);
-    }
-
-    !isHotReload && logSuccess(paths.outDir);
-    isHotReload && console.log("Dev server updated");
-}
+import { promises as fs } from "fs";
+import chalk from "chalk";
+import { loadConfig, resolvePaths } from "./config.js";
+import {
+  createDOM,
+  validateAppContainer,
+  getAppElements,
+  getAssetLinks,
+  appendRuntimeScript,
+  appendStylesheetLink,
+  serializeDOM,
+  writeHTMLOutput,
+  writeCSSOutput,
+} from "./dom-processor.js";
+import { processAllComponents } from "./component-processor.js";
+import { generateRuntimeScript } from "./runtime-generator.js";
+import { genRandomId, throwError, compileExpression } from "./utils.js";
+import {
+  copyResources,
+  copyStaticDir,
+  getComponents,
+  getSrcIndex,
+  processIcons,
+  processStylesheet,
+} from "./pipeline.js";
+
+
+const logSeparation = chalk.yellow(`
+________________________________________________________________________
+========================================================================
+        `);
+
+function logBanner() {
+  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
+  console.log(logSeparation);
+  console.log(
+    chalk.hex("#945e33")(`
+
+
+     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
+     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
+     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
+     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
+     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
+     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
+     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
+     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
+     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
+     ░                         ░                                  
+
+
+        `)
+  );
+}
+
+function logSuccess(outDirPath) {
+  console.log(`
+              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
+              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
+            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
+                                                
+        `);
+  console.log(
+    chalk.bold.green(">"),
+    "Project bundled succesfully at",
+    chalk.green.underline(outDirPath) + "\n\n"
+  );
+}
+
+async function setupOutputDirectory(outDirPath, emptyOutDir) {
+  if (emptyOutDir) {
+    await fs.rm(outDirPath, { recursive: true, force: true });
+    await fs.mkdir(outDirPath);
+  }
+}
+
+async function loadAndDisplayComponents(srcComponentsPath) {
+  const foundComponents = await getComponents(srcComponentsPath);
+  const { loadedComponents, notDefComps, componentsLib } = foundComponents;
+
+  console.log(`       LOADING COMPONENTS`);
+  console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
+  console.log("   ", componentsLib, "\n");
+
+  if (notDefComps.length > 0) {
+    console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
+    console.log("   ", notDefComps);
+  }
+
+  return loadedComponents;
+}
+
+async function processAssets(doc, rootDir, srcDir, outDirPath) {
+  const { stylesheets, icons } = getAssetLinks(doc);
+  const fileIds = [];
+  let cssContents = [];
+
+  for (const link of stylesheets) {
+    const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+    cssContents.push(css);
+  }
+
+  for (const link of icons) {
+    await processIcons(link, rootDir, srcDir, outDirPath);
+  }
+  return cssContents
+}
+
+/**
+ * Compiles a static build of your Chocola project from the directory provided.
+ * @param {import("fs").PathLike} rootDir
+ * @param {Object<{
+ * isHotReload?: boolean
+ * }
+ * >} config
+ */
+export default async function runtime(rootDir, buildConfig) {
+  const isHotReload = buildConfig?.isHotReload || null;
+  !isHotReload && logBanner();
+
+  const config = await loadConfig(rootDir);
+  const paths = resolvePaths(rootDir, config);
+  !isHotReload && console.log(logSeparation);
+
+  await setupOutputDirectory(paths.outDir, config.emptyOutDir);
+
+  const indexFiles = await getSrcIndex(paths.src);
+  const srcIndexContent = indexFiles.srcHtmlFile;
+  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);
+
+  const dom = createDOM(srcIndexContent);
+  const doc = dom.window.document;
+  const appContainer = validateAppContainer(doc);
+
+  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.`));
+    }
+    return el.hasAttribute("del-if") || el.hasAttribute("del:if");
+  }
+  function getDelIfAttr(el) {
+    return el.getAttribute("del:if") ?? el.getAttribute("del-if");
+  }
+  function removeDelIfAttr(el) {
+    el.removeAttribute("del-if");
+    el.removeAttribute("del:if");
+  }
+
+  function processPageConditionals(parent) {
+    const children = [...parent.children];
+    let chainActive = false;
+    let chainRendered = false;
+
+    for (const child of children) {
+      const hasIf = child.hasAttribute("if");
+      const hasDelIf = hasDelIfAttr(child, pageSourcePath);
+      const hasElif = child.hasAttribute("elif");
+      const hasElse = child.hasAttribute("else");
+
+      if (hasElif || hasElse) {
+        if (!chainActive) continue;
+        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 result = fn();
+        chainActive = true;
+        if (result) {
+          chainRendered = true;
+        } else {
+          child.remove();
+          chainRendered = false;
+        }
+        child.removeAttribute("if");
+      } else if (hasDelIf) {
+        const raw = getDelIfAttr(child);
+        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+        const fn = compileExpression(expr, false);
+        const result = fn();
+        chainActive = true;
+        if (result) {
+          chainRendered = true;
+        } else {
+          child.remove();
+          chainRendered = false;
+        }
+        removeDelIfAttr(child);
+      } else if (hasElif) {
+        const raw = child.getAttribute("elif");
+        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+        const fn = compileExpression(expr, false);
+        const result = fn();
+        if (result) {
+          chainRendered = true;
+        } else {
+          child.remove();
+        }
+        child.removeAttribute("elif");
+      } else if (hasElse) {
+        chainRendered = true;
+        chainActive = false;
+        child.removeAttribute("else");
+      } else {
+        chainActive = false;
+        chainRendered = false;
+      }
+
+      if (child.parentNode) {
+        processPageConditionals(child);
+      }
+    }
+  }
+  processPageConditionals(appContainer);
+
+  const appElements = getAppElements(appContainer);
+  const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
+  const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
+  const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
+
+  if (scopesCss) {
+    const fileName = "sc-" + genRandomId(null, 6) + ".css";
+    await writeCSSOutput(scopesCss, paths.outDir, fileName);
+    appendStylesheetLink(doc, fileName);
+  };
+
+  appendRuntimeScript(doc, runtimeFilename);
+  const html = await serializeDOM(dom);
+  await writeHTMLOutput(html, paths.outDir);
+
+  try {
+    if (config.assetImport === "static") {
+      await copyStaticDir(paths.src, paths.outDir);
+    } else {
+      await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
+    }
+  } catch (err) {
+    throwError(err.message || err);
+  }
+
+  !isHotReload && logSuccess(paths.outDir);
+  isHotReload && console.log("Dev server updated");
+}
+
+/**
+ * An intrinsic object that contains the Chocola App methods.
+ */
+export const app = {
+  /**
+ *  Initializes your Chocola App using a root directory.
+ * 
+ * ```js
+ * import { app } from "chocola/compiler"
+ import path from "path";
+ import { fileURLToPath } from "url";
+ 
+ const __filename = fileURLToPath(import.meta.url);
+ const __dirname = path.dirname(__filename);
+ 
+ app.build(__dirname);
+ ```
+ * @example
+ * @param {PathLike} __rootdir the directory where your Chocola App is
+ */
+  async build(__rootdir) { return runtime(__rootdir) }
+};

package/compiler/utils.js

@@ -80,8 +80,7 @@ export async function loadWithAssets(filePath) {
 export function genRandomId(collection = null, length = 10, lettersOnly = false) {
   let id;
   if (lettersOnly) {
-    const letters = "abcdefghijklmnopqrstuvwxyz";
-    id = Array.from({ length }, () => letters[Math.floor(Math.random() * letters.length)]).join("");
+    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
   } else {
     id = Math.random().toString(36).substring(2, length + 2);
   }
@@ -103,14 +102,13 @@ export function genRandomId(collection = null, length = 10, lettersOnly = false)
  * incrementAlfabet("z") // "aa"
  */
 export function incrementAlfabet(letters) {
-  const alfabet = "abcdefghijklmnopqrstuvwxyz";
   let arr = letters.split("");
   let i = arr.length - 1;
 
   while (i >= 0) {
-    let pos = alfabet.indexOf(arr[i]);
+    let pos = arr[i].charCodeAt(0) - 97;
     if (pos < 25) {
-      arr[i] = alfabet[pos + 1];
+      arr[i] = String.fromCharCode(pos + 97 + 1);
       return arr.join("");
     } else {
       arr[i] = "a";
@@ -161,3 +159,17 @@ export function restoreCurlyBraces(html) {
     .replace(/_%%CHOCOLA-LBRACE%%_/g, "{")
     .replace(/_%%CHOCOLA-RBRACE%%_/g, "}");
 }
+
+const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";
+const compiledCache = new Map();
+export function compileExpression(expr, useCtx) {
+  const key = useCtx ? `ctx:${expr}` : `raw:${expr}`;
+  let fn = compiledCache.get(key);
+  if (!fn) {
+    fn = useCtx
+      ? new Function("ctx", `with(ctx) { return (${expr}); }`)
+      : new Function(`"use strict"; return (${expr})`);
+    compiledCache.set(key, fn);
+  }
+  return fn;
+}

package/dev/index.js

@@ -29,7 +29,6 @@ export async function serve(__rootdir) {
   else { console.warn(chalk.bold.yellow("WARNING!"), `port not defined in chocola.config.json file: using default ${__config.port} port.`) }
 
   const srcDir = paths.src;
-  const componentsDir = paths.components;
 
   let compileTimeout;
   const scheduleRecompile = () => {
@@ -51,11 +50,6 @@ export async function serve(__rootdir) {
       scheduleRecompile();
     }
   });
-  fs.watch(componentsDir, { recursive: true }, (eventType, filename) => {
-    if (filename && !filename.includes("node_modules")) {
-      scheduleRecompile();
-    }
-  });
 
   const server = http.createServer((req, res) => {
     if (req.url === "/api/hot-reload") {
@@ -152,4 +146,27 @@ export async function serve(__rootdir) {
   server.listen(__config.port, __config.hostname, () => {
     console.log(`Chocola App running at http://${__config.hostname}:${__config.port}/`);
   });
-}
+}
+
+/**
+ * An intrinsic object that contains the Chocola Dev methods.
+ */
+export const dev = {
+  /**
+*  Initializes your Chocola dev server using a root directory.
+* 
+* ```js
+* import { app } from "chocola/compiler"
+import path from "path";
+import { fileURLToPath } from "url";
+ 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+ 
+app.build(__dirname);
+```
+* @example
+* @param {PathLike} __rootdir the directory where your Chocola App is
+*/
+  async server(__rootdir) { return serve(__rootdir) }
+};

package/index.js

@@ -1,31 +0,0 @@
-import compile from "./compiler/index.js";
-import * as development from "./dev/index.js";
-
-/**
- * An intrinsic object that contains the Chocola App methods.
- */
-export const app = {
-    /**
-     *  Initializes your Chocola App using a root directory and a source directory.
-     * 
-     * ```js
-     * import { app } from "chocola"
-     import path from "path";
-     import { fileURLToPath } from "url";
-     
-     const __filename = fileURLToPath(import.meta.url);
-     const __dirname = path.dirname(__filename);
-     
-     app.build(__dirname, "src");
-     ```
-     * @example
-     * @param {PathLike} __rootdir the directory where your Chocola App is
-     * @param {PathLike} __srcdir the directory where your app sources files are
-     * @returns {Object}
-     */
-    build(__rootdir, __srcdir) { compile(__rootdir, __srcdir) }
-}
-
-export const dev = {
-    server(__rootdir, __srcdir, port) { development.serve(__rootdir, __srcdir, port) }
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.6.0",
+  "version": "2.0.0-next.2",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -31,8 +31,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "exports": {
-    ".": "./index.js",
-    "./types": "./types/index.js"
+    "./compiler": "./compiler/index.js",
+    "./dev": "./dev/index.js"
   },
   "dependencies": {
     "chalk": "^5.6.2",