chocola 2.0.0-next.1 → 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

@@ -14,7 +14,7 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError } from "./utils.js";
+import { genRandomId, throwError, compileExpression } from "./utils.js";
 import {
   copyResources,
   copyStaticDir,
@@ -174,7 +174,7 @@ export default async function runtime(rootDir, buildConfig) {
       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 fn = compileExpression(expr, false);
         const result = fn();
         chainActive = true;
         if (result) {
@@ -187,7 +187,7 @@ export default async function runtime(rootDir, buildConfig) {
       } 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 fn = compileExpression(expr, false);
         const result = fn();
         chainActive = true;
         if (result) {
@@ -200,7 +200,7 @@ export default async function runtime(rootDir, buildConfig) {
       } 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 fn = compileExpression(expr, false);
         const result = fn();
         if (result) {
           chainRendered = true;
@@ -273,5 +273,5 @@ export const app = {
  * @example
  * @param {PathLike} __rootdir the directory where your Chocola App is
  */
-  build(__rootdir) { runtime(__rootdir) }
+  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") {
@@ -174,5 +168,5 @@ app.build(__dirname);
 * @example
 * @param {PathLike} __rootdir the directory where your Chocola App is
 */
-  server(__rootdir) { serve(__rootdir) }
+  async server(__rootdir) { return serve(__rootdir) }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -32,8 +32,7 @@
   },
   "exports": {
     "./compiler": "./compiler/index.js",
-    "./dev": "./dev/index.js",
-    "./types": "./types/index.js"
+    "./dev": "./dev/index.js"
   },
   "dependencies": {
     "chalk": "^5.6.2",