juxscript 1.1.4 → 1.1.6

package/lib/components/write.js

@@ -0,0 +1,222 @@
+/**
+ * Write - Simple content writer with no component tracking
+ * Perfect for quick HTML output without ID management
+ */
+/**
+ * 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 {
+    constructor(content, options = {}) {
+        this.content = content;
+        this.options = {
+            tagType: 'div',
+            className: '',
+            style: '',
+            attributes: {},
+            html: false,
+            ...options
+        };
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Set HTML mode (treat content as HTML)
+     */
+    html(enabled = true) {
+        this.options.html = enabled;
+        return this;
+    }
+    /**
+     * Set tag type
+     */
+    tagType(value) {
+        this.options.tagType = value;
+        return this;
+    }
+    /**
+     * Set CSS class
+     */
+    className(value) {
+        this.options.className = value;
+        return this;
+    }
+    /**
+     * Set inline styles
+     */
+    style(value) {
+        this.options.style = value;
+        return this;
+    }
+    /**
+     * Set custom attributes
+     */
+    attrs(attributes) {
+        this.options.attributes = attributes;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Render content to target element
+     */
+    render(targetSelector) {
+        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) {
+        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) {
+        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) {
+        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) {
+        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) {
+        return this.render(targetSelector);
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    _getTarget(selector) {
+        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;
+    }
+    _createElement() {
+        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, options = {}) {
+    return new Write(content, options);
+}
+/* ═════════════════════════════════════════════════════════════════
+ * SHORTHAND HELPERS
+ * ═════════════════════════════════════════════════════════════════ */
+/**
+ * Write text (explicit)
+ */
+export function writeText(content, options = {}) {
+    return new Write(content, { ...options, html: false });
+}
+/**
+ * Write HTML (explicit)
+ */
+export function writeHtml(content, options = {}) {
+    return new Write(content, { ...options, html: true });
+}
+/**
+ * Write paragraph
+ */
+export function writeParagraph(content, options = {}) {
+    return new Write(content, { ...options, tagType: 'p' });
+}
+/**
+ * Write heading
+ */
+export function writeHeading(content, level = 2, options = {}) {
+    return new Write(content, { ...options, tagType: `h${level}` });
+}
+/**
+ * Write span
+ */
+export function writeSpan(content, options = {}) {
+    return new Write(content, { ...options, tagType: 'span' });
+}
+/**
+ * Write div (explicit)
+ */
+export function writeDiv(content, options = {}) {
+    return new Write(content, { ...options, tagType: 'div' });
+}

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' });
+}
+