chocola 2.0.0-next.5 → 2.0.0-next.7

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,24 +22,6 @@ 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) {
   return restoreCurlyBraces(dom.serialize());
 }
@@ -70,7 +54,6 @@ export function getScriptElements(doc) {
 
 export function appendRuntimeScript(doc, filename) {
   const runtimeScriptEl = doc.createElement("script");
-  runtimeScriptEl.type = "module";
   runtimeScriptEl.src = "./" + filename;
   doc.body.appendChild(runtimeScriptEl);
 }

package/compiler/index.js

@@ -1,4 +1,5 @@
 import { promises as fs } from "fs";
+import path from "path";
 import chalk from "./chalk.js";
 import { loadConfig, resolvePaths } from "./config.js";
 import {
@@ -15,7 +16,8 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError, compileExpression, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./utils.js";
+import { genRandomId, throwError } from "./utils.js";
+import { compileExpression, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "../parser/index.js";
 import {
   copyStaticDir,
   getComponents,
@@ -207,8 +209,9 @@ export default async function compile(rootDir, buildConfig) {
   processPageConditionals(appContainer);
 
   const appElements = getAppElements(appContainer);
-  const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
-  const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
+  const { runtimeScript, scopesCss, hashMap, csrClasses } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
+  const csrSource = await fs.readFile(new URL("../runtime/index.js", import.meta.url), "utf-8");
+  const runtimeFilenames = await generateRuntimeScript(runtimeScript, paths.outDir, csrSource, csrClasses);
   await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
   if (scopesCss) {
@@ -217,7 +220,9 @@ export default async function compile(rootDir, buildConfig) {
     appendStylesheetLink(doc, fileName);
   };
 
-  appendRuntimeScript(doc, runtimeFilename);
+  for (const name of runtimeFilenames) {
+    appendRuntimeScript(doc, name);
+  }
   const html = await serializeDOM(dom);
   await writeHTMLOutput(html, paths.outDir);
 
@@ -227,6 +232,10 @@ export default async function compile(rootDir, buildConfig) {
     throwError(err.message || err);
   }
 
+  const chocolaDir = path.join(rootDir, ".chocola");
+  await fs.mkdir(chocolaDir, { recursive: true });
+  await fs.writeFile(path.join(chocolaDir, "hashes.json"), JSON.stringify(hashMap, null, 2) + "\n");
+
   !isHotReload && logSuccess(paths.outDir);
   isHotReload && console.log("Dev server updated");
 }

package/compiler/runtime-generator.js

@@ -2,12 +2,29 @@ import { promises as fs } from "fs";
 import path from "path";
 import { genRandomId } from "./utils.js";
 
-export async function generateRuntimeScript(runtimeScript, outDirPath) {
+export async function generateRuntimeScript(runtimeScript, outDirPath, csrSource, csrClasses) {
   const fileIds = [];
-  const runtimeFilename = "run-" + genRandomId(fileIds, 6) + ".js";
-  const runtimeFileContents = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+  const filenames = [];
 
-  await fs.writeFile(path.join(outDirPath, runtimeFilename), runtimeFileContents);
+  if (csrSource) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    const source = csrSource.replace(/^export\s+\{?\s*[^}]+\s*}?\s*;?\s*$/m, "");
+    await fs.writeFile(path.join(outDirPath, name), source);
+    filenames.push(name);
+  }
 
-  return runtimeFilename;
+  if (csrClasses) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    await fs.writeFile(path.join(outDirPath, name), csrClasses);
+    filenames.push(name);
+  }
+
+  if (runtimeScript) {
+    const name = "run-" + genRandomId(fileIds, 6) + ".js";
+    const content = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+    await fs.writeFile(path.join(outDirPath, name), content);
+    filenames.push(name);
+  }
+
+  return filenames;
 }

package/compiler/utils.js

@@ -1,3 +1,4 @@
+import { createHash } from "crypto";
 import chalk from "./chalk.js";
 
 export function throwError(err) {
@@ -5,16 +6,6 @@ export function throwError(err) {
   throw new Error(err);
 }
 
-export function hasDelIfAttr(el) {
-  return el.hasAttribute("del:if");
-}
-export function getDelIfAttr(el) {
-  return el.getAttribute("del:if");
-}
-export function removeDelIfAttr(el) {
-  el.removeAttribute("del:if");
-}
-
 export function genRandomId(collection = null, length = 10, lettersOnly = false) {
   let id;
   if (lettersOnly) {
@@ -49,31 +40,13 @@ export function incrementAlfabet(letters) {
   return "a" + arr.join("");
 }
 
-const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
-const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
-
-export function protectCurlyBraces(html) {
-  return html
-    .replace(/&(?:lbrace|#123|#x7B);/gi, LBRACE_PH)
-    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH);
-}
-
-export function restoreCurlyBraces(html) {
-  return html
-    .replace(/_%%CHOCOLA-LBRACE%%_/g, "{")
-    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}");
+export function deterministicHash(content, length = 8) {
+  const hash = createHash("sha256").update(content).digest();
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += String.fromCharCode(97 + (hash[i % hash.length] % 26));
+  }
+  return result;
 }
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.5",
+  "version": "2.0.0-next.7",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",

package/parser/component.js

@@ -0,0 +1,129 @@
+export 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;
+}
+
+export function extractRuntime(script, compName) {
+  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 inString = false;
+  let stringChar = null;
+
+  for (let i = startIndexBrace; i < script.length; i++) {
+    const ch = script[i];
+
+    if (inString) {
+      if (ch === '\\') { i++; continue; }
+      if (ch === stringChar) inString = false;
+      continue;
+    }
+
+    if (ch === "'" || ch === '"' || ch === '`') {
+      inString = true;
+      stringChar = ch;
+      continue;
+    }
+
+    if (ch === '{') {
+      bracesCount++;
+    } else if (ch === '}') {
+      bracesCount--;
+      if (bracesCount === 0) {
+        return script.substring(match.index, i + 1);
+      }
+    }
+  }
+
+  throw new Error(`${compName} $runtime function has unclosed curly braces.`);
+}
+
+export function extractTopLevelFunctions(script, excludeName) {
+  const funcs = [];
+  let i = 0;
+  let depth = 0;
+  let inStr = false;
+  let strChar = null;
+
+  while (i < script.length) {
+    const ch = script[i];
+
+    if (inStr) {
+      if (ch === '\\') i++;
+      else if (ch === strChar) inStr = false;
+      i++;
+      continue;
+    }
+
+    if (ch === '"' || ch === "'" || ch === '`') {
+      inStr = true;
+      strChar = ch;
+      i++;
+      continue;
+    }
+
+    if (ch === '{') { depth++; i++; continue; }
+    if (ch === '}') { depth--; i++; continue; }
+
+    if (depth === 0) {
+      const rest = script.slice(i);
+      const m = rest.match(/^(?:async\s+)?function\s+([a-zA-Z_$][0-9a-zA-Z_$]*)\s*\(/);
+      if (m) {
+        const name = m[1];
+        const pastParen = i + m[0].length;
+
+        let parenDepth = 1;
+        let p = pastParen;
+        while (p < script.length && parenDepth > 0) {
+          if (script[p] === '(') parenDepth++;
+          if (script[p] === ')') parenDepth--;
+          p++;
+        }
+
+        while (p < script.length && script[p] !== '{') p++;
+        if (p >= script.length) { i++; continue; }
+
+        let bDepth = 1;
+        let bodyStr = false;
+        let bodyStrChar = null;
+        let end = p + 1;
+        while (end < script.length && bDepth > 0) {
+          const c = script[end];
+          if (bodyStr) {
+            if (c === '\\') end++;
+            else if (c === bodyStrChar) bodyStr = false;
+            end++;
+            continue;
+          }
+          if (c === '"' || c === "'" || c === '`') {
+            bodyStr = true;
+            bodyStrChar = c;
+            end++;
+            continue;
+          }
+          if (c === '{') bDepth++;
+          if (c === '}') bDepth--;
+          end++;
+        }
+
+        if (name !== excludeName) {
+          funcs.push(script.slice(i, end));
+        }
+        i = end;
+        continue;
+      }
+    }
+    i++;
+  }
+
+  return funcs;
+}

package/parser/context.js

@@ -0,0 +1,29 @@
+import { compileExpression } from "./utils.js";
+
+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 function hasDelIfAttr(el) {
+  return el.hasAttribute("del:if");
+}
+export function getDelIfAttr(el) {
+  return el.getAttribute("del:if");
+}
+export function removeDelIfAttr(el) {
+  el.removeAttribute("del:if");
+}

package/parser/css.js

@@ -0,0 +1,96 @@
+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;
+  }
+  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}`;
+}
+
+export 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);
+}

package/parser/index.js

@@ -0,0 +1,5 @@
+export { extractPropsDefaults, extractRuntime, extractTopLevelFunctions } from "./component.js";
+export { extractContextFromElement, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
+export { reservedAttrs, getLineNumber, validateChainStructure, applyConditionalToElement, interpolateNode } from "./template.js";
+export { scopeCss } from "./css.js";
+export { compileExpression } from "./utils.js";

package/parser/template.js

@@ -0,0 +1,120 @@
+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}`;
+          }
+        }
+        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

@@ -0,0 +1,13 @@
+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;
+}