chocola 1.3.10 → 1.4.1

package/compiler/component-processor.js

@@ -5,16 +5,60 @@ import chalk from "chalk";
 import beautify from "js-beautify";
 
 function scopeCss(cssString, cssId) {
-  return cssString.replace(/(^|\})([^{}]+)\{/g, (match, before, selector) => {
-    if (selector.trim().startsWith("@")) {
-      return match;
+  function findMatchingBrace(s, openIndex) {
+    let depth = 0;
+    for (let i = openIndex; i < s.length; i++) {
+      const ch = s[i];
+      if (ch === '{') depth++;
+      else if (ch === '}') {
+        depth--;
+        if (depth === 0) return i;
+      }
     }
-    const scoped = selector
-      .split(",")
-      .map(sel => `.${cssId} ${sel.trim()}`)
-      .join(", ");
-    return `${before}${scoped}{`;
-  });
+    return s.length - 1;
+  }
+
+  function processBlock(str) {
+    str = str.replaceAll(":root", `.${cssId}`);
+
+    let out = "";
+    let i = 0;
+    while (i < str.length) {
+      const braceIndex = str.indexOf('{', i);
+      if (braceIndex === -1) {
+        out += str.slice(i);
+        break;
+      }
+      const header = str.substring(i, braceIndex);
+      const endBrace = findMatchingBrace(str, braceIndex);
+      const inner = str.substring(braceIndex + 1, endBrace);
+      const innerScoped = processBlock(inner);
+
+      if (header.trim().startsWith("@")) {
+        out += header + "{" + innerScoped + "}";
+      } else {
+        const selectors = header
+          .split(",")
+          .map(s => s.trim())
+          .filter(Boolean);
+        const scopedHeader = selectors.length > 0
+          ? selectors.map(sel => {
+            const s = sel.trim();
+            if (s.startsWith("." + cssId)) {
+              return s;
+            }
+            return `.${cssId} ${s}`;
+          }).join(", ")
+          : header;
+        out += scopedHeader + "{" + innerScoped + "}";
+      }
+
+      i = endBrace + 1;
+    }
+    return out;
+  }
+
+  return processBlock(cssString);
 }
 
 function interpolateNode(node, ctxProxy) {
@@ -31,7 +75,6 @@ function interpolateNode(node, ctxProxy) {
   }
 }
 
-
 /**
  * Processes a single component element and inserts it into the DOM
  * @param {Element} element
@@ -50,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;
 
@@ -62,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;
@@ -82,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;
@@ -139,17 +205,14 @@ 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);
       if (!cssId) {
         cssId = genRandomId(cssScopes, 8, true);
         cssScopesMap.set(compName, cssId);
+      }
+      if (fragment.firstChild && fragment.firstChild.nodeType === 1) {
         fragment.firstChild.classList.add(cssId);
       }
       style = scopeCss(style, cssId);

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