chocola 1.4.2 → 1.5.1

package/compiler/component-processor.js

@@ -1,9 +1,26 @@
 import { JSDOM } from "jsdom";
 import { extractContextFromElement } from "./dom-processor.js";
-import { genRandomId, incrementAlfabet, throwError } from "./utils.js";
+import { genRandomId, incrementAlfabet, throwError, protectCurlyBraces } from "./utils.js";
 import chalk from "chalk";
 import beautify from "js-beautify";
 
+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}`;
+}
+
 function scopeCss(cssString, cssId) {
   function findMatchingBrace(s, openIndex) {
     let depth = 0;
@@ -42,13 +59,7 @@ function scopeCss(cssString, cssId) {
           .map(s => s.trim())
           .filter(Boolean);
         const scopedHeader = selectors.length > 0
-          ? selectors.map(sel => {
-            const s = sel.trim();
-            if (s.startsWith("." + cssId)) {
-              return s;
-            }
-            return `.${cssId} ${s}`;
-          }).join(", ")
+          ? selectors.map(sel => scopeSelector(sel, cssId)).join(", ")
           : header;
         out += scopedHeader + "{" + innerScoped + "}";
       }
@@ -75,6 +86,72 @@ function interpolateNode(node, ctxProxy) {
   }
 }
 
+function validateChainStructure(parent, sourceFile, sourceContent, parentContent) {
+  const children = [...parent.children];
+  let chainActive = false;
+  const outerCounts = {};
+
+  for (const child of children) {
+    const hasIf = child.hasAttribute("if");
+    const hasDelIf = child.hasAttribute("del-if");
+    const hasElif = child.hasAttribute("elif");
+    const hasElse = child.hasAttribute("else");
+
+    if (hasElif || hasElse) {
+      if (!chainActive) {
+        const tag = child.tagName.toLowerCase();
+        const attr = hasElif ? "elif" : "else";
+        let loc = sourceFile;
+        if (sourceContent && parentContent) {
+          const outer = child.outerHTML;
+          outerCounts[outer] = (outerCounts[outer] || 0) + 1;
+          let searchIdx = 0;
+          let hits = 0;
+          while ((searchIdx = parentContent.indexOf(outer, searchIdx)) !== -1) {
+            hits++;
+            if (hits === outerCounts[outer]) {
+              let line = parentContent.substring(0, searchIdx).split("\n").length;
+              if (sourceContent !== parentContent) {
+                const anchor = parentContent.trim().slice(0, 80);
+                const vars = [
+                  anchor,
+                  anchor.replace(/=""/g, ' '),
+                  anchor.replace(/=""/g, ''),
+                  anchor.replace(/="/g, "='").replace(/"/g, "'"),
+                ];
+                let anchorIdx = -1;
+                for (const v of vars) {
+                  anchorIdx = sourceContent.indexOf(v);
+                  if (anchorIdx !== -1) break;
+                }
+                if (anchorIdx !== -1) {
+                  const offset = sourceContent.substring(0, anchorIdx).split("\n").length;
+                  line = offset + line - 1;
+                }
+              }
+              loc = `${sourceFile}:${line}`;
+              break;
+            }
+            searchIdx += outer.length;
+          }
+        }
+        throwError(`${loc}\n    <${tag}> has ${attr} without a preceding if/del-if sibling`);
+      }
+      if (hasElse) {
+        chainActive = false;
+      }
+    }
+
+    if (hasIf || hasDelIf) {
+      chainActive = true;
+    } else if (!hasElif && !hasElse) {
+      chainActive = false;
+    }
+
+    validateChainStructure(child, sourceFile, sourceContent, parentContent);
+  }
+}
+
 /**
  * Processes a single component element and inserts it into the DOM
  * @param {Element} element
@@ -95,7 +172,9 @@ export function processComponentElement(
   cssScopesMap,
   scopedStyles,
   renderChain = [],
-  staticCtxRegistry
+  staticCtxRegistry,
+  sourceFile,
+  sourceContent
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
@@ -119,19 +198,85 @@ export function processComponentElement(
   });
 
   if (instance.body) {
-    let body = instance.body;
+    let body = protectCurlyBraces(instance.body);
 
     const fragment = JSDOM.fragment(body);
 
     const slotFragment = JSDOM.fragment(srcInnerHtml);
+    if (sourceFile) {
+      validateChainStructure(slotFragment, sourceFile, sourceContent, srcInnerHtml);
+    }
+    validateChainStructure(fragment, instance.__sourceFile || compName, body, body);
     Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
       slot.replaceWith(slotFragment);
     });
 
-    const children = Array.from(fragment.querySelectorAll("*"));
+    const childEntries = Array.from(fragment.querySelectorAll("*")).map(el => ({
+      el,
+      parent: el.parentNode
+    }));
+    const condChains = new Map();
+
+    childEntries.forEach(({ el: child, parent }) => {
+      if (!condChains.has(parent)) {
+        condChains.set(parent, { active: false, rendered: false });
+      }
+      const condChain = condChains.get(parent);
 
-    children.forEach(child => {
-      const reservedAttrs = ["if", "del-if"];
+      const hasIf = child.hasAttribute("if");
+      const hasDelIf = child.hasAttribute("del-if");
+      const hasElif = child.hasAttribute("elif");
+      const hasElse = child.hasAttribute("else");
+
+      if (hasElif || hasElse) {
+        if (!condChain.active) {
+          throwError(`${instance.__sourceFile || compName}: <${child.tagName.toLowerCase()}> has ${hasElif ? "elif" : "else"} without a preceding if/del-if sibling`);
+        }
+        if (condChain.rendered) {
+          child.remove();
+          if (hasElse) {
+            condChain.active = false;
+          }
+          return;
+        }
+      }
+
+      if (child.tagName.toLowerCase() === "void") {
+        if (hasElif || hasElse) {
+          if (hasElif) {
+            const expr = child.getAttribute("elif").slice(1, -1);
+            const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+            if (!fn(ctxProxy)) {
+              child.remove();
+              return;
+            }
+          }
+          child.replaceWith(...child.children);
+          condChain.rendered = true;
+          if (hasElse) {
+            condChain.active = false;
+          }
+        } else if (hasIf || hasDelIf) {
+          const attr = hasIf ? "if" : "del-if";
+          const expr = child.getAttribute(attr).slice(1, -1);
+          const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+          condChain.active = true;
+          if (fn(ctxProxy)) {
+            child.replaceWith(...child.children);
+            condChain.rendered = true;
+          } else {
+            child.remove();
+            condChain.rendered = false;
+          }
+        } else {
+          child.replaceWith(...child.children);
+          condChain.active = false;
+          condChain.rendered = false;
+        }
+        return;
+      }
+
+      const reservedAttrs = ["if", "del-if", "elif", "else"];
 
       Array.from(child.attributes).forEach(attribute => {
         if (!attribute || attribute === undefined) return;
@@ -159,20 +304,50 @@ export function processComponentElement(
         cssScopesMap,
         scopedStyles,
         renderChain.concat(compName),
-        staticCtxRegistry
+        staticCtxRegistry,
+        instance.__sourceFile || compName,
+        body
       );
 
-      ["if", "del-if"].forEach(statement => {
-        const statAtt = child.getAttribute(statement);
-        if (!statAtt) return;
-        const expr = statAtt.slice(1, -1);
+      if (hasIf) {
+        const expr = child.getAttribute("if").slice(1, -1);
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        condChain.active = true;
+        if (fn(ctxProxy)) {
+          condChain.rendered = true;
+        } else {
+          child.style.display = "none";
+          condChain.rendered = false;
+        }
+        child.removeAttribute("if");
+      } else if (hasDelIf) {
+        const expr = child.getAttribute("del-if").slice(1, -1);
         const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
-        if (!fn(ctxProxy)) {
-          if (statement === "if") child.style.display = "none";
-          if (statement === "del-if") child.remove();
+        condChain.active = true;
+        if (fn(ctxProxy)) {
+          condChain.rendered = true;
+        } else {
+          child.remove();
+          condChain.rendered = false;
         }
-        child.removeAttribute(statement);
-      });
+        child.removeAttribute("del-if");
+      } else if (hasElif) {
+        const expr = child.getAttribute("elif").slice(1, -1);
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        if (fn(ctxProxy)) {
+          condChain.rendered = true;
+        } else {
+          child.remove();
+        }
+        child.removeAttribute("elif");
+      } else if (hasElse) {
+        condChain.rendered = true;
+        condChain.active = false;
+        child.removeAttribute("else");
+      } else {
+        condChain.active = false;
+        condChain.rendered = false;
+      }
 
       interpolateNode(child, ctxProxy)
     });
@@ -231,11 +406,16 @@ export function processComponentElement(
       style = scopeCss(style, cssId);
       scopedStyles.push(style);
     }
+
+    if (fragment.firstChild && fragment.firstChild.nodeType === 1) {
+      fragment.firstChild.setAttribute("data-ch-source", instance.__sourceFile || compName);
+    }
+
     element.replaceWith(fragment);
     return true;
   }
 
-  console.warn(chalk.yellow(`${compName} component could not be loaded`));
+  console.warn(chalk.yellow(`${compName} — component could not be loaded (missing body or styles export)`));
   return false;
 }
 
@@ -249,7 +429,7 @@ export function processComponentElement(
  *   scopesCss: CSSString
  * }}
  */
-export function processAllComponents(appElements, loadedComponents) {
+export function processAllComponents(appElements, loadedComponents, pageSourceFile, pageSourceContent) {
   let runtimeChunks = [];
   let compIdColl = [];
   let letterState = { value: null };
@@ -260,7 +440,7 @@ export function processAllComponents(appElements, loadedComponents) {
   let staticCtxRegistry = new Map();
 
   appElements.forEach(el => {
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry);
+    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry, pageSourceFile, pageSourceContent);
   });
   const runtimeScript = runtimeChunks.join("\n");
   const hasComponents = runtimeChunks.length > 0;

package/compiler/config.js

@@ -20,13 +20,14 @@ export async function loadConfig(rootDir) {
   const outDir = bundleConfig.outDir || "dist";
   const libDir = bundleConfig.libDir || "lib";
   const emptyOutDir = bundleConfig.emptyOutDir !== false;
+  const assetImport = bundleConfig.assetImport || "legacy";
 
-  logConfigWarnings(bundleConfig, emptyOutDir);
+  logConfigWarnings(bundleConfig, emptyOutDir, assetImport);
 
-  return { srcDir, outDir, libDir, emptyOutDir };
+  return { srcDir, outDir, libDir, emptyOutDir, assetImport };
 }
 
-function logConfigWarnings(bundleConfig, emptyOutDir) {
+function logConfigWarnings(bundleConfig, emptyOutDir, assetImport) {
   if (!bundleConfig.srcDir) {
     console.warn(
       chalk.bold.yellow("WARNING!"),
@@ -49,6 +50,14 @@ function logConfigWarnings(bundleConfig, emptyOutDir) {
   }
 
   console.log(`> using emptyOutDir = ${emptyOutDir}`);
+
+  if (assetImport !== "static") {
+    console.warn(
+      chalk.bold.yellow("DEPRECATION WARNING!"),
+      'The legacy asset import system ("bundle.assetImport") will be removed in Chocola 2. ' +
+      'Set "bundle.assetImport": "static" in chocola.config.json and migrate your assets to src/static/.'
+    );
+  }
 }
 
 /**

package/compiler/dom-processor.js

@@ -1,7 +1,7 @@
 import { JSDOM } from "jsdom";
 import { promises as fs } from "fs";
 import path from "path";
-import { throwError } from "./utils.js";
+import { throwError, protectCurlyBraces, restoreCurlyBraces } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
 /**
@@ -10,7 +10,7 @@ import { readMyFile } from "./fs.js";
  * @returns {JSDOM}
  */
 export function createDOM(srcIndexContent) {
-  return new JSDOM(srcIndexContent);
+  return new JSDOM(protectCurlyBraces(srcIndexContent));
 }
 
 /**
@@ -56,7 +56,7 @@ export function extractContextFromElement(element) {
  */
 export async function serializeDOM(dom) {
   const beautify = (await import("js-beautify")).default;
-  const finalHtml = dom.serialize();
+  const finalHtml = restoreCurlyBraces(dom.serialize());
   return beautify.html(finalHtml, { indent_size: 2 });
 }
 

package/compiler/index.js

@@ -1,4 +1,3 @@
-import path from "path";
 import { promises as fs } from "fs";
 import chalk from "chalk";
 import { loadConfig, resolvePaths } from "./config.js";
@@ -18,6 +17,7 @@ import { generateRuntimeScript } from "./runtime-generator.js";
 import { genRandomId, throwError } from "./utils.js";
 import {
     copyResources,
+    copyStaticDir,
     getComponents,
     getSrcIndex,
     processIcons,
@@ -101,7 +101,7 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
     }
 
     for (const link of icons) {
-        await processIcons(link, rootDir, srcDir, outDirPath, fileIds);
+        await processIcons(link, rootDir, srcDir, outDirPath);
     }
     return cssContents
 }
@@ -126,6 +126,7 @@ export default async function runtime(rootDir, buildConfig) {
 
     const indexFiles = await getSrcIndex(paths.src);
     const srcIndexContent = indexFiles.srcHtmlFile || indexFiles.srcChocoFile;
+    const pageSourcePath = indexFiles.srcPath;
 
     const loadedComponents = await loadAndDisplayComponents(paths.components);
     !isHotReload && console.log(logSeparation);
@@ -138,7 +139,7 @@ export default async function runtime(rootDir, buildConfig) {
     const appContainer = validateAppContainer(doc);
     const appElements = getAppElements(appContainer);
 
-    const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents);
+    const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
     const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
     const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
 
@@ -152,7 +153,15 @@ export default async function runtime(rootDir, buildConfig) {
     const html = await serializeDOM(dom);
     await writeHTMLOutput(html, paths.outDir);
 
-    await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
+    try {
+        if (config.assetImport === "static") {
+            await copyStaticDir(paths.src, paths.outDir);
+        } else {
+            await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
+        }
+    } catch (err) {
+        throwError(err.message || err);
+    }
 
     !isHotReload && logSuccess(paths.outDir);
     isHotReload && console.log("Dev server updated");

package/compiler/pipeline.js

@@ -33,21 +33,28 @@ export async function getComponents(libDir) {
 
       componentsLib.push(comp);
 
-      const module = await loadWithAssets(path.join(libDir, comp));
+      let module;
+      try {
+        module = await loadWithAssets(path.join(libDir, comp));
 
-      if (typeof module.default !== "function") {
-        notDefComps.push(comp);
-        continue;
-      }
+        if (typeof module.default !== "function") {
+          notDefComps.push(comp);
+          continue;
+        }
 
-      const instance = module.default();
+        const instance = module.default();
+        const compPath = path.join(libDir, comp);
+        instance.__sourceFile = compPath;
 
-      loadedComponents.set(comp.toLowerCase(), instance);
+        loadedComponents.set(comp.toLowerCase(), instance);
+      } catch (err) {
+        throwError(`Failed to load component "${comp}": ${err.message || err}`);
+      }
     }
 
     return { componentsLib, loadedComponents, notDefComps };
   } catch (err) {
-    throwError(err);
+    throwError(`Failed to load components from ${libDir}: ${err.message}`);
   }
 }
 
@@ -80,7 +87,7 @@ export async function getSrcIndex(srcPath) {
   if (htmlExists) {
     try {
       srcHtmlFile = await readMyFile(srcHtmlPath);
-      return { srcHtmlFile, srcChocoFile };
+      return { srcHtmlFile, srcChocoFile, srcPath: srcHtmlPath };
     } catch (err) {
       throwError(err);
     }
@@ -113,7 +120,7 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
 
     return css;
   } catch (err) {
-    throwError(err);
+    throwError(`Failed to process stylesheet: ${err}`);
   }
 }
 
@@ -128,65 +135,66 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
 export async function processIcons(link, rootDir, srcDir, outDirPath) {
   try {
     const href = link.href;
+    if (href.startsWith("http://") || href.startsWith("https://")) return;
     const iconPath = path.join(rootDir, srcDir, href);
     await fs.copyFile(iconPath, path.join(outDirPath, href));
   } catch (err) {
-    throwError(err);
+    throwError(`Failed to copy icon: ${err}`);
   }
 }
 
 export function getCssAssets(css) {
   const results = new Set();
-
   const urlRegex = /url\(([^)]+)\)/gi;
-
   const importStringRegex = /@import\s+["']([^"']+)["']/gi;
-
   const importUrlRegex = /@import\s+url\(([^)]+)\)/gi;
 
   const clean = (raw) => {
     let p = raw.trim();
-
     if (
       (p.startsWith('"') && p.endsWith('"')) ||
       (p.startsWith("'") && p.endsWith("'"))
     ) {
       p = p.slice(1, -1);
     }
-
     if (p.startsWith("data:")) return null;
-
     return p;
   };
 
   let match;
-
   while ((match = urlRegex.exec(css))) {
     const p = clean(match[1]);
     if (p) results.add(p);
   }
-
   while ((match = importStringRegex.exec(css))) {
     const p = clean(match[1]);
     if (p) results.add(p);
   }
-
   while ((match = importUrlRegex.exec(css))) {
     const p = clean(match[1]);
     if (p) results.add(p);
   }
-
   return [...results];
 }
 
+function getComponentSource(el) {
+  let cur = el;
+  while (cur) {
+    const src = cur.getAttribute?.("data-ch-source");
+    if (src) return src;
+    cur = cur.parentElement;
+  }
+  return null;
+}
 
 /**
- * Copies all local resources (images, fonts, etc.) to output directory
- * Excludes web links and script/link tags
+ * Copies all local resources (images, fonts, etc.) to output directory.
+ * Excludes web links and script/link tags.
  * @param {import("fs").PathLike} rootDir - Root project directory
+ * @param {string} scopesCss - Scoped CSS content
+ * @param {string} globalCss - Global CSS content
  * @param {string} srcDir - Source directory name
  * @param {import("fs").PathLike} outDirPath - Output directory path
- * @throws {Error} if resources cannot be copied
  */
 export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDirPath) {
   try {
@@ -198,53 +206,83 @@ export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDi
     for (const el of newElements) {
       if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
 
-      const src = el.getAttribute("src") || el.getAttribute("href");
-
-      if (src && !isWebLink(src)) {
+      const attrName = el.getAttribute("src") ? "src" : "href";
+      const src = el.getAttribute(attrName);
+      if (src && !isWebLink(src) && !src.startsWith("#") && !src.startsWith("/")) {
         const srcPath = path.join(rootDir, srcDir, src);
         const destPath = path.join(outDirPath, src);
-
-        await fs.mkdir(path.dirname(destPath), { recursive: true });
-        await fs.copyFile(srcPath, destPath);
+        try {
+          await fs.mkdir(path.dirname(destPath), { recursive: true });
+          await fs.copyFile(srcPath, destPath);
+        } catch (err) {
+          throw new Error(
+            `Failed to copy resource referenced by <${el.tagName.toLowerCase()} ${attrName}="${src}">` +
+            (getComponentSource(el) ? ` in component "${getComponentSource(el)}"` : "") +
+            `: ${err.message || err}`
+          );
+        }
       }
 
       const styles = el.getAttribute("style");
-
       if (styles) {
         let stylesMatch;
         while ((stylesMatch = inlinePathsRegex.exec(styles)) !== null) {
           let filePath = stylesMatch[1].trim();
-
           if (
             (filePath.startsWith('"') && filePath.endsWith('"')) ||
             (filePath.startsWith("'") && filePath.endsWith("'"))
           ) {
             filePath = filePath.slice(1, -1);
           }
-
           const srcPath = path.join(rootDir, srcDir, filePath);
           const destPath = path.join(outDirPath, filePath);
-
-          await fs.mkdir(path.dirname(destPath), { recursive: true });
-          await fs.copyFile(srcPath, destPath);
+          try {
+            await fs.mkdir(path.dirname(destPath), { recursive: true });
+            await fs.copyFile(srcPath, destPath);
+          } catch (err) {
+          throw new Error(
+            `Failed to copy resource from inline style on <${el.tagName.toLowerCase()}> url("${filePath}")` +
+            (getComponentSource(el) ? ` in component "${getComponentSource(el)}"` : "") +
+            `: ${err.message || err}`
+          );
+          }
         }
       }
     }
 
-    const cssAssets = [...getCssAssets(scopesCss), ...getCssAssets(globalCss)];
+    const cssAssets = [...getCssAssets(scopesCss || ""), ...getCssAssets(globalCss || "")];
     for (const assetPath of cssAssets) {
       try {
         if (assetPath.startsWith('http:') || assetPath.startsWith('https:')) continue;
         const srcPath = path.join(rootDir, srcDir, assetPath);
         const destPath = path.join(outDirPath, assetPath);
-
         await fs.mkdir(path.dirname(destPath), { recursive: true });
         await fs.copyFile(srcPath, destPath);
       } catch (err) {
-        throwError(err)
+        throw new Error(
+          `Failed to copy CSS asset "${assetPath}" referenced from stylesheets: ${err.message || err}`
+        );
       }
     }
   } catch (err) {
-    throwError(err);
+    throw err;
+  }
+}
+
+/**
+ * Copies the static/ directory from source to output.
+ * The entire static/ directory tree is copied recursively.
+ * Silently skips if static/ does not exist.
+ * @param {import("fs").PathLike} srcPath - Source directory path
+ * @param {import("fs").PathLike} outDirPath - Output directory path
+ */
+export async function copyStaticDir(srcPath, outDirPath) {
+  const staticSrc = path.join(srcPath, "static");
+  const staticDest = path.join(outDirPath, "static");
+  try {
+    await fs.access(staticSrc);
+    await fs.cp(staticSrc, staticDest, { recursive: true, force: true });
+  } catch {
+    // static/ directory doesn't exist — nothing to copy
   }
 }

package/compiler/utils.js

@@ -24,28 +24,51 @@ export function throwError(err) {
  * export default function Button() { return { body: template }; }
  */
 export async function loadWithAssets(filePath) {
-  let code = await fs.readFile(filePath, "utf8");
+  let code;
+  try {
+    code = await fs.readFile(filePath, "utf8");
+  } catch (err) {
+    throwError(`Failed to read component file "${filePath}": ${err.message || err}`);
+  }
 
   const importRegex = /import\s+(\w+)\s+from\s+["'](.+?\.(html|css))["'];?/g;
 
+  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);
-    let content = await fs.readFile(absPath, "utf8");
 
-    const replacement = `const ${varName} = ${JSON.stringify(content)};`;
-    code = code.replace(match[0], replacement);
+    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}`
+      );
+    }
+
+    replacements.push({ from: match[0], to: `const ${varName} = ${JSON.stringify(content)};` });
+  }
+
+  for (const { from, to } of replacements) {
+    code = code.replace(from, to);
   }
 
   const dataUrl =
     "data:text/javascript;base64," +
     Buffer.from(code).toString("base64");
 
-  const mod = await import(dataUrl);
-  return mod;
+  try {
+    const mod = await import(dataUrl);
+    return mod;
+  } catch (err) {
+    throwError(
+      `Failed to evaluate component "${filePath}": ${err.message || err}`
+    );
+  }
 }
 
 /**
@@ -111,3 +134,30 @@ export function isWebLink(str) {
     return false;
   }
 }
+
+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);
+}
+
+/**
+ * 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, "}");
+}

package/dev/index.js

@@ -112,10 +112,10 @@ export async function serve(__rootdir) {
       if (error) {
         if (error.code === "ENOENT") {
           res.writeHead(404, { "Content-Type": "text/html" });
-          res.end("<h1>404 Not Found</h1>", "utf-8");
+          res.end("<h1>404 Not Found</h1><p>The requested resource was not found on this server.</p>", "utf-8");
         } else {
           res.writeHead(500);
-          res.end("Error interno: " + error.code);
+          res.end("Internal server error: " + error.code);
         }
       } else {
         if (extname === ".html" || extname === ".htm") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "The sweetest way to build reactive web apps",
   "keywords": [
     "web",

package/utils.js

@@ -12,6 +12,6 @@ export async function getChocolaConfig(__rootdir) {
         const config = await fs.readFile(path.join(__rootdir, "chocola.config.json"), "utf-8");
         return JSON.parse(config);
     } catch(err) {
-        throwError("An error ocurred while fetching the Chocola config file:\n" + err);
+        throwError("An error occurred while fetching the Chocola config file:\n" + err);
     }
 }