juxscript 1.0.18 → 1.0.20

package/lib/reactivity/state.ts

@@ -1,11 +1,9 @@
 /**
- * Reactive state container
- * Notifies subscribers when value changes
+ * Simple reactive state container
  */
 export class State<T> {
     private _value: T;
     private _subscribers: Set<(value: T) => void> = new Set();
-    private _effects: Set<Effect> = new Set();
 
     constructor(initialValue: T) {
         this._value = initialValue;
@@ -22,342 +20,58 @@ export class State<T> {
      * Set new value and notify subscribers
      */
     set(newValue: T): void {
-        if (this._value !== newValue) {
-            this._value = newValue;
-            this._notify();
-            this._runEffects();
-        }
-    }
-
-    /**
-     * Update value using a function
-     */
-    update(fn: (current: T) => T): void {
-        this.set(fn(this._value));
+        this._value = newValue;
+        this._notify();
     }
 
     /**
      * Subscribe to value changes
-     * Returns unsubscribe function
      */
     subscribe(callback: (value: T) => void): () => void {
         this._subscribers.add(callback);
-        callback(this._value); // Call immediately with current value
+        // Call immediately with current value
+        callback(this._value);
+        // Return unsubscribe function
         return () => this._subscribers.delete(callback);
     }
 
     /**
-     * Notify all subscribers of value change
+     * Notify all subscribers
      */
     private _notify(): void {
         this._subscribers.forEach(callback => callback(this._value));
     }
 
     /**
-     * Run all registered effects
-     */
-    private _runEffects(): void {
-        this._effects.forEach(effect => effect.run(this._value));
-    }
-
-    /* -------------------------
-     * Higher-Order Effects
-     * ------------------------- */
-
-    /**
-     * Bind visibility to element (v-show style)
-     * Toggles display: none on/off
-     * For animations, use bindClass() instead
-     */
-    bindVisibility(elementId: string): () => void {
-        if (typeof this._value !== 'boolean') {
-            console.warn(`State.bindVisibility: State value must be boolean, got ${typeof this._value}`);
-            return () => { };
-        }
-
-        const effect = new VisibilityEffect(elementId);
-        this._effects.add(effect);
-        effect.run(this._value); // Initial run
-
-        return () => this._effects.delete(effect);
-    }
-
-    /**
-     * Bind value property to element (for progress, input, range, etc.)
-     * @param elementId - DOM element ID
-     * @param transform - Optional transform function
-     */
-    bindValue(elementId: string, transform?: (val: T) => number | string): () => void {
-        const effect = new ValueEffect(elementId, transform);
-        this._effects.add(effect);
-        effect.run(this._value);
-
-        return () => this._effects.delete(effect);
-    }
-
-    /**
-     * Bind text content to element
-     * @param elementId - DOM element ID
-     * @param transform - Optional transform function
+     * Helper methods for numeric state
      */
-    bindText(elementId: string, transform?: (val: T) => string): () => void {
-        const effect = new TextEffect(elementId, transform);
-        this._effects.add(effect);
-        effect.run(this._value);
-
-        return () => this._effects.delete(effect);
-    }
-
-    /**
-     * Bind attribute to element
-     * @param elementId - DOM element ID
-     * @param attrName - Attribute name
-     * @param transform - Optional transform function
-     */
-    bindAttr(elementId: string, attrName: string, transform?: (val: T) => string): () => void {
-        const effect = new AttrEffect(elementId, attrName, transform);
-        this._effects.add(effect);
-        effect.run(this._value);
-
-        return () => this._effects.delete(effect);
-    }
-
-    /**
-     * Bind CSS class to element
-     * @param elementId - DOM element ID
-     * @param className - Class to toggle
-     * @param condition - Optional condition function
-     */
-    bindClass(elementId: string, className: string, condition?: (val: T) => boolean): () => void {
-        const effect = new ClassEffect(elementId, className, condition);
-        this._effects.add(effect);
-        effect.run(this._value);
-
-        return () => this._effects.delete(effect);
-    }
-
-    /**
-     * Bind innerHTML to element
-     * @param elementId - DOM element ID
-     * @param transform - Optional transform function
-     */
-    bindHTML(elementId: string, transform?: (val: T) => string): () => void {
-        const effect = new HTMLEffect(elementId, transform);
-        this._effects.add(effect);
-        effect.run(this._value);
-
-        return () => this._effects.delete(effect);
-    }
-
-    /* -------------------------
-     * Number Helpers
-     * ------------------------- */
-
-    /**
-     * Increment (numbers only)
-     */
-    increment = (): void => {
+    increment(): void {
         if (typeof this._value === 'number') {
             this.set((this._value + 1) as T);
         }
     }
 
-    /**
-     * Decrement (numbers only)
-     */
-    decrement = (): void => {
+    decrement(): void {
         if (typeof this._value === 'number') {
             this.set((this._value - 1) as T);
         }
     }
 
-    /**
-     * Add amount (returns function for event handlers)
-     */
-    add = (amount: number) => (): void => {
+    add(amount: number): void {
         if (typeof this._value === 'number') {
             this.set((this._value + amount) as T);
         }
     }
 
-    /**
-     * Subtract amount
-     */
-    subtract = (amount: number) => (): void => {
+    subtract(amount: number): void {
         if (typeof this._value === 'number') {
             this.set((this._value - amount) as T);
         }
     }
-
-    /**
-     * Multiply by factor
-     */
-    multiply = (factor: number) => (): void => {
-        if (typeof this._value === 'number') {
-            this.set((this._value * factor) as T);
-        }
-    }
-
-    /* -------------------------
-     * Boolean Helpers
-     * ------------------------- */
-
-    /**
-     * Toggle (booleans only)
-     */
-    toggle = (): void => {
-        if (typeof this._value === 'boolean') {
-            this.set((!this._value) as T);
-        }
-    }
-
-    /* -------------------------
-     * General Helpers
-     * ------------------------- */
-
-    /**
-     * Reset to initial value (returns function)
-     */
-    reset = (initialValue: T) => (): void => {
-        this.set(initialValue);
-    }
-}
-
-/* -------------------------
- * Effect Classes
- * ------------------------- */
-
-interface Effect {
-    run(value: any): void;
-}
-
-class VisibilityEffect implements Effect {
-    constructor(
-        private elementId: string
-    ) { }
-
-    run(visible: boolean): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        // Simple display toggle (Vue v-show style)
-        el.style.display = visible ? '' : 'none';
-    }
-}
-
-interface VisibilityOptions {
-    mode?: 'display' | 'visibility' | 'opacity' | 'class';
-    visibleClass?: string;
-    hiddenClass?: string;
-}
-
-class TextEffect implements Effect {
-    constructor(
-        private elementId: string,
-        private transform?: (val: any) => string
-    ) { }
-
-    run(value: any): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        const text = this.transform ? this.transform(value) : String(value);
-        el.textContent = text;
-    }
-}
-
-class HTMLEffect implements Effect {
-    constructor(
-        private elementId: string,
-        private transform?: (val: any) => string
-    ) { }
-
-    run(value: any): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        const html = this.transform ? this.transform(value) : String(value);
-        el.innerHTML = html;
-    }
-}
-
-class AttrEffect implements Effect {
-    constructor(
-        private elementId: string,
-        private attrName: string,
-        private transform?: (val: any) => string
-    ) { }
-
-    run(value: any): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        const attrValue = this.transform ? this.transform(value) : String(value);
-        el.setAttribute(this.attrName, attrValue);
-    }
-}
-
-class ClassEffect implements Effect {
-    constructor(
-        private elementId: string,
-        private className: string,
-        private condition?: (val: any) => boolean
-    ) { }
-
-    run(value: any): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        const shouldAdd = this.condition ? this.condition(value) : Boolean(value);
-        if (shouldAdd) {
-            el.classList.add(this.className);
-        } else {
-            el.classList.remove(this.className);
-        }
-    }
-}
-
-class ValueEffect implements Effect {
-    constructor(
-        private elementId: string,
-        private transform?: (val: any) => number | string
-    ) { }
-
-    run(value: any): void {
-        const el = document.getElementById(this.elementId);
-        if (!el) return;
-
-        const newValue = this.transform ? this.transform(value) : value;
-
-        // For progress/jux components, set data-value and trigger update
-        if (el.classList.contains('jux-progress')) {
-            el.setAttribute('data-value', String(newValue));
-
-            // Find the progress instance and call value() to trigger update
-            const progressBar = el.querySelector('.jux-progress-bar');
-            if (progressBar) {
-                const percentage = typeof newValue === 'number' ? newValue : parseFloat(String(newValue));
-                const max = parseFloat(progressBar.getAttribute('aria-valuemax') || '100');
-                const percentageValue = (percentage / max) * 100;
-                (progressBar as HTMLElement).style.width = `${percentageValue}%`;
-                progressBar.setAttribute('aria-valuenow', String(percentage));
-            }
-            return;
-        }
-
-        // For native HTML elements (input, progress, meter)
-        if ('value' in el) {
-            (el as any).value = String(newValue);
-        }
-
-        if (el instanceof HTMLProgressElement || el.tagName === 'METER') {
-            el.setAttribute('value', String(newValue));
-        }
-    }
 }
 
 /**
- * Create reactive state
+ * Factory function to create reactive state
  */
 export function state<T>(initialValue: T): State<T> {
     return new State(initialValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
@@ -55,7 +55,6 @@
     "esbuild": "^0.19.0",
     "express": "^4.18.2",
     "glob": "^13.0.0",
-    "sql.js": "^1.8.0",
     "ws": "^8.13.0"
   },
   "devDependencies": {