npm - juxscript - Versions diffs - 1.1.243 → 1.1.244 - Mend

juxscript 1.1.243 → 1.1.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/lib/components/include.ts +281 -0
package/package.json +1 -1

package/lib/components/include.ts ADDED Viewed

@@ -0,0 +1,281 @@
+/**
+ * Include - Simplified resource injection for bundled and external resources
+ * Supports page-specific scoping and cleanup
+ */
+type ResourceType = 'css' | 'js' | 'module';
+interface IncludeOptions {
+    type?: ResourceType;
+    target?: string; // CSS selector for target container (default: 'head')
+    async?: boolean;
+    defer?: boolean;
+    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 options: IncludeOptions;
+    private element: HTMLElement | null = null;
+    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';
+            }
+        }
+    }
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+    css(): this {
+        this.options.type = 'css';
+        return this;
+    }
+    js(): this {
+        this.options.type = 'js';
+        return this;
+    }
+    module(): this {
+        this.options.type = 'module';
+        return this;
+    }
+    async(): this {
+        this.options.async = true;
+        return this;
+    }
+    defer(): this {
+        this.options.defer = true;
+        return this;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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;
+    }
+    /* -------------------------
+     * Render
+     * ------------------------- */
+    render(): this {
+        if (typeof document === 'undefined') return this;
+        try {
+            // 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.options.type) {
+                case 'css':
+                    element = this.createStylesheet();
+                    break;
+                case 'js':
+                case 'module':
+                    element = this.createScript();
+                    break;
+                default:
+                    throw new Error(`Unknown resource type: ${this.options.type}`);
+            }
+            // Get target container
+            const container = this.getContainer();
+            container.appendChild(element);
+            this.element = element;
+            // 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;
+        }
+        return this;
+    }
+    /* -------------------------
+     * Element Creation
+     * ------------------------- */
+    private createStylesheet(): HTMLLinkElement {
+        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 = () => {
+            throw new Error(`Failed to load stylesheet: ${this.url}`);
+        };
+        return link;
+    }
+    private createScript(): HTMLScriptElement {
+        const script = document.createElement('script');
+        script.src = this.url;
+        script.dataset.juxInclude = this.url;
+        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 = () => {
+            throw new Error(`Failed to load script: ${this.url}`);
+        };
+        return script;
+    }
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+    private getContainer(): HTMLElement {
+        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 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);
+            this.element = null;
+        }
+        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 - simplified usage
+ *
+ * Usage:
+ *   // Basic (auto-detects from extension)
+ *   jux.include('/css/styles.css');
+ *   jux.include('/js/app.js');
+ *
+ *   // Page-specific with cleanup
+ *   jux.include('/css/dashboard.css').forPage('dashboard');
+ *   jux.include('/js/dashboard.js').forPage('dashboard');
+ *
+ *   // Later cleanup:
+ *   Include.cleanupPage('dashboard');
+ *
+ *   // Inject into specific container
+ *   jux.include('/css/widget.css').into('#widget-container');
+ *
+ *   // External CDN
+ *   jux.include('https://cdn.tailwindcss.com').js();
+ *
+ *   // Module
+ *   jux.include('/js/app.mjs').module();
+ */
+export function include(url: string, options?: IncludeOptions): Include {
+    const inc = new Include(url, options);
+    inc.render();
+    return inc;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.243",
+  "version": "1.1.244",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/index.js",