chocola 1.1.20 → 1.2.0

package/compiler/fs.js

@@ -1,20 +1,31 @@
 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");
-        return data;
-    } catch (error) {
-        throwError(`Got an error trying to read the file: ${error.message}`);
-    }
+  try {
+    const data = await fs.readFile(filePath, "utf-8");
+    return data;
+  } catch (error) {
+    throwError(`Got an error trying to read the file: ${error.message}`);
+  }
 }
 
+/**
+ * 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);
-        return true;
-    } catch {
-        return false;
-    }
+  try {
+    await fs.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
 }

package/compiler/index.js

@@ -1,27 +1,48 @@
-import { throwError, genRandomId, incrementAlfabet, isWebLink } from "./utils.js";
-import { JSDOM } from "jsdom";
 import path from "path";
 import { promises as fs } from "fs";
-import { copyResources, getComponents, getSrcIndex, processIcons, processStylesheet } from "./pipeline.js";
-import chalk from 'chalk';
-import beautify from "js-beautify";
-import { getChocolaConfig } from "../utils.js";
-
+import chalk from "chalk";
+
+// Configuration
+import { loadConfig, resolvePaths } from "./config.js";
+
+// DOM Processing
+import {
+  createDOM,
+  validateAppContainer,
+  getAppElements,
+  getAssetLinks,
+  appendRuntimeScript,
+  serializeDOM,
+  writeHTMLOutput,
+} from "./dom-processor.js";
+
+// Component & Runtime Processing
+import { processAllComponents } from "./component-processor.js";
+import { generateRuntimeScript } from "./runtime-generator.js";
+
+// Utilities & Pipeline
+import { throwError } from "./utils.js";
+import {
+  copyResources,
+  getComponents,
+  getSrcIndex,
+  processIcons,
+  processStylesheet,
+} from "./pipeline.js";
+
+
+// ===== Logging & Banners =====
 
 const logSeparation = chalk.yellow(`
 ________________________________________________________________________
 ========================================================================
         `);
 
-/**
- * Compiles a static build of your Chocola project from the directory provided.
- * @param {import("fs").PathLike} __rootdir 
- * @param {string} __srcdir 
- */
-export default async function runtime(__rootdir) {
-    console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`))
-    console.log(logSeparation);
-    console.log(chalk.hex("#945e33")(`
+function logBanner() {
+  console.log(chalk.bold.hex("#945e33")(`\n                     RUNNING CHOCOLA BUNDLER`));
+  console.log(logSeparation);
+  console.log(
+    chalk.hex("#945e33")(`
 
 
      ▄████▄   ██░ ██  ▒█████   ▄████▄   ▒█████   ██▓    ▄▄▄      
@@ -30,171 +51,129 @@ export default async function runtime(__rootdir) {
      ▒▓▓▄ ▄██▒░▓█ ░██ ▒██   ██░▒▓▓▄ ▄██▒▒██   ██░▒██░   ░██▄▄▄▄██ 
      ▒ ▓███▀ ░░▓█▒░██▓░ ████▓▒░▒ ▓███▀ ░░ ████▓▒░░██████▒▓█   ▓██▒
      ░ ░▒ ▒  ░ ▒ ░░▒░▒░ ▒░▒░▒░ ░ ░▒ ▒  ░░ ▒░▒░▒░ ░ ▒░▓  ░▒▒   ▓▒█░
-     ░  ▒    ▒ ░▒░ ░  ░ ▒ ▒░   ░  ▒     ░ ▒ ▒░ ░ ░ ▒  ░ ▒   ▒▒ ░
-     ░         ░  ░░ ░░ ░ ░ ▒  ░        ░ ░ ░ ▒    ░ ░    ░   ▒   
+     ░  ▒    ▒ ░▒░ ░  ░ ░ ▒ ▒░   ░  ▒     ░ ░ ▒░ ░ ░ ▒  ░ ░   ▒▒ ░
+     ░         ░  ░░ ░░ ░ ░ ░ ▒  ░        ░ ░ ░ ░ ▒    ░ ░    ░   ▒   
      ░ ░       ░  ░  ░    ░ ░  ░ ░          ░ ░      ░  ░     ░  ░
     ░                         ░                                  
 
 
-        `));
-    let __srcdir = "src";
-    let __outDir = "dist";
-    let __libDir = "lib";
-    let __emptyOutDir = true;
-
-    const config = await getChocolaConfig(__rootdir);
-    const bundleConfig = config.bundle;
-
-    if (bundleConfig.srcDir) { __srcdir = bundleConfig.srcDir }
-    else { console.warn(chalk.bold.yellow("WARNING!"), 'srcDir not defined in chocola.config.json file: using default "src" directory.') }
-
-    if (bundleConfig.outDir) { __outDir = bundleConfig.outDir }
-    else { console.warn(chalk.bold.yellow("WARNING!"), 'outDir not defined in chocola.config.json file: using default "dist" directory.') }
-
-    if (bundleConfig.libDir) { __libDir = bundleConfig.libDir }
-    else { console.warn(chalk.bold.yellow("WARNING!"), 'libDir not defined in chocola.config.json file: using default "lib" directory.') }
-
-    if (bundleConfig.emptyOutDir) {
-        __emptyOutDir = bundleConfig.emptyOutDir;
-        console.log(`> using emptyOutDir = ${__emptyOutDir}`);
-    } else {
-        console.log(`> using default emptyOutDir = ${__emptyOutDir}`);
-    }
-
-    console.log(logSeparation);
-
-    const outDirPath = path.join(__rootdir, __outDir);
-    const srcPath = path.join(__rootdir, __srcdir);
-    const srcComponents = path.join(srcPath, __libDir);
-
-    if (__emptyOutDir) {
-        await fs.rm(path.join(outDirPath), { recursive: true, force: true });
-        await fs.mkdir(path.join(outDirPath));
-    }
-
-    let indexFiles = await getSrcIndex(srcPath);
-    let srcHtmlFile = indexFiles.srcHtmlFile;
-    let srcChocoFile = indexFiles.srcChocoFile;
-
-    console.log(`       LOADING COMPONENTS`)
-
-    const foundComponents = await getComponents(srcComponents);
-
-    let loadedComponents = foundComponents.loadedComponents;
-    let notDefComps = foundComponents.notDefComps;
-
-    const srcDirData = {
-        index: srcHtmlFile || srcChocoFile,
-        components: foundComponents.componentsLib,
-    };
-
-    console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(srcComponents) + ":");
-    console.log("   ", srcDirData.components, "\n");
-
-    if (notDefComps.length > 0) {
-        console.warn(chalk.bold.yellow("WARNING!"), "The following components don't include a default export:");
-        console.log("   ", notDefComps);
-    }
-
-    console.log(logSeparation);
-    console.log(`       BUNDLING STATIC BUILD`);
-    console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(outDirPath) + "\n");
-    console.log(logSeparation);
-
-    const dom = new JSDOM(srcDirData.index);
-    const doc = dom.window.document;
-    const appContainer = doc.querySelector("app");
-
-    if (!appContainer) {
-        throwError("Index page must have an " + chalk.blue("<app>") + " element");
-    }
-
-    const appElements = Array.from(appContainer.querySelectorAll('*'));
-
-    let runtimeChunks = [];
-    let runtimeScript = "";
-    let compIdColl = [];
-    let letter;
-
-    appElements.forEach(el => {
-        const tagName = el.tagName.toLowerCase();
-        const compName = tagName + ".js";
-
-        const ctx = {};
-        for (const attr of el.attributes) {
-            if (attr.name.startsWith("ctx.")) {
-                const key = attr.name.slice(4);
-                ctx[key] = attr.value;
-            }
-        }
-
-        const instance = loadedComponents.get(compName);
-        if (!instance || instance === undefined) return;
-        if (instance && instance.body) {
-            let body = instance.body;
-            body = body.replace(/\$\{ctx\.(\w+)\}/g, (_, key) => ctx[key] || "");
-            const fragment = JSDOM.fragment(body);
-            const firstChild = fragment.firstChild;
-            if (firstChild && firstChild.nodeType === 1) {
-                if (instance.script || instance.effects) {
-                    let script;
-                    let effects;
-                    const compId = "chid-" + genRandomId(compIdColl);
-                    firstChild.setAttribute("chid", compId);
-                    instance.script && (script = instance.script.toString())
-
-                    if (!letter) {
-                        letter = "a";
-                    } else {
-                        letter = incrementAlfabet(letter);
-                    }
-
-                    script = script.replace(/RUNTIME/g, `${letter}RUNTIME`);
-
-                    runtimeChunks.push(`
-const ${letter} = document.querySelector('[chid="${compId}"]');
-${script}
-${letter}RUNTIME(${letter}, ${JSON.stringify(ctx)});`);
-                }
-            }
-            el.replaceWith(fragment);
-        } else {
-            console.warn(chalk.yellow(`${compName} component could not be loaded`));
-        }
-    });
-
-    runtimeScript = runtimeChunks.join("\n");
-
-    let fileIds = [];
-
-    const docLinks = Array.from(doc.querySelectorAll("link"));
-
-    for (const link of docLinks) {
-        const rel = link.rel;
-        if (rel === "stylesheet") await processStylesheet(link, __rootdir, __srcdir, outDirPath, fileIds);
-        if (rel === "icon") await processIcons(link, __rootdir, __srcdir, outDirPath, fileIds)
-    }
-
-
-    const runtimeFilename = "run-" + genRandomId(fileIds, 6) + ".js";
-    const runtimeFileContents = `document.addEventListener("DOMContentLoaded", () => {${runtimeScript}})`;
-    await fs.writeFile(path.join(outDirPath, runtimeFilename), runtimeFileContents);
-    const runtimeScriptEl = doc.createElement("script");
-    runtimeScriptEl.type = "module";
-    runtimeScriptEl.src = "./" + runtimeFilename;
-    doc.body.appendChild(runtimeScriptEl);
-    const finalHtml = dom.serialize();
-    const prettyHtml = beautify.html(finalHtml, { indent_size: 2 });
-
-    await fs.writeFile(path.join(outDirPath, "index.html"), prettyHtml);
-
-    await copyResources(__rootdir, __srcdir, outDirPath);
-
-    console.log(`
+        `)
+  );
+}
+
+function logSuccess(outDirPath) {
+  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"
+  );
+}
+
+// ===== Directory Setup =====
+
+async function setupOutputDirectory(outDirPath, emptyOutDir) {
+  if (emptyOutDir) {
+    await fs.rm(outDirPath, { recursive: true, force: true });
+    await fs.mkdir(outDirPath);
+  }
+}
+
+// ===== Component Loading =====
+
+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;
+}
+
+// ===== Asset Processing =====
+
+async function processAssets(doc, rootDir, srcDir, outDirPath) {
+  const { stylesheets, icons } = getAssetLinks(doc);
+  const fileIds = [];
+
+  for (const link of stylesheets) {
+    await processStylesheet(link, rootDir, srcDir, outDirPath, fileIds);
+  }
+
+  for (const link of icons) {
+    await processIcons(link, rootDir, srcDir, outDirPath, fileIds);
+  }
+}
+
+// ===== Main Compilation Function =====
+
+/**
+ * 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, config) {
+  !config.isHotReload && logBanner();
+
+  // Load Configuration
+  const config = await loadConfig(rootDir);
+  const paths = resolvePaths(rootDir, config);
+  !config.isHotReload && console.log(logSeparation);
+
+  // Setup Output Directory
+  await setupOutputDirectory(paths.outDir, config.emptyOutDir);
+
+  // Load Index File
+  const indexFiles = await getSrcIndex(paths.src);
+  const srcIndexContent = indexFiles.srcHtmlFile || indexFiles.srcChocoFile;
+
+  // Load Components
+  const loadedComponents = await loadAndDisplayComponents(paths.components);
+  !config.isHotReload && console.log(logSeparation);
+
+  // Create and Validate DOM
+  !config.isHotReload && console.log(`       BUNDLING STATIC BUILD`);
+  !config.isHotReload && console.log(chalk.bold.green(">"), "Creating Chocola static build in directory", chalk.green.underline(paths.outDir) + "\n");
+  !config.isHotReload && console.log(logSeparation);
+
+  const dom = createDOM(srcIndexContent);
+  const doc = dom.window.document;
+  const appContainer = validateAppContainer(doc);
+  const appElements = getAppElements(appContainer);
+
+  // Process Components
+  const { runtimeScript } = processAllComponents(appElements, loadedComponents);
+
+  // Generate Runtime File
+  const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
+
+  // Process Assets (stylesheets, icons)
+  await processAssets(doc, rootDir, config.srcDir, paths.outDir);
+
+  // Finalize HTML
+  appendRuntimeScript(doc, runtimeFilename);
+  const html = await serializeDOM(dom);
+  await writeHTMLOutput(html, paths.outDir);
+
+  // Copy Resources
+  await copyResources(rootDir, config.srcDir, paths.outDir);
+
+  // Success Message
+  !config.isHotReload && logSuccess(paths.outDir);
+  config.isHotReload && console.log("Dev server updated");
 }