juxscript 1.1.239 → 1.1.243

package/lib/components/watcher.ts

@@ -1,261 +0,0 @@
-import { BaseComponent } from "./base/BaseComponent.js";
-
-/**
- * 🔍 WATCHER - Simple Component Observer
- * 
- * Watches JUX components and fires callbacks when their state changes.
- * Think of it as a "subscribe to component updates" utility.
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * BASIC USAGE
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * ```javascript
- * import { input, paragraph, watcher } from 'juxscript';
- * 
- * const nameInput = input('name').render('app');
- * const greeting = paragraph('greeting').render('app');
- * 
- * // Watch nameInput and update greeting whenever it changes
- * watcher('name-watcher')
- *     .watch(nameInput, () => {
- *         greeting.text(`Hello, ${nameInput.getValue()}!`);
- *     });
- * ```
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * MULTIPLE COMPONENTS
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * ```javascript
- * const firstNameInput = input('firstName').render();
- * const lastNameInput = input('lastName').render();
- * const fullName = paragraph('fullName').render();
- * 
- * const formWatcher = watcher('form');
- * 
- * // Watch both inputs, same callback
- * formWatcher
- *     .watch(firstNameInput, updateFullName)
- *     .watch(lastNameInput, updateFullName);
- * 
- * function updateFullName() {
- *     const first = firstNameInput.getValue();
- *     const last = lastNameInput.getValue();
- *     fullName.text(`${first} ${last}`.trim());
- * }
- * ```
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * DECLARATIVE STYLE - Watch Many, Do One Thing
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * ```javascript
- * const price = input('price').render();
- * const quantity = input('quantity').render();
- * const discount = input('discount').render();
- * const total = paragraph('total').render();
- * 
- * // Update total whenever ANY input changes
- * watcher('calculator')
- *     .watchMany([price, quantity, discount], () => {
- *         const p = parseFloat(price.getValue()) || 0;
- *         const q = parseInt(quantity.getValue()) || 0;
- *         const d = parseFloat(discount.getValue()) || 0;
- *         
- *         const subtotal = p * q;
- *         const finalTotal = subtotal - (subtotal * d / 100);
- *         
- *         total.text(`Total: $${finalTotal.toFixed(2)}`);
- *     });
- * ```
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * STOP WATCHING
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * ```javascript
- * const myWatcher = watcher('temp');
- * const myInput = input('field').render();
- * 
- * const myCallback = () => console.log('Changed!');
- * 
- * myWatcher.watch(myInput, myCallback);
- * 
- * // Later: stop watching
- * myWatcher.unwatch(myInput, myCallback);
- * 
- * // Or stop watching ALL callbacks for this component
- * myWatcher.unwatchAll(myInput);
- * 
- * // Or clear everything
- * myWatcher.clear();
- * ```
- * 
- * ═══════════════════════════════════════════════════════════════════════════════
- * HOW IT WORKS
- * ═══════════════════════════════════════════════════════════════════════════════
- * 
- * 1. Watcher stores callbacks keyed by component._id
- * 2. Component's Proxy detects state changes
- * 3. Component calls watcher.notify(component) [if integrated]
- * 4. Watcher runs all registered callbacks for that component
- * 
- * Current limitation: Manual notification required. To auto-notify:
- * 
- * ```javascript
- * // In your component after state change:
- * this._notifyWatchers();
- * ```
- * 
- * Or integrate into BaseComponent.update():
- * 
- * ```typescript
- * update(prop: string, value: any): void {
- *     // ...existing update logic...
- *     this._watchers.forEach(w => w.notify(this));
- * }
- * ```
- */
-
-export class Watcher {
-    private _id: string;
-    private _callbacks: Map<string, Set<Function>> = new Map();
-
-    constructor(id: string) {
-        this._id = id;
-    }
-
-    /**
-     * Watch a component and run callback when it changes
-     * 
-     * @param component - Component to watch
-     * @param callback - Function to run on change
-     * @returns this (for chaining)
-     */
-    watch(component: BaseComponent<any>, callback: Function): this {
-        const id = component._id;
-
-        if (!this._callbacks.has(id)) {
-            this._callbacks.set(id, new Set());
-        }
-
-        this._callbacks.get(id)!.add(callback);
-        return this;
-    }
-
-    /**
-     * Watch multiple components with the same callback
-     * 
-     * @param components - Array of components to watch
-     * @param callback - Function to run when ANY of them change
-     * @returns this (for chaining)
-     */
-    watchMany(components: BaseComponent<any>[], callback: Function): this {
-        components.forEach(component => this.watch(component, callback));
-        return this;
-    }
-
-    /**
-     * Stop watching a component (remove specific callback)
-     * 
-     * @param component - Component to stop watching
-     * @param callback - Specific callback to remove
-     * @returns this (for chaining)
-     */
-    unwatch(component: BaseComponent<any>, callback: Function): this {
-        const id = component._id;
-        const callbacks = this._callbacks.get(id);
-
-        if (callbacks) {
-            callbacks.delete(callback);
-
-            // Clean up empty sets
-            if (callbacks.size === 0) {
-                this._callbacks.delete(id);
-            }
-        }
-
-        return this;
-    }
-
-    /**
-     * Stop watching a component (remove ALL callbacks)
-     * 
-     * @param component - Component to stop watching completely
-     * @returns this (for chaining)
-     */
-    unwatchAll(component: BaseComponent<any>): this {
-        this._callbacks.delete(component._id);
-        return this;
-    }
-
-    /**
-     * Notify all callbacks for a component (call this when component changes)
-     * 
-     * @param component - Component that changed
-     * @param args - Optional arguments to pass to callbacks
-     */
-    notify(component: BaseComponent<any>, ...args: any[]): void {
-        const callbacks = this._callbacks.get(component._id);
-
-        if (callbacks && callbacks.size > 0) {
-            callbacks.forEach(callback => {
-                try {
-                    callback(...args);
-                } catch (error) {
-                    console.error(`[Watcher ${this._id}] Callback error:`, error);
-                }
-            });
-        }
-    }
-
-    /**
-     * Clear all watched components and callbacks
-     * 
-     * @returns this (for chaining)
-     */
-    clear(): this {
-        this._callbacks.clear();
-        return this;
-    }
-
-    /**
-     * Get list of component IDs being watched
-     * 
-     * @returns Array of component IDs
-     */
-    getWatchedIds(): string[] {
-        return Array.from(this._callbacks.keys());
-    }
-
-    /**
-     * Get count of callbacks for a component
-     * 
-     * @param component - Component to check
-     * @returns Number of callbacks registered
-     */
-    getCallbackCount(component: BaseComponent<any>): number {
-        return this._callbacks.get(component._id)?.size || 0;
-    }
-
-    /**
-     * Check if watching a component
-     * 
-     * @param component - Component to check
-     * @returns true if watching this component
-     */
-    isWatching(component: BaseComponent<any>): boolean {
-        return this._callbacks.has(component._id);
-    }
-}
-
-/**
- * Create a new watcher instance
- * 
- * @param id - Unique identifier for this watcher
- * @returns New Watcher instance
- */
-export function watcher(id: string): Watcher {
-    return new Watcher(id);
-}

package/lib/components/write.d.ts

@@ -1,107 +0,0 @@
-/**
- * Write - Simple content writer with no component tracking
- * Perfect for quick HTML output without ID management
- */
-export interface WriteOptions {
-    tagType?: string;
-    className?: string;
-    style?: string;
-    attributes?: Record<string, string>;
-    html?: boolean;
-}
-/**
- * Write content directly to a target element
- *
- * Usage:
- *   // Write text (defaults to body)
- *   jux.write('Hello World!').render();
- *
- *   // Write to specific target
- *   jux.write('Content').render('#container');
- *
- *   // Write HTML
- *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
- *
- *   // Write with styling
- *   jux.write('Styled text').style('color: red;').render('#container');
- */
-export declare class Write {
-    private content;
-    private options;
-    constructor(content: string, options?: WriteOptions);
-    /**
-     * Set HTML mode (treat content as HTML)
-     */
-    html(enabled?: boolean): this;
-    /**
-     * Set tag type
-     */
-    tagType(value: string): this;
-    /**
-     * Set CSS class
-     */
-    className(value: string): this;
-    /**
-     * Set inline styles
-     */
-    style(value: string): this;
-    /**
-     * Set custom attributes
-     */
-    attrs(attributes: Record<string, string>): this;
-    /**
-     * Render content to target element
-     */
-    render(targetSelector?: string): this;
-    /**
-     * Replace target content (clear first, then render)
-     */
-    replace(targetSelector?: string): this;
-    /**
-     * Render before target element
-     */
-    before(targetSelector: string): this;
-    /**
-     * Render after target element
-     */
-    after(targetSelector: string): this;
-    /**
-     * Prepend to target (insert as first child)
-     */
-    prepend(targetSelector?: string): this;
-    /**
-     * Append to target (alias for render)
-     */
-    append(targetSelector?: string): this;
-    private _getTarget;
-    private _createElement;
-}
-/**
- * Factory function - simple, no overloads
- */
-export declare function write(content: string, options?: WriteOptions): Write;
-/**
- * Write text (explicit)
- */
-export declare function writeText(content: string, options?: Omit<WriteOptions, 'html'>): Write;
-/**
- * Write HTML (explicit)
- */
-export declare function writeHtml(content: string, options?: Omit<WriteOptions, 'html'>): Write;
-/**
- * Write paragraph
- */
-export declare function writeParagraph(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
-/**
- * Write heading
- */
-export declare function writeHeading(content: string, level?: 1 | 2 | 3 | 4 | 5 | 6, options?: Omit<WriteOptions, 'tagType'>): Write;
-/**
- * Write span
- */
-export declare function writeSpan(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
-/**
- * Write div (explicit)
- */
-export declare function writeDiv(content: string, options?: Omit<WriteOptions, 'tagType'>): Write;
-//# sourceMappingURL=write.d.ts.map

package/lib/components/write.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"write.d.ts","sourceRoot":"","sources":["write.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,KAAK;IACd,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAe;gBAElB,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAgBvD;;OAEG;IACH,IAAI,CAAC,OAAO,GAAE,OAAc,GAAG,IAAI;IAKnC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B;;OAEG;IACH,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B;;OAEG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK1B;;OAEG;IACH,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAS/C;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAUrC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAWtC;;OAEG;IACH,MAAM,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAapC;;OAEG;IACH,KAAK,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI;IAanC;;OAEG;IACH,OAAO,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAUtC;;OAEG;IACH,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI;IAQrC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;CA6BzB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAExE;AAMD;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GAAG,KAAK,CAE1F;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,MAAM,CAAM,GAAG,KAAK,CAE1F;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAElG;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,GAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAK,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAElI;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAE7F;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,IAAI,CAAC,YAAY,EAAE,SAAS,CAAM,GAAG,KAAK,CAE5F"}

package/lib/components/write.js

@@ -1,222 +0,0 @@
-/**
- * Write - Simple content writer with no component tracking
- * Perfect for quick HTML output without ID management
- */
-/**
- * Write content directly to a target element
- *
- * Usage:
- *   // Write text (defaults to body)
- *   jux.write('Hello World!').render();
- *
- *   // Write to specific target
- *   jux.write('Content').render('#container');
- *
- *   // Write HTML
- *   jux.write('<strong>Bold text</strong>').html(true).render('#container');
- *
- *   // Write with styling
- *   jux.write('Styled text').style('color: red;').render('#container');
- */
-export class Write {
-    constructor(content, options = {}) {
-        this.content = content;
-        this.options = {
-            tagType: 'div',
-            className: '',
-            style: '',
-            attributes: {},
-            html: false,
-            ...options
-        };
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Set HTML mode (treat content as HTML)
-     */
-    html(enabled = true) {
-        this.options.html = enabled;
-        return this;
-    }
-    /**
-     * Set tag type
-     */
-    tagType(value) {
-        this.options.tagType = value;
-        return this;
-    }
-    /**
-     * Set CSS class
-     */
-    className(value) {
-        this.options.className = value;
-        return this;
-    }
-    /**
-     * Set inline styles
-     */
-    style(value) {
-        this.options.style = value;
-        return this;
-    }
-    /**
-     * Set custom attributes
-     */
-    attrs(attributes) {
-        this.options.attributes = attributes;
-        return this;
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER METHODS
-     * ═════════════════════════════════════════════════════════════════ */
-    /**
-     * Render content to target element
-     */
-    render(targetSelector) {
-        const target = this._getTarget(targetSelector);
-        if (!target)
-            return this;
-        const element = this._createElement();
-        target.appendChild(element);
-        return this;
-    }
-    /**
-     * Replace target content (clear first, then render)
-     */
-    replace(targetSelector) {
-        const target = this._getTarget(targetSelector);
-        if (!target)
-            return this;
-        target.innerHTML = '';
-        const element = this._createElement();
-        target.appendChild(element);
-        return this;
-    }
-    /**
-     * Render before target element
-     */
-    before(targetSelector) {
-        const target = document.querySelector(targetSelector);
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${targetSelector}" not found`);
-            return this;
-        }
-        const element = this._createElement();
-        target.parentNode?.insertBefore(element, target);
-        return this;
-    }
-    /**
-     * Render after target element
-     */
-    after(targetSelector) {
-        const target = document.querySelector(targetSelector);
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${targetSelector}" not found`);
-            return this;
-        }
-        const element = this._createElement();
-        target.parentNode?.insertBefore(element, target.nextSibling);
-        return this;
-    }
-    /**
-     * Prepend to target (insert as first child)
-     */
-    prepend(targetSelector) {
-        const target = this._getTarget(targetSelector);
-        if (!target)
-            return this;
-        const element = this._createElement();
-        target.insertBefore(element, target.firstChild);
-        return this;
-    }
-    /**
-     * Append to target (alias for render)
-     */
-    append(targetSelector) {
-        return this.render(targetSelector);
-    }
-    /* ═════════════════════════════════════════════════════════════════
-     * PRIVATE HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-    _getTarget(selector) {
-        const targetSelector = selector || 'body';
-        const target = document.querySelector(targetSelector);
-        if (!target || !(target instanceof HTMLElement)) {
-            console.warn(`Write: Target element "${targetSelector}" not found`);
-            return null;
-        }
-        return target;
-    }
-    _createElement() {
-        const element = document.createElement(this.options.tagType);
-        // Set content (text or HTML)
-        if (this.options.html) {
-            element.innerHTML = this.content;
-        }
-        else {
-            element.textContent = this.content;
-        }
-        // Apply className
-        if (this.options.className) {
-            element.className = this.options.className;
-        }
-        // Apply inline styles
-        if (this.options.style) {
-            element.setAttribute('style', this.options.style);
-        }
-        // Apply custom attributes
-        if (this.options.attributes) {
-            Object.entries(this.options.attributes).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
-        }
-        return element;
-    }
-}
-/**
- * Factory function - simple, no overloads
- */
-export function write(content, options = {}) {
-    return new Write(content, options);
-}
-/* ═════════════════════════════════════════════════════════════════
- * SHORTHAND HELPERS
- * ═════════════════════════════════════════════════════════════════ */
-/**
- * Write text (explicit)
- */
-export function writeText(content, options = {}) {
-    return new Write(content, { ...options, html: false });
-}
-/**
- * Write HTML (explicit)
- */
-export function writeHtml(content, options = {}) {
-    return new Write(content, { ...options, html: true });
-}
-/**
- * Write paragraph
- */
-export function writeParagraph(content, options = {}) {
-    return new Write(content, { ...options, tagType: 'p' });
-}
-/**
- * Write heading
- */
-export function writeHeading(content, level = 2, options = {}) {
-    return new Write(content, { ...options, tagType: `h${level}` });
-}
-/**
- * Write span
- */
-export function writeSpan(content, options = {}) {
-    return new Write(content, { ...options, tagType: 'span' });
-}
-/**
- * Write div (explicit)
- */
-export function writeDiv(content, options = {}) {
-    return new Write(content, { ...options, tagType: 'div' });
-}