juxscript 1.1.4 → 1.1.6

package/lib/components/include.js

@@ -0,0 +1,350 @@
+/**
+ * Include - Include external resources (CSS, JS, images, fonts, etc.)
+ * Auto-detects resource type from URL and provides simple, fluent API
+ */
+export class Include {
+    constructor(urlOrFile) {
+        this.options = {};
+        this.element = null;
+        this.explicitType = false; // NEW: Track if type was explicitly set
+        this.url = urlOrFile;
+        this.type = this.detectType(urlOrFile);
+    }
+    /* -------------------------
+     * Type Detection
+     * ------------------------- */
+    detectType(url) {
+        // 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.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) {
+        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.type = 'module';
+        this.explicitType = true; // Mark as explicit
+        return this;
+    }
+    withImage() {
+        this.type = 'image';
+        this.explicitType = true;
+        return this;
+    }
+    withFont() {
+        this.type = 'font';
+        this.explicitType = true;
+        return this;
+    }
+    withPreload(as) {
+        this.type = 'preload';
+        this.explicitType = true;
+        if (as)
+            this.options.as = as;
+        return this;
+    }
+    withPrefetch() {
+        this.type = 'prefetch';
+        this.explicitType = true;
+        return this;
+    }
+    withJson() {
+        this.type = 'json';
+        this.explicitType = true;
+        return this;
+    }
+    /* -------------------------
+     * Convenience aliases for common patterns
+     * ------------------------- */
+    /**
+     * Shorthand for .withJs()
+     * @example jux.include(url).asScript()
+     */
+    asScript(options) {
+        return this.withJs(options);
+    }
+    /**
+     * Shorthand for .withCss()
+     * @example jux.include(url).asStylesheet()
+     */
+    asStylesheet() {
+        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() {
+        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) {
+            throw error;
+        }
+    }
+    /**
+     * Fetch JSON and execute callback with data
+     *
+     * Usage:
+     *   jux.include('config.json').onJson(data => {
+     *     console.log('Config:', data);
+     *   });
+     */
+    onJson(callback) {
+        this.asJson().then(callback).catch(error => {
+            console.error('Failed to load JSON:', error);
+        });
+        return this;
+    }
+    /* -------------------------
+     * Options
+     * ------------------------- */
+    with(options) {
+        this.options = { ...this.options, ...options };
+        return this;
+    }
+    inHead() {
+        this.options.location = 'head';
+        return this;
+    }
+    inBody() {
+        this.options.location = 'body-end';
+        return this;
+    }
+    async() {
+        this.options.async = true;
+        return this;
+    }
+    defer() {
+        this.options.defer = true;
+        return this;
+    }
+    crossOrigin(value = 'anonymous') {
+        this.options.crossOrigin = value;
+        return this;
+    }
+    integrity(hash) {
+        this.options.integrity = hash;
+        return this;
+    }
+    /* -------------------------
+     * Render
+     * ------------------------- */
+    render() {
+        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();
+            let element;
+            switch (this.type) {
+                case 'stylesheet':
+                    element = this.createStylesheet();
+                    break;
+                case 'script':
+                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}`);
+            }
+            const container = this.getContainer();
+            const location = this.options.location || 'head';
+            if (location === 'body-end') {
+                container.appendChild(element);
+            }
+            else {
+                container.insertBefore(element, container.firstChild);
+            }
+            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) {
+            throw error;
+        }
+        return this;
+    }
+    /* -------------------------
+     * Element Creation
+     * ------------------------- */
+    createStylesheet() {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 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');
+        return link;
+    }
+    createScript() {
+        const script = document.createElement('script');
+        script.src = this.url;
+        if (this.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');
+        return script;
+    }
+    createLink() {
+        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
+     * ------------------------- */
+    getContainer() {
+        const location = this.options.location || 'head';
+        return location === 'head' ? document.head : document.body;
+    }
+    handleError(type) {
+        const error = new Error(`Failed to load ${type}: ${this.url}`);
+        throw error;
+    }
+    remove() {
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+            this.element = null;
+        }
+        return this;
+    }
+}
+/**
+ * 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();
+ *
+ *   // For JSON:
+ *   const data = await jux.include('config.json').asJson();
+ *   jux.include('data.json').onJson(data => console.log(data));
+ */
+export function include(urlOrFile) {
+    const imp = new Include(urlOrFile);
+    // Don't auto-render JSON files
+    if (imp['type'] !== 'json') {
+        imp.render();
+    }
+    return imp;
+}