juxscript 1.1.69 → 1.1.71

package/lib/components/include.ts

@@ -1,210 +1,61 @@
-
 /**
- * Include - Include external resources (CSS, JS, images, fonts, etc.)
- * Auto-detects resource type from URL and provides simple, fluent API
+ * Include - Simplified resource injection for bundled and external resources
+ * Supports page-specific scoping and cleanup
  */
 
-type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module' | 'json';
-type IncludeLocation = 'head' | 'body-start' | 'body-end';
+type ResourceType = 'css' | 'js' | 'module';
 
 interface IncludeOptions {
-  as?: string;
-  crossOrigin?: 'anonymous' | 'use-credentials';
-  integrity?: string;
+  type?: ResourceType;
+  target?: string; // CSS selector for target container (default: 'head')
   async?: boolean;
   defer?: boolean;
-  location?: IncludeLocation;
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  integrity?: string;
+  pageScoped?: boolean; // If true, tracks for cleanup
 }
 
+// Global registry for page-scoped resources
+const scopedResources: Map<string, Set<HTMLElement>> = new Map();
+
 export class Include {
   private url: string;
-  private type: IncludeType;
-  private options: IncludeOptions = {};
+  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;
-    this.type = this.detectType(urlOrFile);
-  }
-
-  /* -------------------------
-   * Type Detection
-   * ------------------------- */
-
-  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('.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';
-  }
-
-  /* -------------------------
-   * 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}`);
+  private pageId: string | null = null;
+
+  constructor(url: string, options: IncludeOptions = {}) {
+    this.url = url;
+    this.options = options;
+
+    // Auto-detect type from extension if not provided
+    if (!options.type) {
+      if (url.endsWith('.css')) {
+        this.options.type = 'css';
+      } else if (url.endsWith('.mjs') || url.endsWith('.module.js')) {
+        this.options.type = 'module';
+      } else {
+        this.options.type = 'js';
       }
-
-      const data = await response.json();
-      console.log(`✓ JSON loaded: ${this.url}`);
-      return data;
-    } catch (error: any) {
-      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
+   * Fluent API
    * ------------------------- */
 
-  with(options: IncludeOptions): this {
-    this.options = { ...this.options, ...options };
+  css(): this {
+    this.options.type = 'css';
     return this;
   }
 
-  inHead(): this {
-    this.options.location = 'head';
+  js(): this {
+    this.options.type = 'js';
     return this;
   }
 
-  inBody(): this {
-    this.options.location = 'body-end';
+  module(): this {
+    this.options.type = 'module';
     return this;
   }
 
@@ -218,13 +69,28 @@ export class Include {
     return this;
   }
 
-  crossOrigin(value: 'anonymous' | 'use-credentials' = 'anonymous'): this {
-    this.options.crossOrigin = value;
+  /**
+   * Inject into specific container instead of <head>
+   * Useful for page-specific styles
+   * 
+   * @example
+   * jux.include('/css/page1.css').into('#page1-container');
+   */
+  into(selector: string): this {
+    this.options.target = selector;
     return this;
   }
 
-  integrity(hash: string): this {
-    this.options.integrity = hash;
+  /**
+   * Mark as page-scoped for automatic cleanup
+   * 
+   * @example
+   * jux.include('/css/dashboard.css').forPage('dashboard');
+   * // Later: Include.cleanupPage('dashboard');
+   */
+  forPage(pageId: string): this {
+    this.pageId = pageId;
+    this.options.pageScoped = true;
     return this;
   }
 
@@ -235,50 +101,45 @@ 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();
+      // Check if already loaded
+      if (this.isAlreadyLoaded()) {
+        console.log(`⚠️  Resource already loaded: ${this.url}`);
+        return this;
+      }
 
+      // Create element based on type
       let element: HTMLElement;
 
-      switch (this.type) {
-        case 'stylesheet':
+      switch (this.options.type) {
+        case 'css':
           element = this.createStylesheet();
           break;
-        case 'script':
+        case 'js':
         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}`);
+          throw new Error(`Unknown resource type: ${this.options.type}`);
       }
 
+      // Get target container
       const container = this.getContainer();
-      const location = this.options.location || 'head';
-
-      if (location === 'body-end') {
-        container.appendChild(element);
-      } else {
-        container.insertBefore(element, container.firstChild);
-      }
+      container.appendChild(element);
 
       this.element = element;
 
-      // Log with type indicator
-      const typeIndicator = this.explicitType ? '(explicit)' : '(auto-detected)';
-      console.log(`✓ Include loaded as ${this.type} ${typeIndicator}: ${this.url}`);
+      // Register for page cleanup if needed
+      if (this.options.pageScoped && this.pageId) {
+        if (!scopedResources.has(this.pageId)) {
+          scopedResources.set(this.pageId, new Set());
+        }
+        scopedResources.get(this.pageId)!.add(element);
+      }
+
+      console.log(`✓ Loaded ${this.options.type}: ${this.url}`);
     } catch (error: any) {
+      console.error(`✗ Failed to load ${this.options.type}: ${this.url}`, error);
       throw error;
     }
 
@@ -293,12 +154,15 @@ export class Include {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.href = this.url;
+    link.dataset.juxInclude = 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');
+    link.onerror = () => {
+      throw new Error(`Failed to load stylesheet: ${this.url}`);
+    };
 
     return link;
   }
@@ -306,66 +170,42 @@ export class Include {
   private createScript(): HTMLScriptElement {
     const script = document.createElement('script');
     script.src = this.url;
+    script.dataset.juxInclude = this.url;
 
-    if (this.type === 'module') script.type = 'module';
+    if (this.options.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');
+    script.onerror = () => {
+      throw new Error(`Failed to load script: ${this.url}`);
+    };
 
     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;
+    if (this.options.target) {
+      const container = document.querySelector(this.options.target);
+      if (!container) {
+        throw new Error(`Target container not found: ${this.options.target}`);
+      }
+      return container as HTMLElement;
+    }
+    return document.head;
   }
 
-  private handleError(type: string): void {
-    const error = new Error(`Failed to load ${type}: ${this.url}`);
-    throw error;
+  private isAlreadyLoaded(): boolean {
+    const selector = `[data-jux-include="${this.url}"]`;
+    return document.querySelector(selector) !== null;
   }
 
-
   remove(): this {
     if (this.element?.parentNode) {
       this.element.parentNode.removeChild(this.element);
@@ -373,38 +213,69 @@ export class Include {
     }
     return this;
   }
+
+  /* -------------------------
+   * Static Page Cleanup
+   * ------------------------- */
+
+  /**
+   * Remove all resources for a specific page
+   * 
+   * @example
+   * Include.cleanupPage('dashboard');
+   */
+  static cleanupPage(pageId: string): void {
+    const resources = scopedResources.get(pageId);
+    if (!resources) return;
+
+    resources.forEach(element => {
+      element.parentNode?.removeChild(element);
+    });
+
+    scopedResources.delete(pageId);
+    console.log(`✓ Cleaned up page resources: ${pageId}`);
+  }
+
+  /**
+   * Remove all page-scoped resources
+   */
+  static cleanupAll(): void {
+    scopedResources.forEach((resources, pageId) => {
+      resources.forEach(element => {
+        element.parentNode?.removeChild(element);
+      });
+    });
+    scopedResources.clear();
+    console.log('✓ Cleaned up all page-scoped resources');
+  }
 }
 
 /**
- * Factory function - auto-detects type and renders immediately
+ * Factory function - simplified usage
  * 
  * Usage:
- *   // Auto-detect (works for most cases)
- *   jux.include('styles.css');
- *   jux.include('script.js').async();
+ *   // Basic (auto-detects from extension)
+ *   jux.include('/css/styles.css');
+ *   jux.include('/js/app.js');
  *   
- *   // 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 });
+ *   // Page-specific with cleanup
+ *   jux.include('/css/dashboard.css').forPage('dashboard');
+ *   jux.include('/js/dashboard.js').forPage('dashboard');
  *   
- *   // CDN with parameters
- *   jux.include('https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4').withJs();
+ *   // Later cleanup:
+ *   Include.cleanupPage('dashboard');
  *   
- *   // Module
- *   jux.include('app.mjs').withModule();
+ *   // Inject into specific container
+ *   jux.include('/css/widget.css').into('#widget-container');
+ *   
+ *   // External CDN
+ *   jux.include('https://cdn.tailwindcss.com').js();
  *   
- *   // For JSON:
- *   const data = await jux.include('config.json').asJson();
- *   jux.include('data.json').onJson(data => console.log(data));
+ *   // Module
+ *   jux.include('/js/app.mjs').module();
  */
-export function include(urlOrFile: string): Include {
-  const imp = new Include(urlOrFile);
-
-  // Don't auto-render JSON files
-  if (imp['type'] !== 'json') {
-    imp.render();
-  }
-
-  return imp;
+export function include(url: string, options?: IncludeOptions): Include {
+  const inc = new Include(url, options);
+  inc.render();
+  return inc;
 }

package/lib/components/modal.d.ts

@@ -9,7 +9,7 @@ export interface ModalOptions {
     icon?: EmojiIconType | undefined;
     close?: boolean;
     backdropClose?: boolean;
-    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
     size?: 'small' | 'medium' | 'large';
     actions?: Array<{
         label: string;
@@ -25,7 +25,7 @@ type ModalState = {
     icon: EmojiIconType | undefined;
     close: boolean;
     backdropClose: boolean;
-    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover';
+    position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
     size: string;
     open: boolean;
     actions: Array<{
@@ -52,6 +52,7 @@ export declare class Modal extends BaseComponent<ModalState> {
     close(value: boolean): this;
     backdropClose(value: boolean): this;
     size(value: 'small' | 'medium' | 'large'): this;
+    position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this;
     actions(value: Array<{
         label: string;
         variant?: string;

package/lib/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"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"}

package/lib/components/modal.js

@@ -58,6 +58,17 @@ export class Modal extends BaseComponent {
             case 'size':
                 modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
                 break;
+            case 'position':
+                // Remove existing position classes
+                this._overlay.className = this._overlay.className
+                    .split(' ')
+                    .filter(c => !c.startsWith('jux-modal-position-'))
+                    .join(' ');
+                // Add new position class
+                if (value) {
+                    this._overlay.classList.add(`jux-modal-position-${value}`);
+                }
+                break;
             case 'actions':
                 this._rebuildActions();
                 break;
@@ -189,6 +200,10 @@ export class Modal extends BaseComponent {
         this.state.size = value;
         return this;
     }
+    position(value) {
+        this.state.position = value;
+        return this;
+    }
     actions(value) {
         this.state.actions = value;
         return this;
@@ -275,12 +290,16 @@ export class Modal extends BaseComponent {
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { open, title, content, icon, size, close, backdropClose, actions, style, class: className } = this.state;
+        const { open, title, content, icon, size, position, close, backdropClose, actions, style, class: className } = this.state;
         const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
         const overlay = document.createElement('div');
         overlay.className = 'jux-modal-overlay';
         overlay.id = this._id;
         overlay.style.display = open ? 'flex' : 'none';
+        // Add position class
+        if (position) {
+            overlay.classList.add(`jux-modal-position-${position}`);
+        }
         if (className)
             overlay.className += ` ${className}`;
         if (style)