juxscript 1.0.0

package/lib/components/node.ts

@@ -0,0 +1,200 @@
+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);
+}

package/lib/components/reactivity.js

@@ -0,0 +1,104 @@
+/**
+ * Ultra-light reactivity system for Jux components
+ * Provides event-based state management with emit/on pattern
+ */
+
+function getOrCreateContainer(componentId) {
+  if (typeof document === 'undefined') return null;
+  
+  let container = document.getElementById(componentId);
+  
+  // Container already exists, return it
+  if (container) {
+    return container;
+  }
+  
+  // Auto-create container if it doesn't exist
+  container = document.createElement('div');
+  container.id = componentId;
+  
+  // Find appropriate parent
+    let parent;
+    // Page components go inside #appmain (or [data-jux-page] if no layout)
+    const appmain = document.getElementById('appmain');
+    const dataJuxPage = document.querySelector('[data-jux-page]');
+    parent = appmain || dataJuxPage || document.body;
+    parent.appendChild(container);
+  
+  
+  return container;
+}
+
+class Reactive {
+  constructor() {
+    this._listeners = new Map();
+    this._state = {};
+    this._componentId = null;
+  }
+
+  /**
+   * Set the component ID and auto-wire the container getter
+   * Call this in component constructors: instance._setComponentId(componentId)
+   */
+  _setComponentId(componentId) {
+    this._componentId = componentId;
+    this.id = componentId;
+  }
+
+  _createReactiveState(initialState = {}) {
+    const self = this;
+    return new Proxy(initialState, {
+      set(target, property, value) {
+        const oldValue = target[property];
+        target[property] = value;
+        
+        if (oldValue !== value) {
+          self.emit('stateChange', { property, value, oldValue });
+        }
+        
+        return true;
+      }
+    });
+  }
+
+  on(event, handler) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+    this._listeners.get(event).push(handler);
+    
+    return this;
+  }
+
+  emit(event, data) {
+    if (this._listeners.has(event)) {
+      this._listeners.get(event).forEach((handler, index) => {
+        try {
+          handler(data);
+        } catch (err) {
+          console.error(`[Reactive] Error in handler for '${event}':`, err);
+        }
+      });
+    }
+    
+    return this;
+  }
+
+  off(event, handler) {
+    if (this._listeners.has(event)) {
+      const callbacks = this._listeners.get(event);
+      const index = callbacks.indexOf(handler);
+      if (index > -1) {
+        callbacks.splice(index, 1);
+      }
+    }
+    
+    return this;
+  }
+
+  hasListeners(event) {
+    return this._listeners.has(event) && this._listeners.get(event).length > 0;
+  }
+}
+
+export { Reactive, getOrCreateContainer };

package/lib/components/script.ts

@@ -0,0 +1,152 @@
+import { ErrorHandler } from './error-handler.js';
+
+/**
+ * Script - Inject JavaScript into the document
+ * Auto-renders when created or modified
+ */
+export class Script {
+  private _content: string = '';
+  private _src: string = '';
+  private _isSrc: boolean = false;
+  private _async: boolean = false;
+  private _defer: boolean = false;
+  private _type: string = '';
+  private _element: HTMLScriptElement | null = null;
+
+  constructor(contentOrSrc: string = '') {
+    // Detect if it's a URL or inline script
+    if (contentOrSrc.trim().startsWith('http') || 
+        contentOrSrc.endsWith('.js') || 
+        contentOrSrc.includes('/')) {
+      this._src = contentOrSrc;
+      this._isSrc = true;
+    } else {
+      this._content = contentOrSrc;
+      this._isSrc = false;
+    }
+    
+    // Auto-render if content/src provided
+    if (contentOrSrc) {
+      this.render();
+    }
+  }
+
+  /**
+   * Set inline JavaScript content
+   */
+  content(js: string): this {
+    this._content = js;
+    this._isSrc = false;
+    this._src = '';
+    this.render();
+    return this;
+  }
+
+  /**
+   * Set external script URL
+   */
+  src(url: string): this {
+    this._src = url;
+    this._isSrc = true;
+    this._content = '';
+    this.render();
+    return this;
+  }
+
+  /**
+   * Enable async loading (for external scripts)
+   */
+  async(value: boolean = true): this {
+    this._async = value;
+    this.render();
+    return this;
+  }
+
+  /**
+   * Enable defer loading (for external scripts)
+   */
+  defer(value: boolean = true): this {
+    this._defer = value;
+    this.render();
+    return this;
+  }
+
+  /**
+   * Set script type (e.g., 'module', 'text/javascript')
+   */
+  type(value: string): this {
+    this._type = value;
+    this.render();
+    return this;
+  }
+
+  /**
+   * Render the script element
+   */
+  render(): this {
+    if (typeof document === 'undefined') {
+      return this;
+    }
+
+    try {
+      // Remove existing element if it exists
+      this.remove();
+
+      const script = document.createElement('script');
+
+      if (this._isSrc) {
+        script.src = this._src;
+        
+        // Add error handler for failed loads
+        script.onerror = () => {
+          ErrorHandler.captureError({
+            component: 'Script',
+            method: 'render',
+            message: `Failed to load script: ${this._src}`,
+            timestamp: new Date(),
+            context: { src: this._src, type: 'external', error: 'load_failed' }
+          });
+        };
+        
+        script.onload = () => {
+          console.log(`✓ Script loaded: ${this._src}`);
+        };
+      } else {
+        script.textContent = this._content;
+      }
+
+      if (this._async) script.async = true;
+      if (this._defer) script.defer = true;
+      if (this._type) script.type = this._type;
+
+      document.head.appendChild(script);
+      this._element = script;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Script',
+        method: 'render',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: { 
+          isSrc: this._isSrc, 
+          src: this._src,
+          error: 'runtime_exception'
+        }
+      });
+    }
+
+    return this;
+  }
+
+  /**
+   * Remove the script from the document
+   */
+  remove(): this {
+    if (this._element && this._element.parentNode) {
+      this._element.parentNode.removeChild(this._element);
+      this._element = null;
+    }
+    return this;
+  }
+}

package/lib/components/sidebar.ts

@@ -0,0 +1,168 @@
+import { Reactive, getOrCreateContainer } from './reactivity.js';
+
+/**
+ * Sidebar component options
+ */
+export interface SidebarOptions {
+  title?: string;
+  width?: string;
+  position?: 'left' | 'right';
+  collapsible?: boolean;
+  collapsed?: boolean;
+}
+
+/**
+ * Sidebar component state
+ */
+type SidebarState = {
+  title: string;
+  width: string;
+  position: string;
+  collapsible: boolean;
+  collapsed: boolean;
+};
+
+/**
+ * Sidebar component
+ * 
+ * Usage:
+ *   const sidebar = jux.sidebar('mySidebar', {
+ *     title: 'Navigation',
+ *     width: '250px',
+ *     position: 'left'
+ *   });
+ *   sidebar.render('#appsidebar');
+ */
+export class Sidebar extends Reactive {
+  state!: SidebarState;
+  container: HTMLElement | null = null;
+  
+  constructor(componentId: string, options: SidebarOptions = {}) {
+    super();
+    this._setComponentId(componentId);
+    
+    this.state = this._createReactiveState({
+      title: options.title ?? '',
+      width: options.width ?? '250px',
+      position: options.position ?? 'left',
+      collapsible: options.collapsible ?? false,
+      collapsed: options.collapsed ?? false
+    }) as SidebarState;
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  width(value: string): this {
+    this.state.width = value;
+    return this;
+  }
+
+  position(value: 'left' | 'right'): this {
+    this.state.position = value;
+    return this;
+  }
+
+  collapsible(value: boolean): this {
+    this.state.collapsible = value;
+    return this;
+  }
+
+  collapsed(value: boolean): this {
+    this.state.collapsed = value;
+    return this;
+  }
+
+  toggle(): this {
+    this.state.collapsed = !this.state.collapsed;
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  render(targetId?: string): this {
+    let container: HTMLElement;
+    
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`Sidebar: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._componentId) as HTMLElement;
+    }
+    
+    this.container = container;
+    const { title, width, position, collapsible, collapsed } = this.state;
+    
+    const sidebar = document.createElement('aside');
+    sidebar.className = `jux-sidebar jux-sidebar-${position}`;
+    sidebar.id = this._componentId;
+    sidebar.style.width = collapsed ? '0' : width;
+    
+    if (collapsed) {
+      sidebar.classList.add('jux-sidebar-collapsed');
+    }
+    
+    if (title) {
+      const titleEl = document.createElement('div');
+      titleEl.className = 'jux-sidebar-title';
+      titleEl.textContent = title;
+      sidebar.appendChild(titleEl);
+    }
+    
+    const content = document.createElement('div');
+    content.className = 'jux-sidebar-content';
+    sidebar.appendChild(content);
+    
+    container.appendChild(sidebar);
+    
+    // Event binding - toggle button
+    if (collapsible) {
+      const toggleBtn = document.createElement('button');
+      toggleBtn.className = 'jux-sidebar-toggle';
+      toggleBtn.textContent = collapsed ? '>' : '<';
+      sidebar.appendChild(toggleBtn);
+      
+      toggleBtn.addEventListener('click', () => {
+        this.toggle();
+        sidebar.classList.toggle('jux-sidebar-collapsed');
+        sidebar.style.width = this.state.collapsed ? '0' : width;
+        toggleBtn.textContent = this.state.collapsed ? '>' : '<';
+      });
+    }
+    
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  renderTo(juxComponent: any): this {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('Sidebar.renderTo: Invalid component - not an object');
+    }
+    
+    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
+      throw new Error('Sidebar.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    }
+    
+    return this.render(`#${juxComponent._componentId}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function sidebar(componentId: string, options: SidebarOptions = {}): Sidebar {
+  return new Sidebar(componentId, options);
+}