chocola 2.0.0-next.2 → 2.0.0-next.5

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);
 
@@ -28,46 +15,30 @@ export async function getComponents(libDir) {
       throw Error(`The specified components folder ${libDir} could not be found.`);
     }
 
-    for (const comp of components) {
-      if (!comp.endsWith(".js") || comp[0] !== comp[0].toUpperCase()) continue;
-
-      componentsLib.push(comp);
+    const reads = components
+      .filter(comp => comp.endsWith(".html"))
+      .map(async (comp) => {
+        try {
+          const compPath = path.join(libDir, comp);
+          const instance = await fs.readFile(compPath, "utf-8");
 
-      let module;
-      try {
-        module = await loadWithAssets(path.join(libDir, comp));
+          if (instance === "" || instance.trim().length === 0) emptyComps.push(comp);
 
-        if (typeof module.default !== "function") {
-          notDefComps.push(comp);
-          continue;
+          loadedComponents.set(comp.toLowerCase(), instance);
+          componentsLib.push(comp);
+        } catch (err) {
+          throwError(`Failed to load component "${comp}": ${err.message || err}`);
         }
+      });
 
-        const instance = module.default();
-        const compPath = path.join(libDir, comp);
-        instance.__sourceFile = compPath;
+    await Promise.all(reads);
 
-        loadedComponents.set(comp.toLowerCase(), instance);
-      } catch (err) {
-        throwError(`Failed to load component "${comp}": ${err.message || err}`);
-      }
-    }
-
-    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 +56,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 +73,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 +84,32 @@ 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) {
+export async function processScript(doc, script, rootDir, srcDir, outDirPath, fileIds) {
   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 src = script.getAttribute("src");
+    if (src.startsWith("http://") || src.startsWith("https://")) return;
+    const scriptPath = path.join(rootDir, srcDir, src);
+    const content = await fs.readFile(scriptPath, { encoding: "utf8" });
+    const jsFileName = "js-" + genRandomId(fileIds, 6) + ".js";
+    await fs.writeFile(path.join(outDirPath, jsFileName), content);
+
+    const newScript = doc.createElement("script");
+    for (const attr of script.attributes) {
+      if (attr.name === "src") {
+        newScript.setAttribute("src", "./" + jsFileName);
+      } else {
+        newScript.setAttribute(attr.name, attr.value);
       }
     }
-
-    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}`
-        );
-      }
+    if (script.textContent.trim()) {
+      newScript.textContent = script.textContent;
     }
+    script.parentNode.replaceChild(newScript, script);
   } catch (err) {
-    throw err;
+    throwError(`Failed to process script: ${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 +117,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";

package/compiler/utils.js

@@ -1,82 +1,20 @@
-import fs from "fs/promises";
-import path from "path";
-import { pathToFileURL } from "url";
-import chalk from "chalk";
+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}`);
-  }
-
-  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;
-    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");
-
-  try {
-    const mod = await import(dataUrl);
-    return mod;
-  } catch (err) {
-    throwError(
-      `Failed to evaluate component "${filePath}": ${err.message || err}`
-    );
-  }
+export function hasDelIfAttr(el) {
+  return el.hasAttribute("del:if");
+}
+export function getDelIfAttr(el) {
+  return el.getAttribute("del:if");
+}
+export function removeDelIfAttr(el) {
+  el.removeAttribute("del:if");
 }
 
-/**
- * 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) {
@@ -93,14 +31,6 @@ 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) {
   let arr = letters.split("");
   let i = arr.length - 1;
@@ -119,41 +49,15 @@ export function incrementAlfabet(letters) {
   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;
-  }
-}
-
 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, "{")

package/dev/index.js

@@ -1,7 +1,7 @@
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.5",
   "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,7 +25,7 @@
   "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"
@@ -35,11 +35,6 @@
     "./dev": "./dev/index.js"
   },
   "dependencies": {
-    "chalk": "^5.6.2",
-    "js-beautify": "^1.15.4",
     "jsdom": "^27.4.0"
-  },
-  "devDependencies": {
-    "js-beautify": "^1.15.4"
   }
 }

package/utils.js

@@ -2,11 +2,6 @@ import { promises as fs } from "fs";
 import path from "path";
 import { throwError } from "./compiler/utils.js";
 
-/**
- * Returns `chocola.config.json` as an object.
- * @param {import("fs").PathLike} __rootdir 
- * @returns {Object}
- */
 export async function getChocolaConfig(__rootdir) {
     try {
         const config = await fs.readFile(path.join(__rootdir, "chocola.config.json"), "utf-8");