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

package/compiler/index.js

@@ -1,11 +1,13 @@
 import { promises as fs } from "fs";
-import chalk from "chalk";
+import path from "path";
+import chalk from "./chalk.js";
 import { loadConfig, resolvePaths } from "./config.js";
 import {
   createDOM,
   validateAppContainer,
   getAppElements,
   getAssetLinks,
+  getScriptElements,
   appendRuntimeScript,
   appendStylesheetLink,
   serializeDOM,
@@ -14,12 +16,14 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError, compileExpression } from "./utils.js";
+import { genRandomId, throwError } from "./utils.js";
+import { compileExpression, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "../parser/index.js";
 import {
   copyStaticDir,
   getComponents,
   getSrcIndex,
   processIcons,
+  processScript,
   processStylesheet,
 } from "./pipeline.js";
 
@@ -91,6 +95,7 @@ async function loadAndDisplayComponents(srcComponentsPath) {
 
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
   const { stylesheets, icons } = getAssetLinks(doc);
+  const scripts = getScriptElements(doc);
   const fileIds = [];
   let cssContents = [];
 
@@ -102,9 +107,81 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
   for (const link of icons) {
     await processIcons(link, rootDir, srcDir, outDirPath);
   }
+
+  for (const script of scripts) {
+    await processScript(doc, script, rootDir, srcDir, outDirPath, fileIds);
+  }
   return cssContents
 }
 
+function processPageConditionals(parent) {
+  const children = [...parent.children];
+  let chainActive = false;
+  let chainRendered = 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) continue;
+      if (chainRendered) { child.remove(); continue; }
+    }
+
+    if (hasIf) {
+      const raw = child.getAttribute("if");
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpression(expr, false);
+      const result = fn();
+      chainActive = true;
+      if (result) {
+        chainRendered = true;
+      } else {
+        child.remove();
+        chainRendered = false;
+      }
+      child.removeAttribute("if");
+    } else if (hasDelIf) {
+      const raw = getDelIfAttr(child);
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpression(expr, false);
+      const result = fn();
+      chainActive = true;
+      if (result) {
+        chainRendered = true;
+      } else {
+        child.remove();
+        chainRendered = false;
+      }
+      removeDelIfAttr(child);
+    } else if (hasElif) {
+      const raw = child.getAttribute("elif");
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpression(expr, false);
+      const result = fn();
+      if (result) {
+        chainRendered = true;
+      } else {
+        child.remove();
+      }
+      child.removeAttribute("elif");
+    } else if (hasElse) {
+      chainRendered = true;
+      chainActive = false;
+      child.removeAttribute("else");
+    } else {
+      chainActive = false;
+      chainRendered = false;
+    }
+
+    if (child.parentNode) {
+      processPageConditionals(child);
+    }
+  }
+}
+
 export default async function compile(rootDir, buildConfig) {
   const isHotReload = buildConfig?.isHotReload || null;
   !isHotReload && logBanner();
@@ -129,87 +206,10 @@ export default async function compile(rootDir, buildConfig) {
   const doc = dom.window.document;
   const appContainer = validateAppContainer(doc);
 
-  function hasDelIfAttr(el) {
-    return el.hasAttribute("del:if");
-  }
-  function getDelIfAttr(el) {
-    return el.getAttribute("del:if");
-  }
-  function removeDelIfAttr(el) {
-    el.removeAttribute("del:if");
-  }
-
-  function processPageConditionals(parent) {
-    const children = [...parent.children];
-    let chainActive = false;
-    let chainRendered = 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) continue;
-        if (chainRendered) { child.remove(); continue; }
-      }
-
-      if (hasIf) {
-        const raw = child.getAttribute("if");
-        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = compileExpression(expr, false);
-        const result = fn();
-        chainActive = true;
-        if (result) {
-          chainRendered = true;
-        } else {
-          child.remove();
-          chainRendered = false;
-        }
-        child.removeAttribute("if");
-      } else if (hasDelIf) {
-        const raw = getDelIfAttr(child);
-        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = compileExpression(expr, false);
-        const result = fn();
-        chainActive = true;
-        if (result) {
-          chainRendered = true;
-        } else {
-          child.remove();
-          chainRendered = false;
-        }
-        removeDelIfAttr(child);
-      } else if (hasElif) {
-        const raw = child.getAttribute("elif");
-        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = compileExpression(expr, false);
-        const result = fn();
-        if (result) {
-          chainRendered = true;
-        } else {
-          child.remove();
-        }
-        child.removeAttribute("elif");
-      } else if (hasElse) {
-        chainRendered = true;
-        chainActive = false;
-        child.removeAttribute("else");
-      } else {
-        chainActive = false;
-        chainRendered = false;
-      }
-
-      if (child.parentNode) {
-        processPageConditionals(child);
-      }
-    }
-  }
   processPageConditionals(appContainer);
 
   const appElements = getAppElements(appContainer);
-  const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
+  const { runtimeScript, scopesCss, hashMap } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
   const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
   await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
@@ -229,6 +229,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/pipeline.js

@@ -15,22 +15,23 @@ export async function getComponents(libDir) {
       throw Error(`The specified components folder ${libDir} could not be found.`);
     }
 
-    for (const comp of components) {
-      if (!comp.endsWith(".html")) continue;
+    const reads = components
+      .filter(comp => comp.endsWith(".html"))
+      .map(async (comp) => {
+        try {
+          const compPath = path.join(libDir, comp);
+          const instance = await fs.readFile(compPath, "utf-8");
 
-      componentsLib.push(comp);
+          if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
 
-      try {
-        const compPath = path.join(libDir, comp);
-        const instance = await fs.readFile(compPath, "utf-8");
+          loadedComponents.set(comp.toLowerCase(), instance);
+          componentsLib.push(comp);
+        } catch (err) {
+          throwError(`Failed to load component "${comp}": ${err.message || err}`);
+        }
+      });
 
-        if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
-
-        loadedComponents.set(comp.toLowerCase(), instance);
-      } catch (err) {
-        throwError(`Failed to load component "${comp}": ${err.message || err}`);
-      }
-    }
+    await Promise.all(reads);
 
     return { componentsLib, loadedComponents, emptyComps };
   } catch (err) {
@@ -83,6 +84,32 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
   }
 }
 
+export async function processScript(doc, script, rootDir, srcDir, outDirPath, fileIds) {
+  try {
+    const src = script.getAttribute("src");
+    if (src.startsWith("http://") || src.startsWith("https://")) return;
+    const scriptPath = path.join(rootDir, srcDir, src);
+    const content = await fs.readFile(scriptPath, { encoding: "utf8" });
+    const jsFileName = "js-" + genRandomId(fileIds, 6) + ".js";
+    await fs.writeFile(path.join(outDirPath, jsFileName), content);
+
+    const newScript = doc.createElement("script");
+    for (const attr of script.attributes) {
+      if (attr.name === "src") {
+        newScript.setAttribute("src", "./" + jsFileName);
+      } else {
+        newScript.setAttribute(attr.name, attr.value);
+      }
+    }
+    if (script.textContent.trim()) {
+      newScript.textContent = script.textContent;
+    }
+    script.parentNode.replaceChild(newScript, script);
+  } catch (err) {
+    throwError(`Failed to process script: ${err}`);
+  }
+}
+
 export async function copyStaticDir(srcPath, outDirPath) {
   const staticSrc = path.join(srcPath, "static");
   const staticDest = path.join(outDirPath, "static");

package/compiler/utils.js

@@ -1,81 +1,52 @@
-import fs from "fs/promises";
-import path from "path";
-import { pathToFileURL } from "url";
-import chalk from "chalk";
-
-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 isWebLink(str) {
-  try {
-    const url = new URL(str);
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch (e) {
-    return false;
-  }
-}
-
-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, "}");
-}
-
-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;
-}
+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

@@ -1,7 +1,7 @@
 import http from "http";
 import fs from "fs";
 import path from "path";
-import chalk from "chalk";
+import chalk from "../compiler/chalk.js";
 import compile from "../compiler/index.js";
 import { loadConfig, resolvePaths } from "../compiler/config.js";
 import { getChocolaConfig } from "../utils.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.4",
+  "version": "2.0.0-next.6",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -13,11 +13,11 @@
   ],
   "homepage": "https://chocolaframework.web.app/",
   "bugs": {
-    "url": "https://github.com/sad-gabi/chocola/issues"
+    "url": "https://github.com/chocolajs/chocola/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sad-gabi/chocola.git"
+    "url": "git+https://github.com/chocolajs/chocola.git"
   },
   "license": "MIT",
   "author": "SadGabi",
@@ -25,7 +25,7 @@
   "main": "index.js",
   "funding": {
     "type": "github",
-    "url": "https://github.com/sponsors/sad-gabi"
+    "url": "https://github.com/sponsors/chocolajs"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -35,11 +35,6 @@
     "./dev": "./dev/index.js"
   },
   "dependencies": {
-    "chalk": "^5.6.2",
-    "js-beautify": "^1.15.4",
     "jsdom": "^27.4.0"
-  },
-  "devDependencies": {
-    "js-beautify": "^1.15.4"
   }
 }

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