juxscript 1.0.3 → 1.0.4

package/lib/components/view.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * View component options
@@ -29,19 +29,21 @@ type ViewState = {
  *   view.add(component1);
  *   await view.render();
  */
-export class View extends Reactive {
-  state!: ViewState;
+export class View {
+  state: ViewState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: ViewOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: ViewOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       title: options.title ?? '',
       description: options.description ?? '',
-      children: Array.isArray(options.children) ? [...options.children] : [],
-    }) as ViewState;
+      children: Array.isArray(options.children) ? [...options.children] : []
+    };
   }
 
   /* -------------------------
@@ -81,7 +83,7 @@ export class View extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
@@ -89,7 +91,7 @@ export class View extends Reactive {
 
     const view = document.createElement('div');
     view.className = 'jux-view';
-    view.id = this._componentId;
+    view.id = this._id;
 
     // View header
     if (title || description) {
@@ -122,16 +124,26 @@ export class View extends Reactive {
       const child = children[i];
       if (!child) continue;
 
-      let childId = (child as any)._componentId ?? `view-child-${i}`;
+      // Get child ID
+      let childId: string | null = null;
+      if ((child as any).id) {
+        childId = (child as any).id;
+      } else if ((child as any)._id) {
+        childId = (child as any)._id;
+      } else {
+        childId = `${this._id}-child-${i}`;
+      }
 
+      // Create wrapper for child
       const childWrapper = document.createElement('div');
       childWrapper.className = 'jux-view-item';
-      childWrapper.id = childId;
+      childWrapper.id = `${childId}-wrapper`;
       content.appendChild(childWrapper);
 
-      // Event binding - render children
+      // Render child INTO the wrapper
       if (typeof (child as any).render === 'function') {
         try {
+          // Pass the wrapper element directly
           const result = (child as any).render(childWrapper);
           if (result && typeof (result as any).then === 'function') {
             await result;
@@ -140,13 +152,17 @@ export class View extends Reactive {
           console.error(`View: Error rendering child ${i}:`, err);
           childWrapper.innerHTML = `<div style="color: #ff6b6b; padding: 1rem;">Error: ${(err as Error).message}</div>`;
         }
+      } else {
+        // If no render method, try to append directly
+        if (child instanceof HTMLElement) {
+          childWrapper.appendChild(child);
+        }
       }
     }
 
     view.appendChild(content);
     container.appendChild(view);
 
-    this.emit('rendered');
     return this;
   }
 
@@ -158,17 +174,17 @@ export class View extends Reactive {
       throw new Error('View.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('View.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('View.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function view(componentId: string, options: ViewOptions = {}): View {
-  return new View(componentId, options);
+export function view(id: string, options: ViewOptions = {}): View {
+  return new View(id, options);
 }

package/lib/components/write.ts

@@ -0,0 +1,284 @@
+/**
+ * Write - Simple content writer with no component tracking
+ * Perfect for quick HTML output without ID management
+ */
+
+export interface WriteOptions {
+    tagType?: string;
+    className?: string;
+    style?: string;
+    attributes?: Record<string, string>;
+    html?: boolean; // If true, treat content as HTML; if false, treat as text
+}
+
+/**
+ * Write content directly to a target element
+ * 
+ * Usage:
+ *   // Write text (defaults to body)
+ *   jux.write('Hello World!').render();
+ *   
+ *   // Write to specific target
+ *   jux.write('Content').render('#container');
+ *   
+ *   // Write HTML
+ *   jux.write('<strong>Bold text</strong>', { html: true }).render('#container');
+ *   
+ *   // Write with styling
+ *   jux.write('Styled text', { 
+ *     tagType: 'p',
+ *     className: 'highlight',
+ *     style: 'color: red;' 
+ *   }).render('#container');
+ *   
+ *   // Append multiple writes
+ *   jux.write('First').render('#container');
+ *   jux.write('Second').render('#container');
+ */
+export class Write {
+    private content: string;
+    private options: WriteOptions;
+
+    constructor(content: string, options: WriteOptions = {}) {
+        this.content = content;
+        this.options = {
+            tagType: 'div',
+            className: '',
+            style: '',
+            attributes: {},
+            html: false,
+            ...options
+        };
+    }
+
+    /**
+     * Render content to target element
+     * Falls back to body if no target specified
+     */
+    render(targetSelector?: string): this {
+        // Default to body if no target
+        const selector = targetSelector || 'body';
+        const target = document.querySelector(selector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${selector}" not found`);
+            return this;
+        }
+
+        const element = document.createElement(this.options.tagType!);
+
+        // Set content (text or HTML)
+        if (this.options.html) {
+            element.innerHTML = this.content;
+        } else {
+            element.textContent = this.content;
+        }
+
+        // Apply className
+        if (this.options.className) {
+            element.className = this.options.className;
+        }
+
+        // Apply inline styles
+        if (this.options.style) {
+            element.setAttribute('style', this.options.style);
+        }
+
+        // Apply custom attributes
+        if (this.options.attributes) {
+            Object.entries(this.options.attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+
+        // Append to target
+        target.appendChild(element);
+
+        return this;
+    }
+
+    /**
+     * Replace target content (clear first, then render)
+     */
+    replace(targetSelector?: string): this {
+        const selector = targetSelector || 'body';
+        const target = document.querySelector(selector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${selector}" not found`);
+            return this;
+        }
+
+        // Clear existing content
+        target.innerHTML = '';
+
+        // Render new content
+        return this.render(selector);
+    }
+
+    /**
+     * Render before target element
+     */
+    before(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        const element = document.createElement(this.options.tagType!);
+
+        if (this.options.html) {
+            element.innerHTML = this.content;
+        } else {
+            element.textContent = this.content;
+        }
+
+        if (this.options.className) {
+            element.className = this.options.className;
+        }
+
+        if (this.options.style) {
+            element.setAttribute('style', this.options.style);
+        }
+
+        if (this.options.attributes) {
+            Object.entries(this.options.attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+
+        // Insert before target
+        target.parentNode?.insertBefore(element, target);
+
+        return this;
+    }
+
+    /**
+     * Render after target element
+     */
+    after(targetSelector: string): this {
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${targetSelector}" not found`);
+            return this;
+        }
+
+        const element = document.createElement(this.options.tagType!);
+
+        if (this.options.html) {
+            element.innerHTML = this.content;
+        } else {
+            element.textContent = this.content;
+        }
+
+        if (this.options.className) {
+            element.className = this.options.className;
+        }
+
+        if (this.options.style) {
+            element.setAttribute('style', this.options.style);
+        }
+
+        if (this.options.attributes) {
+            Object.entries(this.options.attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+
+        // Insert after target
+        target.parentNode?.insertBefore(element, target.nextSibling);
+
+        return this;
+    }
+
+    /**
+     * Prepend to target (insert as first child)
+     */
+    prepend(targetSelector?: string): this {
+        const selector = targetSelector || 'body';
+        const target = document.querySelector(selector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${selector}" not found`);
+            return this;
+        }
+
+        const element = document.createElement(this.options.tagType!);
+
+        if (this.options.html) {
+            element.innerHTML = this.content;
+        } else {
+            element.textContent = this.content;
+        }
+
+        if (this.options.className) {
+            element.className = this.options.className;
+        }
+
+        if (this.options.style) {
+            element.setAttribute('style', this.options.style);
+        }
+
+        if (this.options.attributes) {
+            Object.entries(this.options.attributes).forEach(([key, value]) => {
+                element.setAttribute(key, value);
+            });
+        }
+
+        // Prepend to target
+        target.insertBefore(element, target.firstChild);
+
+        return this;
+    }
+
+    /**
+     * Append to target (alias for render)
+     */
+    append(targetSelector?: string): this {
+        return this.render(targetSelector);
+    }
+}
+
+/**
+ * Factory function for quick writing
+ */
+export function write(content: string, options: WriteOptions = {}): Write {
+    return new Write(content, options);
+}
+
+/**
+ * Shorthand helpers
+ */
+
+// Write text (alias)
+export function writeText(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
+    return new Write(content, { ...options, html: false });
+}
+
+// Write HTML (alias)
+export function writeHtml(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
+    return new Write(content, { ...options, html: true });
+}
+
+// Write paragraph
+export function writeParagraph(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
+    return new Write(content, { ...options, tagType: 'p' });
+}
+
+// Write heading
+export function writeHeading(content: string, level: 1 | 2 | 3 | 4 | 5 | 6 = 2, options: Omit<WriteOptions, 'tagType'> = {}): Write {
+    return new Write(content, { ...options, tagType: `h${level}` });
+}
+
+// Write span
+export function writeSpan(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
+    return new Write(content, { ...options, tagType: 'span' });
+}
+
+// Write div (explicit)
+export function writeDiv(content: string, options: Omit<WriteOptions, 'tagType'> = {}): Write {
+    return new Write(content, { ...options, tagType: 'div' });
+}

package/lib/globals.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Global types for JUX projects
+ * This file provides IntelliSense in all .jux files
+ */
+
+import type { JuxAPI } from './jux.js';
+import type { code } from './components/code.js';
+
+declare global {
+  /**
+   * The main JUX API - available in all .jux files
+   */
+  const jux: JuxAPI;
+  
+  /**
+   * Code component factory - available globally
+   */
+  const code: typeof code;
+}
+
+export {};