juxscript 1.0.19 → 1.0.21

package/lib/components/icon.ts

@@ -0,0 +1,160 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon, renderEmoji } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface IconOptions {
+    value: string;
+    size?: string;
+    color?: string;
+    useEmoji?: boolean;
+    style?: string;
+    class?: string;
+}
+
+type IconState = {
+    value: string;
+    size: string;
+    color: string;
+    useEmoji: boolean;
+    style: string;
+    class: string;
+};
+
+export class Icon extends BaseComponent<IconState> {
+    constructor(id: string, options: IconOptions) {
+        super(id, {
+            value: options.value,
+            size: options.size ?? '24px',
+            color: options.color ?? '',
+            useEmoji: options.useEmoji ?? false,
+            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
+
+    value(value: string): this {
+        this.state.value = value;
+        return this;
+    }
+
+    size(value: string): this {
+        this.state.size = value;
+        return this;
+    }
+
+    color(value: string): this {
+        this.state.color = value;
+        return this;
+    }
+
+    useEmoji(value: boolean): this {
+        this.state.useEmoji = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { value, size, color, useEmoji, style, class: className } = this.state;
+
+        const wrapper = document.createElement('span');
+        wrapper.className = 'jux-icon';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        const iconElement = useEmoji ? renderEmoji(value) : renderIcon(value);
+        iconElement.style.width = size;
+        iconElement.style.height = size;
+        if (color) iconElement.style.color = color;
+
+        wrapper.appendChild(iconElement);
+
+        this._wireStandardEvents(wrapper);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    this.state.value = transformed;
+
+                    wrapper.innerHTML = '';
+                    const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed);
+                    newIcon.style.width = this.state.size;
+                    newIcon.style.height = this.state.size;
+                    if (this.state.color) newIcon.style.color = this.state.color;
+                    wrapper.appendChild(newIcon);
+
+                    requestAnimationFrame(() => {
+                        if ((window as any).lucide) {
+                            (window as any).lucide.createIcons();
+                        }
+                    });
+                });
+            }
+            else if (property === 'size') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.width = transformed;
+                        icon.style.height = transformed;
+                    }
+                    this.state.size = transformed;
+                });
+            }
+            else if (property === 'color') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    const icon = wrapper.querySelector('img, svg, span');
+                    if (icon instanceof HTMLElement) {
+                        icon.style.color = transformed;
+                    }
+                    this.state.color = transformed;
+                });
+            }
+        });
+
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function icon(id: string, options: IconOptions): Icon {
+    return new Icon(id, options);
+}

package/lib/components/icons.ts

@@ -0,0 +1,175 @@
+/**
+ * Icon utilities for components
+ * Handles emoji-to-Lucide mapping, direct icon names, and image paths
+ */
+
+const EMOJI_TO_LUCIDE: Record<string, string> = {
+    "✔️": "check-circle",
+    "✓": "check",
+    "❌": "x-circle",
+    "✗": "x",
+    "🔥": "flame",
+    "🚀": "rocket",
+    "⚙️": "settings",
+    "🏠": "home",
+    "👤": "user",
+    "💡": "lightbulb",
+    "🌈": "rainbow",
+    "🧪": "flask-conical",
+    "✉️": "mail",
+    "📞": "phone",
+    "🔍": "search",
+    "❤️": "heart",
+    "⭐": "star",
+    "⚠️": "alert-triangle",
+    "ℹ️": "info",
+    "❓": "help-circle",
+    "👁️": "eye",
+    "👁️‍🗨️": "eye-off",
+    "☰": "menu",
+    "🕐": "clock",
+    "📅": "calendar",
+    "⬇️": "chevron-down",
+    "⬆️": "chevron-up",
+    "⬅️": "chevron-left",
+    "➡️": "chevron-right",
+    "📈": "arrow-up",
+    "📉": "arrow-down",
+    "⬇": "download",
+    "📤": "upload",
+    "📄": "file-text",
+    "🗑️": "trash-2",
+    "✏️": "edit",
+    "📋": "clipboard",
+    "🔗": "link",
+    "↗️": "external-link",
+    "☀️": "sun",
+    "🌙": "moon",
+    "📊": "bar-chart-3",
+    "📁": "folder",
+    "💰": "coins",
+    "📧": "mail",
+    "✅": "square-check",
+    "🗓️": "calendar-days",
+    "💬": "message-circle",
+    "🌐": "globe",
+    "🔬": "microscope",
+    "💊": "pill",
+    "🔒": "lock",
+    "⚖️": "scale",
+    "🔌": "plug",
+    "🔐": "lock-keyhole",
+    "🏥": "cross",
+    "👥": "users",
+    "💚": "heart",
+    "💸": "banknote",
+    "🧾": "receipt",
+    "➕": "plus",
+    "➖": "minus",
+    "💾": "save",
+    "🩺": "stethoscope"
+};
+
+const LUCIDE_CDN_URL = "https://unpkg.com/lucide@latest";
+
+/**
+ * Render an icon from emoji, icon name, or image path
+ * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
+ * @returns HTMLElement containing the icon
+ *
+ * Usage:
+ *   const icon = renderIcon('🚀');        // Lucide rocket icon
+ *   const icon = renderIcon('rocket');     // Lucide rocket icon
+ *   const icon = renderIcon('/icon.png'); // Image element
+ */
+export function renderIcon(value: string): HTMLElement {
+    // Check if it's an image path (contains / or . or starts with http)
+    if (value.includes('/') || value.includes('.') || value.startsWith('http')) {
+        return createImageIcon(value);
+    }
+
+    // Check if it's an emoji that maps to Lucide
+    const lucideName = EMOJI_TO_LUCIDE[value];
+    if (lucideName) {
+        const element = createVectorIcon(lucideName);
+        ensureLucideLoaded();
+        return element;
+    }
+
+    // Check if it's a direct Lucide icon name (lowercase with hyphens)
+    if (/^[a-z][a-z0-9-]*$/.test(value)) {
+        const element = createVectorIcon(value);
+        ensureLucideLoaded();
+        return element;
+    }
+
+    // Fallback: render as emoji
+    return createEmojiFallback(value);
+}
+
+/**
+ * Render raw emoji without conversion
+ * @param emoji - The emoji character
+ * @returns HTMLElement containing just the emoji
+ */
+export function renderEmoji(emoji: string): HTMLElement {
+    return createEmojiFallback(emoji);
+}
+
+/**
+ * Ensures Lucide is loaded and icons are rendered
+ */
+function ensureLucideLoaded(): void {
+    if ((window as any).lucide) {
+        // Already loaded, render immediately
+        (window as any).lucide.createIcons();
+        return;
+    }
+
+    // Not loaded yet, inject script
+    if (!document.querySelector(`script[src="${LUCIDE_CDN_URL}"]`)) {
+        const script = document.createElement('script');
+        script.src = LUCIDE_CDN_URL;
+        script.onload = () => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        };
+        document.head.appendChild(script);
+    }
+}
+
+/**
+ * Create Lucide icon element
+ */
+function createVectorIcon(name: string): HTMLElement {
+    const iconEl = document.createElement('i');
+    iconEl.setAttribute('data-lucide', name);
+    iconEl.style.width = '24px';
+    iconEl.style.height = '24px';
+    iconEl.style.display = 'inline-block';
+    return iconEl;
+}
+
+/**
+ * Create image icon element
+ */
+function createImageIcon(src: string): HTMLImageElement {
+    const img = document.createElement('img');
+    img.src = src;
+    img.style.width = '24px';
+    img.style.height = '24px';
+    img.style.display = 'inline-block';
+    img.style.objectFit = 'contain';
+    return img;
+}
+
+/**
+ * Render native emoji or text
+ */
+function createEmojiFallback(emoji: string): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = emoji;
+    span.style.display = 'inline-block';
+    return span;
+}

package/lib/components/include.ts

@@ -5,7 +5,7 @@ import { ErrorHandler } from './error-handler.js';
  * Auto-detects resource type from URL and provides simple, fluent API
  */
 
-type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module';
+type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module' | 'json';
 type IncludeLocation = 'head' | 'body-start' | 'body-end';
 
 interface IncludeOptions {
@@ -22,6 +22,7 @@ export class Include {
   private type: IncludeType;
   private options: IncludeOptions = {};
   private element: HTMLElement | null = null;
+  private explicitType: boolean = false;  // NEW: Track if type was explicitly set
 
   constructor(urlOrFile: string) {
     this.url = urlOrFile;
@@ -33,10 +34,25 @@ export class Include {
    * ------------------------- */
 
   private detectType(url: string): IncludeType {
+    // Check for common script patterns in URLs (CDN, etc.)
+    if (url.includes('tailwindcss') ||
+      url.includes('jsdelivr.net/npm') ||
+      url.includes('unpkg.com') ||
+      url.includes('cdn.') ||
+      url.match(/\.(js|mjs)($|\?)/)) {
+      return 'script';
+    }
+
     if (url.endsWith('.css')) return 'stylesheet';
-    if (url.endsWith('.js') || url.endsWith('.mjs')) return 'script';
+    if (url.endsWith('.json')) return 'json';
     if (url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) return 'image';
     if (url.match(/\.(woff|woff2|ttf|otf|eot)$/i)) return 'font';
+
+    // Default to script for extensionless URLs from CDN domains
+    if (!url.includes('.') || url.match(/^https?:\/\/cdn/)) {
+      return 'script';
+    }
+
     return 'preload';
   }
 
@@ -44,41 +60,144 @@ export class Include {
    * Fluent Type Setters
    * ------------------------- */
 
+  /**
+   * Force treat as CSS stylesheet
+   * Use when URL doesn't have .css extension
+   */
   withCss(): this {
     this.type = 'stylesheet';
+    this.explicitType = true;  // Mark as explicit
     return this;
   }
 
+  /**
+   * Force treat as JavaScript
+   * Use when URL doesn't have .js extension (CDN scripts, etc.)
+   * 
+   * @example
+   * jux.include('https://cdn.tailwindcss.com').withJs().render();
+   * jux.include('https://unpkg.com/alpine').withJs({ defer: true }).render();
+   */
   withJs(options?: { async?: boolean; defer?: boolean }): this {
     this.type = 'script';
+    this.explicitType = true;  // Mark as explicit
     if (options?.async) this.options.async = true;
     if (options?.defer) this.options.defer = true;
     return this;
   }
 
+  /**
+   * Force treat as ES module
+   * Use for module scripts
+   */
   withModule(): this {
     this.type = 'module';
+    this.explicitType = true;  // Mark as explicit
     return this;
   }
 
   withImage(): this {
     this.type = 'image';
+    this.explicitType = true;
     return this;
   }
 
   withFont(): this {
     this.type = 'font';
+    this.explicitType = true;
     return this;
   }
 
   withPreload(as?: string): this {
     this.type = 'preload';
+    this.explicitType = true;
     if (as) this.options.as = as;
     return this;
   }
 
   withPrefetch(): this {
     this.type = 'prefetch';
+    this.explicitType = true;
+    return this;
+  }
+
+  withJson(): this {
+    this.type = 'json';
+    this.explicitType = true;
+    return this;
+  }
+
+  /* -------------------------
+   * Convenience aliases for common patterns
+   * ------------------------- */
+
+  /**
+   * Shorthand for .withJs()
+   * @example jux.include(url).asScript()
+   */
+  asScript(options?: { async?: boolean; defer?: boolean }): this {
+    return this.withJs(options);
+  }
+
+  /**
+   * Shorthand for .withCss()
+   * @example jux.include(url).asStylesheet()
+   */
+  asStylesheet(): this {
+    return this.withCss();
+  }
+
+  /* -------------------------
+   * JSON Fetching
+   * ------------------------- */
+
+  /**
+   * Fetch and parse JSON file
+   * Returns a Promise that resolves to the parsed JSON data
+   * 
+   * Usage:
+   *   const config = await jux.include('config.json').asJson();
+   *   const data = await jux.include('/api/data').asJson();
+   */
+  async asJson<T = any>(): Promise<T> {
+    try {
+      const response = await fetch(this.url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log(`✓ JSON loaded: ${this.url}`);
+      return data;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Include',
+        method: 'asJson',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: {
+          url: this.url,
+          error: 'json_fetch_failed'
+        }
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Fetch JSON and execute callback with data
+   * 
+   * Usage:
+   *   jux.include('config.json').onJson(data => {
+   *     console.log('Config:', data);
+   *   });
+   */
+  onJson<T = any>(callback: (data: T) => void): this {
+    this.asJson<T>().then(callback).catch(error => {
+      console.error('Failed to load JSON:', error);
+    });
     return this;
   }
 
@@ -128,6 +247,12 @@ export class Include {
   render(): this {
     if (typeof document === 'undefined') return this;
 
+    // Don't render JSON type (it's fetched via asJson() instead)
+    if (this.type === 'json') {
+      console.warn('Include: JSON files should be loaded with .asJson() instead of .render()');
+      return this;
+    }
+
     try {
       this.remove();
 
@@ -161,6 +286,10 @@ export class Include {
       }
 
       this.element = element;
+
+      // Log with type indicator
+      const typeIndicator = this.explicitType ? '(explicit)' : '(auto-detected)';
+      console.log(`✓ Include loaded as ${this.type} ${typeIndicator}: ${this.url}`);
     } catch (error: any) {
       ErrorHandler.captureError({
         component: 'Include',
@@ -172,6 +301,7 @@ export class Include {
           type: this.type,
           url: this.url,
           location: this.options.location,
+          explicitType: this.explicitType,
           error: 'runtime_exception'
         }
       });
@@ -279,14 +409,32 @@ export class Include {
  * Factory function - auto-detects type and renders immediately
  * 
  * Usage:
+ *   // Auto-detect (works for most cases)
  *   jux.include('styles.css');
  *   jux.include('script.js').async();
+ *   
+ *   // Explicit type (for extensionless URLs)
+ *   jux.include('https://cdn.tailwindcss.com').withJs();
+ *   jux.include('https://cdn.tailwindcss.com').asScript();
+ *   jux.include('https://unpkg.com/htmx.org').withJs({ defer: true });
+ *   
+ *   // CDN with parameters
+ *   jux.include('https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4').withJs();
+ *   
+ *   // Module
  *   jux.include('app.mjs').withModule();
- *   jux.include('custom.js').withJs({ async: true, defer: true });
- *   jux.include('https://cdn.com/lib.js').inHead().defer();
+ *   
+ *   // For JSON:
+ *   const data = await jux.include('config.json').asJson();
+ *   jux.include('data.json').onJson(data => console.log(data));
  */
 export function include(urlOrFile: string): Include {
   const imp = new Include(urlOrFile);
-  imp.render();
+
+  // Don't auto-render JSON files
+  if (imp['type'] !== 'json') {
+    imp.render();
+  }
+
   return imp;
 }