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

package/parser/utils.js

@@ -1,6 +1,9 @@
+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);
   if (!fn) {
@@ -11,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

@@ -1,6 +1,12 @@
+const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
+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") ? "<" : ">"
+  );
   const key = useCtx ? "ctx:" + expr : "raw:" + expr;
   let fn = exprCache.get(key);
   if (!fn) {
@@ -22,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 "";
         }
@@ -35,30 +41,30 @@ 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) {
-    const expr = child.getAttribute("del:if").slice(1, -1);
+  } 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();
       chain.rendered = false;
     }
-    child.removeAttribute("del:if");
+    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();
@@ -74,9 +80,6 @@ function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif,
   }
 }
 
-const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
-const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
-
 function interpolateAttributes(element, ctx) {
   for (const el of [element, ...element.querySelectorAll("*")]) {
     for (const attr of [...el.attributes]) {
@@ -87,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 "";
         }
@@ -96,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("del:if");
+    const hasMountIf = child.hasAttribute("mount:if");
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
@@ -109,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;
@@ -159,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;
     }
   }
@@ -222,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);
@@ -255,7 +258,7 @@ class ChocolaComponent {
       for (const el of els) {
         const props = {};
         for (const attr of [...el.attributes]) {
-          if (attr.name.startsWith("data-ch") || attr.name === "if" || attr.name === "del:if" || attr.name === "elif" || attr.name === "else") continue;
+          if (attr.name.startsWith("data-ch") || attr.name === "if" || attr.name === "mount:if" || attr.name === "elif" || attr.name === "else") continue;
           props[attr.name] = attr.value;
         }
         const instance = new compClass();

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);
@@ -13,15 +13,40 @@ export async function getChocolaConfig(__rootdir) {
 
 const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
 const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
+const PROTECTED_REGEX = /_%%CHOCOLA-(?:AMP|LT|GT)\d+%%_/g;
+
+let protectSeq = 0;
 
 export function protectCurlyBraces(html) {
   return html
     .replace(/&(?:lbrace|#123|#x7B);/gi, LBRACE_PH)
-    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH);
+    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH)
+    .split(/(<script\b[^>]*>[\s\S]*?<\/script>|<style\b[^>]*>[\s\S]*?<\/style>)/gi)
+    .map((part, i) => i % 2 === 0
+      ? part.replace(/\{([^{}]*)\}/g, (m, inner) =>
+          `{${inner
+            .replace(/&/g, () => `_%%CHOCOLA-AMP${protectSeq++}%%_`)
+            .replace(/</g, () => `_%%CHOCOLA-LT${protectSeq++}%%_`)
+            .replace(/>/g, () => `_%%CHOCOLA-GT${protectSeq++}%%_`)}}`)
+      : part)
+    .join("");
 }
 
 export function restoreCurlyBraces(html) {
   return html
     .replace(/_%%CHOCOLA-LBRACE%%_/g, "{")
-    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}");
+    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}")
+    .replace(PROTECTED_REGEX, char => {
+      if (char.includes("AMP")) return "&";
+      if (char.includes("LT")) return "<";
+      return ">";
+    });
+}
+
+export function restoreTemplateChars(str) {
+  return str.replace(PROTECTED_REGEX, char => {
+    if (char.includes("AMP")) return "&";
+    if (char.includes("LT")) return "<";
+    return ">";
+  });
 }