chocola 1.3.1 → 1.3.2

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) {
@@ -72,7 +89,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/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.2",
+  "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"
+  }
+}