juxscript 1.0.2 → 1.0.4

package/package.json

@@ -1,23 +1,49 @@
 {
   "name": "juxscript",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "lib/jux.js",
-  "types": "types/globals.d.ts",
+  "types": "lib/jux.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/jux.d.ts",
+      "import": "./lib/jux.js",
+      "default": "./lib/jux.js"
+    },
+    "./lib/*": "./lib/*",
+    "./lib/components/*": "./lib/components/*",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/*"
+      ],
+      "lib/*": [
+        "lib/*"
+      ],
+      "lib/components/*": [
+        "lib/components/*"
+      ]
+    }
+  },
   "bin": {
     "jux": "./bin/cli.js"
   },
   "scripts": {
     "dev": "cd examples && npx jux serve",
     "build:examples": "cd examples && rm -rf dist && npx jux build",
-    "test": "node test/run-tests.js"
+    "build": "tsc",
+    "test": "node test/run-tests.js",
+    "generate:icons": "node scripts/generate-icon-types.js"
   },
   "files": [
     "lib",
     "bin",
     "machinery",
     "types",
+    "lib/**/*.d.ts",
     "README.md",
     "LICENSE"
   ],

package/lib/components/import.ts

@@ -1,430 +0,0 @@
-import { ErrorHandler } from './error-handler.js';
-
-/**
- * Import - Import external resources (CSS, JS, images, fonts, etc.)
- * Provides flexible resource loading with control over injection location
- */
-
-export type ImportType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module';
-export type ImportLocation = 'head' | 'body-start' | 'body-end';
-
-export interface ImportOptions {
-  type?: ImportType;
-  href?: string;
-  src?: string;
-  as?: string;
-  crossOrigin?: 'anonymous' | 'use-credentials';
-  integrity?: string;
-  async?: boolean;
-  defer?: boolean;
-  module?: boolean;
-  location?: ImportLocation;
-  onLoad?: () => void;
-  onError?: (error: Error) => void;
-}
-
-export class Import {
-  private _type: ImportType = 'stylesheet';
-  private _href: string = '';
-  private _src: string = '';
-  private _as: string = '';
-  private _crossOrigin?: 'anonymous' | 'use-credentials';
-  private _integrity?: string;
-  private _async: boolean = false;
-  private _defer: boolean = false;
-  private _module: boolean = false;
-  private _location: ImportLocation = 'head';
-  private _onLoad?: () => void;
-  private _onError?: (error: Error) => void;
-  private _element: HTMLElement | null = null;
-
-  constructor(url: string, options: ImportOptions = {}) {
-    // Auto-detect type from URL if not specified
-    if (!options.type) {
-      if (url.endsWith('.css')) {
-        this._type = 'stylesheet';
-      } else if (url.endsWith('.js') || url.endsWith('.mjs')) {
-        this._type = 'script';
-      } else if (url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) {
-        this._type = 'image';
-      } else if (url.match(/\.(woff|woff2|ttf|otf|eot)$/i)) {
-        this._type = 'font';
-      } else {
-        this._type = 'preload';
-      }
-    } else {
-      this._type = options.type;
-    }
-
-    // Set URL based on type
-    if (this._type === 'script') {
-      this._src = url;
-    } else {
-      this._href = url;
-    }
-
-    // Apply options
-    if (options.as) this._as = options.as;
-    if (options.crossOrigin) this._crossOrigin = options.crossOrigin;
-    if (options.integrity) this._integrity = options.integrity;
-    if (options.async !== undefined) this._async = options.async;
-    if (options.defer !== undefined) this._defer = options.defer;
-    if (options.module !== undefined) this._module = options.module;
-    if (options.location) this._location = options.location;
-    if (options.onLoad) this._onLoad = options.onLoad;
-    if (options.onError) this._onError = options.onError;
-
-    // Auto-render
-    this.render();
-  }
-
-  /**
-   * Set the resource type
-   */
-  type(type: ImportType): this {
-    this._type = type;
-    return this;
-  }
-
-  /**
-   * Set the URL (for link elements)
-   */
-  href(url: string): this {
-    this._href = url;
-    return this;
-  }
-
-  /**
-   * Set the URL (for script elements)
-   */
-  src(url: string): this {
-    this._src = url;
-    return this;
-  }
-
-  /**
-   * Set the 'as' attribute (for preload/prefetch)
-   */
-  as(value: string): this {
-    this._as = value;
-    return this;
-  }
-
-  /**
-   * Set crossorigin attribute
-   */
-  crossOrigin(value: 'anonymous' | 'use-credentials'): this {
-    this._crossOrigin = value;
-    return this;
-  }
-
-  /**
-   * Set integrity hash for SRI (Subresource Integrity)
-   */
-  integrity(hash: string): this {
-    this._integrity = hash;
-    return this;
-  }
-
-  /**
-   * Enable async loading (for scripts)
-   */
-  async(value: boolean = true): this {
-    this._async = value;
-    return this;
-  }
-
-  /**
-   * Enable defer loading (for scripts)
-   */
-  defer(value: boolean = true): this {
-    this._defer = value;
-    return this;
-  }
-
-  /**
-   * Mark as ES module (for scripts)
-   */
-  module(value: boolean = true): this {
-    this._module = value;
-    return this;
-  }
-
-  /**
-   * Set injection location
-   */
-  location(loc: ImportLocation): this {
-    this._location = loc;
-    return this;
-  }
-
-  /**
-   * Set onload callback
-   */
-  onLoad(callback: () => void): this {
-    this._onLoad = callback;
-    return this;
-  }
-
-  /**
-   * Set onerror callback
-   */
-  onError(callback: (error: Error) => void): this {
-    this._onError = callback;
-    return this;
-  }
-
-  /**
-   * Get the target container for injection
-   */
-  private getContainer(): HTMLElement {
-    switch (this._location) {
-      case 'head':
-        return document.head;
-      case 'body-start':
-        return document.body;
-      case 'body-end':
-        return document.body;
-      default:
-        return document.head;
-    }
-  }
-
-  /**
-   * Render the import element
-   */
-  render(): this {
-    if (typeof document === 'undefined') {
-      return this;
-    }
-
-    try {
-      // Remove existing element
-      this.remove();
-
-      let element: HTMLElement;
-
-      switch (this._type) {
-        case 'stylesheet':
-          element = this.createStylesheet();
-          break;
-        case 'script':
-          element = this.createScript();
-          break;
-        case 'image':
-          element = this.createImage();
-          break;
-        case 'font':
-          element = this.createFont();
-          break;
-        case 'preload':
-          element = this.createPreload();
-          break;
-        case 'prefetch':
-          element = this.createPrefetch();
-          break;
-        case 'module':
-          element = this.createModule();
-          break;
-        default:
-          throw new Error(`Unknown import type: ${this._type}`);
-      }
-
-      const container = this.getContainer();
-      
-      if (this._location === 'body-end') {
-        container.appendChild(element);
-      } else {
-        container.insertBefore(element, container.firstChild);
-      }
-
-      this._element = element;
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Import',
-        method: 'render',
-        message: error.message,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: { 
-          type: this._type,
-          href: this._href,
-          src: this._src,
-          location: this._location,
-          error: 'runtime_exception'
-        }
-      });
-    }
-
-    return this;
-  }
-
-  /**
-   * Create a stylesheet link element
-   */
-  private createStylesheet(): HTMLLinkElement {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = this._href;
-    
-    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
-    if (this._integrity) link.integrity = this._integrity;
-    
-    link.onload = () => {
-      console.log(`✓ Stylesheet loaded: ${this._href}`);
-      if (this._onLoad) this._onLoad();
-    };
-    
-    link.onerror = () => {
-      const error = new Error(`Failed to load stylesheet: ${this._href}`);
-      ErrorHandler.captureError({
-        component: 'Import',
-        method: 'createStylesheet',
-        message: error.message,
-        timestamp: new Date(),
-        context: { href: this._href, type: 'stylesheet', error: 'load_failed' }
-      });
-      if (this._onError) this._onError(error);
-    };
-    
-    return link;
-  }
-
-  /**
-   * Create a script element
-   */
-  private createScript(): HTMLScriptElement {
-    const script = document.createElement('script');
-    script.src = this._src;
-    
-    if (this._async) script.async = true;
-    if (this._defer) script.defer = true;
-    if (this._module) script.type = 'module';
-    if (this._crossOrigin) script.crossOrigin = this._crossOrigin;
-    if (this._integrity) script.integrity = this._integrity;
-    
-    script.onload = () => {
-      console.log(`✓ Script loaded: ${this._src}`);
-      if (this._onLoad) this._onLoad();
-    };
-    
-    script.onerror = () => {
-      const error = new Error(`Failed to load script: ${this._src}`);
-      ErrorHandler.captureError({
-        component: 'Import',
-        method: 'createScript',
-        message: error.message,
-        timestamp: new Date(),
-        context: { src: this._src, type: 'script', error: 'load_failed' }
-      });
-      if (this._onError) this._onError(error);
-    };
-    
-    return script;
-  }
-
-  /**
-   * Create an image preload link
-   */
-  private createImage(): HTMLLinkElement {
-    const link = document.createElement('link');
-    link.rel = 'preload';
-    link.as = 'image';
-    link.href = this._href;
-    
-    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
-    
-    return link;
-  }
-
-  /**
-   * Create a font preload link
-   */
-  private createFont(): HTMLLinkElement {
-    const link = document.createElement('link');
-    link.rel = 'preload';
-    link.as = 'font';
-    link.href = this._href;
-    link.crossOrigin = this._crossOrigin || 'anonymous';
-    
-    return link;
-  }
-
-  /**
-   * Create a preload link
-   */
-  private createPreload(): HTMLLinkElement {
-    const link = document.createElement('link');
-    link.rel = 'preload';
-    link.href = this._href;
-    
-    if (this._as) link.as = this._as;
-    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
-    if (this._integrity) link.integrity = this._integrity;
-    
-    return link;
-  }
-
-  /**
-   * Create a prefetch link
-   */
-  private createPrefetch(): HTMLLinkElement {
-    const link = document.createElement('link');
-    link.rel = 'prefetch';
-    link.href = this._href;
-    
-    if (this._as) link.as = this._as;
-    if (this._crossOrigin) link.crossOrigin = this._crossOrigin;
-    
-    return link;
-  }
-
-  /**
-   * Create a module script
-   */
-  private createModule(): HTMLScriptElement {
-    const script = document.createElement('script');
-    script.type = 'module';
-    script.src = this._src;
-    
-    if (this._crossOrigin) script.crossOrigin = this._crossOrigin;
-    if (this._integrity) script.integrity = this._integrity;
-    
-    script.onload = () => {
-      console.log(`✓ Module loaded: ${this._src}`);
-      if (this._onLoad) this._onLoad();
-    };
-    
-    script.onerror = () => {
-      const error = new Error(`Failed to load module: ${this._src}`);
-      ErrorHandler.captureError({
-        component: 'Import',
-        method: 'createModule',
-        message: error.message,
-        timestamp: new Date(),
-        context: { src: this._src, type: 'module', error: 'load_failed' }
-      });
-      if (this._onError) this._onError(error);
-    };
-    
-    return script;
-  }
-
-  /**
-   * Remove the element from the document
-   */
-  remove(): this {
-    if (this._element && this._element.parentNode) {
-      this._element.parentNode.removeChild(this._element);
-      this._element = null;
-    }
-    return this;
-  }
-}
-
-/**
- * Factory function for creating imports
- */
-export function importResource(url: string, options?: ImportOptions): Import {
-  return new Import(url, options);
-}

package/lib/components/node.ts

@@ -1,200 +0,0 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
-
-/**
- * Node component options
- */
-export interface NodeOptions {
-  tagType?: string;
-  className?: string;
-  textContent?: string;
-  innerHTML?: string;
-  attributes?: Record<string, string>;
-  styles?: Record<string, string>;
-}
-
-/**
- * Node component state
- */
-type NodeState = {
-  tagType: string;
-  className: string;
-  textContent: string;
-  innerHTML: string;
-  attributes: Record<string, string>;
-  styles: Record<string, string>;
-};
-
-/**
- * Node component - Create arbitrary HTML elements
- * 
- * Usage:
- *   const div = jux.node('myDiv', { tagType: 'div', className: 'container' });
- *   div.render('#target');
- * 
- *   const span = jux.node('mySpan')
- *     .tagType('span')
- *     .className('highlight')
- *     .textContent('Hello World')
- *     .render();
- */
-export class Node extends Reactive {
-  state!: NodeState;
-  container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: NodeOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
-      tagType: options.tagType ?? 'div',
-      className: options.className ?? '',
-      textContent: options.textContent ?? '',
-      innerHTML: options.innerHTML ?? '',
-      attributes: options.attributes ?? {},
-      styles: options.styles ?? {}
-    }) as NodeState;
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
-  tagType(value: string): this {
-    this.state.tagType = value;
-    return this;
-  }
-
-  className(value: string): this {
-    this.state.className = value;
-    return this;
-  }
-
-  addClass(value: string): this {
-    const classes = this.state.className.split(' ').filter(c => c);
-    if (!classes.includes(value)) {
-      classes.push(value);
-      this.state.className = classes.join(' ');
-    }
-    return this;
-  }
-
-  removeClass(value: string): this {
-    const classes = this.state.className.split(' ').filter(c => c && c !== value);
-    this.state.className = classes.join(' ');
-    return this;
-  }
-
-  textContent(value: string): this {
-    this.state.textContent = value;
-    this.state.innerHTML = ''; // Clear innerHTML when setting textContent
-    return this;
-  }
-
-  innerHTML(value: string): this {
-    this.state.innerHTML = value;
-    this.state.textContent = ''; // Clear textContent when setting innerHTML
-    return this;
-  }
-
-  attr(name: string, value: string): this {
-    this.state.attributes[name] = value;
-    return this;
-  }
-
-  attrs(attributes: Record<string, string>): this {
-    this.state.attributes = { ...this.state.attributes, ...attributes };
-    return this;
-  }
-
-  style(property: string, value: string): this {
-    this.state.styles[property] = value;
-    return this;
-  }
-
-  styles(styles: Record<string, string>): this {
-    this.state.styles = { ...this.state.styles, ...styles };
-    return this;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    let container: HTMLElement;
-    
-    if (targetId) {
-      // Use provided targetId - must exist
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Node: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      // Create or get container with component ID
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
-    }
-    
-    this.container = container;
-    const { tagType, className, textContent, innerHTML, attributes, styles } = this.state;
-    
-    // Create the element
-    const element = document.createElement(tagType);
-    
-    // Set ID to component ID
-    element.id = this._componentId;
-    
-    // Set className
-    if (className) {
-      element.className = className;
-    }
-    
-    // Set content (innerHTML takes precedence over textContent)
-    if (innerHTML) {
-      element.innerHTML = innerHTML;
-    } else if (textContent) {
-      element.textContent = textContent;
-    }
-    
-    // Set attributes
-    Object.entries(attributes).forEach(([name, value]) => {
-      element.setAttribute(name, value);
-    });
-    
-    // Set styles
-    Object.entries(styles).forEach(([property, value]) => {
-      element.style.setProperty(property, value);
-    });
-    
-    container.appendChild(element);
-    return this;
-  }
-
-  /**
-   * Render to another Jux component's container
-   * 
-   * Usage:
-   *   const container = jux.node('myContainer');
-   *   const child = jux.node('myChild').renderTo(container);
-   */
-  renderTo(juxComponent: any): this {
-    // Verify it's a Jux component (has _componentId from Reactive base)
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Node.renderTo: Invalid component - not an object');
-    }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Node.renderTo: Invalid component - missing _componentId (not a Jux component)');
-    }
-    
-    // Render to the component's ID as a selector
-    return this.render(`#${juxComponent._componentId}`);
-  }
-}
-
-/**
- * Factory helper
- */
-export function node(componentId: string, options: NodeOptions = {}): Node {
-  return new Node(componentId, options);
-}