juxscript 1.0.20 → 1.0.21

package/lib/components/element.ts

@@ -1,5 +1,8 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;  // Element has no trigger events
+const CALLBACK_EVENTS = [] as const; // Element has no callback events
 
 export interface ElementOptions {
     tagType?: string;
@@ -23,20 +26,11 @@ type ElementState = {
     class: string;
 };
 
-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 }> = [];
+export class Element extends BaseComponent<ElementState> {
+    private _element: HTMLElement | null = null;
 
     constructor(id: string, options: ElementOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             tagType: options.tagType ?? 'div',
             className: options.className ?? '',
             text: options.text ?? '',
@@ -45,164 +39,129 @@ export class Element {
             styles: options.styles ?? {},
             style: options.style ?? '',
             class: options.class ?? ''
-        };
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide(), toggleVisibility()
+    // - attr(), attrs(), removeAttr()
+    // - disabled(), enable(), disable()
+    // - loading()
+    // - focus(), blur()
+    // - remove()
+    // - bind(), sync(), renderTo()
 
-    /**
-     * Set the HTML tag type
-     */
     tagType(value: string): Element {
         this.state.tagType = value;
         return this;
     }
 
-    /**
-     * Set the className
-     */
     className(value: string): Element {
         this.state.className = value;
         return this;
     }
 
-    /**
-     * Add a class to existing classes
-     */
-    addClass(value: string): Element {
-        const classes = this.state.className.split(' ').filter(c => c);
-        if (!classes.includes(value)) {
-            classes.push(value);
-            this.state.className = classes.join(' ');
-        }
-        return this;
-    }
-
-    /**
-     * Remove a class from existing classes
-     */
-    removeClass(value: string): Element {
-        const classes = this.state.className.split(' ').filter(c => c && c !== value);
-        this.state.className = classes.join(' ');
-        return this;
-    }
-
-    /**
-     * Set text content (static)
-     */
     text(value: string): Element {
         this.state.text = value;
         this.state.innerHTML = '';
         return this;
     }
 
-    /**
-     * Set HTML content (static, clears text)
-     */
     innerHTML(value: string): Element {
         this.state.innerHTML = value;
         this.state.text = '';
         return this;
     }
 
-    /**
-     * Set a single attribute
-     */
-    attr(name: string, value: string): Element {
-        this.state.attributes = { ...this.state.attributes, [name]: value };
-        return this;
-    }
+    write(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        if (!this._element) {
+            console.warn(`Element.write: Element "${this._id}" not yet rendered`);
+            return this;
+        }
 
-    /**
-     * Set multiple attributes
-     */
-    attrs(attributes: Record<string, string>): Element {
-        this.state.attributes = { ...this.state.attributes, ...attributes };
-        return this;
-    }
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
 
-    /**
-     * Set inline styles
-     * @param propertyOrValue - CSS property name, style string, or style object
-     * @param value - CSS value (when first arg is property name)
-     */
-    style(propertyOrValue: string | Record<string, string>, value?: string): Element {
-        if (typeof propertyOrValue === 'string' && value !== undefined) {
-            // Called as .style('color', 'red')
-            this.state.styles = { ...this.state.styles, [propertyOrValue]: value };
-        } else if (typeof propertyOrValue === 'string') {
-            // Called as .style('color: red; background: blue')
-            this.state.style = propertyOrValue;
-        } else if (typeof propertyOrValue === 'object') {
-            // Called as .style({ color: 'red', background: 'blue' })
-            this.state.styles = { ...this.state.styles, ...propertyOrValue };
+        if (asHTML) {
+            this._element.insertAdjacentHTML('beforeend', contentWithBreak);
+        } else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.appendChild(textNode);
         }
-        return this;
-    }
 
-    /**
-     * Set multiple styles as object
-     */
-    styles(styles: Record<string, string>): Element {
-        this.state.styles = { ...this.state.styles, ...styles };
         return this;
     }
 
-    /**
-     * Add additional classes (fluent alternative to className)
-     */
-    class(value: string): Element {
-        this.state.class = value;
+    prepend(content: string, asHTML: boolean = false, newLine: boolean = false): Element {
+        if (!this._element) {
+            console.warn(`Element.prepend: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
+
+        if (asHTML) {
+            this._element.insertAdjacentHTML('afterbegin', contentWithBreak);
+        } else {
+            const textNode = document.createTextNode(contentWithBreak);
+            this._element.insertBefore(textNode, this._element.firstChild);
+        }
+
         return this;
     }
 
-    /**
-     * Bind an event to a handler
-     */
-    bind(event: string, handler: Function): Element {
-        this._bindings.push({ event, handler });
+    clear(): Element {
+        if (!this._element) {
+            console.warn(`Element.clear: Element "${this._id}" not yet rendered`);
+            return this;
+        }
+
+        this._element.innerHTML = '';
         return this;
     }
 
     /**
-     * Sync a property to a state object
+     * Append child component or HTML element
      */
-    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}"`);
+    append(child: any): Element {
+        if (!this._element) {
+            console.warn(`Element.append: Element "${this._id}" not yet rendered`);
+            return this;
         }
-        this._syncBindings.push({ property, stateObj, transform });
+
+        if (child instanceof HTMLElement) {
+            this._element.appendChild(child);
+        } else if (child?._element) {
+            // Another Jux component
+            this._element.appendChild(child._element);
+        } else if (typeof child === 'string') {
+            const div = document.createElement('div');
+            div.innerHTML = child;
+            this._element.appendChild(div.firstChild || div);
+        }
+
         return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-    /**
-     * Render the element to a target 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)) {
-                throw new Error(`Element: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
-
-        // === 2. PREPARE: Destructure state ===
         const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
 
-        // === 3. BUILD: Create DOM element ===
+        // Build element
         const element = document.createElement(tagType);
         element.id = this._id;
 
@@ -227,15 +186,15 @@ export class Element {
             element.setAttribute('style', `${styleString}; ${style}`.trim());
         }
 
-        // === 4. WIRE: Add event listeners ===
+        // Wire events using inherited method
+        this._wireStandardEvents(element);
 
-        this._bindings.forEach(({ event, handler }) => {
-            element.addEventListener(event, handler as EventListener);
-        });
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            const transform = toComponent || ((v: any) => v);
 
-        this._syncBindings.forEach(({ property, stateObj, transform }) => {
             stateObj.subscribe((val: any) => {
-                const transformed = transform ? transform(val) : val;
+                const transformed = transform(val);
 
                 if (property === 'text') {
                     element.textContent = String(transformed);
@@ -250,27 +209,119 @@ export class Element {
             });
         });
 
-        // === 5. RENDER: Append to DOM ===
         container.appendChild(element);
+        this._element = element;
+
+        // Inject base semantic styles if this is a semantic element
+        this._injectSemanticStyles();
 
         return this;
     }
 
-    /**
-     * Render to another Jux component's container
-     * 
-     * Usage:
-     *   const container = jux.element('myContainer');
-     *   const child = jux.element('myChild').renderTo(container);
-     */
-    renderTo(juxComponent: Element): Element {
-        if (!juxComponent || !juxComponent._id) {
-            throw new Error('Element.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectSemanticStyles(): void {
+        const styleId = 'jux-semantic-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+            /* Jux Semantic Element Base Styles */
+            .jux-header {
+                display: block;
+                width: 100%;
+                background: var(--jux-header-bg, #ffffff);
+                border-bottom: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-header-padding, 1rem 2rem);
+                position: sticky;
+                top: 0;
+                z-index: 1000;
+            }
+
+            .jux-footer {
+                display: block;
+                width: 100%;
+                background: var(--jux-footer-bg, #f9fafb);
+                border-top: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-footer-padding, 2rem);
+                margin-top: auto;
+            }
+
+            .jux-main {
+                display: block;
+                flex: 1;
+                width: 100%;
+                padding: var(--jux-main-padding, 2rem);
+                min-height: calc(100vh - 200px);
+            }
+
+            .jux-aside {
+                display: block;
+                background: var(--jux-aside-bg, #f9fafb);
+                border-right: 1px solid var(--jux-border-color, #e5e7eb);
+                padding: var(--jux-aside-padding, 1.5rem);
+            }
+
+            .jux-section {
+                display: block;
+                margin-bottom: var(--jux-section-margin, 2rem);
+            }
+
+            .jux-article {
+                display: block;
+                max-width: var(--jux-article-max-width, 65ch);
+                margin: 0 auto;
+            }
+        `;
+        document.head.appendChild(style);
     }
 }
 
 export function element(id: string, options: ElementOptions = {}): Element {
     return new Element(id, options);
-}
+}
+
+// Semantic HTML element factories with default classes
+export function header(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-header';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'header', class: mergedClass });
+}
+
+export function footer(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-footer';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'footer', class: mergedClass });
+}
+
+export function main(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-main';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'main', class: mergedClass });
+}
+
+export function aside(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-aside';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'aside', class: mergedClass });
+}
+
+export function section(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-section';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'section', class: mergedClass });
+}
+
+export function article(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    const defaultClass = 'jux-article';
+    const mergedClass = options.class ? `${defaultClass} ${options.class}` : defaultClass;
+    return new Element(id, { ...options, tagType: 'article', class: mergedClass });
+}
+
+export function div(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'div' });
+}
+
+export function span(id: string, options: Omit<ElementOptions, 'tagType'> = {}): Element {
+    return new Element(id, { ...options, tagType: 'span' });
+}
+