chocola 2.0.0-next.11 → 2.0.0-next.12

package/README.md

@@ -7,7 +7,7 @@
 
 Chocola is a new and sweeter way to build your web apps.
 
-No bundler config. No virtual DOM. No hydration ceremony. Just `.html` files with `<template>`, `<script>`, and `<style>` compiled to HTML with scoped CSS the browser already understands, and optional runtime when you need it.
+Just `.html` files with `<template>`, `<script>`, and `<style>` compiled to HTML with scoped CSS the browser already understands, and optional runtime when you need it.
 
 Import components. Instantiate them. Mount, update, remove. Client-side or server-side. Same file, minimal overhead.
 
@@ -37,19 +37,26 @@ Import components. Instantiate them. Mount, update, remove. Client-side or serve
 </style>
 ```
 
+## Supporting Chocola
+
+As of now, Chocola is a project driven by one developer (me, [@sadgabi20](https://github.com/sadgabi20)), but made to be community driven in the future. Therefore, the only current way to support Chocola is via my [GitHub Sponsors](https://github.com/sponsors/sadgabi20).
+
+If this project achieves a wider support, it will have its own official support channels.
+
 ## Documentation
 
 - [Getting started](documentation/01-introduction/02-getting-started.md)
 - [Project structure](documentation/01-introduction/03-project-structure.md)
-- [CLI reference](documentation/07-reference/04-cli.md)
+- [Build API reference](documentation/07-reference/04-cli.md)
 
-## Quick start
+## Roadmap
 
-```sh
-npm install chocola
-npx chocola dev        # dev server
-npx chocola build      # production build
-npx chocola serve      # SSR production server
-```
+If you want to know what is being worked on right now, see the [Roadmap](ROADMAP.md).
+
+## Contributing
+
+Please follow the [Contribution Guidelines](CONTRIBUTING.md) to know how to contribute to Chocola.
+
+## License
 
-No init scripts required: `chocola.config.json` is optional. See [Getting started](documentation/01-introduction/02-getting-started.md) for more.
+[MIT](LICENSE)

package/compiler/component-processor.js

@@ -8,9 +8,6 @@ import {
   reservedAttrs, validateChainStructure, applyConditionalToElement, interpolateNode,
   scopeCss, compileExpr, evaluateConstant,
 } from "../parser/index.js";
-import chalk from "./chalk.js";
-
-
 
 class ProcessContext {
   constructor(loadedComponents, runtimeChunks, compIdColl, runtimeMap, cssScopes, cssScopesMap, scopedStyles, staticCtxRegistry, csrClasses, treeShakeRuntime = true, originalNames = null) {
@@ -112,7 +109,6 @@ function generateCSRClass(compName, cx, explicitClassName) {
     reach = computeReachable(parsedForReach, { bindings: [...bindVarNames] });
     if (reach.fallback) {
       // conservative: include all and warn
-      console.warn(chalk.yellow(`WARN ${displayName} — dynamic $runtime, including all declarations`));
     }
   }
   const injectedNames = new Set(compProps.map(p => p.name));
@@ -297,9 +293,8 @@ export function processComponentElement(
   let template = doc.querySelector("template")?.innerHTML;
   let styles = doc.querySelector("style")?.innerHTML;
 
-  if (!template) {
-    console.warn(chalk.yellow(`${displayName} — component is missing a <template>`));
-    return false;
+   if (!template) {
+    return false;
   }
 
   // Store original script for reachability (before stripping)
@@ -324,7 +319,6 @@ export function processComponentElement(
       for (const imp of importsToGenerate) {
         const isComponent = imp.source.toLowerCase().endsWith(".html");
         if (!isComponent) {
-          console.warn(chalk.yellow(`WARN ${displayName} — JS import "${imp.source}" is client-reachable but not bundled (Phase 1: dropping)`));
           continue;
         }
         const importedCompName = path.basename(imp.source).toLowerCase();
@@ -674,9 +668,8 @@ export function processComponentElement(
             if (parsedReach.ast) {
               const bindNames = bindings.map(b => b.varName);
               reachInject = computeReachable(parsedReach, { bindings: bindNames });
-              if (reachInject.fallback) {
-                console.warn(chalk.yellow(`WARN ${displayName} — dynamic $runtime, including all declarations`));
-                reachInject = null;
+               if (reachInject.fallback) {
+                 reachInject = null;
               }
             }
           }

package/compiler/config.js

@@ -1,52 +1,40 @@
-import path from "path";
-import { promises as fsp } from "fs";
-import chalk from "./chalk.js";
-import { getConfig, isMissingConfigFile, queueConfigWarning } from "../utils.js";
-
-const warnedBundleFields = new Set();
-
-export async function loadConfig(rootDir, { silent, customPath, overrides } = {}) {
-  const config = customPath
-    ? await fsp.readFile(customPath, "utf-8").then(r => JSON.parse(r))
-    : await getConfig(rootDir, { silent });
-
-  let srcDir = "src", outDir = "dist", libDir = "lib", emptyOutDir = true, treeShakeRuntime = true;
-
-  if (!customPath || !isMissingConfigFile(config)) {
-    const hasBundle = (config.bundle !== undefined && config.bundle !== null) || (config.build !== undefined && config.build !== null);
-    const bundleConfig = config.bundle || config.build || {};
-    const compilerConfig = config.compiler || {};
-    srcDir = bundleConfig.srcDir || "src";
-    outDir = bundleConfig.outDir || "dist";
-    libDir = bundleConfig.libDir || "lib";
-    emptyOutDir = bundleConfig.emptyOutDir !== false;
-    treeShakeRuntime = compilerConfig.treeShakeRuntime !== false;
-
-    if (!silent && hasBundle) {
-      if (bundleConfig.srcDir == null && !warnedBundleFields.has(rootDir + ":srcDir")) {
-        warnedBundleFields.add(rootDir + ":srcDir");
-        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.srcDir not defined in chocola.config.json file: using default "src" bundle.srcDir.`);
-      }
-      if (bundleConfig.outDir == null && !warnedBundleFields.has(rootDir + ":outDir")) {
-        warnedBundleFields.add(rootDir + ":outDir");
-        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.outDir not defined in chocola.config.json file: using default "dist" bundle.outDir.`);
-      }
-      if (bundleConfig.libDir == null && !warnedBundleFields.has(rootDir + ":libDir")) {
-        warnedBundleFields.add(rootDir + ":libDir");
-        queueConfigWarning(rootDir, chalk.bold.yellow("WARNING!"), `bundle.libDir not defined in chocola.config.json file: using default "lib" bundle.libDir.`);
-      }
-    }
-  }
-
-  const result = { srcDir, outDir, libDir, emptyOutDir, treeShakeRuntime };
-  if (overrides) { Object.assign(result, overrides); }
-  return result;
-}
-
-export function resolvePaths(rootDir, config) {
-  return {
-    outDir: path.isAbsolute(config.outDir) ? config.outDir : path.join(rootDir, config.outDir),
-    src: path.isAbsolute(config.srcDir) ? config.srcDir : path.join(rootDir, config.srcDir),
-    components: path.isAbsolute(config.srcDir) ? path.join(config.srcDir, config.libDir) : path.join(rootDir, config.srcDir, config.libDir),
-  };
-}
+import path from "path";
+import { promises as fsp } from "fs";
+
+export async function loadConfig(rootDir, { silent, customPath, overrides } = {}) {
+  let config;
+  try {
+    const raw = customPath
+      ? await fsp.readFile(customPath, "utf-8").then(r => JSON.parse(r))
+      : await fsp.readFile(path.join(rootDir, "chocola.config.json"), "utf-8").then(r => JSON.parse(r));
+    config = raw;
+  } catch {
+    if (!silent) {
+      // Config file missing — silently use defaults
+    }
+    config = {};
+  }
+
+  let srcDir = "src", outDir = "dist", libDir = "lib", emptyOutDir = true, treeShakeRuntime = true;
+
+  const hasBundle = (config.bundle !== undefined && config.bundle !== null) || (config.build !== undefined && config.build !== null);
+  const bundleConfig = config.bundle || config.build || {};
+  const compilerConfig = config.compiler || {};
+  srcDir = bundleConfig.srcDir || "src";
+  outDir = bundleConfig.outDir || "dist";
+  libDir = bundleConfig.libDir || "lib";
+  emptyOutDir = bundleConfig.emptyOutDir !== false;
+  treeShakeRuntime = compilerConfig.treeShakeRuntime !== false;
+
+  const result = { srcDir, outDir, libDir, emptyOutDir, treeShakeRuntime };
+  if (overrides) { Object.assign(result, overrides); }
+  return result;
+}
+
+export function resolvePaths(rootDir, config) {
+  return {
+    outDir: path.isAbsolute(config.outDir) ? config.outDir : path.join(rootDir, config.outDir),
+    src: path.isAbsolute(config.srcDir) ? config.srcDir : path.join(rootDir, config.srcDir),
+    components: path.isAbsolute(config.srcDir) ? path.join(config.srcDir, config.libDir) : path.join(rootDir, config.srcDir, config.libDir),
+  };
+}

package/compiler/index.js

@@ -1,134 +1,61 @@
-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";
-import { flushConfigWarnings } from "../utils.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";
-
-export function logBanner() {
-  const plain = process.env.NO_COLOR === "1";
-  const ch = plain ? (() => (s) => s) : chalk;
-  console.log(
-    ch.hex(GOLD_COLOR)(`
-    ┌─────────────────────────────────────────────┐
-    │┌-------------------------------------------┐│
-    ││                                           ││`)
-  );
-  console.log(
-    ch.hex(GOLD_COLOR)(`    ││            `) +
-    ch.bold.hex(WHITE_COLOR)(`{`) +
-    ch.bold.hex(GOLD_COLOR)(`  C H O C O L A  `) +
-    ch.bold.hex(WHITE_COLOR)(`}`) +
-    ch.hex(GOLD_COLOR)(`            ││\n`) +
-    ch.hex(GOLD_COLOR)(`    ││                                           ││
-    ││     `) +
-    ch.hex(TEXT_FAINT)(`THE SWEETEST WAY TO BUILD THE WEB`) +
-    ch.hex(GOLD_COLOR)(`     ││
-    ││                                           ││
-    │└-------------------------------------------┘│
-    └─────────────────────────────────────────────┘
-    `)
-  );
-}
-
-function logSuccess(outDirPath, durationMs) {
-  const plain = process.env.NO_COLOR === "1";
-  const ch = plain ? (() => (s) => s) : chalk;
-  console.log(ch.bold.green(`\nJOB DONE!`) + ch.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 overrides = buildConfig?.overrides || null;
-  const startTime = performance.now();
-  !isHotReload && logBanner();
-
-  const graph = await buildModuleGraph(rootDir, { overrides });
-
-  !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;
-
-  if (!isHotReload) {
-    flushConfigWarnings(rootDir);
-    logSuccess(graph.paths.outDir, durationMs);
-  }
-  if (isHotReload) {
-    flushConfigWarnings(rootDir);
-    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) }
-};
+import { promises as fs } from "fs";
+import path from "path";
+import { performance } from "perf_hooks";
+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";
+
+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 overrides = buildConfig?.overrides || null;
+  const silent = buildConfig?.silent || false;
+  const startTime = performance.now();
+
+  const graph = await buildModuleGraph(rootDir, { overrides });
+
+  await emit(graph);
+
+  const durationMs = performance.now() - startTime;
+}
+
+export const app = {
+  async build(__rootdir) { return compile(__rootdir) }
+};

package/compiler/module-graph.js

@@ -1,7 +1,6 @@
 import path from "path";
 import { promises as fs } from "fs";
 import { parseHTML } from "linkedom";
-import chalk from "./chalk.js";
 import { loadConfig, resolvePaths } from "./config.js";
 import { getComponents, getSrcIndex } from "./pipeline.js";
 import { protectCurlyBraces } from "../utils.js";
@@ -216,14 +215,6 @@ export async function buildModuleGraph(rootDir, { overrides } = {}) {
   const foundComponents = await getComponents(paths.components);
   const { loadedComponents, originalNames, componentsLib, emptyComps } = foundComponents;
 
-  console.log(chalk.bold.green(">"), "Components found in", chalk.green.underline(paths.components) + ":");
-  console.log("   ", componentsLib, "\n\n");
-
-  if (emptyComps?.length > 0) {
-    console.warn(chalk.bold.yellow("WARNING!"), "The following component files are empty:");
-    console.log("   ", emptyComps);
-  }
-
   for (const filename of componentsLib) {
     const compName = filename.toLowerCase();
     const source = loadedComponents.get(compName);

package/compiler/utils.js

@@ -1,116 +1,102 @@
-import { createHash } from "crypto";
-import chalk from "./chalk.js";
-
-export function throwError(err) {
-  console.log(chalk.red.bold("Error!"), "A fatal error has occurred:\n");
-  throw new Error(err);
-}
-
-export function warnConstantCondition(location, tag, attr, expr, truthy) {
-  const article = /^[aeiou]/.test(attr) ? "an" : "a";
-  console.warn(
-    chalk.bold.yellow("WARN "),
-    `${chalk.bold.green(location)} ${chalk.dim('—')} ${chalk.blue(`<${tag}>`)} \`${chalk.bold(attr + "={" + expr + "}")}\` is always ${chalk.green(truthy ? "truthy" : "falsy")}`
-  );
-}
-
-export function warnUnusedDeclaration(location, kind, name) {
-  console.warn(
-    chalk.bold.yellow("WARN "),
-    `${chalk.bold.green(location)} ${chalk.dim('—')} ${kind} \`${chalk.blue(name)}\` is never used`
-  );
-}
-
-function normalizeAttributeQuotes(html) {
-  return html
-    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
-    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
-}
-
-function getStartTag(outerHTML) {
-  let inQuote = null;
-  for (let i = 0; i < outerHTML.length; i++) {
-    const c = outerHTML[i];
-    if (inQuote) {
-      if (c === inQuote) inQuote = null;
-    } else if (c === '"' || c === "'") {
-      inQuote = c;
-    } else if (c === ">") {
-      return outerHTML.slice(0, i + 1);
-    }
-  }
-  return outerHTML;
-}
-
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function flexibleStartTagRegex(startTag) {
-  return new RegExp(
-    startTag
-      .split(/\s+/)
-      .filter(Boolean)
-      .map(escapeRegex)
-      .join("\\s+")
-  );
-}
-
-export function findElementLine(sourceContent, outerHTML) {
-  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
-  const startTags = [
-    normalizeAttributeQuotes(getStartTag(outerHTML)),
-    normalizeAttributeQuotes(
-      getStartTag(
-        outerHTML
-          .replace(/&quot;/g, '"')
-          .replace(/&amp;/g, "&")
-          .replace(/&lt;/g, "<")
-          .replace(/&gt;/g, ">")
-      )
-    ),
-  ].map(tag => tag.toLowerCase());
-  const candidates = [
-    flexibleStartTagRegex(startTags[0]),
-    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
-    flexibleStartTagRegex(startTags[1]),
-  ];
-  for (const re of candidates) {
-    const match = re.exec(source);
-    if (match) {
-      return source.substring(0, match.index).split("\n").length;
-    }
-  }
-  return null;
-}
-
-export function genRandomId(collection = null, length = 10, lettersOnly = false) {
-  let id;
-  if (lettersOnly) {
-    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random() * ID_LETTERS.length)]).join("");
-  } else {
-    id = Math.random().toString(36).substring(2, length + 2);
-  }
-  if (!collection) return id;
-  if (collection.includes(id)) {
-    return genRandomId(collection, length, lettersOnly);
-  } else {
-    collection.push(id);
-    return id;
-  }
-}
-
-export function deterministicHash(content, length = 8) {
-  const hash = createHash("sha256").update(content).digest();
-  let result = "";
-  for (let i = 0; i < length; i++) {
-    result += String.fromCharCode(97 + (hash[i % hash.length] % 26));
-  }
-  return result;
-}
-
-export function runtimeFunctionId(compName) {
-  return "r_" + deterministicHash(compName, 8);
-}
-
-const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";
+import { createHash } from "crypto";
+
+export function throwError(err) {
+  throw new Error(err);
+}
+
+export function warnConstantCondition() {}
+export function warnUnusedDeclaration() {}
+
+function normalizeAttributeQuotes(html) {
+  return html
+    .replace(/(\s[\w:.-]+)=(['"])([\s\S]*?)\2/g, '$1="$3"')
+    .replace(/(\s[\w:.-]+)=([^\s"'<>=]+)/g, '$1="$2"');
+}
+
+function getStartTag(outerHTML) {
+  let inQuote = null;
+  for (let i = 0; i < outerHTML.length; i++) {
+    const c = outerHTML[i];
+    if (inQuote) {
+      if (c === inQuote) inQuote = null;
+    } else if (c === '"' || c === "'") {
+      inQuote = c;
+    } else if (c === ">") {
+      return outerHTML.slice(0, i + 1);
+    }
+  }
+  return outerHTML;
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function flexibleStartTagRegex(startTag) {
+  return new RegExp(
+    startTag
+      .split(/\s+/)
+      .filter(Boolean)
+      .map(escapeRegex)
+      .join("\\s+")
+  );
+}
+
+export function findElementLine(sourceContent, outerHTML) {
+  const source = normalizeAttributeQuotes(sourceContent).toLowerCase().replace(/\/\s*>/g, ">");
+  const startTags = [
+    normalizeAttributeQuotes(getStartTag(outerHTML)),
+    normalizeAttributeQuotes(
+      getStartTag(
+        outerHTML
+          .replace(/&quot;/g, '"')
+          .replace(/&amp;/g, "&")
+          .replace(/&lt;/g, "<")
+          .replace(/&gt;/g, ">")
+      )
+    ),
+  ].map(tag => tag.toLowerCase());
+  const candidates = [
+    flexibleStartTagRegex(startTags[0]),
+    flexibleStartTagRegex(startTags[0].replace(/=""/g, "")),
+    flexibleStartTagRegex(startTags[1]),
+  ];
+  for (const re of candidates) {
+    const match = re.exec(source);
+    if (match) {
+      return source.substring(0, match.index).split("\n").length;
+    }
+  }
+  return null;
+}
+
+export function genRandomId(collection = null, length = 10, lettersOnly = false) {
+  let id;
+  if (lettersOnly) {
+    id = Array.from({ length }, () => ID_LETTERS[Math.floor(Math.random) * ID_LETTERS.length]).join("");
+  } else {
+    id = Math.random().toString(36).substring(2, length + 2);
+  }
+  if (!collection) return id;
+  if (collection.includes(id)) {
+    return genRandomId(collection, length, lettersOnly);
+  } else {
+    collection.push(id);
+    return id;
+  }
+}
+
+export function deterministicHash(content, length = 8) {
+  const hash = createHash("sha256").update(content).digest();
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += String.fromCharCode(97 + (hash[i % hash.length] % 26));
+  }
+  return result;
+}
+
+export function runtimeFunctionId(compName) {
+  return "r_" + deterministicHash(compName, 8);
+}
+
+const ID_LETTERS = "abcdefghijklmnopqrstuvwxyz";