chocola 1.5.1 → 1.6.0

package/README.md

@@ -12,25 +12,29 @@ Chocola is a JavaScript library for creating web user interfaces.
   <button title={title}>{text}</button>
 
   <div class="main">
-    <div class="number">${count}</div>
+    <div class="number">{count}</div>
   </div>
 </div>
 ```
 
 ```js
-import HTML from "./html/counter.html";
-import CSS from "./css/counter.css";
+import body from "./html/counter.html";
+import styles from "./css/counter.css";
 
 function RUNTIME(self, ctx) {
-  self.querySelector("button").addEventListener("click", () => {
+  const btn = self.querySelector("button");
+  const number = self.querySelector(".number");
+
+  btn.addEventListener("click", () => {
     ctx.count++;
+    number.textContent = ctx.count;
   })
 }
 
 export default function Counter() {
   return {
-    body: HTML,
-    styles: CSS,
+    body,
+    styles,
     script: RUNTIME
   }
 }

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

@@ -1,168 +1,254 @@
-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,
-} 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,
-} from "./pipeline.js";
-
-
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
-
-function logBanner() {
-    console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-    console.log(logSeparation);
-    console.log(
-        chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-    ░                         ░                                  
-
-
-        `)
-    );
-}
-
-function logSuccess(outDirPath) {
-    console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
-    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);
-    }
-}
-
-async function loadAndDisplayComponents(srcComponentsPath) {
-    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");
-
-    if (notDefComps.length > 0) {
-        console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-        console.log("   ", notDefComps);
-    }
-
-    return loadedComponents;
-}
-
-async function processAssets(doc, rootDir, srcDir, outDirPath) {
-    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 icons) {
-        await processIcons(link, rootDir, srcDir, outDirPath);
-    }
-    return cssContents
-}
-
-/**
- * Compiles a static build of your Chocola project from the directory provided.
- * @param {import("fs").PathLike} rootDir
- * @param {Object<{
- * isHotReload?: boolean
- * }
- * >} 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);
-        } 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");
-}
+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,
+} 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,
+} from "./pipeline.js";
+
+
+const logSeparation = chalk.yellow(`
+________________________________________________________________________
+========================================================================
+        `);
+
+function logBanner() {
+    console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
+    console.log(logSeparation);
+    console.log(
+        chalk.hex("#945e33")(`
+
+
+     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
+     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
+     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
+     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
+     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
+     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
+     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
+     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
+     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
+     ░                         ░                                  
+
+
+        `)
+    );
+}
+
+function logSuccess(outDirPath) {
+    console.log(`
+              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
+              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
+            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
+                                                
+        `);
+    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);
+    }
+}
+
+async function loadAndDisplayComponents(srcComponentsPath) {
+    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");
+
+    if (notDefComps.length > 0) {
+        console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
+        console.log("   ", notDefComps);
+    }
+
+    return loadedComponents;
+}
+
+async function processAssets(doc, rootDir, srcDir, outDirPath) {
+    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 icons) {
+        await processIcons(link, rootDir, srcDir, outDirPath);
+    }
+    return cssContents
+}
+
+/**
+ * Compiles a static build of your Chocola project from the directory provided.
+ * @param {import("fs").PathLike} rootDir
+ * @param {Object<{
+ * isHotReload?: boolean
+ * }
+ * >} 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;
+    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 {
+            child.remove();
+            chainRendered = false;
+          }
+          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);
+
+    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");
+}

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chocola",
-  "version": "1.5.1",
-  "description": "The sweetest way to build reactive web apps",
+  "version": "1.6.0",
+  "description": "The sweetest way to build the web",
   "keywords": [
     "web",
     "app",
@@ -11,7 +11,7 @@
     "components",
     "ui"
   ],
-  "homepage": "https://github.com/sad-gabi/chocola#readme",
+  "homepage": "https://chocolaframework.web.app/",
   "bugs": {
     "url": "https://github.com/sad-gabi/chocola/issues"
   },
@@ -23,6 +23,10 @@
   "author": "SadGabi",
   "type": "module",
   "main": "index.js",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/sad-gabi"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/.gitattributes

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