juxscript 1.0.18 → 1.0.20

package/lib/components/element.ts

@@ -1,8 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Element component options
- */
 export interface ElementOptions {
     tagType?: string;
     className?: string;
@@ -14,9 +12,6 @@ export interface ElementOptions {
     class?: string;
 }
 
-/**
- * Element component state
- */
 type ElementState = {
     tagType: string;
     className: string;
@@ -28,30 +23,15 @@ type ElementState = {
     class: string;
 };
 
-/**
- * Element component - Create arbitrary HTML elements
- * 
- * Usage:
- *   const div = jux.element('myDiv', { tagType: 'div', className: 'container' });
- *   div.render('#target');
- * 
- *   const span = jux.element('mySpan')
- *     .tagType('span')
- *     .className('highlight')
- *     .text('Hello World')
- *     .render();
- * 
- * For reactive content, use State bindings after render:
- *   const count = state(0);
- *   jux.element('counter').render('#app');
- *   count.bindText('counter', (val) => `Count: ${val}`);
- */
 export class Element {
     state: ElementState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
 
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{ property: string, stateObj: State<any>, transform?: Function }> = [];
+
     constructor(id: string, options: ElementOptions = {}) {
         this._id = id;
         this.id = id;
@@ -178,6 +158,25 @@ export class Element {
         return this;
     }
 
+    /**
+     * Bind an event to a handler
+     */
+    bind(event: string, handler: Function): Element {
+        this._bindings.push({ event, handler });
+        return this;
+    }
+
+    /**
+     * Sync a property to a state object
+     */
+    sync(property: string, stateObj: State<any>, transform?: Function): Element {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Element.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, transform });
+        return this;
+    }
+
     /* -------------------------
      * Render
      * ------------------------- */
@@ -187,8 +186,8 @@ export class Element {
      * @param targetId - CSS selector for target element (optional, defaults to body)
      */
     render(targetId?: string): Element {
+        // === 1. SETUP: Get container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
@@ -198,48 +197,62 @@ export class Element {
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
+
+        // === 2. PREPARE: Destructure state ===
         const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
 
-        // Create the element
+        // === 3. BUILD: Create DOM element ===
         const element = document.createElement(tagType);
-
-        // Set ID to component ID
         element.id = this._id;
 
-        // Set className
-        if (className) {
-            element.className = className;
-        }
-
-        if (classValue) {
-            element.className = element.className ? `${element.className} ${classValue}` : classValue;
-        }
+        if (className) element.className = className;
+        if (classValue) element.className = `${element.className} ${classValue}`.trim();
 
-        // Set content (innerHTML takes precedence over text)
-        if (innerHTML) {
-            element.innerHTML = innerHTML;
-        } else if (text) {
+        if (text) {
             element.textContent = text;
+        } else if (innerHTML) {
+            element.innerHTML = innerHTML;
         }
 
-        // Set attributes
-        Object.entries(attributes).forEach(([name, value]) => {
-            element.setAttribute(name, value);
+        Object.entries(attributes).forEach(([key, value]) => {
+            element.setAttribute(key, value);
         });
 
-        // Set styles (object)
-        Object.entries(styles).forEach(([property, value]) => {
-            element.style.setProperty(property, value);
-        });
+        const styleString = Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
 
-        // Set style (string)
-        if (style) {
-            element.setAttribute('style', style);
+        if (styleString || style) {
+            element.setAttribute('style', `${styleString}; ${style}`.trim());
         }
 
+        // === 4. WIRE: Add event listeners ===
+
+        this._bindings.forEach(({ event, handler }) => {
+            element.addEventListener(event, handler as EventListener);
+        });
+
+        this._syncBindings.forEach(({ property, stateObj, transform }) => {
+            stateObj.subscribe((val: any) => {
+                const transformed = transform ? transform(val) : val;
+
+                if (property === 'text') {
+                    element.textContent = String(transformed);
+                    this.state.text = String(transformed);
+                } else if (property === 'innerHTML') {
+                    element.innerHTML = String(transformed);
+                    this.state.innerHTML = String(transformed);
+                } else if (property === 'class') {
+                    element.className = String(transformed);
+                    this.state.class = String(transformed);
+                }
+            });
+        });
+
+        // === 5. RENDER: Append to DOM ===
         container.appendChild(element);
+
         return this;
     }
 
@@ -251,21 +264,13 @@ export class Element {
      *   const child = jux.element('myChild').renderTo(container);
      */
     renderTo(juxComponent: Element): Element {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('Element.renderTo: Invalid component - not an object');
+        if (!juxComponent || !juxComponent._id) {
+            throw new Error('Element.renderTo: Invalid component');
         }
-
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('Element.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
-
         return this.render(`#${juxComponent._id}`);
     }
 }
 
-/**
- * Factory helper
- */
 export function element(id: string, options: ElementOptions = {}): Element {
     return new Element(id, options);
 }

package/lib/components/fileupload.ts

@@ -1,73 +1,55 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * FileUpload component options
- */
 export interface FileUploadOptions {
+    label?: string;
     accept?: string;
     multiple?: boolean;
-    maxSize?: number;
     disabled?: boolean;
-    text?: string;
-    dragText?: string;
-    onChange?: (files: FileList) => void;
-    onError?: (error: string) => void;
+    name?: string;
     style?: string;
     class?: string;
 }
 
-/**
- * FileUpload component state
- */
 type FileUploadState = {
+    files: File[];
+    label: string;
     accept: string;
     multiple: boolean;
-    maxSize: number;
     disabled: boolean;
-    text: string;
-    dragText: string;
+    name: string;
     style: string;
     class: string;
-    files: File[];
 };
 
-/**
- * FileUpload component - Drag & drop file input
- * 
- * Usage:
- *   jux.fileupload('docs', {
- *     accept: '.pdf,.doc,.docx',
- *     multiple: true,
- *     maxSize: 5242880, // 5MB
- *     text: 'Click to upload or drag and drop',
- *     onChange: (files) => console.log(files),
- *     onError: (err) => console.error(err)
- *   }).render('#form');
- */
 export class FileUpload {
     state: FileUploadState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _onChange?: (files: FileList) => void;
-    private _onError?: (error: string) => void;
+
+    // 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: FileUploadOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
-        this._onError = options.onError;
 
         this.state = {
-            accept: options.accept ?? '*',
+            files: [],
+            label: options.label ?? '',
+            accept: options.accept ?? '',
             multiple: options.multiple ?? false,
-            maxSize: options.maxSize ?? 10485760, // 10MB default
             disabled: options.disabled ?? false,
-            text: options.text ?? 'Click to upload or drag and drop',
-            dragText: options.dragText ?? 'Drop files here',
+            name: options.name ?? id,
             style: options.style ?? '',
-            class: options.class ?? '',
-            files: []
+            class: options.class ?? ''
         };
     }
 
@@ -75,6 +57,11 @@ export class FileUpload {
      * Fluent API
      * ------------------------- */
 
+    label(value: string): this {
+        this.state.label = value;
+        return this;
+    }
+
     accept(value: string): this {
         this.state.accept = value;
         return this;
@@ -85,23 +72,14 @@ export class FileUpload {
         return this;
     }
 
-    maxSize(value: number): this {
-        this.state.maxSize = value;
-        return this;
-    }
-
     disabled(value: boolean): this {
         this.state.disabled = value;
+        this._updateElement();
         return this;
     }
 
-    text(value: string): this {
-        this.state.text = value;
-        return this;
-    }
-
-    dragText(value: string): this {
-        this.state.dragText = value;
+    name(value: string): this {
+        this.state.name = value;
         return this;
     }
 
@@ -115,13 +93,16 @@ export class FileUpload {
         return this;
     }
 
-    onChange(handler: (files: FileList) => void): this {
-        this._onChange = handler;
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
-    onError(handler: (error: string) => void): this {
-        this._onError = handler;
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`FileUpload.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
@@ -129,61 +110,15 @@ export class FileUpload {
      * Helpers
      * ------------------------- */
 
-    private _validateFiles(files: FileList): boolean {
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            if (file.size > this.state.maxSize) {
-                const maxMB = Math.round(this.state.maxSize / 1048576);
-                const error = `File "${file.name}" exceeds maximum size of ${maxMB}MB`;
-                if (this._onError) {
-                    this._onError(error);
-                }
-                return false;
-            }
-        }
-        return true;
-    }
+    private _updateElement(): void {
+        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        const button = document.getElementById(`${this._id}-button`) as HTMLButtonElement;
 
-    private _handleFiles(files: FileList): void {
-        if (this._validateFiles(files)) {
-            this.state.files = Array.from(files);
-            this._updateFileList();
-            if (this._onChange) {
-                this._onChange(files);
-            }
+        if (input) {
+            input.disabled = this.state.disabled;
         }
-    }
-
-    private _updateFileList(): void {
-        const fileList = document.getElementById(`${this._id}-list`);
-        if (fileList) {
-            fileList.innerHTML = '';
-            this.state.files.forEach((file, index) => {
-                const item = document.createElement('div');
-                item.className = 'jux-fileupload-file';
-
-                const name = document.createElement('span');
-                name.className = 'jux-fileupload-file-name';
-                name.textContent = file.name;
-
-                const size = document.createElement('span');
-                size.className = 'jux-fileupload-file-size';
-                const sizeKB = Math.round(file.size / 1024);
-                size.textContent = `${sizeKB} KB`;
-
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'jux-fileupload-file-remove';
-                removeBtn.textContent = '×';
-                removeBtn.addEventListener('click', () => {
-                    this.state.files.splice(index, 1);
-                    this._updateFileList();
-                });
-
-                item.appendChild(name);
-                item.appendChild(size);
-                item.appendChild(removeBtn);
-                fileList.appendChild(item);
-            });
+        if (button) {
+            button.disabled = this.state.disabled;
         }
     }
 
@@ -193,119 +128,155 @@ export class FileUpload {
 
     clear(): void {
         this.state.files = [];
-        this._updateFileList();
         const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
+        const fileList = document.getElementById(`${this._id}-list`);
+
         if (input) {
             input.value = '';
         }
+        if (fileList) {
+            this._updateFileList(fileList, []);
+        }
     }
 
     /* -------------------------
-     * Render
+     * Render (5-Step Pattern)
      * ------------------------- */
 
     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(`FileUpload: Target element "${targetId}" not found`);
+                throw new Error(`FileUpload: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { accept, multiple, disabled, text, dragText, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { label, accept, multiple, disabled, name, style, class: className } = this.state;
+        const hasFilesSync = this._syncBindings.some(b => b.property === 'files');
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-fileupload';
         wrapper.id = this._id;
-
-        if (className) {
-            wrapper.className += ` ${className}`;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        if (label) {
+            const labelEl = document.createElement('label');
+            labelEl.className = 'jux-fileupload-label';
+            labelEl.textContent = label;
+            wrapper.appendChild(labelEl);
         }
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
-
-        // Hidden file input
         const input = document.createElement('input');
         input.type = 'file';
         input.className = 'jux-fileupload-input';
         input.id = `${this._id}-input`;
-        input.accept = accept;
-        input.multiple = multiple;
+        input.name = name;
         input.disabled = disabled;
+        if (accept) input.accept = accept;
+        if (multiple) input.multiple = multiple;
 
-        input.addEventListener('change', (e) => {
-            const target = e.target as HTMLInputElement;
-            if (target.files && target.files.length > 0) {
-                this._handleFiles(target.files);
-            }
-        });
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'jux-fileupload-button';
+        button.id = `${this._id}-button`;
+        button.textContent = 'Choose File(s)';
+        button.disabled = disabled;
 
-        // Drop zone
-        const dropzone = document.createElement('div');
-        dropzone.className = 'jux-fileupload-dropzone';
+        const fileList = document.createElement('div');
+        fileList.className = 'jux-fileupload-list';
+        fileList.id = `${this._id}-list`;
 
-        const icon = document.createElement('div');
-        icon.className = 'jux-fileupload-icon';
-        icon.textContent = '📁';
+        wrapper.appendChild(button);
+        wrapper.appendChild(input);
+        wrapper.appendChild(fileList);
 
-        const textEl = document.createElement('div');
-        textEl.className = 'jux-fileupload-text';
-        textEl.textContent = text;
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-        dropzone.appendChild(icon);
-        dropzone.appendChild(textEl);
+        // Button click triggers file input
+        button.addEventListener('click', () => input.click());
 
-        // Click to open file dialog
-        dropzone.addEventListener('click', () => {
-            if (!disabled) {
-                input.click();
-            }
-        });
+        // Default file change behavior (only if NOT using sync)
+        if (!hasFilesSync) {
+            input.addEventListener('change', () => {
+                this.state.files = Array.from(input.files || []);
+                this._updateFileList(fileList, this.state.files);
+            });
+        }
 
-        // Drag & drop
-        dropzone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            if (!disabled) {
-                dropzone.classList.add('jux-fileupload-dropzone-active');
-                textEl.textContent = dragText;
-            }
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
         });
 
-        dropzone.addEventListener('dragleave', () => {
-            dropzone.classList.remove('jux-fileupload-dropzone-active');
-            textEl.textContent = text;
-        });
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'files') {
+                const transformToState = toState || ((v: any) => v);
+                const transformToComponent = toComponent || ((v: any) => v);
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transformToComponent(val);
+                    this.state.files = transformed;
+                    this._updateFileList(fileList, transformed);
+                });
 
-        dropzone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropzone.classList.remove('jux-fileupload-dropzone-active');
-            textEl.textContent = text;
+                // Component → State
+                input.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
 
-            if (!disabled && e.dataTransfer?.files) {
-                this._handleFiles(e.dataTransfer.files);
+                    const files = Array.from(input.files || []);
+                    this.state.files = files;
+                    this._updateFileList(fileList, files);
+
+                    const transformed = transformToState(files);
+                    stateObj.set(transformed);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
             }
         });
 
-        // File list
-        const fileList = document.createElement('div');
-        fileList.className = 'jux-fileupload-list';
-        fileList.id = `${this._id}-list`;
-
-        wrapper.appendChild(input);
-        wrapper.appendChild(dropzone);
-        wrapper.appendChild(fileList);
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }
 
+    private _updateFileList(fileList: HTMLElement, files: File[]): void {
+        fileList.innerHTML = '';
+
+        if (files.length === 0) {
+            fileList.textContent = 'No files selected';
+            return;
+        }
+
+        files.forEach(file => {
+            const fileItem = document.createElement('div');
+            fileItem.className = 'jux-fileupload-item';
+            fileItem.textContent = `${file.name} (${this._formatFileSize(file.size)})`;
+            fileList.appendChild(fileItem);
+        });
+    }
+
+    private _formatFileSize(bytes: number): string {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+
     renderTo(juxComponent: any): this {
         if (!juxComponent?._id) {
             throw new Error('FileUpload.renderTo: Invalid component');