juxscript 1.0.18 → 1.0.20

package/lib/components/icons.ts

@@ -0,0 +1,174 @@
+/**
+ * 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"
+};
+
+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 {
@@ -35,6 +35,7 @@ export class Include {
   private detectType(url: string): IncludeType {
     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';
     return 'preload';
@@ -82,6 +83,65 @@ export class Include {
     return this;
   }
 
+  withJson(): this {
+    this.type = 'json';
+    return this;
+  }
+
+  /* -------------------------
+   * 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;
+  }
+
   /* -------------------------
    * Options
    * ------------------------- */
@@ -128,6 +188,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();
 
@@ -284,9 +350,18 @@ export class Include {
  *   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;
 }