chocola 1.6.0 → 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,254 +1,126 @@
-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");
-}
+import { promises as fs } from "fs";
+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 GOLD_COLOR = "#D87416";
+const WHITE_COLOR = "#FAFAF8";
+const TEXT_FAINT = "#E7EBE1";
+
+function logBanner() {
+  console.log(
+    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, durationMs) {
+  console.log(
+    chalk.bold.green(">"),
+    "Project bundled succesfully at",
+    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) {
+  if (emptyOutDir) {
+    await fs.rm(outDirPath, { recursive: true, force: true });
+    await fs.mkdir(outDirPath);
+  }
+}
+
+export async function emit(graph, options = {}) {
+  const outDir = graph.paths.outDir;
+  await setupOutputDirectory(outDir, graph.config.emptyOutDir);
+
+  const result = await renderPage(graph, options.ctx);
+
+  for (const file of result.files) {
+    await fs.writeFile(path.join(outDir, file.path), file.content);
+  }
+
+  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);
+    }
+  }
+
+  await writeHTMLOutput(result.html, outDir);
+
+  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");
+
+  return result;
+}
+
+export default async function compile(rootDir, buildConfig) {
+  const isHotReload = buildConfig?.isHotReload || null;
+  const startTime = performance.now();
+  !isHotReload && logBanner();
+
+  const graph = await buildModuleGraph(rootDir);
+
+  !isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(graph.paths.outDir));
+
+  await emit(graph);
+
+  const durationMs = performance.now() - startTime;
+
+  !isHotReload && logSuccess(graph.paths.outDir, durationMs);
+  isHotReload && console.log("Dev server updated " + chalk.hex(TEXT_FAINT)(`(${formatDuration(durationMs)})`));
+}
+
+/**
+ * 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
+ */
+  async build(__rootdir) { return compile(__rootdir) }
+};