juxscript 1.0.3 → 1.0.5

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
+ * ------------------------- */

package/lib/components/list.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * List item interface
@@ -23,6 +23,8 @@ export interface ListOptions {
   selectedIndex?: number | null;
   onItemClick?: (item: ListItem, index: number, e: Event) => void;
   onItemDoubleClick?: (item: ListItem, index: number, e: Event) => void;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -35,6 +37,8 @@ type ListState = {
   direction: string;
   selectable: boolean;
   selectedIndex: number | null;
+  style: string;
+  class: string;
 };
 
 /**
@@ -62,25 +66,29 @@ type ListState = {
  *   // Move item from index 0 to index 2
  *   myList.move(0, 2);
  */
-export class List extends Reactive {
-  state!: ListState;
+export class List {
+  state: ListState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
   private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null;
   private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null;
 
-  constructor(componentId: string, options: ListOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  constructor(id: string, options: ListOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       items: options.items ?? [],
       header: options.header ?? '',
       gap: options.gap ?? '0.5rem',
       direction: options.direction ?? 'vertical',
       selectable: options.selectable ?? false,
-      selectedIndex: options.selectedIndex ?? null
-    }) as ListState;
-    
+      selectedIndex: options.selectedIndex ?? null,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+
     this._onItemClick = options.onItemClick ?? null;
     this._onItemDoubleClick = options.onItemDoubleClick ?? null;
   }
@@ -114,22 +122,31 @@ export class List extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * List operations
    * ------------------------- */
 
   add(item: ListItem, index?: number): this {
     const items = [...this.state.items];
-    
+
     if (typeof index === 'number' && index >= 0 && index <= items.length) {
       items.splice(index, 0, item);
     } else {
       index = items.length;
       items.push(item);
     }
-    
+
     this.state.items = items;
-    this.emit('itemAdded', { item, index });
     this._updateDOM();
     return this;
   }
@@ -139,10 +156,10 @@ export class List extends Reactive {
       console.error(`List: Invalid index ${index} for remove`);
       return this;
     }
-    
+
     const items = [...this.state.items];
-    const removed = items.splice(index, 1)[0];
-    
+    items.splice(index, 1);
+
     // Adjust selected index
     if (this.state.selectedIndex !== null) {
       if (this.state.selectedIndex === index) {
@@ -151,33 +168,32 @@ export class List extends Reactive {
         this.state.selectedIndex--;
       }
     }
-    
+
     this.state.items = items;
-    this.emit('itemRemoved', { item: removed, index });
     this._updateDOM();
     return this;
   }
 
   move(fromIndex: number, toIndex: number): this {
     const items = [...this.state.items];
-    
+
     if (fromIndex < 0 || fromIndex >= items.length) {
       console.error(`List: Invalid fromIndex ${fromIndex}`);
       return this;
     }
-    
+
     if (toIndex < 0 || toIndex >= items.length) {
       console.error(`List: Invalid toIndex ${toIndex}`);
       return this;
     }
-    
+
     if (fromIndex === toIndex) {
       return this;
     }
-    
+
     const [movedItem] = items.splice(fromIndex, 1);
     items.splice(toIndex, 0, movedItem);
-    
+
     // Adjust selected index
     if (this.state.selectedIndex !== null) {
       if (this.state.selectedIndex === fromIndex) {
@@ -188,9 +204,8 @@ export class List extends Reactive {
         this.state.selectedIndex++;
       }
     }
-    
+
     this.state.items = items;
-    this.emit('itemMoved', { item: movedItem, fromIndex, toIndex });
     this._updateDOM();
     return this;
   }
@@ -200,16 +215,8 @@ export class List extends Reactive {
       console.error(`List: Invalid index ${index} for select`);
       return this;
     }
-    
-    const previousIndex = this.state.selectedIndex;
+
     this.state.selectedIndex = index;
-    
-    this.emit('itemSelect', { 
-      item: this.state.items[index], 
-      index,
-      previousIndex 
-    });
-    
     this._updateDOM();
     return this;
   }
@@ -218,11 +225,8 @@ export class List extends Reactive {
     if (this.state.selectedIndex === null) {
       return this;
     }
-    
-    const previousIndex = this.state.selectedIndex;
+
     this.state.selectedIndex = null;
-    
-    this.emit('itemDeselect', { previousIndex });
     this._updateDOM();
     return this;
   }
@@ -243,7 +247,7 @@ export class List extends Reactive {
 
   private _updateDOM(): void {
     if (!this.container) return;
-    
+
     // Clear and re-render
     this.container.innerHTML = '';
     this._renderContent();
@@ -251,13 +255,21 @@ export class List extends Reactive {
 
   private _renderContent(): void {
     if (!this.container) return;
-    
-    const { items, header, gap, direction, selectable, selectedIndex } = this.state;
-    
+
+    const { items, header, gap, direction, selectable, selectedIndex, style, class: className } = this.state;
+
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-list-wrapper';
-    wrapper.id = this._componentId;
-    
+    wrapper.id = this._id;
+
+    if (className) {
+      wrapper.className += ` ${className}`;
+    }
+
+    if (style) {
+      wrapper.setAttribute('style', style);
+    }
+
     // Header
     if (header) {
       const headerEl = document.createElement('div');
@@ -265,21 +277,21 @@ export class List extends Reactive {
       headerEl.textContent = header;
       wrapper.appendChild(headerEl);
     }
-    
+
     // List container
     const listContainer = document.createElement('div');
     listContainer.className = `jux-list jux-list-${direction}`;
     listContainer.style.gap = gap;
-    
+
     // Render items
     items.forEach((item, index) => {
       const itemEl = document.createElement('div');
       itemEl.className = `jux-list-item jux-list-item-${item.type || 'default'}`;
-      
+
       if (selectable && selectedIndex === index) {
         itemEl.classList.add('jux-list-item-selected');
       }
-      
+
       // Icon
       if (item.icon) {
         const iconEl = document.createElement('span');
@@ -287,27 +299,27 @@ export class List extends Reactive {
         iconEl.textContent = item.icon;
         itemEl.appendChild(iconEl);
       }
-      
+
       // Content
       const contentEl = document.createElement('div');
       contentEl.className = 'jux-list-item-content';
-      
+
       if (item.title) {
         const titleEl = document.createElement('div');
         titleEl.className = 'jux-list-item-title';
         titleEl.textContent = item.title;
         contentEl.appendChild(titleEl);
       }
-      
+
       if (item.body) {
         const bodyEl = document.createElement('div');
         bodyEl.className = 'jux-list-item-body';
         bodyEl.textContent = item.body;
         contentEl.appendChild(bodyEl);
       }
-      
+
       itemEl.appendChild(contentEl);
-      
+
       // Metadata
       if (item.metadata) {
         const metadataEl = document.createElement('span');
@@ -315,30 +327,27 @@ export class List extends Reactive {
         metadataEl.textContent = item.metadata;
         itemEl.appendChild(metadataEl);
       }
-      
+
       listContainer.appendChild(itemEl);
-      
+
       // Event binding - click handlers
       itemEl.addEventListener('click', (e) => {
         if (selectable) {
           this.select(index);
         }
-        
-        this.emit('itemClick', { item, index, event: e });
-        
+
         if (this._onItemClick) {
           this._onItemClick(item, index, e);
         }
       });
-      
+
       if (this._onItemDoubleClick) {
         itemEl.addEventListener('dblclick', (e) => {
-          this.emit('itemDoubleClick', { item, index, event: e });
           this._onItemDoubleClick!(item, index, e);
         });
       }
     });
-    
+
     wrapper.appendChild(listContainer);
     this.container.appendChild(wrapper);
   }
@@ -349,7 +358,7 @@ export class List extends Reactive {
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -357,14 +366,14 @@ export class List extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
     this.container.innerHTML = '';
-    
+
     this._renderContent();
-    
+
     return this;
   }
 
@@ -375,18 +384,18 @@ export class List extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('List.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('List.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('List.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function list(componentId: string, options: ListOptions = {}): List {
-  return new List(componentId, options);
+export function list(id: string, options: ListOptions = {}): List {
+  return new List(id, options);
 }