juxscript 1.0.3 → 1.0.4

package/lib/components/heading.ts

@@ -0,0 +1,119 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Heading options
+ */
+export interface HeadingOptions {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    text?: string;
+    class?: string;
+    style?: string;
+}
+
+/**
+ * Heading state
+ */
+type HeadingState = {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    text: string;
+    class: string;
+    style: string;
+};
+
+/**
+ * Heading component - semantic heading elements (h1-h6)
+ * 
+ * Usage:
+ *   jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');
+ *   jux.heading('subtitle').level(2).text('Getting Started').render('#app');
+ */
+export class Heading {
+    state: HeadingState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: HeadingOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            level: options.level ?? 1,
+            text: options.text ?? '',
+            class: options.class ?? '',
+            style: options.style ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    level(value: 1 | 2 | 3 | 4 | 5 | 6): this {
+        this.state.level = value;
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string | HTMLElement): this {
+        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(`Heading: Target element "${targetId}" not found`);
+                }
+                container = target;
+            }
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { level, text, class: className, style } = this.state;
+
+        const heading = document.createElement(`h${level}`) as HTMLHeadingElement;
+        heading.id = this._id;
+        heading.textContent = text;
+
+        if (className) {
+            heading.className = className;
+        }
+
+        if (style) {
+            heading.setAttribute('style', style);
+        }
+
+        container.appendChild(heading);
+
+        return this;
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function heading(id: string, options: HeadingOptions = {}): Heading {
+    return new Heading(id, options);
+}

package/lib/components/helpers.ts

@@ -0,0 +1,34 @@
+/**
+ * Component helper utilities
+ */
+
+/**
+ * Get or create a container element for a component
+ * Auto-creates if it doesn't exist and appends to appropriate parent
+ */
+export function getOrCreateContainer(id: string): HTMLElement {
+    if (typeof document === 'undefined') {
+        throw new Error('Document is not available');
+    }
+
+    let container = document.getElementById(id);
+
+    // Container already exists, return it
+    if (container) {
+        return container;
+    }
+
+    // Auto-create container if it doesn't exist
+    container = document.createElement('div');
+    container.id = id;
+
+    // Find appropriate parent
+    let parent: HTMLElement;
+    // Page components go inside #appmain (or [data-jux-page] if no layout)
+    const appmain = document.getElementById('appmain');
+    const dataJuxPage = document.querySelector('[data-jux-page]');
+    parent = (appmain || dataJuxPage || document.body) as HTMLElement;
+    parent.appendChild(container);
+
+    return container;
+}

package/lib/components/hero.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Hero component options
@@ -10,6 +10,8 @@ export interface HeroOptions {
   ctaLink?: string;
   backgroundImage?: string;
   variant?: 'default' | 'centered' | 'split';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -22,6 +24,8 @@ type HeroState = {
   ctaLink: string;
   backgroundImage: string;
   variant: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -35,22 +39,26 @@ type HeroState = {
  *   });
  *   hero.render();
  */
-export class Hero extends Reactive {
-  state!: HeroState;
+export class Hero {
+  state: HeroState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: HeroOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: HeroOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       title: options.title ?? '',
       subtitle: options.subtitle ?? '',
       cta: options.cta ?? '',
       ctaLink: options.ctaLink ?? '#',
       backgroundImage: options.backgroundImage ?? '',
-      variant: options.variant ?? 'default'
-    }) as HeroState;
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -87,13 +95,23 @@ export class Hero extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -101,37 +119,45 @@ export class Hero extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { title, subtitle, cta, ctaLink, backgroundImage, variant } = this.state;
-    
+    const { title, subtitle, cta, ctaLink, backgroundImage, variant, style, class: className } = this.state;
+
     const hero = document.createElement('div');
     hero.className = `jux-hero jux-hero-${variant}`;
-    hero.id = this._componentId;
-    
+    hero.id = this._id;
+
+    if (className) {
+      hero.className += ` ${className}`;
+    }
+
+    if (style) {
+      hero.setAttribute('style', style);
+    }
+
     if (backgroundImage) {
       hero.style.backgroundImage = `url(${backgroundImage})`;
     }
-    
+
     const content = document.createElement('div');
     content.className = 'jux-hero-content';
-    
+
     if (title) {
       const titleEl = document.createElement('h1');
       titleEl.className = 'jux-hero-title';
       titleEl.textContent = title;
       content.appendChild(titleEl);
     }
-    
+
     if (subtitle) {
       const subtitleEl = document.createElement('p');
       subtitleEl.className = 'jux-hero-subtitle';
       subtitleEl.textContent = subtitle;
       content.appendChild(subtitleEl);
     }
-    
+
     if (cta) {
       const ctaEl = document.createElement('a');
       ctaEl.className = 'jux-hero-cta jux-button jux-button-primary';
@@ -139,10 +165,10 @@ export class Hero extends Reactive {
       ctaEl.textContent = cta;
       content.appendChild(ctaEl);
     }
-    
+
     hero.appendChild(content);
     container.appendChild(hero);
-    
+
     return this;
   }
 
@@ -153,18 +179,18 @@ export class Hero extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Hero.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Hero.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Hero.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function hero(componentId: string, options: HeroOptions = {}): Hero {
-  return new Hero(componentId, options);
+export function hero(id: string, options: HeroOptions = {}): Hero {
+  return new Hero(id, options);
 }

package/lib/components/include.ts

@@ -0,0 +1,292 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Include - Include external resources (CSS, JS, images, fonts, etc.)
+ * Auto-detects resource type from URL and provides simple, fluent API
+ */
+
+type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module';
+type IncludeLocation = 'head' | 'body-start' | 'body-end';
+
+interface IncludeOptions {
+  as?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  integrity?: string;
+  async?: boolean;
+  defer?: boolean;
+  location?: IncludeLocation;
+}
+
+export class Include {
+  private url: string;
+  private type: IncludeType;
+  private options: IncludeOptions = {};
+  private element: HTMLElement | null = null;
+
+  constructor(urlOrFile: string) {
+    this.url = urlOrFile;
+    this.type = this.detectType(urlOrFile);
+  }
+
+  /* -------------------------
+   * Type Detection
+   * ------------------------- */
+
+  private detectType(url: string): IncludeType {
+    if (url.endsWith('.css')) return 'stylesheet';
+    if (url.endsWith('.js') || url.endsWith('.mjs')) return 'script';
+    if (url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) return 'image';
+    if (url.match(/\.(woff|woff2|ttf|otf|eot)$/i)) return 'font';
+    return 'preload';
+  }
+
+  /* -------------------------
+   * Fluent Type Setters
+   * ------------------------- */
+
+  withCss(): this {
+    this.type = 'stylesheet';
+    return this;
+  }
+
+  withJs(options?: { async?: boolean; defer?: boolean }): this {
+    this.type = 'script';
+    if (options?.async) this.options.async = true;
+    if (options?.defer) this.options.defer = true;
+    return this;
+  }
+
+  withModule(): this {
+    this.type = 'module';
+    return this;
+  }
+
+  withImage(): this {
+    this.type = 'image';
+    return this;
+  }
+
+  withFont(): this {
+    this.type = 'font';
+    return this;
+  }
+
+  withPreload(as?: string): this {
+    this.type = 'preload';
+    if (as) this.options.as = as;
+    return this;
+  }
+
+  withPrefetch(): this {
+    this.type = 'prefetch';
+    return this;
+  }
+
+  /* -------------------------
+   * Options
+   * ------------------------- */
+
+  with(options: IncludeOptions): this {
+    this.options = { ...this.options, ...options };
+    return this;
+  }
+
+  inHead(): this {
+    this.options.location = 'head';
+    return this;
+  }
+
+  inBody(): this {
+    this.options.location = 'body-end';
+    return this;
+  }
+
+  async(): this {
+    this.options.async = true;
+    return this;
+  }
+
+  defer(): this {
+    this.options.defer = true;
+    return this;
+  }
+
+  crossOrigin(value: 'anonymous' | 'use-credentials' = 'anonymous'): this {
+    this.options.crossOrigin = value;
+    return this;
+  }
+
+  integrity(hash: string): this {
+    this.options.integrity = hash;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(): this {
+    if (typeof document === 'undefined') return this;
+
+    try {
+      this.remove();
+
+      let element: HTMLElement;
+
+      switch (this.type) {
+        case 'stylesheet':
+          element = this.createStylesheet();
+          break;
+        case 'script':
+        case 'module':
+          element = this.createScript();
+          break;
+        case 'image':
+        case 'font':
+        case 'preload':
+        case 'prefetch':
+          element = this.createLink();
+          break;
+        default:
+          throw new Error(`Unknown include type: ${this.type}`);
+      }
+
+      const container = this.getContainer();
+      const location = this.options.location || 'head';
+
+      if (location === 'body-end') {
+        container.appendChild(element);
+      } else {
+        container.insertBefore(element, container.firstChild);
+      }
+
+      this.element = element;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Include',
+        method: 'render',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: {
+          type: this.type,
+          url: this.url,
+          location: this.options.location,
+          error: 'runtime_exception'
+        }
+      });
+    }
+
+    return this;
+  }
+
+  /* -------------------------
+   * Element Creation
+   * ------------------------- */
+
+  private createStylesheet(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = this.url;
+
+    if (this.options.crossOrigin) link.crossOrigin = this.options.crossOrigin;
+    if (this.options.integrity) link.integrity = this.options.integrity;
+
+    link.onload = () => console.log(`✓ Stylesheet loaded: ${this.url}`);
+    link.onerror = () => this.handleError('stylesheet');
+
+    return link;
+  }
+
+  private createScript(): HTMLScriptElement {
+    const script = document.createElement('script');
+    script.src = this.url;
+
+    if (this.type === 'module') script.type = 'module';
+    if (this.options.async) script.async = true;
+    if (this.options.defer) script.defer = true;
+    if (this.options.crossOrigin) script.crossOrigin = this.options.crossOrigin;
+    if (this.options.integrity) script.integrity = this.options.integrity;
+
+    script.onload = () => console.log(`✓ Script loaded: ${this.url}`);
+    script.onerror = () => this.handleError('script');
+
+    return script;
+  }
+
+  private createLink(): HTMLLinkElement {
+    const link = document.createElement('link');
+
+    // Set rel based on type
+    if (this.type === 'prefetch') {
+      link.rel = 'prefetch';
+    } else {
+      link.rel = 'preload';
+    }
+
+    link.href = this.url;
+
+    // Set 'as' attribute
+    if (this.type === 'image') {
+      link.as = 'image';
+    } else if (this.type === 'font') {
+      link.as = 'font';
+      link.crossOrigin = this.options.crossOrigin || 'anonymous';
+    } else if (this.options.as) {
+      link.as = this.options.as;
+    }
+
+    if (this.options.crossOrigin && this.type !== 'font') {
+      link.crossOrigin = this.options.crossOrigin;
+    }
+    if (this.options.integrity) {
+      link.integrity = this.options.integrity;
+    }
+
+    return link;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private getContainer(): HTMLElement {
+    const location = this.options.location || 'head';
+    return location === 'head' ? document.head : document.body;
+  }
+
+  private handleError(type: string): void {
+    const error = new Error(`Failed to load ${type}: ${this.url}`);
+    ErrorHandler.captureError({
+      component: 'Include',
+      method: `create${type.charAt(0).toUpperCase() + type.slice(1)}`,
+      message: error.message,
+      timestamp: new Date(),
+      context: { url: this.url, type, error: 'load_failed' }
+    });
+  }
+
+  remove(): this {
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+      this.element = null;
+    }
+    return this;
+  }
+}
+
+/**
+ * Factory function - auto-detects type and renders immediately
+ * 
+ * Usage:
+ *   jux.include('styles.css');
+ *   jux.include('script.js').async();
+ *   jux.include('app.mjs').withModule();
+ *   jux.include('custom.js').withJs({ async: true, defer: true });
+ *   jux.include('https://cdn.com/lib.js').inHead().defer();
+ */
+export function include(urlOrFile: string): Include {
+  const imp = new Include(urlOrFile);
+  imp.render();
+  return imp;
+}