chocola 1.5.2 → 2.0.0-next.1

package/compiler/component-processor.js

@@ -22,6 +22,28 @@ function scopeSelector(sel, cssId) {
 }
 
 function scopeCss(cssString, cssId) {
+  const keyframeRegex = /@(-webkit-)?keyframes\s+(\S+)/gi;
+  const animNames = new Set();
+  let match;
+  while ((match = keyframeRegex.exec(cssString))) {
+    animNames.add(match[2]);
+  }
+
+  if (animNames.size > 0) {
+    const sorted = [...animNames].sort((a, b) => b.length - a.length);
+    const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    for (const name of sorted) {
+      cssString = cssString.replace(
+        new RegExp(`(@(?:-webkit-)?keyframes\\s+)${esc(name)}`, "gi"),
+        `$1${name}-${cssId}`
+      );
+      cssString = cssString.replace(
+        new RegExp(`((?:animation|animation-name)\\s*:\\s*[^;{]*?)\\b${esc(name)}\\b`, "gi"),
+        `$1${name}-${cssId}`
+      );
+    }
+  }
+
   function findMatchingBrace(s, openIndex) {
     let depth = 0;
     for (let i = openIndex; i < s.length; i++) {
@@ -35,6 +57,8 @@ function scopeCss(cssString, cssId) {
     return s.length - 1;
   }
 
+  const scopeInnerAtRules = new Set(["@media", "@supports", "@container", "@layer"]);
+
   function processBlock(str) {
     str = str.replaceAll(":root", `.${cssId}`);
 
@@ -49,11 +73,16 @@ function scopeCss(cssString, cssId) {
       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 + "}";
+        const atKeyword = header.trim().split(/\s+/)[0].toLowerCase();
+        if (scopeInnerAtRules.has(atKeyword)) {
+          out += header + "{" + processBlock(inner) + "}";
+        } else {
+          out += header + "{" + inner + "}";
+        }
       } else {
+        const innerScoped = processBlock(inner);
         const selectors = header
           .split(",")
           .map(s => s.trim())
@@ -72,6 +101,23 @@ function scopeCss(cssString, cssId) {
   return processBlock(cssString);
 }
 
+const warnedDeprecated = new Set();
+function hasDelIfAttr(el, sourceLoc) {
+  if (el.hasAttribute("del-if") && !el.hasAttribute("del:if") && !warnedDeprecated.has(sourceLoc)) {
+    warnedDeprecated.add(sourceLoc);
+    const name = sourceLoc ? sourceLoc.split(/[\\/]/).pop() : "unknown";
+    console.warn(chalk.yellow(`[deprecation] "del-if" is deprecated in ${chalk.cyan(name)} and will be removed in Chocola 2. Use "del:if" instead.`));
+  }
+  return el.hasAttribute("del-if") || el.hasAttribute("del:if");
+}
+function getDelIfAttr(el) {
+  return el.getAttribute("del:if") ?? el.getAttribute("del-if");
+}
+function removeDelIfAttr(el) {
+  el.removeAttribute("del-if");
+  el.removeAttribute("del:if");
+}
+
 function interpolateNode(node, ctxProxy) {
   if (node.nodeType === 3) {
     node.textContent = node.textContent.replace(/\{([^}]+)\}/g, (_, expr) => {
@@ -93,7 +139,7 @@ function validateChainStructure(parent, sourceFile, sourceContent, parentContent
 
   for (const child of children) {
     const hasIf = child.hasAttribute("if");
-    const hasDelIf = child.hasAttribute("del-if");
+    const hasDelIf = hasDelIfAttr(child, sourceFile);
     const hasElif = child.hasAttribute("elif");
     const hasElse = child.hasAttribute("else");
 
@@ -224,7 +270,7 @@ export function processComponentElement(
       const condChain = condChains.get(parent);
 
       const hasIf = child.hasAttribute("if");
-      const hasDelIf = child.hasAttribute("del-if");
+      const hasDelIf = hasDelIfAttr(child, instance.__sourceFile || compName);
       const hasElif = child.hasAttribute("elif");
       const hasElse = child.hasAttribute("else");
 
@@ -257,8 +303,8 @@ export function processComponentElement(
             condChain.active = false;
           }
         } else if (hasIf || hasDelIf) {
-          const attr = hasIf ? "if" : "del-if";
-          const expr = child.getAttribute(attr).slice(1, -1);
+          const raw = hasIf ? child.getAttribute("if") : getDelIfAttr(child);
+          const expr = raw.slice(1, -1);
           const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
           condChain.active = true;
           if (fn(ctxProxy)) {
@@ -276,7 +322,7 @@ export function processComponentElement(
         return;
       }
 
-      const reservedAttrs = ["if", "del-if", "elif", "else"];
+      const reservedAttrs = ["if", "del-if", "del:if", "elif", "else"];
 
       Array.from(child.attributes).forEach(attribute => {
         if (!attribute || attribute === undefined) return;
@@ -321,7 +367,7 @@ export function processComponentElement(
         }
         child.removeAttribute("if");
       } else if (hasDelIf) {
-        const expr = child.getAttribute("del-if").slice(1, -1);
+        const expr = getDelIfAttr(child).slice(1, -1);
         const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);
         condChain.active = true;
         if (fn(ctxProxy)) {
@@ -330,7 +376,7 @@ export function processComponentElement(
           child.remove();
           condChain.rendered = false;
         }
-        child.removeAttribute("del-if");
+        removeDelIfAttr(child);
       } else if (hasElif) {
         const expr = child.getAttribute("elif").slice(1, -1);
         const fn = new Function("ctx", `with(ctx) { return (${expr}); }`);

package/compiler/dom-processor.js

@@ -44,7 +44,15 @@ export function extractContextFromElement(element) {
   const ctx = {};
   for (const attr of element.attributes) {
     const key = attr.name;
-    ctx[key] = attr.value;
+    const val = attr.value;
+    const matches = [...val.matchAll(/\{([^}]+)\}/g)];
+    if (matches.length === 1 && matches[0][0] === val) {
+      try {
+        ctx[key] = Function(`"use strict"; return (${matches[0][1]})`)();
+        continue;
+      } catch {}
+    }
+    ctx[key] = val;
   }
   return ctx;
 }

package/compiler/index.js

@@ -2,26 +2,26 @@ import { promises as fs } from "fs";
 import chalk from "chalk";
 import { loadConfig, resolvePaths } from "./config.js";
 import {
-    createDOM,
-    validateAppContainer,
-    getAppElements,
-    getAssetLinks,
-    appendRuntimeScript,
-    appendStylesheetLink,
-    serializeDOM,
-    writeHTMLOutput,
-    writeCSSOutput,
+  createDOM,
+  validateAppContainer,
+  getAppElements,
+  getAssetLinks,
+  appendRuntimeScript,
+  appendStylesheetLink,
+  serializeDOM,
+  writeHTMLOutput,
+  writeCSSOutput,
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
 import { genRandomId, throwError } from "./utils.js";
 import {
-    copyResources,
-    copyStaticDir,
-    getComponents,
-    getSrcIndex,
-    processIcons,
-    processStylesheet,
+  copyResources,
+  copyStaticDir,
+  getComponents,
+  getSrcIndex,
+  processIcons,
+  processStylesheet,
 } from "./pipeline.js";
 
 
@@ -31,10 +31,10 @@ ________________________________________________________________________
         `);
 
 function logBanner() {
-    console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-    console.log(logSeparation);
-    console.log(
-        chalk.hex("#945e33")(`
+  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
+  console.log(logSeparation);
+  console.log(
+    chalk.hex("#945e33")(`
 
 
      ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
@@ -46,64 +46,64 @@ function logBanner() {
      ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
      ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
      ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-    ░                         ░                                  
+     ░                         ░                                  
 
 
         `)
-    );
+  );
 }
 
 function logSuccess(outDirPath) {
-    console.log(`
+  console.log(`
               ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
               ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
             ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
                                                 
         `);
-    console.log(
-        chalk.bold.green(">"),
-        "Project bundled succesfully at",
-        chalk.green.underline(outDirPath) + "\n\n"
-    );
+  console.log(
+    chalk.bold.green(">"),
+    "Project bundled succesfully at",
+    chalk.green.underline(outDirPath) + "\n\n"
+  );
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
-    if (emptyOutDir) {
-        await fs.rm(outDirPath, { recursive: true, force: true });
-        await fs.mkdir(outDirPath);
-    }
+  if (emptyOutDir) {
+    await fs.rm(outDirPath, { recursive: true, force: true });
+    await fs.mkdir(outDirPath);
+  }
 }
 
 async function loadAndDisplayComponents(srcComponentsPath) {
-    const foundComponents = await getComponents(srcComponentsPath);
-    const { loadedComponents, notDefComps, componentsLib } = foundComponents;
+  const foundComponents = await getComponents(srcComponentsPath);
+  const { loadedComponents, notDefComps, componentsLib } = foundComponents;
 
-    console.log(`       LOADING COMPONENTS`);
-    console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-    console.log("   ", componentsLib, "\n");
+  console.log(`       LOADING COMPONENTS`);
+  console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
+  console.log("   ", componentsLib, "\n");
 
-    if (notDefComps.length > 0) {
-        console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-        console.log("   ", notDefComps);
-    }
+  if (notDefComps.length > 0) {
+    console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
+    console.log("   ", notDefComps);
+  }
 
-    return loadedComponents;
+  return loadedComponents;
 }
 
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
-    const { stylesheets, icons } = getAssetLinks(doc);
-    const fileIds = [];
-    let cssContents = [];
+  const { stylesheets, icons } = getAssetLinks(doc);
+  const fileIds = [];
+  let cssContents = [];
 
-    for (const link of stylesheets) {
-        const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
-        cssContents.push(css);
-    }
+  for (const link of stylesheets) {
+    const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+    cssContents.push(css);
+  }
 
-    for (const link of icons) {
-        await processIcons(link, rootDir, srcDir, outDirPath);
-    }
-    return cssContents
+  for (const link of icons) {
+    await processIcons(link, rootDir, srcDir, outDirPath);
+  }
+  return cssContents
 }
 
 /**
@@ -115,54 +115,163 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
  * >} config
  */
 export default async function runtime(rootDir, buildConfig) {
-    const isHotReload = buildConfig?.isHotReload || null;
-    !isHotReload && logBanner();
-
-    const config = await loadConfig(rootDir);
-    const paths = resolvePaths(rootDir, config);
-    !isHotReload && console.log(logSeparation);
-
-    await setupOutputDirectory(paths.outDir, config.emptyOutDir);
-
-    const indexFiles = await getSrcIndex(paths.src);
-    const srcIndexContent = indexFiles.srcHtmlFile || indexFiles.srcChocoFile;
-    const pageSourcePath = indexFiles.srcPath;
-
-    const loadedComponents = await loadAndDisplayComponents(paths.components);
-    !isHotReload && console.log(logSeparation);
-    !isHotReload && console.log(`       BUNDLING STATIC BUILD`);
-    !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
-    !isHotReload && console.log(logSeparation);
-
-    const dom = createDOM(srcIndexContent);
-    const doc = dom.window.document;
-    const appContainer = validateAppContainer(doc);
-    const appElements = getAppElements(appContainer);
-
-    const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
-    const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
-    const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
-
-    if (scopesCss) {
-        const fileName = "sc-" + genRandomId(null, 6) + ".css";
-        await writeCSSOutput(scopesCss, paths.outDir, fileName);
-        appendStylesheetLink(doc, fileName);
-    };
-
-    appendRuntimeScript(doc, runtimeFilename);
-    const html = await serializeDOM(dom);
-    await writeHTMLOutput(html, paths.outDir);
-
-    try {
-        if (config.assetImport === "static") {
-            await copyStaticDir(paths.src, paths.outDir);
+  const isHotReload = buildConfig?.isHotReload || null;
+  !isHotReload && logBanner();
+
+  const config = await loadConfig(rootDir);
+  const paths = resolvePaths(rootDir, config);
+  !isHotReload && console.log(logSeparation);
+
+  await setupOutputDirectory(paths.outDir, config.emptyOutDir);
+
+  const indexFiles = await getSrcIndex(paths.src);
+  const srcIndexContent = indexFiles.srcHtmlFile;
+  const pageSourcePath = indexFiles.srcPath;
+
+  const loadedComponents = await loadAndDisplayComponents(paths.components);
+  !isHotReload && console.log(logSeparation);
+  !isHotReload && console.log(`       BUNDLING STATIC BUILD`);
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
+  !isHotReload && console.log(logSeparation);
+
+  const dom = createDOM(srcIndexContent);
+  const doc = dom.window.document;
+  const appContainer = validateAppContainer(doc);
+
+  const warnedDeprecated = new Set();
+  function hasDelIfAttr(el, sourceLoc) {
+    if (el.hasAttribute("del-if") && !el.hasAttribute("del:if") && !warnedDeprecated.has(sourceLoc)) {
+      warnedDeprecated.add(sourceLoc);
+      const name = sourceLoc ? sourceLoc.split(/[\\/]/).pop() : "unknown";
+      console.warn(chalk.yellow(`[deprecation] "del-if" is deprecated in ${chalk.cyan(name)} and will be removed in Chocola 2. Use "del:if" instead.`));
+    }
+    return el.hasAttribute("del-if") || el.hasAttribute("del:if");
+  }
+  function getDelIfAttr(el) {
+    return el.getAttribute("del:if") ?? el.getAttribute("del-if");
+  }
+  function removeDelIfAttr(el) {
+    el.removeAttribute("del-if");
+    el.removeAttribute("del:if");
+  }
+
+  function processPageConditionals(parent) {
+    const children = [...parent.children];
+    let chainActive = false;
+    let chainRendered = false;
+
+    for (const child of children) {
+      const hasIf = child.hasAttribute("if");
+      const hasDelIf = hasDelIfAttr(child, pageSourcePath);
+      const hasElif = child.hasAttribute("elif");
+      const hasElse = child.hasAttribute("else");
+
+      if (hasElif || hasElse) {
+        if (!chainActive) continue;
+        if (chainRendered) { child.remove(); continue; }
+      }
+
+      if (hasIf) {
+        const raw = child.getAttribute("if");
+        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+        const fn = new Function(`"use strict"; return (${expr})`);
+        const result = fn();
+        chainActive = true;
+        if (result) {
+          chainRendered = true;
         } else {
-            await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
+          child.remove();
+          chainRendered = false;
         }
-    } catch (err) {
-        throwError(err.message || err);
+        child.removeAttribute("if");
+      } else if (hasDelIf) {
+        const raw = getDelIfAttr(child);
+        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+        const fn = new Function(`"use strict"; return (${expr})`);
+        const result = fn();
+        chainActive = true;
+        if (result) {
+          chainRendered = true;
+        } else {
+          child.remove();
+          chainRendered = false;
+        }
+        removeDelIfAttr(child);
+      } else if (hasElif) {
+        const raw = child.getAttribute("elif");
+        const expr = raw.startsWith("{") ? raw.slice(1, -1) : raw;
+        const fn = new Function(`"use strict"; return (${expr})`);
+        const result = fn();
+        if (result) {
+          chainRendered = true;
+        } else {
+          child.remove();
+        }
+        child.removeAttribute("elif");
+      } else if (hasElse) {
+        chainRendered = true;
+        chainActive = false;
+        child.removeAttribute("else");
+      } else {
+        chainActive = false;
+        chainRendered = false;
+      }
+
+      if (child.parentNode) {
+        processPageConditionals(child);
+      }
     }
+  }
+  processPageConditionals(appContainer);
+
+  const appElements = getAppElements(appContainer);
+  const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents, pageSourcePath, srcIndexContent);
+  const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
+  const globalCss = (await processAssets(doc, rootDir, config.srcDir, paths.outDir)).join("\n");
+
+  if (scopesCss) {
+    const fileName = "sc-" + genRandomId(null, 6) + ".css";
+    await writeCSSOutput(scopesCss, paths.outDir, fileName);
+    appendStylesheetLink(doc, fileName);
+  };
+
+  appendRuntimeScript(doc, runtimeFilename);
+  const html = await serializeDOM(dom);
+  await writeHTMLOutput(html, paths.outDir);
 
-    !isHotReload && logSuccess(paths.outDir);
-    isHotReload && console.log("Dev server updated");
-}
+  try {
+    if (config.assetImport === "static") {
+      await copyStaticDir(paths.src, paths.outDir);
+    } else {
+      await copyResources(rootDir, scopesCss, globalCss, config.srcDir, paths.outDir);
+    }
+  } catch (err) {
+    throwError(err.message || err);
+  }
+
+  !isHotReload && logSuccess(paths.outDir);
+  isHotReload && console.log("Dev server updated");
+}
+
+/**
+ * An intrinsic object that contains the Chocola App methods.
+ */
+export const app = {
+  /**
+ *  Initializes your Chocola App using a root directory.
+ * 
+ * ```js
+ * import { app } from "chocola/compiler"
+ import path from "path";
+ import { fileURLToPath } from "url";
+ 
+ const __filename = fileURLToPath(import.meta.url);
+ const __dirname = path.dirname(__filename);
+ 
+ app.build(__dirname);
+ ```
+ * @example
+ * @param {PathLike} __rootdir the directory where your Chocola App is
+ */
+  build(__rootdir) { runtime(__rootdir) }
+};

package/compiler/pipeline.js

@@ -70,32 +70,19 @@ export async function getComponents(libDir) {
  */
 export async function getSrcIndex(srcPath) {
   const srcHtmlPath = path.join(srcPath, "index.html");
-  const srcChocoPath = path.join(srcPath, "index.choco");
 
   const htmlExists = await checkFile(srcHtmlPath);
-  const chocoExists = await checkFile(srcChocoPath);
 
   let srcHtmlFile = null;
-  let srcChocoFile = null;
-
-  if (htmlExists && chocoExists) {
-    throwError(
-      "Can't have both .choco and .html source index files at a time: please remove one of the two"
-    );
-  }
 
   if (htmlExists) {
     try {
       srcHtmlFile = await readMyFile(srcHtmlPath);
-      return { srcHtmlFile, srcChocoFile, srcPath: srcHtmlPath };
+      return { srcHtmlFile, srcPath: srcHtmlPath };
     } catch (err) {
       throwError(err);
     }
   }
-
-  if (chocoExists) {
-    throwError(".choco files are not supported yet");
-  }
 }
 
 /**
@@ -244,7 +231,7 @@ export async function copyResources(rootDir, scopesCss, globalCss, srcDir, outDi
             `Failed to copy resource from inline style on <${el.tagName.toLowerCase()}> url("${filePath}")` +
             (getComponentSource(el) ? ` in component "${getComponentSource(el)}"` : "") +
             `: ${err.message || err}`
-          );
+          );
           }
         }
       }

package/dev/index.js

@@ -152,4 +152,27 @@ export async function serve(__rootdir) {
   server.listen(__config.port, __config.hostname, () => {
     console.log(`Chocola App running at http://${__config.hostname}:${__config.port}/`);
   });
-}
+}
+
+/**
+ * An intrinsic object that contains the Chocola Dev methods.
+ */
+export const dev = {
+  /**
+*  Initializes your Chocola dev server using a root directory.
+* 
+* ```js
+* import { app } from "chocola/compiler"
+import path from "path";
+import { fileURLToPath } from "url";
+ 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+ 
+app.build(__dirname);
+```
+* @example
+* @param {PathLike} __rootdir the directory where your Chocola App is
+*/
+  server(__rootdir) { serve(__rootdir) }
+};

package/index.js

@@ -1,31 +0,0 @@
-import compile from "./compiler/index.js";
-import * as development from "./dev/index.js";
-
-/**
- * An intrinsic object that contains the Chocola App methods.
- */
-export const app = {
-    /**
-     *  Initializes your Chocola App using a root directory and a source directory.
-     * 
-     * ```js
-     * import { app } from "chocola"
-     import path from "path";
-     import { fileURLToPath } from "url";
-     
-     const __filename = fileURLToPath(import.meta.url);
-     const __dirname = path.dirname(__filename);
-     
-     app.build(__dirname, "src");
-     ```
-     * @example
-     * @param {PathLike} __rootdir the directory where your Chocola App is
-     * @param {PathLike} __srcdir the directory where your app sources files are
-     * @returns {Object}
-     */
-    build(__rootdir, __srcdir) { compile(__rootdir, __srcdir) }
-}
-
-export const dev = {
-    server(__rootdir, __srcdir, port) { development.serve(__rootdir, __srcdir, port) }
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.5.2",
+  "version": "2.0.0-next.1",
   "description": "The sweetest way to build the web",
   "keywords": [
     "web",
@@ -31,7 +31,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "exports": {
-    ".": "./index.js",
+    "./compiler": "./compiler/index.js",
+    "./dev": "./dev/index.js",
     "./types": "./types/index.js"
   },
   "dependencies": {

package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto