lume-js 0.2.0 → 0.2.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "lume-js",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "src/index.js",
   "type": "module",
   "scripts": {
-    "dev": "vite examples",
+    "dev": "vite",
     "build": "echo 'No build step yet, zero-runtime already!'"
   },
   "files": [

package/src/addons/computed.js

@@ -0,0 +1,38 @@
+/**
+ * computed - creates a derived value based on state
+ * @param {Function} fn - function that computes value from state
+ * @returns {Object} - { get: () => value, recompute: () => void, subscribe: (cb) => unsubscribe }
+ */
+export function computed(fn) {
+  let value;
+  let dirty = true;
+  const subscribers = new Set();
+
+  const recalc = () => {
+    try {
+      value = fn();
+    } catch (err) {
+      console.error("[computed] Error computing value:", err);
+      value = undefined;
+    }
+    dirty = false;
+    subscribers.forEach(cb => cb(value));
+  };
+
+  return {
+    get: () => {
+      if (dirty) recalc();
+      return value;
+    },
+    recompute: () => {
+      dirty = true;
+      recalc();
+    },
+    subscribe: cb => {
+      subscribers.add(cb);
+      // Immediately notify subscriber with current value
+      if (!dirty) cb(value);
+      return () => subscribers.delete(cb); // unsubscribe function
+    },
+  };
+}

package/src/addons/index.js

@@ -0,0 +1,2 @@
+export { computed } from "./computed.js";
+export { watch } from "./watch.js";

package/src/addons/watch.js

@@ -0,0 +1,12 @@
+/**
+ * watch - observes changes to a state key and triggers callback
+ * @param {Object} store - reactive store created with state()
+ * @param {string} key - key in store to watch
+ * @param {Function} callback - called with new value
+ */
+export function watch(store, key, callback) {
+  if (!store.subscribe) {
+    throw new Error("store must be created with state()");
+  }
+  store.subscribe(key, callback);
+}

package/src/core/bindDom.js

@@ -37,7 +37,7 @@ export function bindDom(root, store) {
     }
 
     // Subscribe once
-    target.$subscribe(lastKey, val => {
+    target.subscribe(lastKey, val => {
       if (el.tagName === "INPUT" || el.tagName === "TEXTAREA") el.value = val;
       else el.textContent = val;
     });

package/src/core/state.js

@@ -6,12 +6,12 @@
  * Features:
  * - Lightweight and Go-style
  * - Explicit nested states
- * - $subscribe for listening to key changes
+ * - subscribe for listening to key changes
  *
  * Usage:
  *   import { state } from "lume-js";
  *   const store = state({ count: 0 });
- *   store.$subscribe("count", val => console.log(val));
+ *   store.subscribe("count", val => console.log(val));
  */
 
 
@@ -19,7 +19,7 @@
  * Creates a reactive state object.
  * 
  * @param {Object} obj - Initial state object
- * @returns {Proxy} Reactive proxy with $subscribe method
+ * @returns {Proxy} Reactive proxy with subscribe method
  */
 export function state(obj) {
   const listeners = {};
@@ -47,7 +47,7 @@ export function state(obj) {
    * @param {string} key 
    * @param {function} fn 
    */
-  proxy.$subscribe = (key, fn) => {
+  proxy.subscribe = (key, fn) => {
     if (!listeners[key]) listeners[key] = [];
     listeners[key].push(fn);
     fn(proxy[key]); // initialize