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

package/compiler/utils.js

@@ -1,52 +1,52 @@
-import { createHash } from "crypto";
-import chalk from "./chalk.js";
-
-export function throwError(err) {
-  console.log(chalk.red.bold("Error!"), "A fatal error has occurred:\n");
-  throw new Error(err);
-}
-
-export function genRandomId(collection = null, length = 10, lettersOnly = false) {
-  let id;
-  if (lettersOnly) {
-    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
-  } else {
-    id = Math.random().toString(36).substring(2, length + 2);
-  }
-  if (!collection) return id;
-  if (collection.includes(id)) {
-    return genRandomId(collection, length, lettersOnly);
-  } else {
-    collection.push(id);
-    return id;
-  }
-}
-
-export function incrementAlfabet(letters) {
-  let arr = letters.split("");
-  let i = arr.length - 1;
-
-  while (i >= 0) {
-    let pos = arr[i].charCodeAt(0) - 97;
-    if (pos < 25) {
-      arr[i] = String.fromCharCode(pos + 97 + 1);
-      return arr.join("");
-    } else {
-      arr[i] = "a";
-      i--;
-    }
-  }
-
-  return "a" + arr.join("");
-}
-
-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";
+import { createHash } from "crypto";
+import chalk from "./chalk.js";
+
+export function throwError(err) {
+  console.log(chalk.red.bold("Error!"), "A fatal error has occurred:\n");
+  throw new Error(err);
+}
+
+export function genRandomId(collection = null, length = 10, lettersOnly = false) {
+  let id;
+  if (lettersOnly) {
+    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
+  } else {
+    id = Math.random().toString(36).substring(2, length + 2);
+  }
+  if (!collection) return id;
+  if (collection.includes(id)) {
+    return genRandomId(collection, length, lettersOnly);
+  } else {
+    collection.push(id);
+    return id;
+  }
+}
+
+export function incrementAlfabet(letters) {
+  let arr = letters.split("");
+  let i = arr.length - 1;
+
+  while (i >= 0) {
+    let pos = arr[i].charCodeAt(0) - 97;
+    if (pos < 25) {
+      arr[i] = String.fromCharCode(pos + 97 + 1);
+      return arr.join("");
+    } else {
+      arr[i] = "a";
+      i--;
+    }
+  }
+
+  return "a" + arr.join("");
+}
+
+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";

package/dev/index.js

@@ -144,7 +144,7 @@ export async function serve(__rootdir) {
   });
 
   server.listen(__config.port, __config.hostname, () => {
-    console.log(`Chocola App running at http://${__config.hostname}:${__config.port}/`);
+    console.log('Live server running at', chalk.hex("#68C4EE").underline(`http://${__config.hostname}:${__config.port}/`));
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.6",
+  "version": "2.0.0-next.8",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -35,6 +35,6 @@
     "./dev": "./dev/index.js"
   },
   "dependencies": {
-    "jsdom": "^27.4.0"
+    "linkedom": "^0.18.13"
   }
 }

package/parser/component.js

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

@@ -1,29 +1,30 @@
-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");
-}
+import { compileExpression } from "./utils.js";
+import { restoreTemplateChars } from "../utils.js";
+
+export function extractContextFromElement(element) {
+  const ctx = {};
+  for (const attr of element.attributes) {
+    const key = attr.name;
+    const val = restoreTemplateChars(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("mount:if");
+}
+export function getDelIfAttr(el) {
+  return el.getAttribute("mount:if");
+}
+export function removeDelIfAttr(el) {
+  el.removeAttribute("mount:if");
+}

package/parser/css.js

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

@@ -1,5 +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";
+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";