chocola 1.3.7 → 1.3.9

package/compiler/component-processor.js

@@ -1,6 +1,6 @@
 import { JSDOM } from "jsdom";
 import { extractContextFromElement } from "./dom-processor.js";
-import { genRandomId, incrementAlfabet } from "./utils.js";
+import { genRandomId, incrementAlfabet, throwError } from "./utils.js";
 import chalk from "chalk";
 import beautify from "js-beautify";
 
@@ -17,6 +17,20 @@ function scopeCss(cssString, cssId) {
   });
 }
 
+function interpolateNode(node, ctxProxy) {
+  if (node.nodeType === 3) {
+    node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
+      try {
+        return Function("ctx", `with(ctx) { return (${expr}); }`)(ctxProxy);
+      } catch {
+        return "";
+      }
+    });
+  } else {
+    node.childNodes.forEach(child => interpolateNode(child, ctxProxy));
+  }
+}
+
 
 /**
  * Processes a single component element and inserts it into the DOM
@@ -43,31 +57,47 @@ export function processComponentElement(
   const ctx = extractContextFromElement(element);
   const srcInnerHtml = element.innerHTML;
 
+  const ctxProxy = new Proxy(ctx, {
+    has() { return true; },
+    get(target, key) { return target[key]; }
+  });
+
   const instance = loadedComponents.get(compName);
   if (!instance || instance === undefined) return false;
 
   if (instance.body) {
     let body = instance.body;
-    body = body.replace(
-      /(?<!\b(?:if|del-if)=)\{(\w+)\}/g,
-      (_, key) => ctx[key] || ""
-    );
+
     const fragment = JSDOM.fragment(body);
     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] ?? ""
+        );
+      });
+
       ["if", "del-if"].forEach(statement => {
         const statAtt = child.getAttribute(statement);
         if (!statAtt) return;
         const expr = statAtt.slice(1, -1);
-        const fn = new Function("ctx", `return ctx.${expr} === true || ctx.${expr} === '{true}'`);
-        if (!fn(ctx)) {
+        const eva = ctxProxy[expr] ? ctxProxy[expr].slice(1, -1) : null;
+        const fn = new Function("ctx", `{ return (${eva}); }`);
+        if (!fn()) {
           if (statement === "if") child.style.display = "none";
           if (statement === "del-if") child.remove();
         }
-
         child.removeAttribute(statement);
       });
+
+      interpolateNode(child, ctxProxy)
     });
+
     const firstChild = fragment.firstChild;
 
     if (firstChild && firstChild.nodeType === 1) {

package/compiler/index.js

@@ -93,14 +93,17 @@ async function loadAndDisplayComponents(srcComponentsPath) {
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
     const { stylesheets, icons } = getAssetLinks(doc);
     const fileIds = [];
+    let cssContents = [];
 
     for (const link of stylesheets) {
-        await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+        const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+        cssContents.push(css);
     }
 
     for (const link of icons) {
         await processIcons(link, rootDir, srcDir, outDirPath, fileIds);
     }
+    return cssContents
 }
 
 /**
@@ -137,7 +140,8 @@ export default async function runtime(rootDir, buildConfig) {
 
     const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents);
     const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
-    await processAssets(doc, rootDir, config.srcDir, paths.outDir);
+    const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
+    console.log(globalCss)
 
     if (scopesCss) {
         const fileName = "sc-" + genRandomId(null, 6) + ".css";
@@ -149,7 +153,7 @@ export default async function runtime(rootDir, buildConfig) {
     const html = await serializeDOM(dom);
     await writeHTMLOutput(html, paths.outDir);
 
-    await copyResources(rootDir, config.srcDir, paths.outDir);
+    await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
 
     !isHotReload && logSuccess(paths.outDir);
     isHotReload && console.log("Dev server updated");

package/compiler/pipeline.js

@@ -109,6 +109,8 @@ export async function processStylesheet(link, rootDir, srcDir, outDirPath, fileI
 
     await fs.writeFile(path.join(outDirPath, cssFileName), css);
     link.setAttribute("href", "./" + cssFileName);
+
+    return css;
   } catch (err) {
     throwError(err);
   }
@@ -132,6 +134,51 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
   }
 }
 
+export function getCssAssets(css) {
+  const results = new Set();
+
+  const urlRegex = /url\(([^)]+)\)/gi;
+
+  const importStringRegex = /@import\s+["']([^"']+)["']/gi;
+
+  const importUrlRegex = /@import\s+url\(([^)]+)\)/gi;
+
+  const clean = (raw) => {
+    let p = raw.trim();
+
+    if (
+      (p.startsWith('"') && p.endsWith('"')) ||
+      (p.startsWith("'") && p.endsWith("'"))
+    ) {
+      p = p.slice(1, -1);
+    }
+
+    if (p.startsWith("data:")) return null;
+
+    return p;
+  };
+
+  let match;
+
+  while ((match = urlRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  while ((match = importStringRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  while ((match = importUrlRegex.exec(css))) {
+    const p = clean(match[1]);
+    if (p) results.add(p);
+  }
+
+  return [...results];
+}
+
+
 /**
  * Copies all local resources (images, fonts, etc.) to output directory
  * Excludes web links and script/link tags
@@ -140,11 +187,12 @@ export async function processIcons(link, rootDir, srcDir, outDirPath) {
  * @param {import("fs").PathLike} outDirPath - Output directory path
  * @throws {Error} if resources cannot be copied
  */
-export async function copyResources(rootDir, srcDir, outDirPath) {
+export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDirPath) {
   try {
     const newIndex = await fs.readFile(path.join(outDirPath, "index.html"), "utf8");
     const newDoc = new JSDOM(newIndex);
     const newElements = Array.from(newDoc.window.document.querySelectorAll("*"));
+    const inlinePathsRegex = /url\((.*?)\)/gi;
 
     for (const el of newElements) {
       if (el.tagName === "LINK" || el.tagName === "SCRIPT") continue;
@@ -158,6 +206,43 @@ export async function copyResources(rootDir, srcDir, outDirPath) {
         await fs.mkdir(path.dirname(destPath), { recursive: true });
         await fs.copyFile(srcPath, destPath);
       }
+
+      const styles = el.getAttribute("style");
+
+      if (styles) {
+        let stylesMatch;
+        while ((stylesMatch = inlinePathsRegex.exec(styles)) !== null) {
+          let filePath = stylesMatch[1].trim();
+
+          if (
+            (filePath.startsWith('"') && filePath.endsWith('"')) ||
+            (filePath.startsWith("'") && filePath.endsWith("'"))
+          ) {
+            filePath = filePath.slice(1, -1);
+          }
+
+          const srcPath = path.join(rootDir, srcDir, filePath);
+          const destPath = path.join(outDirPath, filePath);
+
+          await fs.mkdir(path.dirname(destPath), { recursive: true });
+          await fs.copyFile(srcPath, destPath);
+        }
+      }
+    }
+
+    console.log(globalCss)
+    const cssAssets = [...getCssAssets(scopesCss), ...getCssAssets(globalCss)];
+    console.log(cssAssets)
+    for (const assetPath of cssAssets) {
+      try {
+        const srcPath = path.join(rootDir, srcDir, assetPath);
+        const destPath = path.join(outDirPath, assetPath);
+
+        await fs.mkdir(path.dirname(destPath), { recursive: true });
+        await fs.copyFile(srcPath, destPath);
+      } catch (err) {
+        throwError(err)
+      }
     }
   } catch (err) {
     throwError(err);

package/package.json

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