juxscript 1.0.3 → 1.0.4

package/lib/components/input.ts

@@ -1,16 +1,21 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Input component options
  */
 export interface InputOptions {
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
-  label?: string;
-  placeholder?: string;
+  type?: string;
   value?: string;
+  placeholder?: string;
+  label?: string;
   required?: boolean;
   disabled?: boolean;
+  name?: string;
+  rows?: number;
   onChange?: (value: string) => void;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -18,43 +23,57 @@ export interface InputOptions {
  */
 type InputState = {
   type: string;
-  label: string;
-  placeholder: string;
   value: string;
+  placeholder: string;
+  label: string;
   required: boolean;
   disabled: boolean;
-  onChange: ((value: string) => void) | null;
+  name: string;
+  rows: number;
+  style: string;
+  class: string;
 };
 
 /**
- * Input component
+ * Input component - text input and textarea
  * 
  * Usage:
- *   const input = jux.input('myInput', {
- *     label: 'Email',
- *     type: 'email',
- *     placeholder: 'Enter your email',
- *     onChange: (value) => console.log(value)
- *   });
- *   input.render();
+ *   jux.input('username')
+ *     .label('Username')
+ *     .placeholder('Enter username')
+ *     .required(true)
+ *     .render('#form');
+ * 
+ *   jux.input('bio')
+ *     .type('textarea')
+ *     .rows(5)
+ *     .render('#form');
  */
-export class Input extends Reactive {
-  state!: InputState;
+export class Input {
+  state: InputState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: InputOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+  private _onChange?: (value: string) => void;
+  private _boundState?: State<string>;
+
+  constructor(id: string, options: InputOptions = {}) {
+    this._id = id;
+    this.id = id;
+    this._onChange = options.onChange;
+
+    this.state = {
       type: options.type ?? 'text',
-      label: options.label ?? '',
-      placeholder: options.placeholder ?? '',
       value: options.value ?? '',
+      placeholder: options.placeholder ?? '',
+      label: options.label ?? '',
       required: options.required ?? false,
       disabled: options.disabled ?? false,
-      onChange: options.onChange ?? null
-    }) as InputState;
+      name: options.name ?? id,
+      rows: options.rows ?? 3,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -66,8 +85,9 @@ export class Input extends Reactive {
     return this;
   }
 
-  label(value: string): this {
-    this.state.label = value;
+  value(value: string): this {
+    this.state.value = value;
+    this._updateElement();
     return this;
   }
 
@@ -76,8 +96,8 @@ export class Input extends Reactive {
     return this;
   }
 
-  value(value: string): this {
-    this.state.value = value;
+  label(value: string): this {
+    this.state.label = value;
     return this;
   }
 
@@ -88,21 +108,76 @@ export class Input extends Reactive {
 
   disabled(value: boolean): this {
     this.state.disabled = value;
+    this._updateElement();
+    return this;
+  }
+
+  name(value: string): this {
+    this.state.name = value;
+    return this;
+  }
+
+  rows(value: number): this {
+    this.state.rows = value;
+    return this;
+  }
+
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  onChange(handler: (value: string) => void): this {
+    this._onChange = handler;
     return this;
   }
 
-  onChange(callback: (value: string) => void): this {
-    this.state.onChange = callback;
+  /**
+   * Two-way binding to state
+   */
+  bind(stateObj: State<string>): this {
+    this._boundState = stateObj;
+
+    // Subscribe to state changes
+    stateObj.subscribe((val) => {
+      this.state.value = val;
+      this._updateElement();
+    });
+
+    // Update state on input change
+    this.onChange((value) => stateObj.set(value));
+
     return this;
   }
 
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private _updateElement(): void {
+    const input = document.getElementById(`${this._id}-input`) as HTMLInputElement | HTMLTextAreaElement;
+    if (input) {
+      input.value = this.state.value;
+      input.disabled = this.state.disabled;
+    }
+  }
+
+  getValue(): string {
+    return this.state.value;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -110,66 +185,79 @@ export class Input extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { type, label, placeholder, value, required, disabled, onChange } = this.state;
-    
+    const { type, value, placeholder, label, required, disabled, name, rows, style, class: className } = this.state;
+
     const wrapper = document.createElement('div');
-    wrapper.className = 'jux-input-wrapper';
-    wrapper.id = this._componentId;
-    
+    wrapper.className = 'jux-input';
+    wrapper.id = this._id;
+
+    if (className) {
+      wrapper.className += ` ${className}`;
+    }
+
+    if (style) {
+      wrapper.setAttribute('style', style);
+    }
+
+    // Label
     if (label) {
       const labelEl = document.createElement('label');
       labelEl.className = 'jux-input-label';
+      labelEl.htmlFor = `${this._id}-input`;
       labelEl.textContent = label;
-      labelEl.setAttribute('for', `${this._componentId}-input`);
+      if (required) {
+        const requiredSpan = document.createElement('span');
+        requiredSpan.className = 'jux-input-required';
+        requiredSpan.textContent = ' *';
+        labelEl.appendChild(requiredSpan);
+      }
       wrapper.appendChild(labelEl);
     }
-    
-    const input = document.createElement('input');
-    input.id = `${this._componentId}-input`;
-    input.className = 'jux-input';
-    input.type = type;
-    input.placeholder = placeholder;
-    input.value = value;
-    input.required = required;
-    input.disabled = disabled;
-    
-    wrapper.appendChild(input);
-    container.appendChild(wrapper);
-    
-    // Event binding - onChange
-    if (onChange) {
-      input.addEventListener('input', (e) => {
-        const target = e.target as HTMLInputElement;
-        onChange(target.value);
-      });
+
+    // Input/Textarea
+    let inputEl: HTMLInputElement | HTMLTextAreaElement;
+
+    if (type === 'textarea') {
+      inputEl = document.createElement('textarea');
+      inputEl.rows = rows;
+    } else {
+      inputEl = document.createElement('input');
+      inputEl.type = type;
     }
-    
+
+    inputEl.className = 'jux-input-element';
+    inputEl.id = `${this._id}-input`;
+    inputEl.name = name;
+    inputEl.value = value;
+    inputEl.placeholder = placeholder;
+    inputEl.required = required;
+    inputEl.disabled = disabled;
+
+    inputEl.addEventListener('input', (e) => {
+      const target = e.target as HTMLInputElement | HTMLTextAreaElement;
+      this.state.value = target.value;
+      if (this._onChange) {
+        this._onChange(target.value);
+      }
+    });
+
+    wrapper.appendChild(inputEl);
+    container.appendChild(wrapper);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Input.renderTo: Invalid component - not an object');
-    }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Input.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent?._id) {
+      throw new Error('Input.renderTo: Invalid component');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
-export function input(componentId: string, options: InputOptions = {}): Input {
-  return new Input(componentId, options);
+export function input(id: string, options: InputOptions = {}): Input {
+  return new Input(id, options);
 }

package/lib/components/layout.ts

@@ -1,19 +1,45 @@
 import { ErrorHandler } from './error-handler.js';
 
 /**
- * Layout - Load a JUX layout file
- * Auto-loads when file is set
+ * Layout component interface
+ * Represents any Jux component that can be rendered
+ */
+interface LayoutComponent {
+  render: (target?: string) => any;
+  _componentId?: string;
+  _id?: string;
+}
+
+/**
+ * Layout - Compose and render multiple components
+ * 
+ * Usage:
+ *   // As a composition function
+ *   jux.layout(
+ *     jux.include('/lib/presets/notion/notion.css'),
+ *     jux.header('appheader').render('#app'),
+ *     jux.sidebar('appsidebar').render('#app'),
+ *     jux.main('appmain').render('#app')
+ *   );
+ *   
+ *   // Or load from a .jux file
+ *   jux.layout('/lib/presets/notion/main.jux');
  */
 export class Layout {
   private _juxFile: string;
   private _loaded: boolean = false;
+  private _components: any[] = [];
 
-  constructor(juxFile: string = '') {
-    this._juxFile = juxFile;
-    
-    // Auto-load if file provided
-    if (juxFile) {
+  constructor(...args: any[]) {
+    // If first arg is string, it's a file path
+    if (args.length === 1 && typeof args[0] === 'string' && args[0].endsWith('.jux')) {
+      this._juxFile = args[0];
       this.load();
+    } else {
+      // Otherwise, it's a list of components to compose
+      this._juxFile = '';
+      this._components = args;
+      this._compose();
     }
   }
 
@@ -34,6 +60,41 @@ export class Layout {
     return this._juxFile;
   }
 
+  /**
+   * Compose components immediately
+   * This handles the case where components are passed directly
+   */
+  private _compose(): this {
+    try {
+      // Components are already rendered via chaining
+      // This just ensures they're tracked
+      this._components.forEach((component, index) => {
+        // Components that return themselves from .render() are already in DOM
+        // Just log for debugging
+        if (component && typeof component === 'object') {
+          const id = component._componentId || component._id || component.id || `component-${index}`;
+          console.log(`✓ Layout component composed: ${id}`);
+        }
+      });
+
+      this._loaded = true;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Layout',
+        method: '_compose',
+        message: `Failed to compose layout: ${error.message}`,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: {
+          componentCount: this._components.length,
+          error: 'composition_failed'
+        }
+      });
+    }
+
+    return this;
+  }
+
   /**
    * Normalize path to absolute URL from site root
    */
@@ -42,22 +103,22 @@ export class Layout {
     if (path.startsWith('http://') || path.startsWith('https://')) {
       return path;
     }
-    
+
     // Convert relative path to absolute
     // Remove leading './' if present
     let cleanPath = path.replace(/^\.\//, '');
-    
+
     // Ensure it starts with /
     if (!cleanPath.startsWith('/')) {
       cleanPath = '/' + cleanPath;
     }
-    
+
     // Return absolute URL with origin
     return new URL(cleanPath, window.location.origin).href;
   }
 
   /**
-   * Load the layout
+   * Load the layout from a .jux file
    * This will dynamically import the compiled JS file
    */
   async load(): Promise<this> {
@@ -65,25 +126,33 @@ export class Layout {
       return this;
     }
 
+    if (!this._juxFile) {
+      console.warn('Layout: No file specified to load');
+      return this;
+    }
+
     try {
       // Convert .jux to .js for the compiled output
       let jsFile = this._juxFile.replace(/\.jux$/, '.js');
-      
+
       // Normalize to absolute URL for browser import
       jsFile = this.normalizePath(jsFile);
-      
+
       console.log(`Loading layout: ${jsFile}`);
-      
+
       // Dynamic import of the layout module
       const layoutModule = await import(jsFile);
-      
+
       // If the module has an init or default export, call it
       if (typeof layoutModule.default === 'function') {
         await layoutModule.default();
       } else if (typeof layoutModule.init === 'function') {
         await layoutModule.init();
+      } else if (layoutModule.default && typeof layoutModule.default === 'object') {
+        // If default export is the layout object itself
+        console.log('✓ Layout module loaded (object export)');
       }
-      
+
       this._loaded = true;
       console.log(`✓ Layout loaded: ${this._juxFile}`);
     } catch (error: any) {
@@ -93,7 +162,7 @@ export class Layout {
         message: `Failed to load layout: ${error.message}`,
         stack: error.stack,
         timestamp: new Date(),
-        context: { 
+        context: {
           juxFile: this._juxFile,
           jsFile: this._juxFile.replace(/\.jux$/, '.js'),
           errorCode: error.code
@@ -110,4 +179,61 @@ export class Layout {
   isLoaded(): boolean {
     return this._loaded;
   }
-}
+
+  /**
+   * Get all composed components
+   */
+  getComponents(): any[] {
+    return this._components;
+  }
+
+  /**
+   * Add a component to the layout
+   */
+  add(component: any): this {
+    this._components.push(component);
+    return this;
+  }
+
+  /**
+   * Render all components
+   * Useful if components weren't already rendered
+   */
+  render(target?: string): this {
+    this._components.forEach((component) => {
+      if (component && typeof component.render === 'function') {
+        try {
+          component.render(target);
+        } catch (error: any) {
+          ErrorHandler.captureError({
+            component: 'Layout',
+            method: 'render',
+            message: `Failed to render component: ${error.message}`,
+            stack: error.stack,
+            timestamp: new Date(),
+            context: {
+              componentId: component._componentId || component._id || 'unknown',
+              target
+            }
+          });
+        }
+      }
+    });
+
+    return this;
+  }
+}
+
+/**
+ * Factory helper
+ * Accepts either:
+ *   - A file path: layout('/lib/presets/notion/main.jux')
+ *   - A list of components: layout(header, sidebar, main)
+ */
+export function layout(...args: any[]): Layout {
+  return new Layout(...args);
+}
+
+/* -------------------------
+ * Module Exports
+ * ------------------------- */