juxscript 1.0.20 → 1.0.21

package/lib/components/icon.ts

@@ -1,10 +1,10 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon, renderEmoji } from './icons.js';
 
-/**
- * Icon component options
- */
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
 export interface IconOptions {
     value: string;
     size?: string;
@@ -14,9 +14,6 @@ export interface IconOptions {
     class?: string;
 }
 
-/**
- * Icon component state
- */
 type IconState = {
     value: string;
     size: string;
@@ -26,54 +23,31 @@ type IconState = {
     class: string;
 };
 
-/**
- * Icon component - Render an icon from emoji, icon name, or image path
- * 
- * Usage:
- *   // Render Lucide icon from emoji
- *   jux.icon('myIcon', { value: '🚀' }).render('#container');
- *   
- *   // Render Lucide icon from name
- *   jux.icon('myIcon', { value: 'rocket', size: '32px', color: 'red' }).render('#container');
- *   
- *   // Render image icon
- *   jux.icon('myIcon', { value: '/path/icon.png' }).render('#container');
- *   
- *   // Force emoji rendering (skip conversion)
- *   jux.icon('myIcon', { value: '🚀', useEmoji: true }).render('#container');
- */
-export class Icon {
-    state: IconState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // CRITICAL: Store bind/sync instructions for deferred wiring
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
-
+export class Icon extends BaseComponent<IconState> {
     constructor(id: string, options: IconOptions) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        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
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
 
     value(value: string): this {
         this.state.value = value;
@@ -95,51 +69,15 @@ export class Icon {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
-        return this;
-    }
-
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`Icon.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
-        return this;
-    }
-
-    /* -------------------------
-     * Render (5-Step Pattern)
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Icon: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
+        const container = this._setupContainer(targetId);
 
-        // === 2. PREPARE: Destructure state ===
         const { value, size, color, useEmoji, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('span');
         wrapper.className = 'jux-icon';
         wrapper.id = this._id;
@@ -153,23 +91,17 @@ export class Icon {
 
         wrapper.appendChild(iconElement);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
-
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            wrapper.addEventListener(event, handler as EventListener);
-        });
+        this._wireStandardEvents(wrapper);
 
-        // Wire sync bindings from .sync() calls
+        // Wire sync bindings
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
             if (property === 'value') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+                const transform = toComponent || ((v: any) => String(v));
 
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     this.state.value = transformed;
 
-                    // Re-render icon
                     wrapper.innerHTML = '';
                     const newIcon = this.state.useEmoji ? renderEmoji(transformed) : renderIcon(transformed);
                     newIcon.style.width = this.state.size;
@@ -185,10 +117,10 @@ export class Icon {
                 });
             }
             else if (property === 'size') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+                const transform = toComponent || ((v: any) => String(v));
 
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     const icon = wrapper.querySelector('img, svg, span');
                     if (icon instanceof HTMLElement) {
                         icon.style.width = transformed;
@@ -198,10 +130,10 @@ export class Icon {
                 });
             }
             else if (property === 'color') {
-                const transformToComponent = toComponent || ((v: any) => String(v));
+                const transform = toComponent || ((v: any) => String(v));
 
                 stateObj.subscribe((val: any) => {
-                    const transformed = transformToComponent(val);
+                    const transformed = transform(val);
                     const icon = wrapper.querySelector('img, svg, span');
                     if (icon instanceof HTMLElement) {
                         icon.style.color = transformed;
@@ -211,7 +143,6 @@ export class Icon {
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
 
         requestAnimationFrame(() => {
@@ -222,26 +153,8 @@ export class Icon {
 
         return this;
     }
-
-    /**
-     * Render to another Jux component's container
-     */
-    renderTo(juxComponent: any): this {
-        if (!juxComponent || typeof juxComponent !== 'object') {
-            throw new Error('Icon.renderTo: Invalid component - not an object');
-        }
-
-        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-            throw new Error('Icon.renderTo: Invalid component - missing _id (not a Jux component)');
-        }
-
-        return this.render(`#${juxComponent._id}`);
-    }
 }
 
-/**
- * Factory helper
- */
 export function icon(id: string, options: IconOptions): Icon {
     return new Icon(id, options);
 }

package/lib/components/icons.ts

@@ -66,7 +66,8 @@ const EMOJI_TO_LUCIDE: Record<string, string> = {
     "🧾": "receipt",
     "➕": "plus",
     "➖": "minus",
-    "💾": "save"
+    "💾": "save",
+    "🩺": "stethoscope"
 };
 
 const LUCIDE_CDN_URL = "https://unpkg.com/lucide@latest";

package/lib/components/include.ts

@@ -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,11 +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';
   }
 
@@ -45,49 +60,93 @@ 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
    * ------------------------- */
@@ -227,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',
@@ -238,6 +301,7 @@ export class Include {
           type: this.type,
           url: this.url,
           location: this.options.location,
+          explicitType: this.explicitType,
           error: 'runtime_exception'
         }
       });
@@ -345,11 +409,20 @@ 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();