chocola 2.0.0-next.1 → 2.0.0-next.10

package/compiler/config.js

@@ -1,71 +1,18 @@
 import path from "path";
-import chalk from "chalk";
-import { getChocolaConfig } from "../utils.js";
+import { getConfig } 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 config = await getConfig(rootDir);
   const bundleConfig = config.bundle || {};
 
   const srcDir = bundleConfig.srcDir || "src";
   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

@@ -1,23 +1,17 @@
-import { JSDOM } from "jsdom";
+import { parseHTML } from "linkedom";
 import { promises as fs } from "fs";
 import path from "path";
-import { throwError, protectCurlyBraces, restoreCurlyBraces } from "./utils.js";
+import { protectCurlyBraces, restoreCurlyBraces } from "../utils.js";
+import { throwError } 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));
+  const protectedContent = protectCurlyBraces(srcIndexContent);
+  const dom = parseHTML(protectedContent);
+  dom.protectedContent = protectedContent;
+  return dom;
 }
 
-/**
- * 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,62 +20,18 @@ 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) {
-    const key = attr.name;
-    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;
-}
-
-/**
- * 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.document.toString());
 }
 
-/**
- * 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");
@@ -89,21 +39,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";
@@ -111,14 +50,12 @@ 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";
   runtimeScriptEl.src = "./" + filename;
   doc.body.appendChild(runtimeScriptEl);
 }

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,70 +1,54 @@
 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";
+import path from "path";
+import { performance } from "perf_hooks";
+import chalk from "./chalk.js";
+import { buildModuleGraph } from "./module-graph.js";
+import { renderPage } from "./render.js";
+import { writeHTMLOutput } from "./dom-processor.js";
 
+export { buildModuleGraph } from "./module-graph.js";
+export { renderPage } from "./render.js";
+export { ChocolaModule, ModuleGraph } from "./module-graph.js";
 
-const logSeparation = chalk.yellow(`
-________________________________________________________________________
-========================================================================
-        `);
+const GOLD_COLOR = "#D87416";
+const WHITE_COLOR = "#FAFAF8";
+const TEXT_FAINT = "#E7EBE1";
 
 function logBanner() {
-  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
-  console.log(logSeparation);
   console.log(
-    chalk.hex("#945e33")(`
-
-
-     ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
-     ▒██▀ ▀█  ▓██░ ██▒▒██▒  ██▒▒██▀ ▀█  ▒██▒  ██▒▓██▒   ▒████▄    
-     ▒▓█    ▄ ▒██▀▀██░▒██░  ██▒▒▓█    ▄ ▒██░  ██▒▒██░   ▒██  ▀█▄  
-     ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
-     ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
-     ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
-     ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
-     ░                         ░                                  
-
-
-        `)
+    chalk.hex(GOLD_COLOR)(`
+   ┌─────────────────────────────────────────────┐
+   │┌-------------------------------------------┐│
+   ││                                           ││`)
+  );
+  console.log(
+    chalk.hex(GOLD_COLOR)(`   ││            `) +
+    chalk.bold.hex(WHITE_COLOR)(`{`) +
+    chalk.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
+    chalk.bold.hex(WHITE_COLOR)(`}`) +
+    chalk.hex(GOLD_COLOR)(`            ││\n`) +
+    chalk.hex(GOLD_COLOR)(`   ││                                           ││
+   ││     `) +
+   chalk.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
+   chalk.hex(GOLD_COLOR)(`     ││
+   ││                                           ││
+   │└-------------------------------------------┘│
+   └─────────────────────────────────────────────┘
+   `)
   );
 }
 
-function logSuccess(outDirPath) {
-  console.log(`
-              ▄▄  ▄▄▄  ▄▄▄▄    ▄▄▄▄   ▄▄▄  ▄▄  ▄▄ ▄▄▄▄▄  ██ 
-              ██ ██▀██ ██▄██   ██▀██ ██▀██ ███▄██ ██▄▄   ██ 
-            ▄▄█▀ ▀███▀ ██▄█▀   ████▀ ▀███▀ ██ ▀██ ██▄▄▄  ▄▄ 
-                                                
-        `);
+function logSuccess(outDirPath, durationMs) {
   console.log(
     chalk.bold.green(">"),
     "Project bundled succesfully at",
-    chalk.green.underline(outDirPath) + "\n\n"
-  );
+    chalk.green.underline(outDirPath));
+    console.log(chalk.bold.green(`\nJOB DONE!`) + chalk.hex(TEXT_FAINT)(` (${formatDuration(durationMs)})\n`));
+}
+
+function formatDuration(ms) {
+  if (ms >= 1000) return (ms / 1000).toFixed(2) + "s";
+  return Math.round(ms) + "ms";
 }
 
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
@@ -74,183 +58,48 @@ async function setupOutputDirectory(outDirPath, emptyOutDir) {
   }
 }
 
-async function loadAndDisplayComponents(srcComponentsPath) {
-  const foundComponents = await getComponents(srcComponentsPath);
-  const { loadedComponents, notDefComps, componentsLib } = foundComponents;
+export async function emit(graph, options = {}) {
+  const outDir = graph.paths.outDir;
+  await setupOutputDirectory(outDir, graph.config.emptyOutDir);
 
-  console.log(`       LOADING COMPONENTS`);
-  console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponentsPath) + ":");
-  console.log("   ", componentsLib, "\n");
+  const result = await renderPage(graph, options.ctx);
 
-  if (notDefComps.length > 0) {
-    console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-    console.log("   ", notDefComps);
+  for (const file of result.files) {
+    await fs.writeFile(path.join(outDir, file.path), file.content);
   }
 
-  return loadedComponents;
-}
+  for (const copy of result.copies) {
+    if (copy.recursive) {
+      await fs.cp(copy.from, copy.to, { recursive: true, force: true });
+    } else {
+      await fs.copyFile(copy.from, copy.to);
+    }
+  }
 
-async function processAssets(doc, rootDir, srcDir, outDirPath) {
-  const { stylesheets, icons } = getAssetLinks(doc);
-  const fileIds = [];
-  let cssContents = [];
+  await writeHTMLOutput(result.html, outDir);
 
-  for (const link of stylesheets) {
-    const css = await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
-    cssContents.push(css);
-  }
+  const chocolaDir = path.join(graph.rootDir, ".chocola");
+  await fs.mkdir(chocolaDir, { recursive: true });
+  await fs.writeFile(path.join(chocolaDir, "hashes.json"), JSON.stringify(result.hashMap, null, 2) + "\n");
 
-  for (const link of icons) {
-    await processIcons(link, rootDir, srcDir, outDirPath);
-  }
-  return cssContents
+  return result;
 }
 
-/**
- * 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) {
+export default async function compile(rootDir, buildConfig) {
   const isHotReload = buildConfig?.isHotReload || null;
+  const startTime = performance.now();
   !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 graph = await buildModuleGraph(rootDir);
 
-  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);
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(graph.paths.outDir));
 
-  const dom = createDOM(srcIndexContent);
-  const doc = dom.window.document;
-  const appContainer = validateAppContainer(doc);
+  await emit(graph);
 
-  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);
-  }
+  const durationMs = performance.now() - startTime;
 
-  !isHotReload && logSuccess(paths.outDir);
-  isHotReload && console.log("Dev server updated");
+  !isHotReload && logSuccess(graph.paths.outDir, durationMs);
+  isHotReload && console.log("Dev server updated " + chalk.hex(TEXT_FAINT)(`(${formatDuration(durationMs)})`));
 }
 
 /**
@@ -262,16 +111,16 @@ export const app = {
  * 
  * ```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);
- ```
+  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) }
+  async build(__rootdir) { return compile(__rootdir) }
 };