chocola 1.3.2 → 1.3.4

package/compiler/component-processor.js

@@ -31,22 +31,24 @@ export function processComponentElement(
   if (instance && instance.body) {
     let body = instance.body;
     body = body.replace(
-      /(?<!\b(?:if|del-if)=)\{ctx\.(\w+)\}/g,
+      /(?<!\b(?:if|del-if)=)\{(\w+)\}/g,
       (_, key) => ctx[key] || ""
     );
     const fragment = JSDOM.fragment(body);
     const children = Array.from(fragment.querySelectorAll("*"));
     children.forEach(child => {
-      if (child.hasAttribute("if")) {
-        const expr = child.getAttribute("if").slice(1, -1);
-        const fn = new Function("ctx", `if (${expr} === true) {return true} else {return ${expr} === '{true}'}`);
-        if (!fn(ctx)) child.style.display = "none";
-      }
-      if (child.hasAttribute("del-if")) {
-        const expr = child.getAttribute("del-if").slice(1, -1);
-        const fn = new Function("ctx", `if (${expr} === true) {return true} else {return ${expr} === '{true}'}`);
-        if (!fn(ctx)) child.remove();
-      }
+      ["if", "del-if"].forEach(statement => {
+        const statAtt = child.getAttribute(statement);
+        if (!statAtt) return;
+        const expr = statAtt.slice(1, -1);
+        const fn = new Function("ctx", `return ctx.${expr} === true || ctx.${expr} === '{true}'`);
+        if (!fn(ctx)) {
+          if (statement === "if") child.style.display = "none";
+          if (statement === "del-if") child.remove();
+        }
+
+        child.removeAttribute(statement);
+      });
     });
     const firstChild = fragment.firstChild;
 
@@ -74,7 +76,6 @@ export function processComponentElement(
         script = script.replace(ctxRegex, "ctx");
         script = script.replace(/RUNTIME\([^)]*\)\s*{/, match => match + "\n" + ctxDef);
 
-        // Determine or create a single runtime function per component
         let letterEntry = runtimeMap && runtimeMap.get(compName);
         let letter;
         if (!letterEntry) {

package/compiler/dom-processor.js

@@ -43,10 +43,8 @@ export function getAppElements(appContainer) {
 export function extractContextFromElement(element) {
   const ctx = {};
   for (const attr of element.attributes) {
-    if (attr.name.startsWith("ctx.")) {
-      const key = attr.name.slice(4);
-      ctx[key] = attr.value;
-    }
+    const key = attr.name;
+    ctx[key] = attr.value;
   }
   return ctx;
 }

package/compiler/pipeline.js

@@ -4,8 +4,6 @@ import { readMyFile, checkFile } from "./fs.js";
 import { JSDOM } from "jsdom";
 import path from "path";
 
-// ===== Component Loading =====
-
 /**
  * Discovers and loads all components from a library directory.
  * Components are JavaScript files that start with an uppercase letter.
@@ -31,7 +29,6 @@ export async function getComponents(libDir) {
     }
 
     for (const comp of components) {
-      // Only load .js files that start with uppercase (component convention)
       if (!comp.endsWith(".js") || comp[0] !== comp[0].toUpperCase()) continue;
 
       componentsLib.push(comp);
@@ -45,7 +42,6 @@ export async function getComponents(libDir) {
 
       const instance = module.default();
 
-      // Load external body template if specified
       if (instance.bodyPath) {
         instance.body = await fs.readFile(
           path.resolve(libDir, instance.bodyPath),
@@ -62,8 +58,6 @@ export async function getComponents(libDir) {
   }
 }
 
-// ===== Index File Loading =====
-
 /**
  * Loads the project index file (HTML or .choco)
  * If both HTML and .choco files exist, throws an error
@@ -104,8 +98,6 @@ export async function getSrcIndex(srcPath) {
   }
 }
 
-// ===== Asset Processing =====
-
 /**
  * Processes stylesheet links: copies CSS files to output and updates link href
  * @param {HTMLLinkElement} link - The link element to process
@@ -162,12 +154,10 @@ export async function copyResources(rootDir, srcDir, outDirPath) {
     const newElements = Array.from(newDoc.window.document.querySelectorAll("*"));
 
     for (const el of newElements) {
-      // Skip LINK and SCRIPT tags as they're already processed
       if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
 
       const src = el.getAttribute("src") || el.getAttribute("href");
 
-      // Only copy local resources, not external web links
       if (src && !isWebLink(src)) {
         const srcPath = path.join(rootDir, srcDir, src);
         const destPath = path.join(outDirPath, src);

package/compiler/utils.js

@@ -26,7 +26,6 @@ export function throwError(err) {
 export async function loadWithAssets(filePath) {
   let code = await fs.readFile(filePath, "utf8");
 
-  // Find all `import varName from "*.html"` or `import varName from "*.css"`
   const importRegex = /import\s+(\w+)\s+from\s+["'](.+?\.(html|css))["'];?/g;
 
   let match;
@@ -34,16 +33,13 @@ export async function loadWithAssets(filePath) {
     const varName = match[1];
     const relPath = match[2];
 
-    // Resolve relative path and read the asset file
     const absPath = path.resolve(path.dirname(filePath), relPath);
     let content = await fs.readFile(absPath, "utf8");
 
-    // Replace the import with a const assignment of the file contents
     const replacement = `const ${varName} = ${JSON.stringify(content)};`;
     code = code.replace(match[0], replacement);
   }
 
-  // Convert to data URL and import dynamically to avoid filesystem restrictions
   const dataUrl =
     "data:text/javascript;base64," +
     Buffer.from(code).toString("base64");

package/package.json

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

package/types/index.js

@@ -1,135 +0,0 @@
-const iconsType = "home" | "search" | "menu" | "settings" | "favorite" | "account_circle" | "shopping_cart" | "notifications" | "info" | "help" | "exit_to_app" | "check_circle" | "close" | "edit" | "delete" | "add" | "arrow_back" | "arrow_forward" | "play_arrow" | "pause" | "stop" | "camera_alt" | "photo" | "alarm" | "event" | "attach_file" | "print" | "share" | "cloud" | "cloud_upload" | "cloud_download" | "lock" | "lock_open" | "visibility" | "visibility_off" | "phone" | "email" | "map" | "place" | "directions" | "train" | "directions_car" | "directions_bike" | "school" | "work" | "lightbulb" | "battery_full" | "battery_std" | "wifi" | "bluetooth";
-const iconsArray = [
-        "home", "search", "menu", "settings", "favorite", "account_circle",
-        "shopping_cart", "notifications", "info", "help", "exit_to_app",
-        "check_circle", "close", "edit", "delete", "add", "arrow_back",
-        "arrow_forward", "play_arrow", "pause", "stop", "camera_alt",
-        "photo", "alarm", "event", "attach_file", "print", "share",
-        "cloud", "cloud_upload", "cloud_download", "lock", "lock_open",
-        "visibility", "visibility_off", "phone", "email", "map", "place",
-        "directions", "train", "directions_car", "directions_bike", "school",
-        "work", "lightbulb", "battery_full", "battery_std", "wifi", "bluetooth"
-];
-/**
- * An instrinsic object that contains chocola types
- */
-const ct = {};
-/**
- * Creates an interface for the component static context
- * @param {object} ctxInterface 
- */
-ct.defCtx = (ctxInterface) => {
-        if (!ctxInterface) return undefined;
-        if (typeof ctxInterface !== "object") return;
-        return ctxInterface;
-}
-
-ct.Number = class Number {
-        /**
-         * @param {number} value 
-         * @returns 
-         */
-        constructor(value) {
-                if (!value) return undefined;
-                if (typeof value !== "number") return;
-                return value;
-        }
-        /**
-         * @param {number} min 
-         * @param {number} max 
-         * @returns {number}
-         */
-        clamp(min, max) {
-                return Math.min(Math.max(this.value, min), max);
-        }
-        /**
-         * @param {number} min 
-         * @returns {number}
-         */
-        min(min) {
-                return Math.min(this.value, min);
-        }
-        /**
-         * @param {number} max 
-         * @returns {number}
-         */
-        max(max) {
-                return Math.max(this.value, max);
-        }
-}
-/**
- * @param {number} value 
- */
-ct.Float = (value) => {
-        if (!value) return undefined;
-        if (Number.isInteger(value)) return;
-        return value;
-}
-/**
- * @param {number} value 
- */
-ct.Int = (value) => {
-        if (!value) return undefined;
-        if (!Number.isInteger(value)) return;
-        return value;
-}
-/**
- * @param {string} value 
- */
-ct.String = (value) => {
-        if (!value) return undefined;
-        if (typeof value !== "string") return;
-        return value;
-}
-/**
- * @param {boolean} value 
- */
-ct.Boolean = (value) => {
-        if (value === null) return undefined;
-        if (typeof value !== "boolean") return;
-        return value;
-}
-/**
- * @param {object} value 
- */
-ct.Object = (value) => {
-        if (!value) return undefined;
-        if (typeof value !== "object") return;
-        return value;
-}
-/**
- * @param {function} value 
- */
-ct.Function = (value) => {
-        if (!value) return undefined;
-        if (typeof value !== "function") return;
-        return value;
-}
-/**
- * @param {symbol} value 
- */
-ct.Symbol = (value) => {
-        if (!value) return undefined;
-        if (typeof value !== "symbol") return;
-        return value;
-}
-/**
- * @param {URLPattern | "none"} value 
- */
-ct.Url = (value) => {
-        if (!value) return undefined;
-        if (!value.startsWith("http://") || !value.startsWith("https://")) return;
-        return value;
-}
-/**
- * 
- * @param {"home" | "search" | "menu" | "settings" | "favorite" | "account_circle" | "shopping_cart" | "notifications" | "info" | "help" | "exit_to_app" | "check_circle" | "close" | "edit" | "delete" | "add" | "arrow_back" | "arrow_forward" | "play_arrow" | "pause" | "stop" | "camera_alt" | "photo" | "alarm" | "event" | "attach_file" | "print" | "share" | "cloud" | "cloud_upload" | "cloud_download" | "lock" | "lock_open" | "visibility" | "visibility_off" | "phone" | "email" | "map" | "place" | "directions" | "train" | "directions_car" | "directions_bike" | "school" | "work" | "lightbulb" | "battery_full" | "battery_std" | "wifi" | "bluetooth"} value 
- * @returns 
- */
-ct.Icon = (value) => {
-        if (!value) return "help";
-        if (!iconsArray.includes(value)) return "help";
-        return value;
-}
-
-export default ct;