chocola 2.0.0-next.1 → 2.0.0-next.11

package/compiler/render.js

@@ -0,0 +1,183 @@
+import path from "path";
+import { promises as fs } from "fs";
+import {
+  createDOM,
+  validateAppContainer,
+  getAppElements,
+  getAssetLinks,
+  getScriptElements,
+  appendRuntimeScript,
+  appendStylesheetLink,
+  serializeDOM,
+} from "./dom-processor.js";
+import { processAllComponents } from "./component-processor.js";
+import { generateRuntimeScript } from "./runtime-generator.js";
+import { deterministicHash, throwError, warnConstantCondition, findElementLine } from "./utils.js";
+import { compileExpr, evaluateConstant, hasMountIf, getMountIf, removeMountIf } from "../parser/index.js";
+import {
+  processStylesheet,
+  processIcons,
+  processScript,
+  copyStaticDir,
+} from "./pipeline.js";
+
+function processPageConditionals(parent, sourceFile, sourceContent, ctx = {}) {
+  const ctxProxy = new Proxy(ctx, {
+    has() { return true; },
+    get(target, key) { return target[key]; },
+  });
+  const children = [...parent.children];
+  let chainActive = false;
+  let chainRendered = false;
+
+  const getLocation = (child) => {
+    if (!sourceContent) return sourceFile;
+    const lineNum = findElementLine(sourceContent, child.outerHTML);
+    return lineNum !== null ? `${sourceFile}:${lineNum}` : sourceFile;
+  };
+
+  const warnIfConstant = (expr, child, attr) => {
+    const { constant, value } = evaluateConstant(expr);
+    if (!constant) return;
+    warnConstantCondition(getLocation(child), child.tagName.toLowerCase(), attr, Boolean(value));
+  };
+
+  for (const child of children) {
+    const hasIf = child.hasAttribute("if");
+    const hasDelIf = hasMountIf(child);
+    const hasElif = child.hasAttribute("elif");
+    const hasElse = child.hasAttribute("else");
+
+    if (hasIf || hasDelIf || hasElif) {
+      const stripBraces = (raw) => raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      if (hasIf) warnIfConstant(stripBraces(child.getAttribute("if")), child, "if");
+      if (hasDelIf) warnIfConstant(stripBraces(getMountIf(child)), child, "mount:if");
+      if (hasElif) warnIfConstant(stripBraces(child.getAttribute("elif")), child, "elif");
+    }
+
+    if (hasElif || hasElse) {
+      if (!chainActive) {
+        const tag = child.tagName.toLowerCase();
+        const attr = hasElif ? "elif" : "else";
+        throwError(`${getLocation(child)}\n    <${tag}> has ${attr} without a preceding if/mount:if sibling`);
+      }
+      if (chainRendered) { child.remove(); continue; }
+    }
+
+    if (hasIf) {
+      const raw = child.getAttribute("if");
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpr(expr, true);
+      const result = fn(ctxProxy);
+      chainActive = true;
+      if (result) {
+        chainRendered = true;
+      } else {
+        child.style.display = "none";
+        chainRendered = false;
+      }
+      child.removeAttribute("if");
+    } else if (hasDelIf) {
+      const raw = getMountIf(child);
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpr(expr, true);
+      const result = fn(ctxProxy);
+      chainActive = true;
+      if (result) {
+        chainRendered = true;
+      } else {
+        child.remove();
+        chainRendered = false;
+      }
+      removeMountIf(child);
+    } else if (hasElif) {
+      const raw = child.getAttribute("elif");
+      const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+      const fn = compileExpr(expr, true);
+      const result = fn(ctxProxy);
+      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, sourceFile, sourceContent, ctx);
+    }
+  }
+}
+
+async function processAssets(doc, graph, out) {
+  const { stylesheets, icons } = getAssetLinks(doc);
+  const scripts = getScriptElements(doc);
+
+  for (const link of stylesheets) {
+    await processStylesheet(link, graph.rootDir, graph.config.srcDir, out);
+  }
+
+  for (const link of icons) {
+    await processIcons(link, graph.rootDir, graph.config.srcDir, out);
+  }
+
+  for (const script of scripts) {
+    await processScript(doc, script, graph.rootDir, graph.config.srcDir, out);
+  }
+}
+
+export async function renderPage(graph, ctx = {}) {
+  const out = {
+    files: [],
+    copies: [],
+    ids: [],
+    outDir: graph.paths.outDir,
+  };
+
+  const page = graph.page;
+  const dom = createDOM(page.source);
+  const doc = dom.document;
+  const appContainer = validateAppContainer(doc);
+
+  processPageConditionals(appContainer, page.sourcePath, dom.protectedContent, ctx);
+
+  const appElements = getAppElements(appContainer);
+  const { runtimeScript, scopesCss, hashMap, csrClasses } = processAllComponents(
+    appElements,
+    graph.loadedComponents,
+    page.sourcePath,
+    page.source,
+    ctx,
+    graph.config.treeShakeRuntime,
+    graph.originalComponentNames
+  );
+
+  const csrSource = await fs.readFile(new URL("../runtime/index.js", import.meta.url), "utf-8");
+  const runtimeFiles = generateRuntimeScript(runtimeScript, csrSource, csrClasses);
+
+  await processAssets(doc, graph, out);
+
+  if (scopesCss) {
+    const fileName = "sc-" + deterministicHash(scopesCss, 6) + ".css";
+    out.files.push({ path: fileName, content: scopesCss });
+    appendStylesheetLink(doc, fileName);
+  }
+
+  for (const file of runtimeFiles) {
+    out.files.push(file);
+    appendRuntimeScript(doc, file.path);
+  }
+
+  const html = await serializeDOM(dom);
+
+  await copyStaticDir(graph.paths.src, out);
+
+  return { html, hashMap, files: out.files, copies: out.copies };
+}

package/compiler/runtime-generator.js

@@ -1,19 +1,24 @@
-import { promises as fs } from "fs";
-import path from "path";
-import { genRandomId } from "./utils.js";
+import { deterministicHash } from "./utils.js";
 
-/**
- * Generates a runtime script file and returns its filename
- * @param {string} runtimeScript - The JavaScript code for runtime
- * @param {import("fs").PathLike} outDirPath
- * @returns {Promise<string>} - filename of the generated runtime script
- */
-export async function generateRuntimeScript(runtimeScript, outDirPath) {
-  const fileIds = [];
-  const runtimeFilename = "run-" + genRandomId(fileIds, 6) + ".js";
-  const runtimeFileContents = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+export function generateRuntimeScript(runtimeScript, csrSource, csrClasses) {
+  const files = [];
 
-  await fs.writeFile(path.join(outDirPath, runtimeFilename), runtimeFileContents);
+  if (csrSource) {
+    const source = csrSource.replace(/^export\s+\{?\s*[^}]+\s*}?\s*;?\s*$/m, "");
+    const name = "run-" + deterministicHash(source, 6) + ".js";
+    files.push({ path: name, content: source });
+  }
 
-  return runtimeFilename;
+  if (csrClasses) {
+    const name = "run-" + deterministicHash(csrClasses, 6) + ".js";
+    files.push({ path: name, content: csrClasses });
+  }
+
+  if (runtimeScript) {
+    const content = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
+    const name = "run-" + deterministicHash(content, 6) + ".js";
+    files.push({ path: name, content });
+  }
+
+  return files;
 }

package/compiler/utils.js

@@ -1,87 +1,93 @@
-import fs from "fs/promises";
-import path from "path";
-import { pathToFileURL } from "url";
-import chalk from "chalk";
+import { createHash } from "crypto";
+import chalk from "./chalk.js";
 
-/**
- * Throws a formatted error message and exits
- * @param {string|Error} err - Error message or Error object
- * @throws {Error}
- */
 export function throwError(err) {
   console.log(chalk.red.bold("Error!"), "A fatal error has occurred:\n");
   throw new Error(err);
 }
 
-/**
- * Loads a JavaScript module and inlines asset imports (HTML/CSS files)
- * This allows components to import external template files as strings
- * @param {import("fs").PathLike} filePath - Path to the JavaScript file
- * @returns {Promise<object>} - The imported module
- * @example
- * // Component with asset import
- * import template from "./button.html";
- * export default function Button() { return { body: template }; }
- */
-export async function loadWithAssets(filePath) {
-  let code;
-  try {
-    code = await fs.readFile(filePath, "utf8");
-  } catch (err) {
-    throwError(`Failed to read component file "${filePath}": ${err.message || err}`);
-  }
+export function warnConstantCondition(location, tag, attr, expr, truthy) {
+  const article = /^[aeiou]/.test(attr) ? "an" : "a";
+  console.warn(
+    chalk.bold.yellow("WARN "),
+    `${chalk.bold.green(location)} ${chalk.dim('—')} ${chalk.blue(`<${tag}>`)} \`${chalk.bold(attr + "={" + expr + "}")}\` is always ${chalk.green(truthy ? "truthy" : "falsy")}`
+  );
+}
 
-  const importRegex = /import\s+(\w+)\s+from\s+["'](.+?\.(html|css))["'];?/g;
+export function warnUnusedDeclaration(location, kind, name) {
+  console.warn(
+    chalk.bold.yellow("WARN "),
+    `${chalk.bold.green(location)} ${chalk.dim('—')} ${kind} \`${chalk.blue(name)}\` is never used`
+  );
+}
 
-  const replacements = [];
-  let match;
-  while ((match = importRegex.exec(code))) {
-    const varName = match[1];
-    const relPath = match[2];
-    const absPath = path.resolve(path.dirname(filePath), relPath);
+function normalizeAttributeQuotes(html) {
+  return html
+    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
+    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
+}
 
-    let content;
-    try {
-      content = await fs.readFile(absPath, "utf8");
-    } catch (err) {
-      throwError(
-        `Failed to read imported file "${relPath}" (resolved to "${absPath}") ` +
-        `for variable "${varName}" in component "${filePath}": ${err.message || err}`
-      );
+function getStartTag(outerHTML) {
+  let inQuote = null;
+  for (let i = 0; i < outerHTML.length; i++) {
+    const c = outerHTML[i];
+    if (inQuote) {
+      if (c === inQuote) inQuote = null;
+    } else if (c === '"' || c === "'") {
+      inQuote = c;
+    } else if (c === ">") {
+      return outerHTML.slice(0, i + 1);
     }
-
-    replacements.push({ from: match[0], to: `const ${varName} = ${JSON.stringify(content)};` });
   }
+  return outerHTML;
+}
 
-  for (const { from, to } of replacements) {
-    code = code.replace(from, to);
-  }
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 
-  const dataUrl =
-    "data:text/javascript;base64," +
-    Buffer.from(code).toString("base64");
+function flexibleStartTagRegex(startTag) {
+  return new RegExp(
+    startTag
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(escapeRegex)
+      .join("\\s+")
+  );
+}
 
-  try {
-    const mod = await import(dataUrl);
-    return mod;
-  } catch (err) {
-    throwError(
-      `Failed to evaluate component "${filePath}": ${err.message || err}`
-    );
+export function findElementLine(sourceContent, outerHTML) {
+  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
+  const startTags = [
+    normalizeAttributeQuotes(getStartTag(outerHTML)),
+    normalizeAttributeQuotes(
+      getStartTag(
+        outerHTML
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, "&")
+          .replace(/&lt;/g, "<")
+          .replace(/&gt;/g, ">")
+      )
+    ),
+  ].map(tag => tag.toLowerCase());
+  const candidates = [
+    flexibleStartTagRegex(startTags[0]),
+    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
+    flexibleStartTagRegex(startTags[1]),
+  ];
+  for (const re of candidates) {
+    const match = re.exec(source);
+    if (match) {
+      return source.substring(0, match.index).split("\n").length;
+    }
   }
+  return null;
 }
 
-/**
- * Generates a random ID string
- * @param {Array} collection - Array to track used IDs (prevents duplicates)
- * @param {number} length - Desired length of the ID (default: 10)
- * @returns {string} - Unique random ID
- */
 export function genRandomId(collection = null, length = 10, lettersOnly = false) {
   let id;
   if (lettersOnly) {
-    const letters = "abcdefghijklmnopqrstuvwxyz";
-    id = Array.from({ length }, () => letters[Math.floor(Math.random() * letters.length)]).join("");
+    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
   } else {
     id = Math.random().toString(36).substring(2, length + 2);
   }
@@ -94,70 +100,17 @@ export function genRandomId(collection = null, length = 10, lettersOnly = false)
   }
 }
 
-/**
- * Increments a letter or sequence of letters like Excel columns (a → b, z → aa)
- * @param {string} letters - Letter(s) to increment
- * @returns {string} - Incremented letter(s)
- * @example
- * incrementAlfabet("a") // "b"
- * incrementAlfabet("z") // "aa"
- */
-export function incrementAlfabet(letters) {
-  const alfabet = "abcdefghijklmnopqrstuvwxyz";
-  let arr = letters.split("");
-  let i = arr.length - 1;
-
-  while (i >= 0) {
-    let pos = alfabet.indexOf(arr[i]);
-    if (pos < 25) {
-      arr[i] = alfabet[pos + 1];
-      return arr.join("");
-    } else {
-      arr[i] = "a";
-      i--;
-    }
-  }
-
-  return "a" + arr.join("");
-}
-
-/**
- * Checks if a string is a valid HTTP/HTTPS URL
- * @param {string} str - String to check
- * @returns {boolean} - True if valid web link, false otherwise
- */
-export function isWebLink(str) {
-  try {
-    const url = new URL(str);
-    return url.protocol === "http:" || url.protocol === "https:";
-  } catch (e) {
-    return false;
+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 LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
-const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
-
-/**
- * Replaces HTML entities for curly braces with placeholders before JSDOM parsing.
- * This prevents JSDOM from decoding them into literal braces before binding processing.
- * @param {string} html - Raw HTML content
- * @returns {string} - HTML with curly brace entities replaced
- */
-export function protectCurlyBraces(html) {
-  return html
-    .replace(/&(?:lbrace|#123|#x7B);/gi, LBRACE_PH)
-    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH);
+export function runtimeFunctionId(compName) {
+  return "r_" + deterministicHash(compName, 8);
 }
 
-/**
- * Restores curly brace placeholders back to literal characters.
- * Called after binding processing is complete and before final output.
- * @param {string} html - Serialized HTML with placeholders
- * @returns {string} - HTML with literal curly braces restored
- */
-export function restoreCurlyBraces(html) {
-  return html
-    .replace(/_%%CHOCOLA-LBRACE%%_/g, "{")
-    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}");
-}
+const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";

package/dev/index.js

@@ -1,14 +1,15 @@
 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";
+import { getConfig, isMissingConfigFile, queueConfigWarning } from "../utils.js";
 
-export async function serve(__rootdir) {
-  await compile(__rootdir);
+const warnedDevHostname = new Set();
+const warnedDevPort = new Set();
 
+export async function serve(__rootdir, { silent = false, port: cliPort, hostname: cliHostname, open } = {}) {
   let __outdir = "dist";
   let __config = {
     hostname: "localhost",
@@ -17,19 +18,43 @@ export async function serve(__rootdir) {
 
   let lastBuildTime = Date.now();
 
-  const fullConfig = await getChocolaConfig(__rootdir);
-  const config = await loadConfig(__rootdir);
+  const fullConfig = await getConfig(__rootdir, { silent });
+  const config = await loadConfig(__rootdir, { silent });
   const paths = resolvePaths(__rootdir, config);
-  const devConfig = fullConfig.dev;
 
-  if (devConfig.hostname) { __config.hostname = devConfig.hostname }
-  else { console.warn(chalk.bold.yellow("WARNING!"), `hostname not defined in chocola.config.json file: using default ${__config.hostname} hostname.`) }
+  if (cliPort) {
+    __config.port = cliPort;
+  } else if (!silent) {
+    if (isMissingConfigFile(fullConfig)) {
+      // top-level already warned; use defaults silently
+    } else if (fullConfig.dev != null) {
+      const devConfig = fullConfig.dev;
+      if (devConfig.port) { __config.port = devConfig.port }
+      else if (!warnedDevPort.has(__rootdir)) {
+        warnedDevPort.add(__rootdir);
+        queueConfigWarning(__rootdir, chalk.bold.yellow("WARNING!"), `dev.port not defined in chocola.config.json file: using default ${__config.port} dev.port.`);
+      }
+    }
+  }
 
-  if (devConfig.port) { __config.port = devConfig.port }
-  else { console.warn(chalk.bold.yellow("WARNING!"), `port not defined in chocola.config.json file: using default ${__config.port} port.`) }
+  if (cliHostname) {
+    __config.hostname = cliHostname;
+  } else if (!silent) {
+    if (!cliPort && isMissingConfigFile(fullConfig)) {
+      // top-level already warned
+    } else if (fullConfig.dev != null) {
+      const devConfig = fullConfig.dev;
+      if (devConfig.hostname) { __config.hostname = devConfig.hostname }
+      else if (!warnedDevHostname.has(__rootdir)) {
+        warnedDevHostname.add(__rootdir);
+        queueConfigWarning(__rootdir, chalk.bold.yellow("WARNING!"), `dev.hostname not defined in chocola.config.json file: using default ${__config.hostname} dev.hostname.`);
+      }
+    }
+  }
+
+  await compile(__rootdir);
 
   const srcDir = paths.src;
-  const componentsDir = paths.components;
 
   let compileTimeout;
   const scheduleRecompile = () => {
@@ -51,11 +76,6 @@ export async function serve(__rootdir) {
       scheduleRecompile();
     }
   });
-  fs.watch(componentsDir, { recursive: true }, (eventType, filename) => {
-    if (filename && !filename.includes("node_modules")) {
-      scheduleRecompile();
-    }
-  });
 
   const server = http.createServer((req, res) => {
     if (req.url === "/api/hot-reload") {
@@ -149,10 +169,22 @@ export async function serve(__rootdir) {
     });
   });
 
-  server.listen(__config.port, __config.hostname, () => {
-    console.log(`Chocola App running at http://${__config.hostname}:${__config.port}/`);
-  });
-}
+server.listen(__config.port, __config.hostname, async () => {
+      console.log('Live server running at', chalk.hex("#68C4EE").underline(`http://${__config.hostname}:${__config.port}/`));
+      if (open) {
+        const url = __config.hostname === "0.0.0.0" ? `http://localhost:${__config.port}` : `http://${__config.hostname}:${__config.port}`;
+        try {
+          const openPkg = await import("open");
+          openPkg.default(url);
+        } catch {
+          const { exec } = await import("child_process");
+          const cmd = process.platform === "win32" ? `start ${url}` : process.platform === "darwin" ? `open ${url}` : `xdg-open ${url}`;
+          exec(cmd);
+        }
+      }
+    });
+    return server;
+  }
 
 /**
  * An intrinsic object that contains the Chocola Dev methods.
@@ -174,5 +206,5 @@ app.build(__dirname);
 * @example
 * @param {PathLike} __rootdir the directory where your Chocola App is
 */
-  server(__rootdir) { serve(__rootdir) }
+  async server(__rootdir) { return serve(__rootdir) }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.11",
   "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,22 +25,33 @@
   "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"
+    "test": "node --test \"tests/**/*.test.js\"",
+    "bench": "node bench/index.js",
+    "bench:csv": "node bench/index.js --csv"
   },
   "exports": {
     "./compiler": "./compiler/index.js",
     "./dev": "./dev/index.js",
-    "./types": "./types/index.js"
+    "./server": "./server/index.js"
   },
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "js-beautify": "^1.15.4",
-    "jsdom": "^27.4.0"
+  "bin": {
+    "chocola": "./bin/chocola.js",
+    "chjs": "./bin/chocola.js"
   },
-  "devDependencies": {
-    "js-beautify": "^1.15.4"
+  "files": [
+    "bin/",
+    "compiler/",
+    "dev/",
+    "server/",
+    "runtime/",
+    "parser/",
+    "utils.js"
+  ],
+  "dependencies": {
+    "acorn": "^8.18.0",
+    "linkedom": "^0.18.13"
   }
 }