juxscript 1.0.0

package/lib/components/hero.ts

@@ -0,0 +1,170 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Hero component options
+ */
+export interface HeroOptions {
+  title?: string;
+  subtitle?: string;
+  cta?: string;
+  ctaLink?: string;
+  backgroundImage?: string;
+  variant?: 'default' | 'centered' | 'split';
+}
+
+/**
+ * Hero component state
+ */
+type HeroState = {
+  title: string;
+  subtitle: string;
+  cta: string;
+  ctaLink: string;
+  backgroundImage: string;
+  variant: string;
+};
+
+/**
+ * Hero component
+ * 
+ * Usage:
+ *   const hero = jux.hero('myHero', {
+ *     title: 'Welcome',
+ *     subtitle: 'Get started today',
+ *     cta: 'Learn More'
+ *   });
+ *   hero.render();
+ */
+export class Hero extends Reactive {
+  state!: HeroState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: HeroOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      subtitle: options.subtitle ?? '',
+      cta: options.cta ?? '',
+      ctaLink: options.ctaLink ?? '#',
+      backgroundImage: options.backgroundImage ?? '',
+      variant: options.variant ?? 'default'
+    }) as HeroState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  subtitle(value: string): this {
+    this.state.subtitle = value;
+    return this;
+  }
+
+  cta(value: string): this {
+    this.state.cta = value;
+    return this;
+  }
+
+  ctaLink(value: string): this {
+    this.state.ctaLink = value;
+    return this;
+  }
+
+  backgroundImage(value: string): this {
+    this.state.backgroundImage = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Hero: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { title, subtitle, cta, ctaLink, backgroundImage, variant } = this.state;
+    
+    const hero = document.createElement('div');
+    hero.className = `jux-hero jux-hero-${variant}`;
+    hero.id = this._componentId;
+    
+    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';
+      ctaEl.href = ctaLink;
+      ctaEl.textContent = cta;
+      content.appendChild(ctaEl);
+    }
+    
+    hero.appendChild(content);
+    container.appendChild(hero);
+    
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    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)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function hero(componentId: string, options: HeroOptions = {}): Hero {
+  return new Hero(componentId, options);
+}

package/lib/components/import.ts

@@ -0,0 +1,430 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Import - Import external resources (CSS, JS, images, fonts, etc.)
+ * Provides flexible resource loading with control over injection location
+ */
+
+export type ImportType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module';
+export type ImportLocation = 'head' | 'body-start' | 'body-end';
+
+export interface ImportOptions {
+  type?: ImportType;
+  href?: string;
+  src?: string;
+  as?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  integrity?: string;
+  async?: boolean;
+  defer?: boolean;
+  module?: boolean;
+  location?: ImportLocation;
+  onLoad?: () => void;
+  onError?: (error: Error) => void;
+}
+
+export class Import {
+  private _type: ImportType = 'stylesheet';
+  private _href: string = '';
+  private _src: string = '';
+  private _as: string = '';
+  private _crossOrigin?: 'anonymous' | 'use-credentials';
+  private _integrity?: string;
+  private _async: boolean = false;
+  private _defer: boolean = false;
+  private _module: boolean = false;
+  private _location: ImportLocation = 'head';
+  private _onLoad?: () => void;
+  private _onError?: (error: Error) => void;
+  private _element: HTMLElement | null = null;
+
+  constructor(url: string, options: ImportOptions = {}) {
+    // Auto-detect type from URL if not specified
+    if (!options.type) {
+      if (url.endsWith('.css')) {
+        this._type = 'stylesheet';
+      } else if (url.endsWith('.js') || url.endsWith('.mjs')) {
+        this._type = 'script';
+      } else if (url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) {
+        this._type = 'image';
+      } else if (url.match(/\.(woff|woff2|ttf|otf|eot)$/i)) {
+        this._type = 'font';
+      } else {
+        this._type = 'preload';
+      }
+    } else {
+      this._type = options.type;
+    }
+
+    // Set URL based on type
+    if (this._type === 'script') {
+      this._src = url;
+    } else {
+      this._href = url;
+    }
+
+    // Apply options
+    if (options.as) this._as = options.as;
+    if (options.crossOrigin) this._crossOrigin = options.crossOrigin;
+    if (options.integrity) this._integrity = options.integrity;
+    if (options.async !== undefined) this._async = options.async;
+    if (options.defer !== undefined) this._defer = options.defer;
+    if (options.module !== undefined) this._module = options.module;
+    if (options.location) this._location = options.location;
+    if (options.onLoad) this._onLoad = options.onLoad;
+    if (options.onError) this._onError = options.onError;
+
+    // Auto-render
+    this.render();
+  }
+
+  /**
+   * Set the resource type
+   */
+  type(type: ImportType): this {
+    this._type = type;
+    return this;
+  }
+
+  /**
+   * Set the URL (for link elements)
+   */
+  href(url: string): this {
+    this._href = url;
+    return this;
+  }
+
+  /**
+   * Set the URL (for script elements)
+   */
+  src(url: string): this {
+    this._src = url;
+    return this;
+  }
+
+  /**
+   * Set the 'as' attribute (for preload/prefetch)
+   */
+  as(value: string): this {
+    this._as = value;
+    return this;
+  }
+
+  /**
+   * Set crossorigin attribute
+   */
+  crossOrigin(value: 'anonymous' | 'use-credentials'): this {
+    this._crossOrigin = value;
+    return this;
+  }
+
+  /**
+   * Set integrity hash for SRI (Subresource Integrity)
+   */
+  integrity(hash: string): this {
+    this._integrity = hash;
+    return this;
+  }
+
+  /**
+   * Enable async loading (for scripts)
+   */
+  async(value: boolean = true): this {
+    this._async = value;
+    return this;
+  }
+
+  /**
+   * Enable defer loading (for scripts)
+   */
+  defer(value: boolean = true): this {
+    this._defer = value;
+    return this;
+  }
+
+  /**
+   * Mark as ES module (for scripts)
+   */
+  module(value: boolean = true): this {
+    this._module = value;
+    return this;
+  }
+
+  /**
+   * Set injection location
+   */
+  location(loc: ImportLocation): this {
+    this._location = loc;
+    return this;
+  }
+
+  /**
+   * Set onload callback
+   */
+  onLoad(callback: () => void): this {
+    this._onLoad = callback;
+    return this;
+  }
+
+  /**
+   * Set onerror callback
+   */
+  onError(callback: (error: Error) => void): this {
+    this._onError = callback;
+    return this;
+  }
+
+  /**
+   * Get the target container for injection
+   */
+  private getContainer(): HTMLElement {
+    switch (this._location) {
+      case 'head':
+        return document.head;
+      case 'body-start':
+        return document.body;
+      case 'body-end':
+        return document.body;
+      default:
+        return document.head;
+    }
+  }
+
+  /**
+   * Render the import element
+   */
+  render(): this {
+    if (typeof document === 'undefined') {
+      return this;
+    }
+
+    try {
+      // Remove existing element
+      this.remove();
+
+      let element: HTMLElement;
+
+      switch (this._type) {
+        case 'stylesheet':
+          element = this.createStylesheet();
+          break;
+        case 'script':
+          element = this.createScript();
+          break;
+        case 'image':
+          element = this.createImage();
+          break;
+        case 'font':
+          element = this.createFont();
+          break;
+        case 'preload':
+          element = this.createPreload();
+          break;
+        case 'prefetch':
+          element = this.createPrefetch();
+          break;
+        case 'module':
+          element = this.createModule();
+          break;
+        default:
+          throw new Error(`Unknown import type: ${this._type}`);
+      }
+
+      const container = this.getContainer();
+      
+      if (this._location === 'body-end') {
+        container.appendChild(element);
+      } else {
+        container.insertBefore(element, container.firstChild);
+      }
+
+      this._element = element;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Import',
+        method: 'render',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { 
+          type: this._type,
+          href: this._href,
+          src: this._src,
+          location: this._location,
+          error: 'runtime_exception'
+        }
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Create a stylesheet link element
+   */
+  private createStylesheet(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = this._href;
+    
+    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
+    if (this._integrity) link.integrity = this._integrity;
+    
+    link.onload = () => {
+      console.log(`✓ Stylesheet loaded: ${this._href}`);
+      if (this._onLoad) this._onLoad();
+    };
+    
+    link.onerror = () => {
+      const error = new Error(`Failed to load stylesheet: ${this._href}`);
+      ErrorHandler.captureError({
+        component: 'Import',
+        method: 'createStylesheet',
+        message: error.message,
+        timestamp: new Date(),
+        context: { href: this._href, type: 'stylesheet', error: 'load_failed' }
+      });
+      if (this._onError) this._onError(error);
+    };
+    
+    return link;
+  }
+
+  /**
+   * Create a script element
+   */
+  private createScript(): HTMLScriptElement {
+    const script = document.createElement('script');
+    script.src = this._src;
+    
+    if (this._async) script.async = true;
+    if (this._defer) script.defer = true;
+    if (this._module) script.type = 'module';
+    if (this._crossOrigin) script.crossOrigin = this._crossOrigin;
+    if (this._integrity) script.integrity = this._integrity;
+    
+    script.onload = () => {
+      console.log(`✓ Script loaded: ${this._src}`);
+      if (this._onLoad) this._onLoad();
+    };
+    
+    script.onerror = () => {
+      const error = new Error(`Failed to load script: ${this._src}`);
+      ErrorHandler.captureError({
+        component: 'Import',
+        method: 'createScript',
+        message: error.message,
+        timestamp: new Date(),
+        context: { src: this._src, type: 'script', error: 'load_failed' }
+      });
+      if (this._onError) this._onError(error);
+    };
+    
+    return script;
+  }
+
+  /**
+   * Create an image preload link
+   */
+  private createImage(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'preload';
+    link.as = 'image';
+    link.href = this._href;
+    
+    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
+    
+    return link;
+  }
+
+  /**
+   * Create a font preload link
+   */
+  private createFont(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'preload';
+    link.as = 'font';
+    link.href = this._href;
+    link.crossOrigin = this._crossOrigin || 'anonymous';
+    
+    return link;
+  }
+
+  /**
+   * Create a preload link
+   */
+  private createPreload(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'preload';
+    link.href = this._href;
+    
+    if (this._as) link.as = this._as;
+    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
+    if (this._integrity) link.integrity = this._integrity;
+    
+    return link;
+  }
+
+  /**
+   * Create a prefetch link
+   */
+  private createPrefetch(): HTMLLinkElement {
+    const link = document.createElement('link');
+    link.rel = 'prefetch';
+    link.href = this._href;
+    
+    if (this._as) link.as = this._as;
+    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
+    
+    return link;
+  }
+
+  /**
+   * Create a module script
+   */
+  private createModule(): HTMLScriptElement {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = this._src;
+    
+    if (this._crossOrigin) script.crossOrigin = this._crossOrigin;
+    if (this._integrity) script.integrity = this._integrity;
+    
+    script.onload = () => {
+      console.log(`✓ Module loaded: ${this._src}`);
+      if (this._onLoad) this._onLoad();
+    };
+    
+    script.onerror = () => {
+      const error = new Error(`Failed to load module: ${this._src}`);
+      ErrorHandler.captureError({
+        component: 'Import',
+        method: 'createModule',
+        message: error.message,
+        timestamp: new Date(),
+        context: { src: this._src, type: 'module', error: 'load_failed' }
+      });
+      if (this._onError) this._onError(error);
+    };
+    
+    return script;
+  }
+
+  /**
+   * Remove the element from the document
+   */
+  remove(): this {
+    if (this._element && this._element.parentNode) {
+      this._element.parentNode.removeChild(this._element);
+      this._element = null;
+    }
+    return this;
+  }
+}
+
+/**
+ * Factory function for creating imports
+ */
+export function importResource(url: string, options?: ImportOptions): Import {
+  return new Import(url, options);
+}