juxscript 1.0.132 → 1.1.0

package/lib/components/view.ts

@@ -0,0 +1,190 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * View component options
+ */
+export interface ViewOptions {
+  title?: string;
+  description?: string;
+  children?: any[];
+}
+
+/**
+ * View component state
+ */
+type ViewState = {
+  title: string;
+  description: string;
+  children: any[];
+};
+
+/**
+ * View component - container for organizing page content
+ *
+ * Usage:
+ *   const view = jux.view('myView', {
+ *     title: 'Dashboard',
+ *     description: 'Main dashboard view'
+ *   });
+ *   view.add(component1);
+ *   await view.render();
+ */
+export class View {
+  state: ViewState;
+  container: HTMLElement | null = null;
+  _id: string;
+  id: string;
+
+  constructor(id: string, options: ViewOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
+      title: options.title ?? '',
+      description: options.description ?? '',
+      children: Array.isArray(options.children) ? [...options.children] : []
+    };
+  }
+
+  /* -------------------------
+   * Fluent API
+   * ------------------------- */
+
+  title(value: string): this {
+    this.state.title = value;
+    return this;
+  }
+
+  description(value: string): this {
+    this.state.description = value;
+    return this;
+  }
+
+  add(component: any | any[]): this {
+    if (Array.isArray(component)) {
+      this.state.children.push(...component);
+    } else {
+      this.state.children.push(component);
+    }
+    return this;
+  }
+
+  /* -------------------------
+   * Render
+   * ------------------------- */
+
+  async render(targetId?: string): Promise<this> {
+    let container: HTMLElement;
+
+    if (targetId) {
+      const target = document.querySelector(targetId);
+      if (!target || !(target instanceof HTMLElement)) {
+        throw new Error(`View: Target element "${targetId}" not found`);
+      }
+      container = target;
+    } else {
+      container = getOrCreateContainer(this._id);
+    }
+
+    this.container = container;
+    const { title, description, children } = this.state;
+
+    const view = document.createElement('div');
+    view.className = 'jux-view';
+    view.id = this._id;
+
+    // View header
+    if (title || description) {
+      const header = document.createElement('div');
+      header.className = 'jux-view-header';
+
+      if (title) {
+        const titleEl = document.createElement('h1');
+        titleEl.className = 'jux-view-title';
+        titleEl.textContent = title;
+        header.appendChild(titleEl);
+      }
+
+      if (description) {
+        const descEl = document.createElement('p');
+        descEl.className = 'jux-view-description';
+        descEl.textContent = description;
+        header.appendChild(descEl);
+      }
+
+      view.appendChild(header);
+    }
+
+    // View content
+    const content = document.createElement('div');
+    content.className = 'jux-view-content';
+
+    // Render children
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if (!child) continue;
+
+      // 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}-wrapper`;
+      content.appendChild(childWrapper);
+
+      // 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;
+          }
+        } catch (err) {
+          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);
+
+    return this;
+  }
+
+  /**
+   * Render to another Jux component's container
+   */
+  async renderTo(juxComponent: any): Promise<this> {
+    if (!juxComponent || typeof juxComponent !== 'object') {
+      throw new Error('View.renderTo: Invalid component - not an object');
+    }
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('View.renderTo: Invalid component - missing _id (not a Jux component)');
+    }
+
+    return this.render(`#${juxComponent._id}`);
+  }
+}
+
+/**
+ * Factory helper
+ */
+export function view(id: string, options: ViewOptions = {}): View {
+  return new View(id, options);
+}

package/lib/components/write.ts

@@ -0,0 +1,272 @@
+/**
+ * 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').style('color: red;').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
+        };
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Set HTML mode (treat content as HTML)
+     */
+    html(enabled: boolean = true): this {
+        this.options.html = enabled;
+        return this;
+    }
+
+    /**
+     * Set tag type
+     */
+    tagType(value: string): this {
+        this.options.tagType = value;
+        return this;
+    }
+
+    /**
+     * Set CSS class
+     */
+    className(value: string): this {
+        this.options.className = value;
+        return this;
+    }
+
+    /**
+     * Set inline styles
+     */
+    style(value: string): this {
+        this.options.style = value;
+        return this;
+    }
+
+    /**
+     * Set custom attributes
+     */
+    attrs(attributes: Record<string, string>): this {
+        this.options.attributes = attributes;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    /**
+     * Render content to target element
+     */
+    render(targetSelector?: string): this {
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
+
+        const element = this._createElement();
+        target.appendChild(element);
+
+        return this;
+    }
+
+    /**
+     * Replace target content (clear first, then render)
+     */
+    replace(targetSelector?: string): this {
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
+
+        target.innerHTML = '';
+        const element = this._createElement();
+        target.appendChild(element);
+
+        return this;
+    }
+
+    /**
+     * 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 = this._createElement();
+        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 = this._createElement();
+        target.parentNode?.insertBefore(element, target.nextSibling);
+
+        return this;
+    }
+
+    /**
+     * Prepend to target (insert as first child)
+     */
+    prepend(targetSelector?: string): this {
+        const target = this._getTarget(targetSelector);
+        if (!target) return this;
+
+        const element = this._createElement();
+        target.insertBefore(element, target.firstChild);
+
+        return this;
+    }
+
+    /**
+     * Append to target (alias for render)
+     */
+    append(targetSelector?: string): this {
+        return this.render(targetSelector);
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _getTarget(selector?: string): HTMLElement | null {
+        const targetSelector = selector || 'body';
+        const target = document.querySelector(targetSelector);
+
+        if (!target || !(target instanceof HTMLElement)) {
+            console.warn(`Write: Target element "${targetSelector}" not found`);
+            return null;
+        }
+
+        return target;
+    }
+
+    private _createElement(): HTMLElement {
+        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);
+            });
+        }
+
+        return element;
+    }
+}
+
+/**
+ * Factory function - simple, no overloads
+ */
+export function write(content: string, options: WriteOptions = {}): Write {
+    return new Write(content, options);
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * SHORTHAND HELPERS
+ * ═════════════════════════════════════════════════════════════════ */
+
+/**
+ * Write text (explicit)
+ */
+export function writeText(content: string, options: Omit<WriteOptions, 'html'> = {}): Write {
+    return new Write(content, { ...options, html: false });
+}
+
+/**
+ * Write HTML (explicit)
+ */
+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

@@ -1,7 +1,21 @@
 /**
- * JUX Type Exports
- * Re-export types for TypeScript consumers
+ * Global types for JUX projects
+ * This file provides IntelliSense in all .jux files
  */
-export type { BaseState } from './componentsv2/base/BaseEngine.js';
-export type { JuxServiceContract } from './componentsv2/base/BaseEngine.js';
-export type { OptionsContractSchema, OptionDefinition, ValidationResult } from './componentsv2/base/OptionsContract.js';
+
+import type { JuxAPI } from '../index.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 { };