chocola 1.4.1 → 1.4.2

package/compiler/component-processor.js

@@ -94,7 +94,8 @@ export function processComponentElement(
   cssScopes,
   cssScopesMap,
   scopedStyles,
-  renderChain = []
+  renderChain = [],
+  staticCtxRegistry
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
@@ -103,7 +104,13 @@ export function processComponentElement(
   if (!instance || instance === undefined) return false;
   if (renderChain && renderChain.includes(compName)) return false;
 
-  const ctx = extractContextFromElement(element);
+  let ctx;
+  if (staticCtxRegistry && staticCtxRegistry.has(element)) {
+    ctx = staticCtxRegistry.get(element);
+  } else {
+    ctx = extractContextFromElement(element);
+    staticCtxRegistry && staticCtxRegistry.set(element, ctx);
+  }
   const srcInnerHtml = element.innerHTML;
 
   const ctxProxy = new Proxy(ctx, {
@@ -131,7 +138,13 @@ export function processComponentElement(
         if (reservedAttrs.includes(attribute.name)) return;
         attribute.value = attribute.value.replace(
           /\{([^}]+)\}/g,
-          (_, key) => ctx[key] ?? ""
+          (_, expr) => {
+            try {
+              return Function("ctx", `with(ctx) { return (${expr}); }`)(ctxProxy);
+            } catch {
+              return "";
+            }
+          }
         );
       });
 
@@ -145,16 +158,16 @@ export function processComponentElement(
         cssScopes,
         cssScopesMap,
         scopedStyles,
-        renderChain.concat(compName)
+        renderChain.concat(compName),
+        staticCtxRegistry
       );
 
       ["if", "del-if"].forEach(statement => {
         const statAtt = child.getAttribute(statement);
         if (!statAtt) return;
         const expr = statAtt.slice(1, -1);
-        const eva = ctxProxy[expr] ? ctxProxy[expr].slice(1, -1) : null;
-        const fn = new Function("ctx", `{ return (${eva}); }`);
-        if (!fn()) {
+        const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
+        if (!fn(ctxProxy)) {
           if (statement === "if") child.style.display = "none";
           if (statement === "del-if") child.remove();
         }
@@ -244,9 +257,10 @@ export function processAllComponents(appElements, loadedComponents) {
   let cssScopes = [];
   let cssScopesMap = new Map();
   let scopedStyles = [];
+  let staticCtxRegistry = new Map();
 
   appElements.forEach(el => {
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles);
+    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles, [], staticCtxRegistry);
   });
   const runtimeScript = runtimeChunks.join("\n");
   const hasComponents = runtimeChunks.length > 0;

package/package.json

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