chocola 2.0.0-next.7 → 2.0.0-next.8

package/README.md

@@ -1,35 +1,39 @@
-# chocola
-
-**The sweetest way to build the web.**
-
-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.
-
-Import components. Instantiate them. Mount, update, remove. All client-side. Same file, zero overhead.
-
-```html
-<script>
-    let self = new HTMLDivElement;
-    let input = new HTMLInputElement;
-
-    export let title = "Hello";
-
-    function $runtime() {
-        input.focus();
-    }
-</script>
-
-<template>
-    <div>
-        <h1>{title}</h1>
-        <input bind:self="input" type="text" placeholder="Your name">
-    </div>
-</template>
-
-<style>
-    h1 { color: chocolate; }
-</style>
-```
-
-## Documentation
-
-https://github.com/chocolajs/chocola/wiki/Overview
+![Chochola • The sweetest way to build the web](https://chocolaframework.web.app/static/img/banner.jpg)
+
+## What is Chocola
+
+Chocola is a new and sweeter way to build your web apps.
+
+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.
+
+Import components. Instantiate them. Mount, update, remove. All client-side. Same file, zero overhead.
+
+```html
+<script>
+    let self;
+    let input;
+
+    export let title = "Hello";
+
+    function $runtime() {
+        input.focus();
+    }
+</script>
+
+<template>
+    <div>
+        <h1>{title}</h1>
+        <input bind:self="input" type="text" placeholder="Your name">
+    </div>
+</template>
+
+<style>
+    h1 { color: chocolate; }
+</style>
+```
+
+Chocola 2 is in current development and will add CSR SPA and much more features!
+
+## Documentation
+
+https://github.com/chocolajs/chocola/wiki/Overview

package/compiler/component-processor.js

@@ -1,5 +1,5 @@
 import path from "path";
-import { JSDOM } from "jsdom";
+import { parseHTML } from "linkedom";
 import { protectCurlyBraces } from "../utils.js";
 import { genRandomId, incrementAlfabet, throwError, deterministicHash } from "./utils.js";
 import {
@@ -31,6 +31,17 @@ function escapeForTemplateLiteral(str) {
   return str.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\${/g, "\\${");
 }
 
+function parseFragment(html, doc) {
+  const fragment = doc.createDocumentFragment();
+  const temp = doc.createElement("div");
+  temp.innerHTML = html;
+  const children = [...temp.childNodes];
+  for (const child of children) {
+    fragment.appendChild(child);
+  }
+  return fragment;
+}
+
 function generateCSRClass(compName, cx, explicitClassName) {
   if (cx.csrClasses.has(compName)) return;
 
@@ -38,8 +49,8 @@ function generateCSRClass(compName, cx, explicitClassName) {
   if (!instance) return;
 
   instance = protectCurlyBraces(instance);
-  const dom = new JSDOM(instance);
-  const doc = dom.window.document;
+  const dom = parseHTML(instance);
+  const doc = dom.document;
   const script = doc.querySelector("script")?.innerHTML;
   const template = doc.querySelector("template")?.innerHTML;
   const styles = doc.querySelector("style")?.innerHTML;
@@ -61,7 +72,7 @@ function generateCSRClass(compName, cx, explicitClassName) {
 
   const childMappings = [];
   const bindVarNames = new Set();
-  const templateDoc = JSDOM.fragment(template);
+  const templateDoc = parseFragment(template, doc);
   const seenTags = new Set();
   for (const el of templateDoc.querySelectorAll("*")) {
     const tag = el.tagName.toLowerCase();
@@ -86,7 +97,7 @@ function generateCSRClass(compName, cx, explicitClassName) {
     let injectCode = "";
     for (const { name, defaultValue } of compProps) {
       if (defaultValue !== undefined) {
-        injectCode += `let ${name} = ctx.${name}||${defaultValue};\n`;
+        injectCode += `let ${name} = ctx.${name}??${defaultValue};\n`;
       } else {
         injectCode += `let ${name} = ctx.${name};\n`;
       }
@@ -135,8 +146,8 @@ export function processComponentElement(
   if (renderChain && renderChain.includes(compName)) return false;
 
   instance = protectCurlyBraces(instance);
-  const dom = new JSDOM(instance);
-  const doc = dom.window.document;
+  const dom = parseHTML(instance);
+  const doc = dom.document;
   let script = doc.querySelector("script")?.innerHTML;
   let template = doc.querySelector("template")?.innerHTML;
   let styles = doc.querySelector("style")?.innerHTML;
@@ -195,9 +206,9 @@ export function processComponentElement(
     get(target, key) { return target[key]; }
   });
 
-  const fragment = JSDOM.fragment(template);
+  const fragment = parseFragment(template, doc);
 
-  const slotFragment = JSDOM.fragment(elInnerHtml);
+  const slotFragment = parseFragment(elInnerHtml, doc);
   if (sourceFile) {
     validateChainStructure(slotFragment, sourceFile, sourceContent, elInnerHtml);
   }
@@ -292,19 +303,28 @@ export function processComponentElement(
         return;
       }
 
-      attribute.value = attribute.value.replace(
-        /\{([^}]+)\}/g,
-        (_, expr) => {
-          try {
-            return compileExpression(expr, true)(ctxProxy);
-          } catch {
-            return "";
+      child.setAttribute(
+        attribute.name,
+        attribute.value.replace(
+          /\{([^}]+)\}/g,
+          (_, expr) => {
+            try {
+              return compileExpression(expr, true)(ctxProxy);
+            } catch {
+              return "";
+            }
           }
-        }
+        )
       );
     });
 
-    processComponentElement(
+    const condAttrs = {};
+    if (hasIf) condAttrs["if"] = child.getAttribute("if");
+    if (hasDelIf) condAttrs["mount:if"] = getDelIfAttr(child);
+    if (hasElif) condAttrs["elif"] = child.getAttribute("elif");
+    if (hasElse) condAttrs["else"] = "";
+
+    const processed = processComponentElement(
       child,
       cx,
       renderChain.concat(compName),
@@ -312,9 +332,17 @@ export function processComponentElement(
       template
     );
 
-    applyConditionalToElement(child, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
+    let condTarget = child;
+    if (processed && processed.nodeType === 1) {
+      condTarget = processed;
+      for (const [name, value] of Object.entries(condAttrs)) {
+        condTarget.setAttribute(name, value);
+      }
+    }
+
+    applyConditionalToElement(condTarget, ctxProxy, condChain, hasIf, hasDelIf, hasElif, hasElse);
 
-    interpolateNode(child, ctxProxy)
+    interpolateNode(condTarget, ctxProxy)
   });
 
   let csrRuntimeSource = null;
@@ -338,14 +366,14 @@ export function processComponentElement(
       const ctxDefParts = [];
       const declared = new Set();
       for (const [key, value] of Object.entries(runtimeCtx)) {
-        ctxDefParts.push(`let ${key} = ctx.${key}||${JSON.stringify(value)};\n`);
+        ctxDefParts.push(`let ${key} = ctx.${key}??${JSON.stringify(value)};\n`);
         declared.add(key);
       }
 
       for (const { name, defaultValue } of compProps) {
         if (declared.has(name)) continue;
         if (defaultValue !== undefined) {
-          ctxDefParts.push(`let ${name} = ctx.${name}||${defaultValue};\n`);
+          ctxDefParts.push(`let ${name} = ctx.${name}??${defaultValue};\n`);
         } else {
           ctxDefParts.push(`let ${name} = ctx.${name};\n`);
         }
@@ -406,8 +434,12 @@ export function processComponentElement(
     generateCSRClass(compName, cx);
   }
 
+  if (element.style.display === "none" && firstChild && firstChild.nodeType === 1) {
+    firstChild.style.display = "none";
+  }
+
   element.replaceWith(fragment);
-  return true;
+  return firstChild && firstChild.nodeType === 1 ? firstChild : true;
 }
 
 export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {

package/compiler/dom-processor.js

@@ -1,4 +1,4 @@
-import { JSDOM } from "jsdom";
+import { parseHTML } from "linkedom";
 import { promises as fs } from "fs";
 import path from "path";
 import { protectCurlyBraces, restoreCurlyBraces } from "../utils.js";
@@ -7,7 +7,7 @@ import { throwError } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 export function createDOM(srcIndexContent) {
-  return new JSDOM(protectCurlyBraces(srcIndexContent));
+  return parseHTML(protectCurlyBraces(srcIndexContent));
 }
 
 export function validateAppContainer(doc) {
@@ -23,7 +23,7 @@ export function getAppElements(appContainer) {
 }
 
 export async function serializeDOM(dom) {
-  return restoreCurlyBraces(dom.serialize());
+  return restoreCurlyBraces(dom.document.toString());
 }
 
 export async function writeHTMLOutput(html, outDirPath) {

package/compiler/index.js

@@ -26,48 +26,42 @@ import {
   processScript,
   processStylesheet,
 } from "./pipeline.js";
+import { text } from "stream/consumers";
 
-
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
+const GOLD_COLOR = "#D87416";
+const WHITE_COLOR = "#FAFAF8";
+const TEXT_FAINT = "#E7EBE1";
 
 function logBanner() {
-  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-  console.log(logSeparation);
   console.log(
-    chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-     ░                         ░                                  
-
-
-        `)
+    chalk.hex(GOLD_COLOR)(`
+   ┌─────────────────────────────────────────────┐
+   │┌-------------------------------------------┐│
+   ││                                           ││`)
+  );
+  console.log(
+    chalk.hex(GOLD_COLOR)(`   ││            `) +
+    chalk.bold.hex(WHITE_COLOR)(`{`) +
+    chalk.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
+    chalk.bold.hex(WHITE_COLOR)(`}`) +
+    chalk.hex(GOLD_COLOR)(`            ││\n`) +
+    chalk.hex(GOLD_COLOR)(`   ││                                           ││
+   ││     `) +
+   chalk.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
+   chalk.hex(GOLD_COLOR)(`     ││
+   ││                                           ││
+   │└-------------------------------------------┘│
+   └─────────────────────────────────────────────┘
+   `)
   );
 }
 
 function logSuccess(outDirPath) {
-  console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
   console.log(
     chalk.bold.green(">"),
     "Project bundled succesfully at",
-    chalk.green.underline(outDirPath) + "\n\n"
-  );
+    chalk.green.underline(outDirPath));
+    console.log(chalk.bold.green(`\nJOB DONE!\n`));
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
@@ -81,9 +75,8 @@ async function loadAndDisplayComponents(srcComponentsPath) {
   const foundComponents = await getComponents(srcComponentsPath);
   const { loadedComponents, notDefComps: emptyComps, componentsLib } = foundComponents;
 
-  console.log(`       LOADING COMPONENTS`);
   console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-  console.log("   ", componentsLib, "\n");
+  console.log("   ", componentsLib, "\n\n");
 
   if (emptyComps?.length > 0) {
     console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
@@ -139,7 +132,7 @@ function processPageConditionals(parent) {
       if (result) {
         chainRendered = true;
       } else {
-        child.remove();
+        child.style.display = "none";
         chainRendered = false;
       }
       child.removeAttribute("if");
@@ -188,7 +181,6 @@ export default async function compile(rootDir, buildConfig) {
 
   const config = await loadConfig(rootDir);
   const paths = resolvePaths(rootDir, config);
-  !isHotReload && console.log(logSeparation);
 
   await setupOutputDirectory(paths.outDir, config.emptyOutDir);
 
@@ -197,13 +189,10 @@ export default async function compile(rootDir, buildConfig) {
   const pageSourcePath = indexFiles.srcPath;
 
   const loadedComponents = await loadAndDisplayComponents(paths.components);
-  !isHotReload && console.log(logSeparation);
-  !isHotReload && console.log(`       BUNDLING STATIC BUILD`);
-  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
-  !isHotReload && console.log(logSeparation);
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir));
 
   const dom = createDOM(srcIndexContent);
-  const doc = dom.window.document;
+  const doc = dom.document;
   const appContainer = validateAppContainer(doc);
 
   processPageConditionals(appContainer);

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.7",
+  "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/context.js

@@ -1,10 +1,11 @@
 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 = attr.value;
+    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) {
@@ -19,11 +20,11 @@ export function extractContextFromElement(element) {
 }
 
 export function hasDelIfAttr(el) {
-  return el.hasAttribute("del:if");
+  return el.hasAttribute("mount:if");
 }
 export function getDelIfAttr(el) {
-  return el.getAttribute("del:if");
+  return el.getAttribute("mount:if");
 }
 export function removeDelIfAttr(el) {
-  el.removeAttribute("del:if");
+  el.removeAttribute("mount:if");
 }

package/parser/template.js

@@ -1,7 +1,7 @@
 import { compileExpression } from "./utils.js";
 import { hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./context.js";
 
-export const reservedAttrs = ["if", "del:if", "elif", "else"];
+export const reservedAttrs = ["if", "mount:if", "elif", "else"];
 
 export function getLineNumber(sourceContent, parentContent, idxInParent) {
   if (sourceContent === parentContent) {

package/parser/utils.js

@@ -1,6 +1,9 @@
+import { restoreTemplateChars } from "../utils.js";
+
 const compiledCache = new Map();
 
 export function compileExpression(expr, useCtx) {
+  expr = restoreTemplateChars(expr);
   const key = useCtx ? `ctx:${expr}` : `raw:${expr}`;
   let fn = compiledCache.get(key);
   if (!fn) {

package/runtime/index.js

@@ -1,6 +1,12 @@
+const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
+const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
+
 const exprCache = new Map();
 
 function compileExpression(expr, useCtx) {
+  expr = expr.replace(/_%%CHOCOLA-(?:AMP|LT|GT)\d+%%_/g, char =>
+    char.includes("AMP") ? "&" : char.includes("LT") ? "<" : ">"
+  );
   const key = useCtx ? "ctx:" + expr : "raw:" + expr;
   let fn = exprCache.get(key);
   if (!fn) {
@@ -47,7 +53,7 @@ function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif,
     }
     child.removeAttribute("if");
   } else if (hasDelIf) {
-    const expr = child.getAttribute("del:if").slice(1, -1);
+    const expr = child.getAttribute("mount:if").slice(1, -1);
     chain.active = true;
     if (compileExpression(expr, true)(ctx)) {
       chain.rendered = true;
@@ -55,7 +61,7 @@ function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif,
       child.remove();
       chain.rendered = false;
     }
-    child.removeAttribute("del:if");
+    child.removeAttribute("mount:if");
   } else if (hasElif) {
     const expr = child.getAttribute("elif").slice(1, -1);
     if (compileExpression(expr, true)(ctx)) {
@@ -74,9 +80,6 @@ function applyConditionalToElement(child, ctx, chain, hasIf, hasDelIf, hasElif,
   }
 }
 
-const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
-const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
-
 function interpolateAttributes(element, ctx) {
   for (const el of [element, ...element.querySelectorAll("*")]) {
     for (const attr of [...el.attributes]) {
@@ -99,7 +102,7 @@ function interpolateAttributes(element, ctx) {
 function processConditionals(element, ctx, chain) {
   for (const child of [...element.children]) {
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = child.hasAttribute("del:if");
+    const hasDelIf = child.hasAttribute("mount:if");
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
@@ -255,7 +258,7 @@ class ChocolaComponent {
       for (const el of els) {
         const props = {};
         for (const attr of [...el.attributes]) {
-          if (attr.name.startsWith("data-ch") || attr.name === "if" || attr.name === "del:if" || attr.name === "elif" || attr.name === "else") continue;
+          if (attr.name.startsWith("data-ch") || attr.name === "if" || attr.name === "mount:if" || attr.name === "elif" || attr.name === "else") continue;
           props[attr.name] = attr.value;
         }
         const instance = new compClass();

package/utils.js

@@ -13,15 +13,40 @@ export async function getChocolaConfig(__rootdir) {
 
 const LBRACE_PH = "_%%CHOCOLA-LBRACE%%_";
 const RBRACE_PH = "_%%CHOCOLA-RBRACE%%_";
+const PROTECTED_REGEX = /_%%CHOCOLA-(?:AMP|LT|GT)\d+%%_/g;
+
+let protectSeq = 0;
 
 export function protectCurlyBraces(html) {
   return html
     .replace(/&(?:lbrace|#123|#x7B);/gi, LBRACE_PH)
-    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH);
+    .replace(/&(?:rcub|#125|#x7D);/gi, RBRACE_PH)
+    .split(/(<script\b[^>]*>[\s\S]*?<\/script>|<style\b[^>]*>[\s\S]*?<\/style>)/gi)
+    .map((part, i) => i % 2 === 0
+      ? part.replace(/\{([^{}]*)\}/g, (m, inner) =>
+          `{${inner
+            .replace(/&/g, () => `_%%CHOCOLA-AMP${protectSeq++}%%_`)
+            .replace(/</g, () => `_%%CHOCOLA-LT${protectSeq++}%%_`)
+            .replace(/>/g, () => `_%%CHOCOLA-GT${protectSeq++}%%_`)}}`)
+      : part)
+    .join("");
 }
 
 export function restoreCurlyBraces(html) {
   return html
     .replace(/_%%CHOCOLA-LBRACE%%_/g, "{")
-    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}");
+    .replace(/_%%CHOCOLA-RBRACE%%_/g, "}")
+    .replace(PROTECTED_REGEX, char => {
+      if (char.includes("AMP")) return "&";
+      if (char.includes("LT")) return "<";
+      return ">";
+    });
+}
+
+export function restoreTemplateChars(str) {
+  return str.replace(PROTECTED_REGEX, char => {
+    if (char.includes("AMP")) return "&";
+    if (char.includes("LT")) return "<";
+    return ">";
+  });
 }