chocola 1.3.11 → 1.4.2

package/compiler/component-processor.js

@@ -43,12 +43,12 @@ function scopeCss(cssString, cssId) {
           .filter(Boolean);
         const scopedHeader = selectors.length > 0
           ? selectors.map(sel => {
-              const s = sel.trim();
-              if (s.startsWith("." + cssId)) {
-                return s;
-              }
-              return `.${cssId} ${s}`;
-            }).join(", ")
+            const s = sel.trim();
+            if (s.startsWith("." + cssId)) {
+              return s;
+            }
+            return `.${cssId} ${s}`;
+          }).join(", ")
           : header;
         out += scopedHeader + "{" + innerScoped + "}";
       }
@@ -61,7 +61,6 @@ function scopeCss(cssString, cssId) {
   return processBlock(cssString);
 }
 
-
 function interpolateNode(node, ctxProxy) {
   if (node.nodeType === 3) {
     node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
@@ -76,7 +75,6 @@ function interpolateNode(node, ctxProxy) {
   }
 }
 
-
 /**
  * Processes a single component element and inserts it into the DOM
  * @param {Element} element
@@ -95,11 +93,24 @@ export function processComponentElement(
   runtimeMap,
   cssScopes,
   cssScopesMap,
-  scopedStyles
+  scopedStyles,
+  renderChain = [],
+  staticCtxRegistry
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
-  const ctx = extractContextFromElement(element);
+  const instance = loadedComponents.get(compName);
+
+  if (!instance || instance === undefined) return false;
+  if (renderChain && renderChain.includes(compName)) return false;
+
+  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, {
@@ -107,33 +118,56 @@ export function processComponentElement(
     get(target, key) { return target[key]; }
   });
 
-  const instance = loadedComponents.get(compName);
-  if (!instance || instance === undefined) return false;
-
   if (instance.body) {
     let body = instance.body;
 
     const fragment = JSDOM.fragment(body);
+
+    const slotFragment = JSDOM.fragment(srcInnerHtml);
+    Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
+      slot.replaceWith(slotFragment);
+    });
+
     const children = Array.from(fragment.querySelectorAll("*"));
 
     children.forEach(child => {
       const reservedAttrs = ["if", "del-if"];
+
       Array.from(child.attributes).forEach(attribute => {
         if (!attribute || attribute === undefined) return;
         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 "";
+            }
+          }
         );
       });
 
+      processComponentElement(
+        child,
+        loadedComponents,
+        runtimeChunks,
+        compIdColl,
+        letterState,
+        runtimeMap,
+        cssScopes,
+        cssScopesMap,
+        scopedStyles,
+        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();
         }
@@ -184,11 +218,6 @@ export function processComponentElement(
       }
     }
 
-    const slotFragment = JSDOM.fragment(srcInnerHtml);
-    Array.from(fragment.querySelectorAll("slot")).forEach(slot => {
-      slot.replaceWith(slotFragment);
-    });
-
     let style = instance.styles && instance.styles.toString();
     if (style) {
       let cssId = cssScopesMap && cssScopesMap.get(compName);
@@ -228,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/compiler/pipeline.js

@@ -103,6 +103,7 @@ export async function getSrcIndex(srcPath) {
 export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileIds) {
   try {
     const href = link.href;
+    if (href.startsWith("http://") || href.startsWith("https://")) return;
     const stylesheetPath = path.join(rootDir, srcDir, href);
     const css = await fs.readFile(stylesheetPath, { encoding: "utf8" });
     const cssFileName = "css-" + genRandomId(fileIds, 6) + ".css";
@@ -233,6 +234,7 @@ export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDi
     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);
 

package/package.json

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