chocola 2.0.0-next.2 → 2.0.0-next.5

package/compiler/config.js

@@ -1,17 +1,6 @@
 import path from "path";
-import chalk from "chalk";
 import { getChocolaConfig } from "../utils.js";
 
-/**
- * Loads and merges Chocola configuration with defaults
- * @param {import("fs").PathLike} rootDir
- * @returns {Promise<{
- *   srcDir: string,
- *   outDir: string,
- *   libDir: string,
- *   emptyOutDir: boolean
- * }>}
- */
 export async function loadConfig(rootDir) {
   const config = await getChocolaConfig(rootDir);
   const bundleConfig = config.bundle || {};
@@ -20,52 +9,10 @@ export async function loadConfig(rootDir) {
   const outDir = bundleConfig.outDir || "dist";
   const libDir = bundleConfig.libDir || "lib";
   const emptyOutDir = bundleConfig.emptyOutDir !== false;
-  const assetImport = bundleConfig.assetImport || "legacy";
 
-  logConfigWarnings(bundleConfig, emptyOutDir, assetImport);
-
-  return { srcDir, outDir, libDir, emptyOutDir, assetImport };
-}
-
-function logConfigWarnings(bundleConfig, emptyOutDir, assetImport) {
-  if (!bundleConfig.srcDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'srcDir not defined in chocola.config.json file: using default "src" directory.'
-    );
-  }
-
-  if (!bundleConfig.outDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'outDir not defined in chocola.config.json file: using default "dist" directory.'
-    );
-  }
-
-  if (!bundleConfig.libDir) {
-    console.warn(
-      chalk.bold.yellow("WARNING!"),
-      'libDir not defined in chocola.config.json file: using default "lib" directory.'
-    );
-  }
-
-  console.log(`> using emptyOutDir = ${emptyOutDir}`);
-
-  if (assetImport !== "static") {
-    console.warn(
-      chalk.bold.yellow("DEPRECATION WARNING!"),
-      'The legacy asset import system ("bundle.assetImport") will be removed in Chocola 2. ' +
-      'Set "bundle.assetImport": "static" in chocola.config.json and migrate your assets to src/static/.'
-    );
-  }
+  return { srcDir, outDir, libDir, emptyOutDir };
 }
 
-/**
- * Resolves all path directories based on configuration
- * @param {import("fs").PathLike} rootDir
- * @param {object} config
- * @returns {object}
- */
 export function resolvePaths(rootDir, config) {
   return {
     outDir: path.join(rootDir, config.outDir),

package/compiler/dom-processor.js

@@ -4,20 +4,10 @@ import path from "path";
 import { throwError, protectCurlyBraces, restoreCurlyBraces, compileExpression } from "./utils.js";
 import { readMyFile } from "./fs.js";
 
-/**
- * Creates a JSDOM instance from source index file
- * @param {string} srcIndexContent
- * @returns {JSDOM}
- */
 export function createDOM(srcIndexContent) {
   return new JSDOM(protectCurlyBraces(srcIndexContent));
 }
 
-/**
- * Validates that the index file has an <app> root element
- * @param {Document} doc
- * @throws {Error} if <app> element not found
- */
 export function validateAppContainer(doc) {
   const appContainer = doc.querySelector("app");
   if (!appContainer) {
@@ -26,20 +16,10 @@ export function validateAppContainer(doc) {
   return appContainer;
 }
 
-/**
- * Extracts all child elements from app container
- * @param {Element} appContainer
- * @returns {Element[]}
- */
 export function getAppElements(appContainer) {
   return Array.from(appContainer.querySelectorAll("*"));
 }
 
-/**
- * Extracts context attributes from element (ctx.* attributes)
- * @param {Element} element
- * @returns {object}
- */
 export function extractContextFromElement(element) {
   const ctx = {};
   for (const attr of element.attributes) {
@@ -58,31 +38,14 @@ export function extractContextFromElement(element) {
   return ctx;
 }
 
-/**
- * Serializes and formats DOM to pretty HTML
- * @param {JSDOM} dom
- * @returns {string}
- */
 export async function serializeDOM(dom) {
-  const beautify = (await import("js-beautify")).default;
-  const finalHtml = restoreCurlyBraces(dom.serialize());
-  return beautify.html(finalHtml, { indent_size: 2 });
+  return restoreCurlyBraces(dom.serialize());
 }
 
-/**
- * Writes the final HTML to output directory
- * @param {string} html
- * @param {import("fs").PathLike} outDirPath
- */
 export async function writeHTMLOutput(html, outDirPath) {
   await fs.writeFile(path.join(outDirPath, "index.html"), html);
 }
 
-/**
- * Gets all stylesheet and icon links from document
- * @param {Document} doc
- * @returns {{stylesheets: HTMLLinkElement[], icons: HTMLLinkElement[]}}
- */
 export function getAssetLinks(doc) {
   const docLinks = Array.from(doc.querySelectorAll("link"));
   const stylesheets = docLinks.filter(link => link.rel === "stylesheet");
@@ -90,21 +53,10 @@ export function getAssetLinks(doc) {
   return { stylesheets, icons };
 }
 
-/**
- * Writes CSS to output directory
- * @param {string} css
- * @param {import("fs").PathLike} outDirPath
- * @param {string} filename
- */
 export async function writeCSSOutput(css, outDirPath, filename = "scopes.css") {
   await fs.writeFile(path.join(outDirPath, filename), css);
 }
 
-/**
- * Appends a stylesheet link element to document head
- * @param {Document} doc
- * @param {string} filename
- */
 export function appendStylesheetLink(doc, filename) {
   const linkEl = doc.createElement("link");
   linkEl.rel = "stylesheet";
@@ -112,11 +64,10 @@ export function appendStylesheetLink(doc, filename) {
   doc.head.appendChild(linkEl);
 }
 
-/**
- * Appends a script element to document body
- * @param {Document} doc
- * @param {string} filename
- */
+export function getScriptElements(doc) {
+  return Array.from(doc.querySelectorAll("script[src]"));
+}
+
 export function appendRuntimeScript(doc, filename) {
   const runtimeScriptEl = doc.createElement("script");
   runtimeScriptEl.type = "module";

package/compiler/fs.js

@@ -1,12 +1,6 @@
 import { promises as fs } from "fs";
 import { throwError } from "./utils.js";
 
-/**
- * Reads a file and returns its contents as a UTF-8 string
- * @param {import("fs").PathLike} filePath - Path to the file
- * @returns {Promise<string>} - File contents
- * @throws {Error} - If file cannot be read
- */
 export async function readMyFile(filePath) {
   try {
     const data = await fs.readFile(filePath, "utf-8");
@@ -16,11 +10,6 @@ export async function readMyFile(filePath) {
   }
 }
 
-/**
- * Checks if a file exists
- * @param {import("fs").PathLike} filePath - Path to check
- * @returns {Promise<boolean>} - True if file exists, false otherwise
- */
 export async function checkFile(filePath) {
   try {
     await fs.access(filePath);

package/compiler/index.js

@@ -1,11 +1,12 @@
 import { promises as fs } from "fs";
-import chalk from "chalk";
+import chalk from "./chalk.js";
 import { loadConfig, resolvePaths } from "./config.js";
 import {
   createDOM,
   validateAppContainer,
   getAppElements,
   getAssetLinks,
+  getScriptElements,
   appendRuntimeScript,
   appendStylesheetLink,
   serializeDOM,
@@ -14,13 +15,13 @@ import {
 } from "./dom-processor.js";
 import { processAllComponents } from "./component-processor.js";
 import { generateRuntimeScript } from "./runtime-generator.js";
-import { genRandomId, throwError, compileExpression } from "./utils.js";
+import { genRandomId, throwError, compileExpression, hasDelIfAttr, getDelIfAttr, removeDelIfAttr } from "./utils.js";
 import {
-  copyResources,
   copyStaticDir,
   getComponents,
   getSrcIndex,
   processIcons,
+  processScript,
   processStylesheet,
 } from "./pipeline.js";
 
@@ -76,15 +77,15 @@ async function setupOutputDirectory(outDirPath, emptyOutDir) {
 
 async function loadAndDisplayComponents(srcComponentsPath) {
   const foundComponents = await getComponents(srcComponentsPath);
-  const { loadedComponents, notDefComps, componentsLib } = foundComponents;
+  const { loadedComponents, notDefComps: emptyComps, 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);
+  if (emptyComps?.length > 0) {
+    console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
+    console.log("   ", emptyComps);
   }
 
   return loadedComponents;
@@ -92,6 +93,7 @@ async function loadAndDisplayComponents(srcComponentsPath) {
 
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
   const { stylesheets, icons } = getAssetLinks(doc);
+  const scripts = getScriptElements(doc);
   const fileIds = [];
   let cssContents = [];
 
@@ -103,18 +105,82 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
   for (const link of icons) {
     await processIcons(link, rootDir, srcDir, outDirPath);
   }
+
+  for (const script of scripts) {
+    await processScript(doc, script, rootDir, srcDir, outDirPath, fileIds);
+  }
   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) {
+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);
+    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 = compileExpression(expr, false);
+      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 = compileExpression(expr, false);
+      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 = compileExpression(expr, false);
+      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);
+    }
+  }
+}
+
+export default async function compile(rootDir, buildConfig) {
   const isHotReload = buildConfig?.isHotReload || null;
   !isHotReload && logBanner();
 
@@ -138,96 +204,12 @@ export default async function runtime(rootDir, buildConfig) {
   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 = compileExpression(expr, false);
-        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 = compileExpression(expr, false);
-        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 = compileExpression(expr, false);
-        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");
+  await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
   if (scopesCss) {
     const fileName = "sc-" + genRandomId(null, 6) + ".css";
@@ -240,11 +222,7 @@ export default async function runtime(rootDir, buildConfig) {
   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);
-    }
+    await copyStaticDir(paths.src, paths.outDir);
   } catch (err) {
     throwError(err.message || err);
   }
@@ -273,5 +251,5 @@ export const app = {
  * @example
  * @param {PathLike} __rootdir the directory where your Chocola App is
  */
-  async build(__rootdir) { return runtime(__rootdir) }
+  async build(__rootdir) { return compile(__rootdir) }
 };