chocola 1.3.1 → 1.3.3

package/compiler/component-processor.js

@@ -23,14 +23,31 @@ export function processComponentElement(
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
   const ctx = extractContextFromElement(element);
+  const srcInnerHtml = element.innerHTML;
 
   const instance = loadedComponents.get(compName);
   if (!instance || instance === undefined) return false;
 
   if (instance && instance.body) {
     let body = instance.body;
-    body = body.replace(/\{ctx\.(\w+)\}/g, (_, key) => ctx[key] || "");
+    body = body.replace(
+      /(?<!\b(?:if|del-if)=)\{ctx\.(\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();
+      }
+    });
     const firstChild = fragment.firstChild;
 
     if (firstChild && firstChild.nodeType === 1) {
@@ -57,7 +74,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) {
@@ -72,7 +88,14 @@ export function processComponentElement(
         runtimeChunks.push(`${letter}RUNTIME(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
       }
     }
+
+    const slotFragment = JSDOM.fragment(srcInnerHtml);
+    Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
+      slot.replaceWith(slotFragment);
+    });
+
     element.replaceWith(fragment);
+
     return true;
   }
 

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,41 +1,41 @@
-{
-  "name": "chocola",
-  "version": "1.3.1",
-  "description": "The sweetest way to build reactive web apps",
-  "keywords": [
-    "web",
-    "app",
-    "pipeline",
-    "framework",
-    "gui",
-    "components",
-    "ui"
-  ],
-  "homepage": "https://github.com/sad-gabi/chocola#readme",
-  "bugs": {
-    "url": "https://github.com/sad-gabi/chocola/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sad-gabi/chocola.git"
-  },
-  "license": "MIT",
-  "author": "SadGabi",
-  "type": "module",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "exports": {
-    ".": "./index.js",
-    "./types": "./types/index.js"
-  },
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "js-beautify": "^1.15.4",
-    "jsdom": "^27.4.0"
-  },
-  "devDependencies": {
-    "js-beautify": "^1.15.4"
-  }
-}
+{
+  "name": "chocola",
+  "version": "1.3.3",
+  "description": "The sweetest way to build reactive web apps",
+  "keywords": [
+    "web",
+    "app",
+    "pipeline",
+    "framework",
+    "gui",
+    "components",
+    "ui"
+  ],
+  "homepage": "https://github.com/sad-gabi/chocola#readme",
+  "bugs": {
+    "url": "https://github.com/sad-gabi/chocola/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sad-gabi/chocola.git"
+  },
+  "license": "MIT",
+  "author": "SadGabi",
+  "type": "module",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types/index.js"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "js-beautify": "^1.15.4",
+    "jsdom": "^27.4.0"
+  },
+  "devDependencies": {
+    "js-beautify": "^1.15.4"
+  }
+}