chocola 1.3.11 → 1.4.1

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,10 +93,16 @@ export function processComponentElement(
   runtimeMap,
   cssScopes,
   cssScopesMap,
-  scopedStyles
+  scopedStyles,
+  renderChain = []
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
+  const instance = loadedComponents.get(compName);
+
+  if (!instance || instance === undefined) return false;
+  if (renderChain && renderChain.includes(compName)) return false;
+
   const ctx = extractContextFromElement(element);
   const srcInnerHtml = element.innerHTML;
 
@@ -107,17 +111,21 @@ 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;
@@ -127,6 +135,19 @@ export function processComponentElement(
         );
       });
 
+      processComponentElement(
+        child,
+        loadedComponents,
+        runtimeChunks,
+        compIdColl,
+        letterState,
+        runtimeMap,
+        cssScopes,
+        cssScopesMap,
+        scopedStyles,
+        renderChain.concat(compName)
+      );
+
       ["if", "del-if"].forEach(statement => {
         const statAtt = child.getAttribute(statement);
         if (!statAtt) return;
@@ -184,11 +205,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);

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.1",
   "description": "The sweetest way to build reactive web apps",
   "keywords": [
     "web",