chocola 2.0.0-next.6 → 2.0.0-next.7

package/README.md

@@ -1,13 +1,12 @@
 # chocola
 
-Chocola is a JavaScript library for creating web user interfaces.
+**The sweetest way to build the web.**
 
-`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.
+No bundler config. No virtual DOM. No hydration ceremony. Just `.html` files with `<template>`, `<script>`, and `<style>` — compiled to static HTML with scoped CSS, and optional runtime when you need it.
 
-## Usage
+Import components. Instantiate them. Mount, update, remove. All client-side. Same file, zero overhead.
 
 ```html
-<!-- Greeting.html -->
 <script>
     let self = new HTMLDivElement;
     let input = new HTMLInputElement;
@@ -33,4 +32,4 @@ Chocola is a JavaScript library for creating web user interfaces.
 
 ## Documentation
 
-See https://github.com/chocolajs/chocola/wiki/Overview
+https://github.com/chocolajs/chocola/wiki/Overview

package/compiler/chalk.js

@@ -1,32 +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;
+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,3 +1,4 @@
+import path from "path";
 import { JSDOM } from "jsdom";
 import { protectCurlyBraces } from "../utils.js";
 import { genRandomId, incrementAlfabet, throwError, deterministicHash } from "./utils.js";
@@ -12,7 +13,7 @@ import chalk from "./chalk.js";
 
 
 class ProcessContext {
-  constructor(loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry) {
+  constructor(loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry, csrClasses) {
     this.loadedComponents = loadedComponents;
     this.runtimeChunks = runtimeChunks;
     this.compIdColl = compIdColl;
@@ -22,9 +23,101 @@ class ProcessContext {
     this.cssScopesMap = cssScopesMap;
     this.scopedStyles = scopedStyles;
     this.staticCtxRegistry = staticCtxRegistry;
+    this.csrClasses = csrClasses;
   }
 }
 
+function escapeForTemplateLiteral(str) {
+  return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\${/g, "\\${");
+}
+
+function generateCSRClass(compName, cx, explicitClassName) {
+  if (cx.csrClasses.has(compName)) return;
+
+  let instance = cx.loadedComponents.get(compName);
+  if (!instance) return;
+
+  instance = protectCurlyBraces(instance);
+  const dom = new JSDOM(instance);
+  const doc = dom.window.document;
+  const script = doc.querySelector("script")?.innerHTML;
+  const template = doc.querySelector("template")?.innerHTML;
+  const styles = doc.querySelector("style")?.innerHTML;
+
+  if (!template) return;
+
+  const compProps = extractPropsDefaults(script);
+  const topFuncSrc = extractTopLevelFunctions(script || "", RUNTIME_KW);
+  let runtime = extractRuntime(script || "", compName);
+
+  if (!cx.cssScopesMap.has(compName)) {
+    cx.cssScopesMap.set(compName, deterministicHash(compName, 8));
+  }
+  const cssId = cx.cssScopesMap.get(compName);
+
+  if (styles) {
+    cx.scopedStyles.push(scopeCss(styles, cssId));
+  }
+
+  const childMappings = [];
+  const bindVarNames = new Set();
+  const templateDoc = JSDOM.fragment(template);
+  const seenTags = new Set();
+  for (const el of templateDoc.querySelectorAll("*")) {
+    const tag = el.tagName.toLowerCase();
+    if (!seenTags.has(tag)) {
+      seenTags.add(tag);
+      const childCompName = tag + ".html";
+      if (cx.loadedComponents.has(childCompName)) {
+        generateCSRClass(childCompName, cx);
+        const childClassName = childCompName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
+        childMappings.push({ tag, compClass: childClassName });
+      }
+    }
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith("bind:")) {
+        bindVarNames.add(attr.value);
+      }
+    }
+  }
+
+  let csrRuntimeSource = null;
+  if (runtime) {
+    let injectCode = "";
+    for (const { name, defaultValue } of compProps) {
+      if (defaultValue !== undefined) {
+        injectCode += `let ${name} = ctx.${name}||${defaultValue};\n`;
+      } else {
+        injectCode += `let ${name} = ctx.${name};\n`;
+      }
+    }
+    for (const varName of bindVarNames) {
+      if (varName !== "self") {
+        injectCode += `let ${varName} = ctx.${varName};\n`;
+      }
+    }
+    if (topFuncSrc.length > 0) {
+      injectCode += "\n" + topFuncSrc.join("\n\n") + "\n";
+    }
+    runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
+    runtime = runtime.replace(`${RUNTIME_KW}()`, `function(self, ctx)`);
+    csrRuntimeSource = runtime.replace(/^(async\s+)?function\s+\w+/, "$1function");
+  }
+
+  const className = explicitClassName || compName.replace(".html", "").replace(/^\w/, c => c.toUpperCase());
+  const propsObj = {};
+  for (const { name, defaultValue } of compProps) {
+    propsObj[name] = defaultValue !== undefined ? defaultValue : null;
+  }
+
+  const childrenPart = childMappings.length > 0
+    ? ",\n      children: [" + childMappings.map(m => `{tag:"${m.tag}",compClass:${m.compClass}}`).join(",") + "]"
+    : "";
+  const runtimePart = csrRuntimeSource ? `,\n      runtime: ${csrRuntimeSource}` : "";
+  const classDef = `class ${className} extends ChocolaComponent {\n  constructor() {\n    super({\n      template: \`${escapeForTemplateLiteral(template)}\`,\n      hash: "${cssId}",\n      props: ${JSON.stringify(propsObj)}${runtimePart}${childrenPart}\n    });\n  }\n}`;
+  cx.csrClasses.set(compName, classDef);
+}
+
 
 
 export function processComponentElement(
@@ -53,6 +146,17 @@ export function processComponentElement(
     return false;
   }
 
+  if (script) {
+    const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+    script = script.replace(importRegex, (_, importedName, importPath) => {
+      const importedCompName = path.basename(importPath).toLowerCase();
+      if (cx.loadedComponents.has(importedCompName)) {
+        generateCSRClass(importedCompName, cx, importedName);
+      }
+      return "";
+    });
+  }
+
   const compProps = extractPropsDefaults(script);
 
   let ctx;
@@ -213,6 +317,7 @@ export function processComponentElement(
     interpolateNode(child, ctxProxy)
   });
 
+  let csrRuntimeSource = null;
   const firstChild = fragment.children[0];
 
   if (firstChild && firstChild.nodeType === 1) {
@@ -272,6 +377,7 @@ export function processComponentElement(
           runtime = runtime.replace(/\$runtime\([^)]*\)\s*\{/, match => match + "\n" + injectCode);
 
           runtime = runtime.replace(`${RUNTIME_KW}()`, `${letter}r(self, ctx)`);
+          csrRuntimeSource = runtime.replace(/^function\s+\w+/, "function");
           cx.runtimeChunks.push(runtime);
           cx.runtimeMap && cx.runtimeMap.set(compName, { letter });
         } else {
@@ -296,15 +402,34 @@ export function processComponentElement(
     cx.scopedStyles.push(styles);
   }
 
+  if (csrRuntimeSource && !cx.csrClasses.has(compName)) {
+    generateCSRClass(compName, cx);
+  }
+
   element.replaceWith(fragment);
   return true;
 }
 
 export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {
   const cx = new ProcessContext(
-    loadedComponents, [], [], { value: null }, new Map(), [], new Map(), [], new Map()
+    loadedComponents, [], [], { value: null }, new Map(), [], new Map(), [], new Map(), new Map()
   );
 
+  for (const [compName, instance] of cx.loadedComponents) {
+    const script = instance.match(/<script>([\s\S]*?)<\/script>/i);
+    if (script) {
+      const importRegex = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?\s*/g;
+      let match;
+      while ((match = importRegex.exec(script[1])) !== null) {
+        const importedName = match[1];
+        const importedCompName = path.basename(match[2]).toLowerCase();
+        if (cx.loadedComponents.has(importedCompName)) {
+          generateCSRClass(importedCompName, cx, importedName);
+        }
+      }
+    }
+  }
+
   appElements.forEach(el => {
     if (!el.isConnected) return;
     processComponentElement(el, cx, [], pageSourceFile, pageSourceContent);
@@ -312,13 +437,14 @@ export function processAllComponents(appElements, loadedComponents, pageSourceFi
   const runtimeScript = cx.runtimeChunks.join("\n");
   const hasComponents = cx.runtimeChunks.length > 0;
   const scopesCss = cx.scopedStyles.join("\n");
+  const csrClasses = [...cx.csrClasses.values()].join("\n\n");
 
   const hashMap = {};
   for (const [compName, hash] of cx.cssScopesMap) {
     hashMap[compName] = hash;
   }
 
-  return { runtimeScript, hasComponents, scopesCss, hashMap };
+  return { runtimeScript, hasComponents, scopesCss, hashMap, csrClasses };
 }
 
 function getNextLetter(letterState) {

package/compiler/dom-processor.js

@@ -54,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

@@ -209,8 +209,9 @@ export default async function compile(rootDir, buildConfig) {
   processPageConditionals(appContainer);
 
   const appElements = getAppElements(appContainer);
-  const { runtimeScript, scopesCss, hashMap } = 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) {
@@ -219,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);
 

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,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/package.json

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