chocola 2.0.0-next.6 → 2.0.0-next.8

package/parser/template.js

@@ -1,121 +1,120 @@
-import { throwError } from "../compiler/utils.js";
-import { compileExpression } from "./utils.js";
-import { hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
-
-export const reservedAttrs = ["if", "del:if", "elif", "else"];
-
-export function getLineNumber(sourceContent, parentContent, idxInParent) {
-  if (sourceContent === parentContent) {
-    return parentContent.substring(0, idxInParent).split("\n").length;
-  }
-  const templateStartMatch = sourceContent.match(/<template[^>]*>/);
-  if (templateStartMatch) {
-    const contentStart = templateStartMatch.index + templateStartMatch[0].length;
-    const beforeContent = sourceContent.substring(0, contentStart);
-    const linesInBefore = beforeContent.split("\n").length;
-    const linesInTemplate = parentContent.substring(0, idxInParent).split("\n").length;
-    return linesInBefore + linesInTemplate - 1;
-  }
-  return null;
-}
-
-export function validateChainStructure(parent, sourceFile, sourceContent, parentContent) {
-  const children = [...parent.children];
-  let chainActive = false;
-
-  for (const child of children) {
-    const hasIf = child.hasAttribute("if");
-    const hasDelIf = hasDelIfAttr(child);
-    const hasElif = child.hasAttribute("elif");
-    const hasElse = child.hasAttribute("else");
-
-    if (hasElif || hasElse) {
-      if (!chainActive) {
-        const tag = child.tagName.toLowerCase();
-        const attr = hasElif ? "elif" : "else";
-        let loc = sourceFile;
-        if (sourceContent && parentContent) {
-          const idx = parentContent.indexOf(child.outerHTML);
-          if (idx !== -1) {
-            const lineNum = getLineNumber(sourceContent, parentContent, idx);
-            if (lineNum !== null) loc = `${sourceFile}:${lineNum}`;
-          }
-        }
-        throwError(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
-      }
-      if (hasElse) {
-        chainActive = false;
-      }
-    }
-
-    if (hasIf || hasDelIf) {
-      chainActive = true;
-    } else if (!hasElif && !hasElse) {
-      chainActive = false;
-    }
-
-    validateChainStructure(child, sourceFile, sourceContent, parentContent);
-  }
-}
-
-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);
-    condChain.active = true;
-    if (fn(ctxProxy)) {
-      condChain.rendered = true;
-    } else {
-      child.style.display = "none";
-      condChain.rendered = false;
-    }
-    child.removeAttribute("if");
-  } else if (hasDelIf) {
-    const expr = getDelIfAttr(child).slice(1, -1);
-    const fn = compileExpression(expr, true);
-    condChain.active = true;
-    if (fn(ctxProxy)) {
-      condChain.rendered = true;
-    } else {
-      child.remove();
-      condChain.rendered = false;
-    }
-    removeDelIfAttr(child);
-  } else if (hasElif) {
-    const expr = child.getAttribute("elif").slice(1, -1);
-    const fn = compileExpression(expr, true);
-    if (fn(ctxProxy)) {
-      condChain.rendered = true;
-    } else {
-      child.remove();
-    }
-    child.removeAttribute("elif");
-  } else if (hasElse) {
-    condChain.rendered = true;
-    condChain.active = false;
-    child.removeAttribute("else");
-  } else {
-    condChain.active = false;
-    condChain.rendered = false;
-  }
-}
-
-export 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]);
-      }
-    }
-  }
-}
+import { compileExpression } from "./utils.js";
+import { hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
+
+export const reservedAttrs = ["if", "mount:if", "elif", "else"];
+
+export function getLineNumber(sourceContent, parentContent, idxInParent) {
+  if (sourceContent === parentContent) {
+    return parentContent.substring(0, idxInParent).split("\n").length;
+  }
+  const templateStartMatch = sourceContent.match(/<template[^>]*>/);
+  if (templateStartMatch) {
+    const contentStart = templateStartMatch.index + templateStartMatch[0].length;
+    const beforeContent = sourceContent.substring(0, contentStart);
+    const linesInBefore = beforeContent.split("\n").length;
+    const linesInTemplate = parentContent.substring(0, idxInParent).split("\n").length;
+    return linesInBefore + linesInTemplate - 1;
+  }
+  return null;
+}
+
+export function validateChainStructure(parent, sourceFile, sourceContent, parentContent) {
+  const children = [...parent.children];
+  let chainActive = false;
+
+  for (const child of children) {
+    const hasIf = child.hasAttribute("if");
+    const hasDelIf = hasDelIfAttr(child);
+    const hasElif = child.hasAttribute("elif");
+    const hasElse = child.hasAttribute("else");
+
+    if (hasElif || hasElse) {
+      if (!chainActive) {
+        const tag = child.tagName.toLowerCase();
+        const attr = hasElif ? "elif" : "else";
+        let loc = sourceFile;
+        if (sourceContent && parentContent) {
+          const idx = parentContent.indexOf(child.outerHTML);
+          if (idx !== -1) {
+            const lineNum = getLineNumber(sourceContent, parentContent, idx);
+            if (lineNum !== null) loc = `${sourceFile}:${lineNum}`;
+          }
+        }
+        throw new Error(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
+      }
+      if (hasElse) {
+        chainActive = false;
+      }
+    }
+
+    if (hasIf || hasDelIf) {
+      chainActive = true;
+    } else if (!hasElif && !hasElse) {
+      chainActive = false;
+    }
+
+    validateChainStructure(child, sourceFile, sourceContent, parentContent);
+  }
+}
+
+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);
+    condChain.active = true;
+    if (fn(ctxProxy)) {
+      condChain.rendered = true;
+    } else {
+      child.style.display = "none";
+      condChain.rendered = false;
+    }
+    child.removeAttribute("if");
+  } else if (hasDelIf) {
+    const expr = getDelIfAttr(child).slice(1, -1);
+    const fn = compileExpression(expr, true);
+    condChain.active = true;
+    if (fn(ctxProxy)) {
+      condChain.rendered = true;
+    } else {
+      child.remove();
+      condChain.rendered = false;
+    }
+    removeDelIfAttr(child);
+  } else if (hasElif) {
+    const expr = child.getAttribute("elif").slice(1, -1);
+    const fn = compileExpression(expr, true);
+    if (fn(ctxProxy)) {
+      condChain.rendered = true;
+    } else {
+      child.remove();
+    }
+    child.removeAttribute("elif");
+  } else if (hasElse) {
+    condChain.rendered = true;
+    condChain.active = false;
+    child.removeAttribute("else");
+  } else {
+    condChain.active = false;
+    condChain.rendered = false;
+  }
+}
+
+export 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]);
+      }
+    }
+  }
+}

package/parser/utils.js

@@ -1,13 +1,16 @@
-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;
-}
+import { restoreTemplateChars } from "../utils.js";
+
+const compiledCache = new Map();
+
+export function compileExpression(expr, useCtx) {
+  expr = restoreTemplateChars(expr);
+  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/runtime/index.js

@@ -0,0 +1,312 @@
+const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
+const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
+
+const exprCache = new Map();
+
+function compileExpression(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) {
+    fn = useCtx
+      ? new Function("ctx", "with(ctx) { return (" + expr + "); }")
+      : new Function('"use strict"; return (' + expr + ")");
+    exprCache.set(key, fn);
+  }
+  return fn;
+}
+
+function interpolateNode(root, ctx) {
+  const stack = [root];
+  while (stack.length) {
+    const node = stack.pop();
+    if (node.nodeType === 3) {
+      const text = node.textContent
+        .replace(new RegExp(LBRACE_PH, "g"), "{")
+        .replace(new RegExp(RBRACE_PH, "g"), "}");
+      node.textContent = text.replace(/\{([^}]+)\}/g, (_, expr) => {
+        try {
+          return String(compileExpression(expr, true)(ctx));
+        } catch {
+          return "";
+        }
+      });
+    } else {
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        stack.push(node.childNodes[i]);
+      }
+    }
+  }
+}
+
+function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif, hasElse) {
+  if (hasIf) {
+    const expr = child.getAttribute("if").slice(1, -1);
+    chain.active = true;
+    if (compileExpression(expr, true)(ctx)) {
+      chain.rendered = true;
+    } else {
+      child.style.display = "none";
+      chain.rendered = false;
+    }
+    child.removeAttribute("if");
+  } else if (hasDelIf) {
+    const expr = child.getAttribute("mount:if").slice(1, -1);
+    chain.active = true;
+    if (compileExpression(expr, true)(ctx)) {
+      chain.rendered = true;
+    } else {
+      child.remove();
+      chain.rendered = false;
+    }
+    child.removeAttribute("mount:if");
+  } else if (hasElif) {
+    const expr = child.getAttribute("elif").slice(1, -1);
+    if (compileExpression(expr, true)(ctx)) {
+      chain.rendered = true;
+    } else {
+      child.remove();
+    }
+    child.removeAttribute("elif");
+  } else if (hasElse) {
+    chain.rendered = true;
+    chain.active = false;
+    child.removeAttribute("else");
+  } else {
+    chain.active = false;
+    chain.rendered = false;
+  }
+}
+
+function interpolateAttributes(element, ctx) {
+  for (const el of [element, ...element.querySelectorAll("*")]) {
+    for (const attr of [...el.attributes]) {
+      const val = attr.value;
+      if (!val.includes("{") && !val.includes(LBRACE_PH)) continue;
+      const raw = val
+        .replace(new RegExp(LBRACE_PH, "g"), "{")
+        .replace(new RegExp(RBRACE_PH, "g"), "}");
+      attr.value = raw.replace(/\{([^}]+)\}/g, (_, expr) => {
+        try {
+          return String(compileExpression(expr, true)(ctx));
+        } catch {
+          return "";
+        }
+      });
+    }
+  }
+}
+
+function processConditionals(element, ctx, chain) {
+  for (const child of [...element.children]) {
+    const hasIf = child.hasAttribute("if");
+    const hasDelIf = child.hasAttribute("mount:if");
+    const hasElif = child.hasAttribute("elif");
+    const hasElse = child.hasAttribute("else");
+
+    if ((hasElif || hasElse) && chain.rendered) {
+      child.remove();
+      if (hasElse) chain.active = false;
+      continue;
+    }
+
+    applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif, hasElse);
+
+    if (child.parentNode) {
+      processConditionals(child, ctx, chain);
+    }
+  }
+}
+
+function processSlots(element, projectedChildren) {
+  const slots = element.querySelectorAll("slot");
+  for (const slot of slots) {
+    const clone = projectedChildren.map(c => c.cloneNode(true));
+    slot.replaceWith(...clone);
+  }
+}
+
+let bindCounter = 0;
+
+function processBindAttributes(element) {
+  const bindings = [];
+  for (const attr of [...element.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, "");
+      bindings.push({ prop, varName, bindId });
+      element.removeAttribute(attr.name);
+    }
+  }
+  return bindings;
+}
+
+function resolveDataBindings(element) {
+  const ids = [];
+  for (const attr of [...element.attributes]) {
+    const match = attr.name.match(/^data-chbind-(b\d+)$/);
+    if (match) {
+      ids.push(match[1]);
+      element.removeAttribute(attr.name);
+    }
+  }
+  return ids;
+}
+
+function collectBindings(root) {
+  const bindingDefs = [];
+  const idToEl = {};
+
+  for (const el of [root, ...root.querySelectorAll("*")]) {
+    bindingDefs.push(...processBindAttributes(el));
+    for (const id of resolveDataBindings(el)) {
+      idToEl[id] = el;
+    }
+  }
+  return { bindingDefs, idToEl };
+}
+
+class ChocolaComponent {
+  #template;
+  #hash;
+  #runtime;
+  #defaultProps;
+  #bakedComponent;
+  #ctx;
+  #eventListeners = [];
+  #children;
+  #childComponents;
+
+  constructor(config = {}) {
+    this.#template = config.template || "";
+    this.#hash = config.hash || "";
+    this.#runtime = config.runtime || null;
+    this.#defaultProps = config.props || {};
+    this.#childComponents = config.children || [];
+  }
+
+  #collectListeners(root, fn) {
+    const allEls = [root, ...root.querySelectorAll("*")];
+    const patches = [];
+
+    for (const el of allEls) {
+      const original = el.addEventListener;
+      el.addEventListener = (event, handler, options) => {
+        this.#eventListeners.push({ el, event, handler, options });
+        original.call(el, event, handler, options);
+      };
+      patches.push({ el, original });
+    }
+
+    try {
+      fn(root, this.#ctx);
+    } finally {
+      for (const { el, original } of patches) {
+        el.addEventListener = original;
+      }
+    }
+  }
+
+  #init(ctx) {
+    const mergedCtx = { ...this.#defaultProps, ...ctx };
+
+    const container = document.createElement("template");
+    container.innerHTML = this.#template;
+    const fragment = container.content;
+    const root = fragment.firstElementChild;
+
+    if (!root) {
+      console.error(`${this.#hash}: component template must have a single root element`);
+      return null;
+    }
+
+    processSlots(root, this.#children || []);
+    processConditionals(root, mergedCtx, { active: false, rendered: false });
+    interpolateAttributes(root, mergedCtx);
+    interpolateNode(root, mergedCtx);
+    root.classList.add(this.#hash);
+
+    const { bindingDefs, idToEl } = collectBindings(root);
+    this.#ctx = { ...mergedCtx };
+    for (const { prop, varName, bindId } of bindingDefs) {
+      const el = idToEl[bindId];
+      if (el) {
+        this.#ctx[varName] = prop === "self" ? el : el[prop];
+      }
+    }
+
+    if (this.#runtime) {
+      this.#collectListeners(root, (self, ctx) => {
+        this.#runtime(self, ctx);
+      });
+    }
+
+    this.#bakedComponent = root;
+    container.remove();
+    return root;
+  }
+
+  #childInstances = [];
+
+  #mountChildren(root) {
+    for (const { tag, compClass } of this.#childComponents) {
+      const els = root.querySelectorAll(tag);
+      for (const el of els) {
+        const props = {};
+        for (const attr of [...el.attributes]) {
+          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();
+        instance.mount(el.parentNode, props);
+        this.#childInstances.push(instance);
+        el.remove();
+      }
+    }
+  }
+
+  mount(target, ctx = {}) {
+    if (target.nodeType !== 1) {
+      console.error(`${this.#hash}: mount target is not a valid DOM node`);
+      return;
+    }
+    this.#children = [...target.children];
+    this.#init(ctx);
+    if (this.#bakedComponent) {
+      target.appendChild(this.#bakedComponent);
+      this.#mountChildren(this.#bakedComponent);
+    }
+  }
+
+  remove() {
+    for (const { el, event, handler, options } of this.#eventListeners) {
+      el.removeEventListener(event, handler, options);
+    }
+    this.#eventListeners = [];
+    for (const child of this.#childInstances) {
+      child.remove();
+    }
+    this.#childInstances = [];
+    if (this.#bakedComponent) {
+      this.#bakedComponent.remove();
+      this.#bakedComponent = null;
+    }
+  }
+
+  update(ctx = {}) {
+    const mergedCtx = { ...this.#defaultProps, ...ctx };
+    const parent = this.#bakedComponent?.parentNode;
+    parent && this.remove();
+    this.#init(mergedCtx);
+    if (parent && this.#bakedComponent) {
+      parent.appendChild(this.#bakedComponent);
+      this.#mountChildren(this.#bakedComponent);
+    }
+  }
+}
+
+export { ChocolaComponent };

package/utils.js

@@ -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 ">";
+  });
 }