npm - chocola - Versions diffs - 1.2.6 → 1.3.0 - Mend

chocola 1.2.6 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/.gitattributes +2 -0
package/LICENSE +2 -2
package/README.md +11 -12
package/compiler/component-processor.js +34 -9
package/compiler/pipeline.js +2 -2
package/dev/index.js +69 -4
package/package.json +14 -2
package/types/index.js +135 -0

package/.gitattributes ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ # Auto detect text files and perform LF normalization
2	+ * text=auto

package/LICENSE CHANGED Viewed

@@ -1,6 +1,6 @@
 MIT License
-Copyright (c) SadGabi.
+Copyright (c) 2026 Sad Gabi
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md CHANGED Viewed

@@ -16,7 +16,7 @@ Chocola is a lightweight, reactive component-based web framework that brings sim
 - **🔌 Component Lifecycle API** - Public APIs for mounting, manipulating, and removing components
 - **📦 Built-in Bundler** - Automatic compilation and optimization
 - **🔥 Hot Reload Development** - See changes instantly with the dev server
-- **🎨 Template Syntax** - Clean HTML templates with `${}` and `&{}` interpolation
+- **🎨 Template Syntax** - Clean HTML templates with `{}` and `&{}` interpolation
 - **⚙️ Zero Config** - Works out of the box with sensible defaults
 ## 🚀 Quick Start
@@ -70,14 +70,14 @@ Create a `chocola.config.json` file:
 ### 1. Define Your HTML Template
 > NOTE: Reactivity, component APIs and global variables are not implemented yet.
-> Any of this features displayed here are for future references and may be modified.
+> Any of these features displayed here are for future references and may be modified.
-Create `src/lib/html/counter.body.html`:
+Create `src/lib/html/counter.html`:
 ```html
 <div class="counter">
-  <h2>${ctx.title}</h2>
-  <!-- Use & instead of $ to set reactivity -->
+  <h2>{ctx.title}</h2>
+  <!-- Use & to set reactivity -->
   <p>Count: &{sfx.count}</p>
   <button class="increment">+</button>
   <button class="decrement">-</button>
@@ -90,7 +90,7 @@ Create `src/lib/Counter.js`:
 ```javascript
 import { lib } from "chocola";
-import HTML from "./html/counter.body.html";
+import HTML from "./html/counter.html";
 function RUNTIME(self, ctx) {
   // Acces to component effects
@@ -154,8 +154,7 @@ In your `src/index.html`:
   </head>
   <body>
     <app>
-      <!-- Set mutable sfx variables with & -->
-      <Counter ctx.title="My Counter" sfx.&initialCount="0"></Counter>
+      <Counter ctx.title="My Counter" sfx.initialCount="0"></Counter>
     </app>
   </body>
 </html>
@@ -165,7 +164,7 @@ In your `src/index.html`:
 ### Template (`body`)
 - Standard HTML with template variables
-- **Static context**: `${ctx.propertyName}`, `${sfx.propertyName}`  - rendered once at initialization
+- **Static context**: `{ctx.propertyName}`, `{sfx.propertyName}`  - rendered once at initialization
 - **Reactive state**: `&{sfx.propertyName}` - automatically updates on change
 - Clean separation of markup and logic
@@ -260,7 +259,7 @@ Share state across your entire application:
 // In any component
 import * as globals from "path/to/globals.js";
-function RUNTIME(self, ctx, sfx) {
+function RUNTIME(self, ctx) {
   // Set global variables
   globals.userTheme = "dark";
   globals.notifications = [];
@@ -280,7 +279,7 @@ import { lib } from "chocola";
 import Counter from "./lib/Counter.js";
 // Mount a component programmatically in RUNTIME and/or EFFECTS
-function RUNTIME(self. ctx) {
+function RUNTIME(self, ctx) {
  const counterInstance = lib.mount(Counter)
    .defCtx({
       title: "Dynamic Counter",
@@ -325,7 +324,7 @@ import { fileURLToPath } from "url";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-dev.server(__dirname, "src", "dist");
+dev.server(__dirname);
 ```
 Run:

package/compiler/component-processor.js CHANGED Viewed

@@ -17,7 +17,8 @@ export function processComponentElement(
   loadedComponents,
   runtimeChunks,
   compIdColl,
-  letterState
+  letterState,
+  runtimeMap
 ) {
   const tagName = element.tagName.toLowerCase();
   const compName = tagName + ".js";
@@ -28,7 +29,7 @@ export function processComponentElement(
   if (instance && instance.body) {
     let body = instance.body;
-    body = body.replace(/\$\{ctx\.(\w+)\}/g, (_, key) => ctx[key] || "");
+    body = body.replace(/\{ctx\.(\w+)\}/g, (_, key) => ctx[key] || "");
     const fragment = JSDOM.fragment(body);
     const firstChild = fragment.firstChild;
@@ -38,14 +39,37 @@ export function processComponentElement(
         firstChild.setAttribute("chid", compId);
         let script = instance.script && instance.script.toString();
-        const letter = getNextLetter(letterState);
-        script = script.replace(/RUNTIME/g, `${letter}RUNTIME`);
+        const ctxRegex = /ctx\s*=\s*({.*?})/;
+        const ctxMatch = script.match(ctxRegex);
+        let runtimeCtx = {};
+        if (ctxMatch) {
+          try {
+            runtimeCtx = JSON.parse(ctxMatch[1].replace(/(\w+):/g, '"$1":'));
+          } catch (e) {
+            runtimeCtx = {};
+          }
+        }
+        let ctxDef = "";
+        for (const [key, value] of Object.entries(runtimeCtx)) {
+          ctxDef += `ctx.${key} = ctx.${key}||${JSON.stringify(value)};\n`;
+        }
+        script = script.replace(ctxRegex, "ctx");
+        script = script.replace(/RUNTIME\([^)]*\)\s*{/, match => match + "\n" + ctxDef);
-        runtimeChunks.push(`
-const ${letter} = document.querySelector('[chid="${compId}"]');
-${script}
-${letter}RUNTIME(${letter}, ${JSON.stringify(ctx)});`);
+        // Determine or create a single runtime function per component
+        let letterEntry = runtimeMap && runtimeMap.get(compName);
+        let letter;
+        if (!letterEntry) {
+          letter = getNextLetter(letterState);
+          script = script.replace(/RUNTIME/g, `${letter}RUNTIME`);
+          runtimeChunks.push(script);
+          runtimeMap && runtimeMap.set(compName, { letter });
+        } else {
+          letter = letterEntry.letter;
+        }
+        runtimeChunks.push(`${letter}RUNTIME(document.querySelector('[chid="${compId}"]'), ${JSON.stringify(ctx)});`);
       }
     }
     element.replaceWith(fragment);
@@ -69,9 +93,10 @@ export function processAllComponents(appElements, loadedComponents) {
   const runtimeChunks = [];
   const compIdColl = [];
   const letterState = { value: null };
+  const runtimeMap = new Map();
   appElements.forEach(el => {
-    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState);
+    processComponentElement(el, loadedComponents, runtimeChunks, compIdColl, letterState, runtimeMap);
   });
   const runtimeScript = runtimeChunks.join("\n");

package/compiler/pipeline.js CHANGED Viewed

@@ -7,8 +7,8 @@ import path from "path";
 // ===== Component Loading =====
 /**
- * Discovers and loads all components from a library directory
- * Components are JavaScript files that start with an uppercase letter
+ * Discovers and loads all components from a library directory.
+ * Components are JavaScript files that start with an uppercase letter.
  * They must have a default export that is a function
  * @param {import("node:fs").PathLike} libDir - Directory containing component files
  * @returns {Promise<{

package/dev/index.js CHANGED Viewed

@@ -3,6 +3,7 @@ import fs from "fs";
 import path from "path";
 import chalk from "chalk";
 import compile from "../compiler/index.js";
+import { loadConfig, resolvePaths } from "../compiler/config.js";
 import { getChocolaConfig } from "../utils.js";
 export async function serve(__rootdir) {
@@ -14,8 +15,12 @@ export async function serve(__rootdir) {
     port: 3000,
   }
-  const config = await getChocolaConfig(__rootdir);
-  const devConfig = config.dev;
+  let lastBuildTime = Date.now();
+  const fullConfig = await getChocolaConfig(__rootdir);
+  const config = await loadConfig(__rootdir);
+  const paths = resolvePaths(__rootdir, config);
+  const devConfig = fullConfig.dev;
   if (devConfig.hostname) { __config.hostname = devConfig.hostname }
   else { console.warn(chalk.bold.yellow("WARNING!"), `hostname not defined in chocola.config.json file: using default ${__config.hostname} hostname.`) }
@@ -23,7 +28,42 @@ export async function serve(__rootdir) {
   if (devConfig.port) { __config.port = devConfig.port }
   else { console.warn(chalk.bold.yellow("WARNING!"), `port not defined in chocola.config.json file: using default ${__config.port} port.`) }
+  const srcDir = paths.src;
+  const componentsDir = paths.components;
+  let compileTimeout;
+  const scheduleRecompile = () => {
+    clearTimeout(compileTimeout);
+    compileTimeout = setTimeout(async () => {
+      try {
+        await compile(__rootdir, { isHotReload: true });
+        lastBuildTime = Date.now();
+        console.log(chalk.green("✓"), "Hot reload: compiled successfully");
+      } catch (error) {
+        console.error(chalk.red("✗"), "Hot reload compilation failed:", error.message);
+      }
+    }, 300);
+  };
+  fs.watch(srcDir, { recursive: true }, (eventType, filename) => {
+    if (filename && !filename.includes("node_modules")) {
+      scheduleRecompile();
+    }
+  });
+  fs.watch(componentsDir, { recursive: true }, (eventType, filename) => {
+    if (filename && !filename.includes("node_modules")) {
+      scheduleRecompile();
+    }
+  });
   const server = http.createServer((req, res) => {
+    if (req.url === "/api/hot-reload") {
+      res.writeHead(200, { "Content-Type": "application/json" });
+      res.end(JSON.stringify({ buildTime: lastBuildTime }));
+      return;
+    }
     let filePath = path.join(
       __outdir,
       req.url === "/" ? "index.html" : req.url
@@ -78,8 +118,33 @@ export async function serve(__rootdir) {
           res.end("Error interno: " + error.code);
         }
       } else {
-        res.writeHead(200, { "Content-Type": contentType });
-        res.end(content, "utf-8");
+        if (extname === ".html" || extname === ".htm") {
+          const hotReloadScript = `
+<script>
+(function() {
+  let lastBuildTime = ${lastBuildTime};
+  setInterval(async () => {
+    try {
+      const res = await fetch('/api/hot-reload');
+      const data = await res.json();
+      if (data.buildTime > lastBuildTime) {
+        lastBuildTime = data.buildTime;
+        console.log('[Hot Reload] Changes detected, reloading...');
+        window.location.reload();
+      }
+    } catch (e) {
+      console.error('[Hot Reload] Check failed:', e);
+    }
+  }, 1000);
+})();
+</script>`;
+          const htmlWithReload = content.toString().replace('</body>', hotReloadScript + '</body>');
+          res.writeHead(200, { "Content-Type": contentType });
+          res.end(htmlWithReload, "utf-8");
+        } else {
+          res.writeHead(200, { "Content-Type": contentType });
+          res.end(content, "utf-8");
+        }
       }
     });
   });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "chocola",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "description": "Chocola pipeline for web apps.",
   "keywords": [
     "web",
@@ -11,13 +11,25 @@
     "components",
     "ui"
   ],
-  "license": "ISC",
+  "homepage": "https://github.com/sad-gabi/chocola#readme",
+  "bugs": {
+    "url": "https://github.com/sad-gabi/chocola/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sad-gabi/chocola.git"
+  },
+  "license": "MIT",
   "author": "SadGabi",
   "type": "module",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "exports": {
+    ".": "./index.js",
+    "./types": "./types/index.js"
+  },
   "dependencies": {
     "chalk": "^5.6.2",
     "js-beautify": "^1.15.4",

package/types/index.js ADDED Viewed

@@ -0,0 +1,135 @@
+const iconsType = "home" | "search" | "menu" | "settings" | "favorite" | "account_circle" | "shopping_cart" | "notifications" | "info" | "help" | "exit_to_app" | "check_circle" | "close" | "edit" | "delete" | "add" | "arrow_back" | "arrow_forward" | "play_arrow" | "pause" | "stop" | "camera_alt" | "photo" | "alarm" | "event" | "attach_file" | "print" | "share" | "cloud" | "cloud_upload" | "cloud_download" | "lock" | "lock_open" | "visibility" | "visibility_off" | "phone" | "email" | "map" | "place" | "directions" | "train" | "directions_car" | "directions_bike" | "school" | "work" | "lightbulb" | "battery_full" | "battery_std" | "wifi" | "bluetooth";
+const iconsArray = [
+        "home", "search", "menu", "settings", "favorite", "account_circle",
+        "shopping_cart", "notifications", "info", "help", "exit_to_app",
+        "check_circle", "close", "edit", "delete", "add", "arrow_back",
+        "arrow_forward", "play_arrow", "pause", "stop", "camera_alt",
+        "photo", "alarm", "event", "attach_file", "print", "share",
+        "cloud", "cloud_upload", "cloud_download", "lock", "lock_open",
+        "visibility", "visibility_off", "phone", "email", "map", "place",
+        "directions", "train", "directions_car", "directions_bike", "school",
+        "work", "lightbulb", "battery_full", "battery_std", "wifi", "bluetooth"
+];
+/**
+ * An instrinsic object that contains chocola types
+ */
+const ct = {};
+/**
+ * Creates an interface for the component static context
+ * @param {object} ctxInterface
+ */
+ct.defCtx = (ctxInterface) => {
+        if (!ctxInterface) return undefined;
+        if (typeof ctxInterface !== "object") return;
+        return ctxInterface;
+}
+ct.Number = class Number {
+        /**
+         * @param {number} value
+         * @returns
+         */
+        constructor(value) {
+                if (!value) return undefined;
+                if (typeof value !== "number") return;
+                return value;
+        }
+        /**
+         * @param {number} min
+         * @param {number} max
+         * @returns {number}
+         */
+        clamp(min, max) {
+                return Math.min(Math.max(this.value, min), max);
+        }
+        /**
+         * @param {number} min
+         * @returns {number}
+         */
+        min(min) {
+                return Math.min(this.value, min);
+        }
+        /**
+         * @param {number} max
+         * @returns {number}
+         */
+        max(max) {
+                return Math.max(this.value, max);
+        }
+}
+/**
+ * @param {number} value
+ */
+ct.Float = (value) => {
+        if (!value) return undefined;
+        if (Number.isInteger(value)) return;
+        return value;
+}
+/**
+ * @param {number} value
+ */
+ct.Int = (value) => {
+        if (!value) return undefined;
+        if (!Number.isInteger(value)) return;
+        return value;
+}
+/**
+ * @param {string} value
+ */
+ct.String = (value) => {
+        if (!value) return undefined;
+        if (typeof value !== "string") return;
+        return value;
+}
+/**
+ * @param {boolean} value
+ */
+ct.Boolean = (value) => {
+        if (value === null) return undefined;
+        if (typeof value !== "boolean") return;
+        return value;
+}
+/**
+ * @param {object} value
+ */
+ct.Object = (value) => {
+        if (!value) return undefined;
+        if (typeof value !== "object") return;
+        return value;
+}
+/**
+ * @param {function} value
+ */
+ct.Function = (value) => {
+        if (!value) return undefined;
+        if (typeof value !== "function") return;
+        return value;
+}
+/**
+ * @param {symbol} value
+ */
+ct.Symbol = (value) => {
+        if (!value) return undefined;
+        if (typeof value !== "symbol") return;
+        return value;
+}
+/**
+ * @param {URLPattern | "none"} value
+ */
+ct.Url = (value) => {
+        if (!value) return undefined;
+        if (!value.startsWith("http://") || !value.startsWith("https://")) return;
+        return value;
+}
+/**
+ *
+ * @param {"home" | "search" | "menu" | "settings" | "favorite" | "account_circle" | "shopping_cart" | "notifications" | "info" | "help" | "exit_to_app" | "check_circle" | "close" | "edit" | "delete" | "add" | "arrow_back" | "arrow_forward" | "play_arrow" | "pause" | "stop" | "camera_alt" | "photo" | "alarm" | "event" | "attach_file" | "print" | "share" | "cloud" | "cloud_upload" | "cloud_download" | "lock" | "lock_open" | "visibility" | "visibility_off" | "phone" | "email" | "map" | "place" | "directions" | "train" | "directions_car" | "directions_bike" | "school" | "work" | "lightbulb" | "battery_full" | "battery_std" | "wifi" | "bluetooth"} value
+ * @returns
+ */
+ct.Icon = (value) => {
+        if (!value) return "help";
+        if (!iconsArray.includes(value)) return "help";
+        return value;
+}
+export default ct;