juxscript 1.0.62 → 1.0.64

package/lib/components/element.ts

@@ -1,267 +0,0 @@
-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;
-    className?: string;
-    text?: string;
-    innerHTML?: string;
-    attributes?: Record<string, string>;
-    styles?: Record<string, string>;
-    style?: string;
-    class?: string;
-}
-
-type ElementState = {
-    tagType: string;
-    className: string;
-    text: string;
-    innerHTML: string;
-    attributes: Record<string, string>;
-    styles: Record<string, string>;
-    style: string;
-    class: string;
-};
-
-export class Element extends BaseComponent<ElementState> {
-    private _element: HTMLElement | null = null;
-
-    constructor(id: string, options: ElementOptions = {}) {
-        super(id, {
-            tagType: options.tagType ?? 'div',
-            className: options.className ?? '',
-            text: options.text ?? '',
-            innerHTML: options.innerHTML ?? '',
-            attributes: options.attributes ?? {},
-            styles: options.styles ?? {},
-            style: options.style ?? '',
-            class: options.class ?? ''
-        });
-    }
-
-    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()
-
-    tagType(value: string): Element {
-        this.state.tagType = value;
-        return this;
-    }
-
-    className(value: string): Element {
-        this.state.className = value;
-        return this;
-    }
-
-    text(value: string): Element {
-        this.state.text = value;
-        this.state.innerHTML = '';
-        return this;
-    }
-
-    innerHTML(value: string): Element {
-        this.state.innerHTML = value;
-        this.state.text = '';
-        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;
-        }
-
-        const contentWithBreak = newLine ? (asHTML ? content + '<br>' : content + '\n') : content;
-
-        if (asHTML) {
-            this._element.insertAdjacentHTML('beforeend', contentWithBreak);
-        } else {
-            const textNode = document.createTextNode(contentWithBreak);
-            this._element.appendChild(textNode);
-        }
-
-        return this;
-    }
-
-    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;
-    }
-
-    clear(): Element {
-        if (!this._element) {
-            console.warn(`Element.clear: Element "${this._id}" not yet rendered`);
-            return this;
-        }
-
-        this._element.innerHTML = '';
-        return this;
-    }
-
-    /**
-     * Append child component or HTML element
-     */
-    append(child: any): Element {
-        if (!this._element) {
-            console.warn(`Element.append: Element "${this._id}" not yet rendered`);
-            return this;
-        }
-
-        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(targetId?: string): this {
-        const container = this._setupContainer(targetId);
-
-        const { tagType, className, text, innerHTML, attributes, styles, style, class: classValue } = this.state;
-
-        // Build element
-        const element = document.createElement(tagType);
-        element.id = this._id;
-
-        if (className) element.className = className;
-        if (classValue) element.className = `${element.className} ${classValue}`.trim();
-
-        if (text) {
-            element.textContent = text;
-        } else if (innerHTML) {
-            element.innerHTML = innerHTML;
-        }
-
-        Object.entries(attributes).forEach(([key, value]) => {
-            element.setAttribute(key, value);
-        });
-
-        const styleString = Object.entries(styles)
-            .map(([key, value]) => `${key}: ${value}`)
-            .join('; ');
-
-        if (styleString || style) {
-            element.setAttribute('style', `${styleString}; ${style}`.trim());
-        }
-
-        // Wire events using inherited method
-        this._wireStandardEvents(element);
-
-        // Wire sync bindings
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            const transform = toComponent || ((v: any) => v);
-
-            stateObj.subscribe((val: any) => {
-                const transformed = transform(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);
-                }
-            });
-        });
-
-        container.appendChild(element);
-        this._element = element;
-
-        return this;
-    }
-}
-
-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' });
-}
-

package/lib/components/error-handler.ts

@@ -1,285 +0,0 @@
-/**
- * ErrorHandler - Global error handler for JUX components
- * Displays errors visually in the DOM for easy debugging
- */
-
-export interface ComponentError {
-  component: string;
-  method: string;
-  message: string;
-  stack?: string;
-  timestamp: Date;
-  context?: any;
-}
-
-export class ErrorHandler {
-  private static errors: ComponentError[] = [];
-  private static errorContainer: HTMLDivElement | null = null;
-  private static enabled: boolean = true;
-
-  /**
-   * Initialize error handler
-   */
-  static init() {
-    if (typeof document === 'undefined') return;
-
-    // Create error container
-    this.errorContainer = document.createElement('div');
-    this.errorContainer.id = 'jux-error-container';
-    this.errorContainer.style.cssText = `
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      max-width: 500px;
-      max-height: 600px;
-      overflow-y: auto;
-      z-index: 999999;
-      font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-      font-size: 12px;
-    `;
-
-    document.body.appendChild(this.errorContainer);
-
-    // Listen for unhandled errors
-    window.addEventListener('error', (event) => {
-      this.captureError({
-        component: 'Global',
-        method: 'window.onerror',
-        message: event.message,
-        stack: event.error?.stack,
-        timestamp: new Date(),
-        context: { filename: event.filename, lineno: event.lineno, colno: event.colno }
-      });
-    });
-
-    // Listen for unhandled promise rejections
-    window.addEventListener('unhandledrejection', (event) => {
-      this.captureError({
-        component: 'Global',
-        method: 'unhandledrejection',
-        message: event.reason?.message || String(event.reason),
-        stack: event.reason?.stack,
-        timestamp: new Date(),
-        context: { promise: event.promise }
-      });
-    });
-  }
-
-  /**
-   * Capture and display an error
-   */
-  static captureError(error: ComponentError) {
-    if (!this.enabled) return;
-
-    this.errors.push(error);
-    this.renderError(error);
-    console.error(`[JUX Error] ${error.component}.${error.method}:`, error.message);
-  }
-
-  /**
-   * Render an error card in the DOM
-   */
-  private static renderError(error: ComponentError) {
-    if (!this.errorContainer) return;
-
-    const errorCard = document.createElement('div');
-    errorCard.style.cssText = `
-      background: linear-gradient(135deg, #1a1a1a 0%, #2a1a1a 100%);
-      border-left: 4px solid #ff4757;
-      border-radius: 8px;
-      padding: 16px;
-      margin-bottom: 12px;
-      box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
-      animation: slideIn 0.3s ease-out;
-    `;
-
-    const time = error.timestamp.toLocaleTimeString();
-
-    errorCard.innerHTML = `
-      <style>
-        @keyframes slideIn {
-          from {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-        .jux-error-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: 8px;
-        }
-        .jux-error-title {
-          color: #ff4757;
-          font-weight: bold;
-          font-size: 13px;
-        }
-        .jux-error-time {
-          color: #666;
-          font-size: 11px;
-        }
-        .jux-error-location {
-          color: #ffa502;
-          font-size: 12px;
-          margin-bottom: 8px;
-        }
-        .jux-error-message {
-          color: #e0e0e0;
-          margin-bottom: 8px;
-          line-height: 1.4;
-        }
-        .jux-error-stack {
-          background: #0a0a0a;
-          padding: 8px;
-          border-radius: 4px;
-          color: #888;
-          font-size: 10px;
-          max-height: 150px;
-          overflow-y: auto;
-          margin-bottom: 8px;
-        }
-        .jux-error-context {
-          background: #0a0a0a;
-          padding: 8px;
-          border-radius: 4px;
-          color: #888;
-          font-size: 10px;
-        }
-        .jux-error-close {
-          background: #ff4757;
-          color: white;
-          border: none;
-          border-radius: 4px;
-          padding: 4px 12px;
-          cursor: pointer;
-          font-size: 11px;
-          float: right;
-        }
-        .jux-error-close:hover {
-          background: #ff6b7a;
-        }
-      </style>
-      <div class="jux-error-header">
-        <div class="jux-error-title">⚠️ Component Error</div>
-        <div class="jux-error-time">${time}</div>
-      </div>
-      <div class="jux-error-location">
-        ${error.component}.${error.method}()
-      </div>
-      <div class="jux-error-message">
-        ${this.escapeHtml(error.message)}
-      </div>
-      ${error.stack ? `
-        <details>
-          <summary style="color: #888; cursor: pointer; margin-bottom: 8px;">Stack Trace</summary>
-          <div class="jux-error-stack">${this.escapeHtml(error.stack)}</div>
-        </details>
-      ` : ''}
-      ${error.context ? `
-        <details>
-          <summary style="color: #888; cursor: pointer; margin-bottom: 8px;">Context</summary>
-          <div class="jux-error-context">${this.escapeHtml(JSON.stringify(error.context, null, 2))}</div>
-        </details>
-      ` : ''}
-      <button class="jux-error-close">Dismiss</button>
-    `;
-
-    // Add close button handler
-    const closeBtn = errorCard.querySelector('.jux-error-close');
-    closeBtn?.addEventListener('click', () => {
-      errorCard.style.animation = 'slideOut 0.3s ease-out';
-      setTimeout(() => errorCard.remove(), 300);
-    });
-
-    this.errorContainer.appendChild(errorCard);
-  }
-
-  /**
-   * Escape HTML to prevent XSS
-   */
-  private static escapeHtml(str: string): string {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-  }
-
-  /**
-   * Clear all errors
-   */
-  static clear() {
-    this.errors = [];
-    if (this.errorContainer) {
-      this.errorContainer.innerHTML = '';
-    }
-  }
-
-  /**
-   * Enable/disable error handler
-   */
-  static setEnabled(enabled: boolean) {
-    this.enabled = enabled;
-  }
-
-  /**
-   * Get all captured errors
-   */
-  static getErrors(): ComponentError[] {
-    return [...this.errors];
-  }
-}
-
-/**
- * Utility function to wrap component methods with error handling
- */
-export function withErrorHandling<T extends (...args: any[]) => any>(
-  component: string,
-  method: string,
-  fn: T,
-  context?: any
-): T {
-  return ((...args: any[]) => {
-    try {
-      const result = fn(...args);
-      
-      // Handle async functions
-      if (result instanceof Promise) {
-        return result.catch((error) => {
-          ErrorHandler.captureError({
-            component,
-            method,
-            message: error.message || String(error),
-            stack: error.stack,
-            timestamp: new Date(),
-            context
-          });
-          throw error;
-        });
-      }
-      
-      return result;
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component,
-        method,
-        message: error.message || String(error),
-        stack: error.stack,
-        timestamp: new Date(),
-        context
-      });
-      throw error;
-    }
-  }) as T;
-}
-
-// Initialize on import
-if (typeof document !== 'undefined') {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => ErrorHandler.init());
-  } else {
-    ErrorHandler.init();
-  }
-}