chocola 2.0.0-next.4 → 2.0.0-next.6

package/README.md

@@ -2,31 +2,35 @@
 
 Chocola is a JavaScript library for creating web user interfaces.
 
-`chocola` only contains the functionality to build and serve web static builds. For production you may want to implement `chocola` to your workflow with other frameworks as Vite until official workflows are provided.
+`chocola` only contains the functionality to build and serve web static builds. For production you may want to implement `chocola` to your workflow with other frameworks until official workflows are provided.
 
 ## Usage
 
 ```html
-<!-- MyTitle.html -->
+<!-- Greeting.html -->
 <script>
-    let self = new HTMLElement;
+    let self = new HTMLDivElement;
+    let input = new HTMLInputElement;
 
-    export let title = "Default title";
+    export let title = "Hello";
 
     function $runtime() {
-        console.log("Component mounted:", self)
+        input.focus();
     }
 </script>
 
 <template>
-    <h1>{title}</h1>
+    <div>
+        <h1>{title}</h1>
+        <input bind:self="input" type="text" placeholder="Your name">
+    </div>
 </template>
 
 <style>
-    button { color: chocolate; }
+    h1 { color: chocolate; }
 </style>
 ```
 
 ## Documentation
 
-See https://github.com/sad-gabi/chocola/wiki
+See https://github.com/chocolajs/chocola/wiki/Overview

package/compiler/chalk.js

@@ -0,0 +1,32 @@
+const ansi = {
+  bold: "\x1b[1m",
+  underline: "\x1b[4m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+};
+
+const reset = "\x1b[0m";
+
+function hexToAnsi(h) {
+  const r = parseInt(h.slice(1, 3), 16);
+  const g = parseInt(h.slice(3, 5), 16);
+  const b = parseInt(h.slice(5, 7), 16);
+  return `\x1b[38;2;${r};${g};${b}m`;
+}
+
+function makeChalk(stack) {
+  const fn = (s) => {
+    if (stack.length === 0) return s;
+    return stack.map(n => ansi[n] || hexToAnsi(n)).join("") + s + reset;
+  };
+  return new Proxy(fn, {
+    get(_, prop) {
+      if (prop === "hex") return (h) => makeChalk([...stack, h]);
+      return makeChalk([...stack, prop]);
+    },
+  });
+}
+
+const chalk = makeChalk([]);
+export default chalk;

package/compiler/component-processor.js

@@ -1,219 +1,42 @@
 import { JSDOM } from "jsdom";
-import { extractContextFromElement } from "./dom-processor.js";
-import { genRandomId, incrementAlfabet, throwError, protectCurlyBraces, compileExpression } from "./utils.js";
-import chalk from "chalk";
-import beautify from "js-beautify";
-
-function hasCombinator(sel) {
-  let depth = 0;
-  for (const ch of sel) {
-    if (ch === '[') depth++;
-    else if (ch === ']') depth--;
-    else if (depth === 0 && (ch === ' ' || ch === '>' || ch === '+' || ch === '~')) return true;
+import { protectCurlyBraces } from "../utils.js";
+import { genRandomId, incrementAlfabet, throwError, deterministicHash } from "./utils.js";
+import {
+  extractPropsDefaults, extractRuntime, extractTopLevelFunctions,
+  extractContextFromElement, hasDelIfAttr, getDelIfAttr, removeDelIfAttr,
+  reservedAttrs, validateChainStructure, applyConditionalToElement, interpolateNode,
+  scopeCss, compileExpression,
+} from "../parser/index.js";
+import chalk from "./chalk.js";
+
+
+
+class ProcessContext {
+  constructor(loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry) {
+    this.loadedComponents = loadedComponents;
+    this.runtimeChunks = runtimeChunks;
+    this.compIdColl = compIdColl;
+    this.letterState = letterState;
+    this.runtimeMap = runtimeMap;
+    this.cssScopes = cssScopes;
+    this.cssScopesMap = cssScopesMap;
+    this.scopedStyles = scopedStyles;
+    this.staticCtxRegistry = staticCtxRegistry;
   }
-  return false;
 }
 
-function scopeSelector(sel, cssId) {
-  const s = sel.trim();
-  if (s.startsWith("." + cssId)) return s;
-  if (hasCombinator(s)) return `.${cssId} ${s}`;
-  return `.${cssId}${s}, .${cssId} ${s}`;
-}
-
-function scopeCss(cssString, cssId) {
-  const keyframeRegex = /@(-webkit-)?keyframes\s+(\S+)/gi;
-  const animNames = new Set();
-  let match;
-  while ((match = keyframeRegex.exec(cssString))) {
-    animNames.add(match[2]);
-  }
 
-  if (animNames.size > 0) {
-    const sorted = [...animNames].sort((a, b) => b.length - a.length);
-    const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    for (const name of sorted) {
-      cssString = cssString.replace(
-        new RegExp(`(@(?:-webkit-)?keyframes\\s+)${esc(name)}`, "gi"),
-        `$1${name}-${cssId}`
-      );
-      cssString = cssString.replace(
-        new RegExp(`((?:animation|animation-name)\\s*:\\s*[^;{]*?)\\b${esc(name)}\\b`, "gi"),
-        `$1${name}-${cssId}`
-      );
-    }
-  }
-
-  function findMatchingBrace(s, openIndex) {
-    let depth = 0;
-    for (let i = openIndex; i < s.length; i++) {
-      const ch = s[i];
-      if (ch === '{') depth++;
-      else if (ch === '}') {
-        depth--;
-        if (depth === 0) return i;
-      }
-    }
-    return s.length - 1;
-  }
-
-  const scopeInnerAtRules = new Set(["@media", "@supports", "@container", "@layer"]);
-
-  function processBlock(str) {
-    str = str.replaceAll(":root", `.${cssId}`);
-
-    let out = "";
-    let i = 0;
-    while (i < str.length) {
-      const braceIndex = str.indexOf('{', i);
-      if (braceIndex === -1) {
-        out += str.slice(i);
-        break;
-      }
-      const header = str.substring(i, braceIndex);
-      const endBrace = findMatchingBrace(str, braceIndex);
-      const inner = str.substring(braceIndex + 1, endBrace);
-
-      if (header.trim().startsWith("@")) {
-        const atKeyword = header.trim().split(/\s+/)[0].toLowerCase();
-        if (scopeInnerAtRules.has(atKeyword)) {
-          out += header + "{" + processBlock(inner) + "}";
-        } else {
-          out += header + "{" + inner + "}";
-        }
-      } else {
-        const innerScoped = processBlock(inner);
-        const selectors = header
-          .split(",")
-          .map(s => s.trim())
-          .filter(Boolean);
-        const scopedHeader = selectors.length > 0
-          ? selectors.map(sel => scopeSelector(sel, cssId)).join(", ")
-          : header;
-        out += scopedHeader + "{" + innerScoped + "}";
-      }
-
-      i = endBrace + 1;
-    }
-    return out;
-  }
-
-  return processBlock(cssString);
-}
-
-function hasDelIfAttr(el) {
-  return el.hasAttribute("del:if");
-}
-function getDelIfAttr(el) {
-  return el.getAttribute("del:if");
-}
-function removeDelIfAttr(el) {
-  el.removeAttribute("del:if");
-}
-
-function extractPropsDefaults(script) {
-  if (!script) return [];
-  const propsRegex = /export\s+let\s+([a-zA-Z_$][0-9a-zA-Z_$]*)\s*(?:=\s*([^;]+))?;/g;
-  let props = [];
-  let match;
-  while ((match = propsRegex.exec(script)) !== null) {
-    props.push({ name: match[1].trim(), defaultValue: match[2]?.trim() });
-  }
-  return props;
-}
-
-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]);
-      }
-    }
-  }
-}
-
-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;
-}
-
-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 processComponentElement(
   element,
-  loadedComponents,
-  runtimeChunks,
-  compIdColl,
-  letterState,
-  runtimeMap,
-  cssScopes,
-  cssScopesMap,
-  scopedStyles,
+  cx,
   renderChain = [],
-  staticCtxRegistry,
   sourceFile,
   sourceContent
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".html";
-  let instance = loadedComponents.get(compName);
+  let instance = cx.loadedComponents.get(compName);
 
   if (!instance || instance === undefined) return false;
   if (renderChain && renderChain.includes(compName)) return false;
@@ -233,11 +56,11 @@ export function processComponentElement(
   const compProps = extractPropsDefaults(script);
 
   let ctx;
-  if (staticCtxRegistry && staticCtxRegistry.has(element)) {
-    ctx = staticCtxRegistry.get(element);
+  if (cx.staticCtxRegistry && cx.staticCtxRegistry.has(element)) {
+    ctx = cx.staticCtxRegistry.get(element);
   } else {
     ctx = extractContextFromElement(element);
-    staticCtxRegistry && staticCtxRegistry.set(element, ctx);
+    cx.staticCtxRegistry && cx.staticCtxRegistry.set(element, ctx);
   }
 
   if (compProps.length > 0) {
@@ -252,6 +75,15 @@ export function processComponentElement(
     });
   }
 
+  const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
+  for (const src of topFuncSrc) {
+    try {
+      const fn = (0, eval)("(" + src + ")");
+      const name = fn.name;
+      if (name && !(name in ctx)) ctx[name] = fn;
+    } catch {}
+  }
+
   const elInnerHtml = element.innerHTML;
 
   const ctxProxy = new Proxy(ctx, {
@@ -275,6 +107,9 @@ export function processComponentElement(
     parent: el.parentNode
   }));
   const condChains = new Map();
+  const bindings = [];
+  const elBindIds = new Map();
+  let bindCounter = 0;
 
   childEntries.forEach(({ el: child, parent }) => {
     if (!condChains.has(parent)) {
@@ -335,11 +170,24 @@ export function processComponentElement(
       return;
     }
 
-    const reservedAttrs = ["if", "del:if", "elif", "else"];
-
     Array.from(child.attributes).forEach(attribute => {
       if (!attribute || attribute === undefined) return;
       if (reservedAttrs.includes(attribute.name)) return;
+
+      if (attribute.name.startsWith("bind:")) {
+        const prop = attribute.name.slice(5);
+        const varName = attribute.value;
+        let bindId = elBindIds.get(child);
+        if (!bindId) {
+          bindId = "b" + (bindCounter++);
+          elBindIds.set(child, bindId);
+          child.setAttribute("data-chbind-" + bindId, "");
+        }
+        bindings.push({ prop, varName, bindId });
+        child.removeAttribute(attribute.name);
+        return;
+      }
+
       attribute.value = attribute.value.replace(
         /\{([^}]+)\}/g,
         (_, expr) => {
@@ -354,59 +202,13 @@ export function processComponentElement(
 
     processComponentElement(
       child,
-      loadedComponents,
-      runtimeChunks,
-      compIdColl,
-      letterState,
-      runtimeMap,
-      cssScopes,
-      cssScopesMap,
-      scopedStyles,
+      cx,
       renderChain.concat(compName),
-      staticCtxRegistry,
       compName,
       template
     );
 
-    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;
-    }
+    applyConditionalToElement(child, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
 
     interpolateNode(child, ctxProxy)
   });
@@ -415,7 +217,7 @@ export function processComponentElement(
 
   if (firstChild && firstChild.nodeType === 1) {
     if (script) {
-      const compId = "chid-" + genRandomId(compIdColl);
+      const compId = "chid-" + genRandomId(cx.compIdColl);
       firstChild.setAttribute("chid", compId);
 
       const ctxRegex = /ctx\s*=\s*({.*?})/;
@@ -428,91 +230,70 @@ export function processComponentElement(
           runtimeCtx = {};
         }
       }
-      let ctxDef = "";
+      const ctxDefParts = [];
+      const declared = new Set();
       for (const [key, value] of Object.entries(runtimeCtx)) {
-        ctxDef += `ctx.${key} = ctx.${key}||${JSON.stringify(value)};\n`;
+        ctxDefParts.push(`let ${key} = ctx.${key}||${JSON.stringify(value)};\n`);
+        declared.add(key);
       }
 
       for (const { name, defaultValue } of compProps) {
+        if (declared.has(name)) continue;
         if (defaultValue !== undefined) {
-          ctxDef += `ctx.${name} = ctx.${name}||${defaultValue};\n`;
+          ctxDefParts.push(`let ${name} = ctx.${name}||${defaultValue};\n`);
+        } else {
+          ctxDefParts.push(`let ${name} = ctx.${name};\n`);
         }
       }
 
-      script = script.replace(ctxRegex, "ctx");
-
-      function extractRuntime(script) {
-        const startRegex = /(?:async\s+)?function\s+\$runtime\(([^)]*)\)\s*\{/;
-        const match = script.match(startRegex);
-
-        if (!match) return null;
-
-        const startIndexBrace = match.index + match[0].length - 1;
-
-        let bracesCount = 0;
-        let closingBraceIndex = -1;
-
-        for (let i = startIndexBrace; i < script.length; i++) {
-          if (script[i] === "{") {
-            bracesCount++;
-          } else if (script[i] === "}") {
-            bracesCount--;
-            if (bracesCount === 0) {
-              closingBraceIndex = i;
-              break;
-            }
-          }
-        }
-
-        if (closingBraceIndex === -1) {
-          throw new Error(`${compName} $runtime function has unclosed curly braces.`);
-        }
-
-        const fullMatch = script.substring(match.index, closingBraceIndex + 1);
+      const ctxDef = ctxDefParts.join("");
 
-        return fullMatch;
-      }
+      script = script.replace(ctxRegex, "ctx");
 
-      let runtime = extractRuntime(script);
+      let runtime = extractRuntime(script, compName);
 
       if (runtime) {
-        for (const { name } of compProps) {
-          runtime = runtime.replace(name, `ctx.${name}`);
-        }
-
-        runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + ctxDef);
-
-        let letterEntry = runtimeMap && runtimeMap.get(compName);
+        let letterEntry = cx.runtimeMap && cx.runtimeMap.get(compName);
         let letter;
         if (!letterEntry) {
-          letter = getNextLetter(letterState);
+          letter = getNextLetter(cx.letterState);
+          const topFuncs = topFuncSrc;
+
+          let injectCode = ctxDef;
+          if (bindings.length > 0) {
+            injectCode += "\n" + bindings.map(b => {
+              const accessor = b.prop === "self" ? "" : "." + b.prop;
+              return "let " + b.varName + " = self.querySelector('[data-chbind-" + b.bindId + "]')" + accessor + ";";
+            }).join("\n") + "\n";
+          }
+          if (topFuncs.length > 0) {
+            injectCode += "\n" + topFuncs.join("\n\n") + "\n";
+          }
+          runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
+
           runtime = runtime.replace(`${RUNTIME_KW}()`, `${letter}r(self, ctx)`);
-          runtimeChunks.push(runtime);
-          runtimeMap && runtimeMap.set(compName, { letter });
+          cx.runtimeChunks.push(runtime);
+          cx.runtimeMap && cx.runtimeMap.set(compName, { letter });
         } else {
           letter = letterEntry.letter;
         }
 
-        runtimeChunks.push(`${letter}r(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
+        cx.runtimeChunks.push(`${letter}r(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
       }
     }
   }
 
-  if (styles) {
-    let cssId = cssScopesMap && cssScopesMap.get(compName);
-    if (!cssId) {
-      cssId = genRandomId(cssScopes, 8, true);
-      cssScopesMap.set(compName, cssId);
-    }
-    if (fragment.children.length === 1 && firstChild.nodeType === 1) {
-      firstChild.classList.add(cssId);
-    }
-    styles = scopeCss(styles, cssId);
-    scopedStyles.push(styles);
+  let cssId = cx.cssScopesMap && cx.cssScopesMap.get(compName);
+  if (!cssId) {
+    cssId = deterministicHash(compName, 8);
+    cx.cssScopesMap.set(compName, cssId);
   }
-
   if (fragment.children.length === 1 && firstChild.nodeType === 1) {
-    firstChild.setAttribute("data-ch-source", compName);
+    firstChild.classList.add(cssId);
+  }
+  if (styles) {
+    styles = scopeCss(styles, cssId);
+    cx.scopedStyles.push(styles);
   }
 
   element.replaceWith(fragment);
@@ -520,24 +301,24 @@ export function processComponentElement(
 }
 
 export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {
-  let runtimeChunks = [];
-  let compIdColl = [];
-  let letterState = { value: null };
-  let runtimeMap = new Map();
-  let cssScopes = [];
-  let cssScopesMap = new Map();
-  let scopedStyles = [];
-  let staticCtxRegistry = new Map();
+  const cx = new ProcessContext(
+    loadedComponents, [], [], { value: null }, new Map(), [], new Map(), [], new Map()
+  );
 
   appElements.forEach(el => {
     if (!el.isConnected) return;
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry, pageSourceFile, pageSourceContent);
+    processComponentElement(el, cx, [], pageSourceFile, pageSourceContent);
   });
-  const runtimeScript = runtimeChunks.join("\n");
-  const hasComponents = runtimeChunks.length > 0;
-  const scopesCss = beautify.css(scopedStyles.join("\n"));
+  const runtimeScript = cx.runtimeChunks.join("\n");
+  const hasComponents = cx.runtimeChunks.length > 0;
+  const scopesCss = cx.scopedStyles.join("\n");
+
+  const hashMap = {};
+  for (const [compName, hash] of cx.cssScopesMap) {
+    hashMap[compName] = hash;
+  }
 
-  return { runtimeScript, hasComponents, scopesCss };
+  return { runtimeScript, hasComponents, scopesCss, hashMap };
 }
 
 function getNextLetter(letterState) {
@@ -550,4 +331,3 @@ function getNextLetter(letterState) {
 }
 
 const RUNTIME_KW = "$runtime";
-const RUNTIME_REGEX = new RegExp(RUNTIME_KW, "g");

package/compiler/dom-processor.js

@@ -1,7 +1,9 @@
 import { JSDOM } from "jsdom";
 import { promises as fs } from "fs";
 import path from "path";
-import { throwError, protectCurlyBraces, restoreCurlyBraces, compileExpression } from "./utils.js";
+import { protectCurlyBraces, restoreCurlyBraces } from "../utils.js";
+import { extractContextFromElement } from "../parser/context.js";
+import { throwError } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 export function createDOM(srcIndexContent) {
@@ -20,28 +22,8 @@ export function getAppElements(appContainer) {
   return Array.from(appContainer.querySelectorAll("*"));
 }
 
-export function extractContextFromElement(element) {
-  const ctx = {};
-  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] = compileExpression(matches[0][1], false)();
-        continue;
-      } catch {}
-    }
-    ctx[key] = val;
-  }
-  return ctx;
-}
-
 export async function serializeDOM(dom) {
-  const beautify = (await import("js-beautify")).default;
-  const finalHtml = restoreCurlyBraces(dom.serialize());
-  return beautify.html(finalHtml, { indent_size: 2 });
+  return restoreCurlyBraces(dom.serialize());
 }
 
 export async function writeHTMLOutput(html, outDirPath) {
@@ -66,6 +48,10 @@ export function appendStylesheetLink(doc, filename) {
   doc.head.appendChild(linkEl);
 }
 
+export function getScriptElements(doc) {
+  return Array.from(doc.querySelectorAll("script[src]"));
+}
+
 export function appendRuntimeScript(doc, filename) {
   const runtimeScriptEl = doc.createElement("script");
   runtimeScriptEl.type = "module";