chocola 2.0.0-next.1 → 2.0.0-next.4

package/compiler/config.js

@@ -1,17 +1,6 @@
 import path from "path";
-import chalk from "chalk";
 import { getChocolaConfig } from "../utils.js";
 
-/**
- * Loads and merges Chocola configuration with defaults
- * @param {import("fs").PathLike} rootDir
- * @returns {Promise<{
- *   srcDir: string,
- *   outDir: string,
- *   libDir: string,
- *   emptyOutDir: boolean
- * }>}
- */
 export async function loadConfig(rootDir) {
   const config = await getChocolaConfig(rootDir);
   const bundleConfig = config.bundle || {};
@@ -20,52 +9,10 @@ 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, assetImport);
-
-  return { srcDir, outDir, libDir, emptyOutDir, assetImport };
-}
-
-function logConfigWarnings(bundleConfig, emptyOutDir, assetImport) {
-  if (!bundleConfig.srcDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'srcDir not defined in chocola.config.json file: using default "src" directory.'
-    );
-  }
-
-  if (!bundleConfig.outDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'outDir not defined in chocola.config.json file: using default "dist" directory.'
-    );
-  }
-
-  if (!bundleConfig.libDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'libDir not defined in chocola.config.json file: using default "lib" directory.'
-    );
-  }
-
-  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/.'
-    );
-  }
+  return { srcDir, outDir, libDir, emptyOutDir };
 }
 
-/**
- * Resolves all path directories based on configuration
- * @param {import("fs").PathLike} rootDir
- * @param {object} config
- * @returns {object}
- */
 export function resolvePaths(rootDir, config) {
   return {
     outDir: path.join(rootDir, config.outDir),

package/compiler/dom-processor.js

@@ -1,23 +1,13 @@
 import { JSDOM } from "jsdom";
 import { promises as fs } from "fs";
 import path from "path";
-import { throwError, protectCurlyBraces, restoreCurlyBraces } from "./utils.js";
+import { throwError, protectCurlyBraces, restoreCurlyBraces, compileExpression } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
-/**
- * Creates a JSDOM instance from source index file
- * @param {string} srcIndexContent
- * @returns {JSDOM}
- */
 export function createDOM(srcIndexContent) {
   return new JSDOM(protectCurlyBraces(srcIndexContent));
 }
 
-/**
- * Validates that the index file has an <app> root element
- * @param {Document} doc
- * @throws {Error} if <app> element not found
- */
 export function validateAppContainer(doc) {
   const appContainer = doc.querySelector("app");
   if (!appContainer) {
@@ -26,29 +16,20 @@ export function validateAppContainer(doc) {
   return appContainer;
 }
 
-/**
- * Extracts all child elements from app container
- * @param {Element} appContainer
- * @returns {Element[]}
- */
 export function getAppElements(appContainer) {
   return Array.from(appContainer.querySelectorAll("*"));
 }
 
-/**
- * Extracts context attributes from element (ctx.* attributes)
- * @param {Element} element
- * @returns {object}
- */
 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] = Function(`"use strict"; return (${matches[0][1]})`)();
+        ctx[key] = compileExpression(matches[0][1], false)();
         continue;
       } catch {}
     }
@@ -57,31 +38,16 @@ export function extractContextFromElement(element) {
   return ctx;
 }
 
-/**
- * Serializes and formats DOM to pretty HTML
- * @param {JSDOM} dom
- * @returns {string}
- */
 export async function serializeDOM(dom) {
   const beautify = (await import("js-beautify")).default;
   const finalHtml = restoreCurlyBraces(dom.serialize());
   return beautify.html(finalHtml, { indent_size: 2 });
 }
 
-/**
- * Writes the final HTML to output directory
- * @param {string} html
- * @param {import("fs").PathLike} outDirPath
- */
 export async function writeHTMLOutput(html, outDirPath) {
   await fs.writeFile(path.join(outDirPath, "index.html"), html);
 }
 
-/**
- * Gets all stylesheet and icon links from document
- * @param {Document} doc
- * @returns {{stylesheets: HTMLLinkElement[], icons: HTMLLinkElement[]}}
- */
 export function getAssetLinks(doc) {
   const docLinks = Array.from(doc.querySelectorAll("link"));
   const stylesheets = docLinks.filter(link => link.rel === "stylesheet");
@@ -89,21 +55,10 @@ export function getAssetLinks(doc) {
   return { stylesheets, icons };
 }
 
-/**
- * Writes CSS to output directory
- * @param {string} css
- * @param {import("fs").PathLike} outDirPath
- * @param {string} filename
- */
 export async function writeCSSOutput(css, outDirPath, filename = "scopes.css") {
   await fs.writeFile(path.join(outDirPath, filename), css);
 }
 
-/**
- * Appends a stylesheet link element to document head
- * @param {Document} doc
- * @param {string} filename
- */
 export function appendStylesheetLink(doc, filename) {
   const linkEl = doc.createElement("link");
   linkEl.rel = "stylesheet";
@@ -111,11 +66,6 @@ export function appendStylesheetLink(doc, filename) {
   doc.head.appendChild(linkEl);
 }
 
-/**
- * Appends a script element to document body
- * @param {Document} doc
- * @param {string} filename
- */
 export function appendRuntimeScript(doc, filename) {
   const runtimeScriptEl = doc.createElement("script");
   runtimeScriptEl.type = "module";

package/compiler/fs.js

@@ -1,12 +1,6 @@
 import { promises as fs } from "fs";
 import { throwError } from "./utils.js";
 
-/**
- * Reads a file and returns its contents as a UTF-8 string
- * @param {import("fs").PathLike} filePath - Path to the file
- * @returns {Promise<string>} - File contents
- * @throws {Error} - If file cannot be read
- */
 export async function readMyFile(filePath) {
   try {
     const data = await fs.readFile(filePath, "utf-8");
@@ -16,11 +10,6 @@ export async function readMyFile(filePath) {
   }
 }
 
-/**
- * Checks if a file exists
- * @param {import("fs").PathLike} filePath - Path to check
- * @returns {Promise<boolean>} - True if file exists, false otherwise
- */
 export async function checkFile(filePath) {
   try {
     await fs.access(filePath);

package/compiler/index.js

@@ -14,9 +14,8 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError } from "./utils.js";
+import { genRandomId, throwError, compileExpression } from "./utils.js";
 import {
-  copyResources,
   copyStaticDir,
   getComponents,
   getSrcIndex,
@@ -76,15 +75,15 @@ async function setupOutputDirectory(outDirPath, emptyOutDir) {
 
 async function loadAndDisplayComponents(srcComponentsPath) {
   const foundComponents = await getComponents(srcComponentsPath);
-  const { loadedComponents, notDefComps, componentsLib } = foundComponents;
+  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");
 
-  if (notDefComps.length > 0) {
-    console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-    console.log("   ", notDefComps);
+  if (emptyComps?.length > 0) {
+    console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
+    console.log("   ", emptyComps);
   }
 
   return loadedComponents;
@@ -106,15 +105,7 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
   return cssContents
 }
 
-/**
- * Compiles a static build of your Chocola project from the directory provided.
- * @param {import("fs").PathLike} rootDir
- * @param {Object<{
- * isHotReload?: boolean
- * }
- * >} config
- */
-export default async function runtime(rootDir, buildConfig) {
+export default async function compile(rootDir, buildConfig) {
   const isHotReload = buildConfig?.isHotReload || null;
   !isHotReload && logBanner();
 
@@ -138,20 +129,13 @@ export default async function runtime(rootDir, buildConfig) {
   const doc = dom.window.document;
   const appContainer = validateAppContainer(doc);
 
-  const warnedDeprecated = new Set();
-  function hasDelIfAttr(el, sourceLoc) {
-    if (el.hasAttribute("del-if") && !el.hasAttribute("del:if") && !warnedDeprecated.has(sourceLoc)) {
-      warnedDeprecated.add(sourceLoc);
-      const name = sourceLoc ? sourceLoc.split(/[\\/]/).pop() : "unknown";
-      console.warn(chalk.yellow(`[deprecation] "del-if" is deprecated in ${chalk.cyan(name)} and will be removed in Chocola 2. Use "del:if" instead.`));
-    }
-    return el.hasAttribute("del-if") || el.hasAttribute("del:if");
+  function hasDelIfAttr(el) {
+    return el.hasAttribute("del:if");
   }
   function getDelIfAttr(el) {
-    return el.getAttribute("del:if") ?? el.getAttribute("del-if");
+    return el.getAttribute("del:if");
   }
   function removeDelIfAttr(el) {
-    el.removeAttribute("del-if");
     el.removeAttribute("del:if");
   }
 
@@ -162,7 +146,7 @@ export default async function runtime(rootDir, buildConfig) {
 
     for (const child of children) {
       const hasIf = child.hasAttribute("if");
-      const hasDelIf = hasDelIfAttr(child, pageSourcePath);
+      const hasDelIf = hasDelIfAttr(child);
       const hasElif = child.hasAttribute("elif");
       const hasElse = child.hasAttribute("else");
 
@@ -174,7 +158,7 @@ export default async function runtime(rootDir, buildConfig) {
       if (hasIf) {
         const raw = child.getAttribute("if");
         const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = new Function(`"use strict"; return (${expr})`);
+        const fn = compileExpression(expr, false);
         const result = fn();
         chainActive = true;
         if (result) {
@@ -187,7 +171,7 @@ export default async function runtime(rootDir, buildConfig) {
       } else if (hasDelIf) {
         const raw = getDelIfAttr(child);
         const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = new Function(`"use strict"; return (${expr})`);
+        const fn = compileExpression(expr, false);
         const result = fn();
         chainActive = true;
         if (result) {
@@ -200,7 +184,7 @@ export default async function runtime(rootDir, buildConfig) {
       } else if (hasElif) {
         const raw = child.getAttribute("elif");
         const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
-        const fn = new Function(`"use strict"; return (${expr})`);
+        const fn = compileExpression(expr, false);
         const result = fn();
         if (result) {
           chainRendered = true;
@@ -227,7 +211,7 @@ export default async function runtime(rootDir, buildConfig) {
   const appElements = getAppElements(appContainer);
   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");
+  await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
   if (scopesCss) {
     const fileName = "sc-" + genRandomId(null, 6) + ".css";
@@ -240,11 +224,7 @@ export default async function runtime(rootDir, buildConfig) {
   await writeHTMLOutput(html, paths.outDir);
 
   try {
-    if (config.assetImport === "static") {
-      await copyStaticDir(paths.src, paths.outDir);
-    } else {
-      await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
-    }
+    await copyStaticDir(paths.src, paths.outDir);
   } catch (err) {
     throwError(err.message || err);
   }
@@ -273,5 +253,5 @@ export const app = {
  * @example
  * @param {PathLike} __rootdir the directory where your Chocola App is
  */
-  build(__rootdir) { runtime(__rootdir) }
+  async build(__rootdir) { return compile(__rootdir) }
 };

package/compiler/pipeline.js

@@ -1,26 +1,13 @@
 import { promises as fs } from "fs";
-import { loadWithAssets, throwError, genRandomId, isWebLink } from "./utils.js";
+import { throwError, genRandomId } from "./utils.js";
 import { readMyFile, checkFile } from "./fs.js";
-import { JSDOM } from "jsdom";
 import path from "path";
 
-/**
- * Discovers and loads all components from a library directory.
- * Components are JavaScript files that start with an uppercase letter.
- * They must have a default export that is a function
- * @param {import("node:fs").PathLike} libDir - Directory containing component files
- * @returns {Promise<{
- *   componentsLib: string[],
- *   loadedComponents: Map<string, object>,
- *   notDefComps: string[]
- * }>}
- * @throws {Error} if libDir cannot be found
- */
 export async function getComponents(libDir) {
   try {
     let componentsLib = [];
     let loadedComponents = new Map();
-    let notDefComps = [];
+    let emptyComps = [];
 
     const components = await fs.readdir(libDir);
 
@@ -29,22 +16,15 @@ export async function getComponents(libDir) {
     }
 
     for (const comp of components) {
-      if (!comp.endsWith(".js") || comp[0] !== comp[0].toUpperCase()) continue;
+      if (!comp.endsWith(".html")) continue;
 
       componentsLib.push(comp);
 
-      let module;
       try {
-        module = await loadWithAssets(path.join(libDir, comp));
-
-        if (typeof module.default !== "function") {
-          notDefComps.push(comp);
-          continue;
-        }
-
-        const instance = module.default();
         const compPath = path.join(libDir, comp);
-        instance.__sourceFile = compPath;
+        const instance = await fs.readFile(compPath, "utf-8");
+
+        if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
 
         loadedComponents.set(comp.toLowerCase(), instance);
       } catch (err) {
@@ -52,22 +32,12 @@ export async function getComponents(libDir) {
       }
     }
 
-    return { componentsLib, loadedComponents, notDefComps };
+    return { componentsLib, loadedComponents, emptyComps };
   } catch (err) {
     throwError(`Failed to load components from ${libDir}: ${err.message}`);
   }
 }
 
-/**
- * Loads the project index file (HTML or .choco)
- * If both HTML and .choco files exist, throws an error
- * @param {import("fs").PathLike} srcPath - Source directory
- * @returns {Promise<{
- *   srcHtmlFile: string | null,
- *   srcChocoFile: string | null
- * }>}
- * @throws {Error} if both index files exist or .choco is used (not yet supported)
- */
 export async function getSrcIndex(srcPath) {
   const srcHtmlPath = path.join(srcPath, "index.html");
 
@@ -85,15 +55,6 @@ export async function getSrcIndex(srcPath) {
   }
 }
 
-/**
- * Processes stylesheet links: copies CSS files to output and updates link href
- * @param {HTMLLinkElement} link - The link element to process
- * @param {import("fs").PathLike} rootDir - Root project directory
- * @param {string} srcDir - Source directory name
- * @param {import("fs").PathLike} outDirPath - Output directory path
- * @param {Array} fileIds - Array to track used file IDs
- * @throws {Error} if stylesheet cannot be read or written
- */
 export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileIds) {
   try {
     const href = link.href;
@@ -111,14 +72,6 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
   }
 }
 
-/**
- * Processes icon links: copies icon files to output directory
- * @param {HTMLLinkElement} link - The link element to process
- * @param {import("fs").PathLike} rootDir - Root project directory
- * @param {string} srcDir - Source directory name
- * @param {import("fs").PathLike} outDirPath - Output directory path
- * @throws {Error} if icon cannot be copied
- */
 export async function processIcons(link, rootDir, srcDir, outDirPath) {
   try {
     const href = link.href;
@@ -130,139 +83,6 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
   }
 }
 
-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.
- * @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
- */
-export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDirPath) {
-  try {
-    const newIndex = await fs.readFile(path.join(outDirPath, "index.html"), "utf8");
-    const newDoc = new JSDOM(newIndex);
-    const newElements = Array.from(newDoc.window.document.querySelectorAll("*"));
-    const inlinePathsRegex = /url\((.*?)\)/gi;
-
-    for (const el of newElements) {
-      if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
-
-      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);
-        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);
-          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 || "")];
-    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) {
-        throw new Error(
-          `Failed to copy CSS asset "${assetPath}" referenced from stylesheets: ${err.message || err}`
-        );
-      }
-    }
-  } catch (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");
@@ -270,6 +90,5 @@ export async function copyStaticDir(srcPath, outDirPath) {
     await fs.access(staticSrc);
     await fs.cp(staticSrc, staticDest, { recursive: true, force: true });
   } catch {
-    // static/ directory doesn't exist — nothing to copy
   }
 }

package/compiler/runtime-generator.js

@@ -2,12 +2,6 @@ import { promises as fs } from "fs";
 import path from "path";
 import { genRandomId } 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";