lume-js 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lume-js",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "main": "src/index.js",
   "type": "module",
   "scripts": {

package/src/core/bindDom.js

@@ -0,0 +1,50 @@
+/**
+ * Lume-JS Zero-runtime DOM binding
+ *
+ * Binds reactive state to DOM elements using [data-bind].
+ * Supports two-way binding for INPUT/TEXTAREA.
+ *
+ * Usage:
+ *   import { bindDom } from "lume-js";
+ *   bindDom(document.body, store);
+ *
+ * HTML:
+ *   <span data-bind="count"></span>
+ *   <input data-bind="user.name">
+ */
+
+import { resolvePath } from "./utils.js";
+
+/**
+ * Zero-runtime DOM binding for a reactive store
+ * 
+ * @param {HTMLElement} root - root element to scan for [data-bind]
+ * @param {object} store - reactive state object
+ */
+export function bindDom(root, store) {
+  const nodes = root.querySelectorAll("[data-bind]");
+
+  nodes.forEach(el => {
+    const pathArr = el.getAttribute("data-bind").split(".");
+    const lastKey = pathArr.pop();
+
+    let target;
+    try {
+      target = resolvePath(store, pathArr); // must be wrapped with state() if nested
+    } catch (err) {
+      console.warn(`Skipping binding for ${el}: ${err.message}`);
+      return;
+    }
+
+    // Subscribe once
+    target.$subscribe(lastKey, val => {
+      if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") el.value = val;
+      else el.textContent = val;
+    });
+
+    // 2-way binding for inputs
+    if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
+      el.addEventListener("input", e => target[lastKey] = e.target.value);
+    }
+  });
+}

package/src/core/state.js

@@ -1,6 +1,30 @@
+/**
+ * Lume-JS Reactive State Core
+ *
+ * Provides minimal, zero-runtime reactive state.
+ * 
+ * Features:
+ * - Lightweight and Go-style
+ * - Explicit nested states
+ * - $subscribe for listening to key changes
+ *
+ * Usage:
+ *   import { state } from "lume-js";
+ *   const store = state({ count: 0 });
+ *   store.$subscribe("count", val => console.log(val));
+ */
+
+
+/**
+ * Creates a reactive state object.
+ * 
+ * @param {Object} obj - Initial state object
+ * @returns {Proxy} Reactive proxy with $subscribe method
+ */
 export function state(obj) {
   const listeners = {};
 
+  // Notify subscribers of a key
   function notify(key, val) {
     if (listeners[key]) listeners[key].forEach(fn => fn(val));
   }
@@ -16,37 +40,18 @@ export function state(obj) {
     }
   });
 
+  /**
+   * Subscribe to changes for a specific key.
+   * Calls the callback immediately with the current value.
+   * 
+   * @param {string} key 
+   * @param {function} fn 
+   */
   proxy.$subscribe = (key, fn) => {
     if (!listeners[key]) listeners[key] = [];
     listeners[key].push(fn);
-    // initialize
-    fn(proxy[key]);
+    fn(proxy[key]); // initialize
   };
 
   return proxy;
 }
-
-// Zero-runtime data-bind init
-export function bindDom(root, store) {
-  const nodes = root.querySelectorAll("[data-bind]");
-  nodes.forEach(el => {
-    const path = el.getAttribute("data-bind").split(".");
-    const lastKey = path.pop();
-
-    let target = store;
-    for (const key of path) {
-      target = target[key]; // must be wrapped with state()
-    }
-
-    // subscribe once
-    target.$subscribe(lastKey, val => {
-      if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") el.value = val;
-      else el.textContent = val;
-    });
-
-    // 2-way binding for inputs
-    if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") {
-      el.addEventListener("input", e => target[lastKey] = e.target.value);
-    }
-  });
-}

package/src/core/utils.js

@@ -0,0 +1,14 @@
+/**
+ * Resolve a nested path in an object.
+ * Example: path "user.name" returns obj.user.name
+ *
+ * @param {object} obj - The root object
+ * @param {string[]} pathArr - Array of keys
+ * @returns {object} Last object in the path
+ */
+export function resolvePath(obj, pathArr) {
+  return pathArr.reduce((acc, key) => {
+    if (!acc) throw new Error(`Invalid path: ${pathArr.join(".")}`);
+    return acc[key];
+  }, obj);
+}

package/src/index.js

@@ -1 +1,13 @@
-export * from './core/state.js';
+/**
+ * Lume-JS Library Core API
+ *
+ * Exposes:
+ * - state(): create reactive state
+ * - bindDom(): zero-runtime DOM binding
+ *
+ * Usage:
+ *   import { state, bindDom } from "lume-js";
+ */
+
+export { state } from "./core/state.js";
+export { bindDom } from "./core/bindDom.js";