juxscript 1.0.19 → 1.0.20

package/lib/components/paragraph.ts

@@ -21,21 +21,6 @@ type ParagraphState = {
 
 /**
  * Paragraph component - semantic paragraph element
- * 
- * Usage:
- *   jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');
- *   jux.paragraph('description').text('A simple framework').render('#app');
- *   
- *   // With state binding
- *   jux.paragraph('counter')
- *     .text('Count: 0')
- *     .bind('text', count, (val) => `Count: ${val}`)
- *     .render('#app');
- *   
- *   // With sync (one-way for paragraph)
- *   jux.paragraph('display')
- *     .sync('text', count, (val) => `Count: ${val}`)
- *     .render('#app');
  */
 export class Paragraph {
     state: ParagraphState;
@@ -43,11 +28,14 @@ export class Paragraph {
     _id: string;
     id: string;
 
-    // Store bind() instructions
-    private _bindings: Array<{ event: string, handler: Function, stateObj?: State<any>, transform?: Function }> = [];
-
-    // Store sync() instructions
-    private _syncBindings: Array<{ property: string, stateObj: State<any>, transform?: Function }> = [];
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
 
     constructor(id: string, options: ParagraphOptions = {}) {
         this._id = id;
@@ -80,36 +68,26 @@ export class Paragraph {
     }
 
     /**
-     * Bind event or state (stores for wiring in render)
+     * Bind event handler (stores for wiring in render)
+     * DOM events only: click, mouseenter, etc.
      */
-    bind(property: string, source: State<any> | Function, transform?: Function): this {
-        if (typeof source === 'function') {
-            // Event binding
-            this._bindings.push({ event: property, handler: source });
-        } else {
-            // Validate it's a State object
-            if (!source || typeof source.subscribe !== 'function') {
-                throw new Error(`Paragraph.bind: Expected a State object, got ${typeof source}. Did you pass 'state.value' instead of 'state'?`);
-            }
-            // State binding
-            this._bindings.push({ event: property, handler: () => { }, stateObj: source, transform });
-        }
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
     /**
-     * Sync with state (one-way for paragraph: State → Component)
+     * Sync with state (one-way: State → Component)
      * 
      * @param property - Component property to sync ('text', 'class', 'style')
      * @param stateObj - State object to sync with
-     * @param transform - Optional transform function when going from state to component
+     * @param transform - Optional transform function from state to component
      */
-    sync(property: string, stateObj: State<any>, transform?: Function): this {
-        // Validate it's a State object
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
         if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Paragraph.sync: Expected a State object, got ${typeof stateObj}. Did you pass 'state.value' instead of 'state'?`);
+            throw new Error(`Paragraph.sync: Expected a State object for property "${property}"`);
         }
-        this._syncBindings.push({ property, stateObj, transform });
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
@@ -117,77 +95,62 @@ export class Paragraph {
      * Render
      * ------------------------- */
 
-    render(targetId?: string | HTMLElement): this {
+    render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
-            if (targetId instanceof HTMLElement) {
-                container = targetId;
-            } else {
-                const target = document.querySelector(targetId);
-                if (!target || !(target instanceof HTMLElement)) {
-                    throw new Error(`Paragraph: Target element "${targetId}" not found`);
-                }
-                container = target;
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Paragraph: Target "${targetId}" not found`);
             }
+            container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { text, class: className, style } = this.state;
-
-        const p = document.createElement('p');
-        p.id = this._id;
-        p.textContent = text;
 
-        if (className) {
-            p.className = className;
-        }
+        // === 2. PREPARE: Destructure state ===
+        const { text, style, class: className } = this.state;
 
-        if (style) {
-            p.setAttribute('style', style);
-        }
+        // === 3. BUILD: Create DOM elements ===
+        const paragraph = document.createElement('p');
+        paragraph.className = 'jux-paragraph';
+        paragraph.id = this._id;
+        paragraph.textContent = text;
+        if (className) paragraph.className += ` ${className}`;
+        if (style) paragraph.setAttribute('style', style);
 
-        container.appendChild(p);
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-        // Wire up bind() bindings after DOM element is created
-        this._bindings.forEach(({ event, handler, stateObj, transform }) => {
-            if (stateObj) {
-                // State binding - subscribe to state changes
-                stateObj.subscribe((val: any) => {
-                    const transformed = transform ? transform(val) : val;
-                    if (event === 'text') {
-                        p.textContent = transformed;
-                        this.state.text = transformed;
-                    }
-                });
-            } else {
-                // Event binding
-                p.addEventListener(event, handler as EventListener);
-            }
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            paragraph.addEventListener(event, handler as EventListener);
         });
 
-        // Wire up sync() bindings (State → Component)
-        this._syncBindings.forEach(({ property, stateObj, transform }) => {
-            stateObj.subscribe((val: any) => {
-                const transformed = transform ? transform(val) : val;
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'text') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
 
-                if (property === 'text') {
-                    p.textContent = transformed;
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    paragraph.textContent = transformed;
                     this.state.text = transformed;
-                } else if (property === 'class') {
-                    p.className = transformed;
-                    this.state.class = transformed;
-                } else if (property === 'style') {
-                    p.setAttribute('style', transformed);
-                    this.state.style = transformed;
-                }
-            });
+                });
+            }
         });
 
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(paragraph);
         return this;
     }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Paragraph.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
 }
 
 /**

package/lib/components/progress.ts

@@ -1,9 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
 
-/**
- * Progress component options
- */
 export interface ProgressOptions {
     value?: number;
     max?: number;
@@ -17,9 +14,6 @@ export interface ProgressOptions {
     class?: string;
 }
 
-/**
- * Progress component state
- */
 type ProgressState = {
     value: number;
     max: number;
@@ -33,28 +27,20 @@ type ProgressState = {
     class: string;
 };
 
-/**
- * Progress component - Progress bar for loading/completion
- * 
- * Usage:
- *   jux.progress('upload', {
- *     value: 45,
- *     max: 100,
- *     label: 'Uploading...',
- *     showPercentage: true,
- *     animated: true
- *   }).render('#app');
- * 
- *   // Update progress
- *   const prog = jux.progress('upload').render('#app');
- *   prog.value(75);
- */
 export class Progress {
     state: ProgressState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _boundState?: State<number>;
+
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
 
     constructor(id: string, options: ProgressOptions = {}) {
         this._id = id;
@@ -79,31 +65,29 @@ export class Progress {
      * ------------------------- */
 
     value(value: number): this {
-        this.state.value = Math.max(0, Math.min(value, this.state.max));
-        this._updateElement();
+        this.state.value = value;
+        this._updateProgress();
         return this;
     }
 
     max(value: number): this {
         this.state.max = value;
+        this._updateProgress();
         return this;
     }
 
     label(value: string): this {
         this.state.label = value;
-        this._updateElement();
         return this;
     }
 
     showPercentage(value: boolean): this {
         this.state.showPercentage = value;
-        this._updateElement();
         return this;
     }
 
     variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
         this.state.variant = value;
-        this._updateElement();
         return this;
     }
 
@@ -114,13 +98,11 @@ export class Progress {
 
     striped(value: boolean): this {
         this.state.striped = value;
-        this._updateElement();
         return this;
     }
 
     animated(value: boolean): this {
         this.state.animated = value;
-        this._updateElement();
         return this;
     }
 
@@ -134,131 +116,125 @@ export class Progress {
         return this;
     }
 
-    /**
-     * Two-way binding to state
-     */
-    bind(stateObj: State<number>): this {
-        this._boundState = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.value(val);
-        });
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
+        return this;
+    }
 
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Progress.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    getPercentage(): number {
+        return Math.round((this.state.value / this.state.max) * 100);
+    }
 
-    private _updateElement(): void {
-        const wrapper = document.getElementById(this._id);
+    private _updateProgress(): void {
         const bar = document.getElementById(`${this._id}-bar`);
-        const labelEl = document.getElementById(`${this._id}-label`);
-
-        // If element has a value attribute set externally (e.g., by bindValue), sync state
-        if (wrapper && wrapper.hasAttribute('data-value')) {
-            const externalValue = parseFloat(wrapper.getAttribute('data-value') || '0');
-            this.state.value = externalValue;
-        }
+        const percentageEl = document.getElementById(`${this._id}-percentage`);
 
         if (bar) {
-            const percentage = (this.state.value / this.state.max) * 100;
+            const percentage = this.getPercentage();
             bar.style.width = `${percentage}%`;
-            bar.setAttribute('aria-valuenow', this.state.value.toString());
-            bar.className = `jux-progress-bar jux-progress-bar-${this.state.variant}`;
 
-            if (this.state.striped) {
-                bar.classList.add('jux-progress-bar-striped');
+            if (percentageEl) {
+                percentageEl.textContent = `${percentage}%`;
             }
-            if (this.state.animated) {
-                bar.classList.add('jux-progress-bar-animated');
-            }
-        }
-
-        if (labelEl) {
-            const percentage = Math.round((this.state.value / this.state.max) * 100);
-            const text = this.state.showPercentage
-                ? `${this.state.label} ${percentage}%`.trim()
-                : this.state.label;
-            labelEl.textContent = text;
         }
     }
 
-    getPercentage(): number {
-        return Math.round((this.state.value / this.state.max) * 100);
-    }
-
     /* -------------------------
      * Render
      * ------------------------- */
 
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Progress: Target element "${targetId}" not found`);
+                throw new Error(`Progress: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { value, max, label, showPercentage, variant, size, striped, animated, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state ===
+        const { value, max, variant, showPercentage, label, style, class: className } = this.state;
+        const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
-        wrapper.className = `jux-progress jux-progress-${size}`;
+        wrapper.className = 'jux-progress';
         wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        if (className) {
-            wrapper.className += ` ${className}`;
-        }
-
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
-
-        // Label
-        if (label || showPercentage) {
+        if (showPercentage || label) {
             const labelEl = document.createElement('div');
             labelEl.className = 'jux-progress-label';
-            labelEl.id = `${this._id}-label`;
-            const percentage = Math.round((value / max) * 100);
-            const text = showPercentage
-                ? `${label} ${percentage}%`.trim()
-                : label;
-            labelEl.textContent = text;
+            labelEl.textContent = label || `${Math.round(percentage)}%`;
             wrapper.appendChild(labelEl);
         }
 
-        // Progress track
         const track = document.createElement('div');
         track.className = 'jux-progress-track';
 
-        // Progress bar
         const bar = document.createElement('div');
         bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
         bar.id = `${this._id}-bar`;
-        bar.setAttribute('role', 'progressbar');
-        bar.setAttribute('aria-valuenow', value.toString());
-        bar.setAttribute('aria-valuemin', '0');
-        bar.setAttribute('aria-valuemax', max.toString());
-
-        const percentage = (value / max) * 100;
         bar.style.width = `${percentage}%`;
 
-        if (striped) {
-            bar.classList.add('jux-progress-bar-striped');
-        }
-        if (animated) {
-            bar.classList.add('jux-progress-bar-animated');
-        }
-
         track.appendChild(bar);
         wrapper.appendChild(track);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transformToComponent = toComponent || ((v: any) => Number(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    this.state.value = transformed;
+                    const newPercentage = Math.min(100, Math.max(0, (transformed / this.state.max) * 100));
+                    bar.style.width = `${newPercentage}%`;
+
+                    if (showPercentage && !label) {
+                        const labelEl = wrapper.querySelector('.jux-progress-label');
+                        if (labelEl) {
+                            labelEl.textContent = `${Math.round(newPercentage)}%`;
+                        }
+                    }
+                });
+            }
+            else if (property === 'label') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    const labelEl = wrapper.querySelector('.jux-progress-label');
+                    if (labelEl) {
+                        labelEl.textContent = transformed;
+                    }
+                    this.state.label = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }