chocola 1.3.4 → 1.3.6

package/compiler/component-processor.js

@@ -2,6 +2,21 @@ import { JSDOM } from "jsdom";
 import { extractContextFromElement } from "./dom-processor.js";
 import { genRandomId, incrementAlfabet } from "./utils.js";
 import chalk from "chalk";
+import beautify from "js-beautify";
+
+function scopeCss(cssString, cssId) {
+  return cssString.replace(/(^|\})([^{}]+)\{/g, (match, before, selector) => {
+    if (selector.trim().startsWith("@")) {
+      return match;
+    }
+    const scoped = selector
+      .split(",")
+      .map(sel => `.${cssId} ${sel.trim()}`)
+      .join(", ");
+    return `${before}${scoped}{`;
+  });
+}
+
 
 /**
  * Processes a single component element and inserts it into the DOM
@@ -18,7 +33,10 @@ export function processComponentElement(
   runtimeChunks,
   compIdColl,
   letterState,
-  runtimeMap
+  runtimeMap,
+  cssScopes,
+  cssScopesMap,
+  scopedStyles
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
@@ -28,7 +46,7 @@ export function processComponentElement(
   const instance = loadedComponents.get(compName);
   if (!instance || instance === undefined) return false;
 
-  if (instance && instance.body) {
+  if (instance.body) {
     let body = instance.body;
     body = body.replace(
       /(?<!\b(?:if|del-if)=)\{(\w+)\}/g,
@@ -96,8 +114,18 @@ export function processComponentElement(
       slot.replaceWith(slotFragment);
     });
 
+    let style = instance.styles && instance.styles.toString();
+    if (style) {
+      let cssId = cssScopesMap && cssScopesMap.get(compName);
+      if (!cssId) {
+        cssId = genRandomId(cssScopes, 8, true);
+        cssScopesMap.set(compName, cssId);
+        fragment.firstChild.classList.add(cssId);
+      }
+      style = scopeCss(style, cssId);
+      scopedStyles.push(style);
+    }
     element.replaceWith(fragment);
-
     return true;
   }
 
@@ -112,22 +140,26 @@ export function processComponentElement(
  * @returns {{
  *   runtimeScript: string,
  *   hasComponents: boolean
+ *   scopesCss: CSSString
  * }}
  */
 export function processAllComponents(appElements, loadedComponents) {
-  const runtimeChunks = [];
-  const compIdColl = [];
-  const letterState = { value: null };
-  const runtimeMap = new Map();
+  let runtimeChunks = [];
+  let compIdColl = [];
+  let letterState = { value: null };
+  let runtimeMap = new Map();
+  let cssScopes = [];
+  let cssScopesMap = new Map();
+  let scopedStyles = [];
 
   appElements.forEach(el => {
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap);
+    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap, cssScopes, cssScopesMap, scopedStyles);
   });
-
   const runtimeScript = runtimeChunks.join("\n");
   const hasComponents = runtimeChunks.length > 0;
+  const scopesCss = beautify.css(scopedStyles.join("\n"));
 
-  return { runtimeScript, hasComponents };
+  return { runtimeScript, hasComponents, scopesCss };
 }
 
 /**

package/compiler/dom-processor.js

@@ -81,6 +81,28 @@ 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";
+  linkEl.href = "./" + filename;
+  doc.head.appendChild(linkEl);
+}
+
 /**
  * Appends a script element to document body
  * @param {Document} doc

package/compiler/index.js

@@ -1,27 +1,21 @@
 import path from "path";
 import { promises as fs } from "fs";
 import chalk from "chalk";
-
-// Configuration
 import { loadConfig, resolvePaths } from "./config.js";
-
-// DOM Processing
 import {
     createDOM,
     validateAppContainer,
     getAppElements,
     getAssetLinks,
     appendRuntimeScript,
+    appendStylesheetLink,
     serializeDOM,
     writeHTMLOutput,
+    writeCSSOutput,
 } 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 { genRandomId, throwError } from "./utils.js";
 import {
     copyResources,
     getComponents,
@@ -31,8 +25,6 @@ import {
 } from "./pipeline.js";
 
 
-// ===== Logging & Banners =====
-
 const logSeparation = chalk.yellow(`
 ________________________________________________________________________
 ========================================================================
@@ -75,8 +67,6 @@ function logSuccess(outDirPath) {
     );
 }
 
-// ===== Directory Setup =====
-
 async function setupOutputDirectory(outDirPath, emptyOutDir) {
     if (emptyOutDir) {
         await fs.rm(outDirPath, { recursive: true, force: true });
@@ -84,8 +74,6 @@ async function setupOutputDirectory(outDirPath, emptyOutDir) {
     }
 }
 
-// ===== Component Loading =====
-
 async function loadAndDisplayComponents(srcComponentsPath) {
     const foundComponents = await getComponents(srcComponentsPath);
     const { loadedComponents, notDefComps, componentsLib } = foundComponents;
@@ -102,8 +90,6 @@ async function loadAndDisplayComponents(srcComponentsPath) {
     return loadedComponents;
 }
 
-// ===== Asset Processing =====
-
 async function processAssets(doc, rootDir, srcDir, outDirPath) {
     const { stylesheets, icons } = getAssetLinks(doc);
     const fileIds = [];
@@ -117,8 +103,6 @@ async function processAssets(doc, rootDir, srcDir, outDirPath) {
     }
 }
 
-// ===== Main Compilation Function =====
-
 /**
  * Compiles a static build of your Chocola project from the directory provided.
  * @param {import("fs").PathLike} rootDir
@@ -131,23 +115,17 @@ export default async function runtime(rootDir, buildConfig) {
     const isHotReload = buildConfig?.isHotReload || null;
     !isHotReload && logBanner();
 
-    // Load Configuration
     const config = await loadConfig(rootDir);
     const paths = resolvePaths(rootDir, 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);
     !isHotReload && console.log(logSeparation);
-
-    // Create and Validate DOM
     !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);
@@ -157,24 +135,22 @@ export default async function runtime(rootDir, buildConfig) {
     const appContainer = validateAppContainer(doc);
     const appElements = getAppElements(appContainer);
 
-    // Process Components
-    const { runtimeScript } = processAllComponents(appElements, loadedComponents);
-
-    // Generate Runtime File
+    const { runtimeScript, scopesCss } = processAllComponents(appElements, loadedComponents);
     const runtimeFilename = await generateRuntimeScript(runtimeScript, paths.outDir);
-
-    // Process Assets (stylesheets, icons)
     await processAssets(doc, rootDir, config.srcDir, paths.outDir);
 
-    // Finalize HTML
+    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);
 
-    // Copy Resources
     await copyResources(rootDir, config.srcDir, paths.outDir);
 
-    // Success Message
     !isHotReload && logSuccess(paths.outDir);
     isHotReload && console.log("Dev server updated");
 }

package/compiler/pipeline.js

@@ -42,13 +42,6 @@ export async function getComponents(libDir) {
 
       const instance = module.default();
 
-      if (instance.bodyPath) {
-        instance.body = await fs.readFile(
-          path.resolve(libDir, instance.bodyPath),
-          "utf8"
-        );
-      }
-
       loadedComponents.set(comp.toLowerCase(), instance);
     }
 

package/compiler/utils.js

@@ -54,10 +54,17 @@ export async function loadWithAssets(filePath) {
  * @param {number} length - Desired length of the ID (default: 10)
  * @returns {string} - Unique random ID
  */
-export function genRandomId(collection, length = 10) {
-  const id = Math.random().toString(36).substring(2, length + 2);
+export function genRandomId(collection = null, length = 10, lettersOnly = false) {
+  let id;
+  if (lettersOnly) {
+    const letters = "abcdefghijklmnopqrstuvwxyz";
+    id = Array.from({ length }, () => letters[Math.floor(Math.random() * 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);
+    return genRandomId(collection, length, lettersOnly);
   } else {
     collection.push(id);
     return id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "description": "The sweetest way to build reactive web apps",
   "keywords": [
     "web",