juxscript 1.1.254 → 1.1.255

package/dist/lib/components/tag.d.ts

@@ -1,23 +1,33 @@
+interface TagOptions {
+    content?: string;
+    class?: string;
+    style?: string;
+    [key: string]: any;
+}
 declare class Tag {
     id: string;
-    content: string;
-    options: Record<string, any>;
     tagName: string;
-    constructor(data: any);
-    modify(): this;
-    render(): HTMLElement;
+    opts: TagOptions;
+    private _element;
+    constructor(id: string, tagName: string, options?: TagOptions);
+    content(value: string): this;
+    class(value: string): this;
+    style(value: string): this;
+    render(target?: string | HTMLElement): this;
+    getElement(): HTMLElement | null;
 }
-export declare function tag(data: any): Tag;
-export declare function div(data?: any): Tag;
-export declare function span(data?: any): Tag;
-export declare function p(data?: any): Tag;
-export declare function code(data?: any): Tag;
-export declare function pre(data?: any): Tag;
-export declare function h1(data?: any): Tag;
-export declare function h2(data?: any): Tag;
-export declare function h3(data?: any): Tag;
-export declare function h4(data?: any): Tag;
-export declare function h5(data?: any): Tag;
-export declare function h6(data?: any): Tag;
+export declare function tag(id: string, tagName: string, options?: TagOptions): Tag;
+export declare function div(id: string, options?: TagOptions): Tag;
+export declare function span(id: string, options?: TagOptions): Tag;
+export declare function p(id: string, options?: TagOptions): Tag;
+export declare function code(id: string, options?: TagOptions): Tag;
+export declare function pre(id: string, options?: TagOptions): Tag;
+export declare function h1(id: string, options?: TagOptions): Tag;
+export declare function h2(id: string, options?: TagOptions): Tag;
+export declare function h3(id: string, options?: TagOptions): Tag;
+export declare function h4(id: string, options?: TagOptions): Tag;
+export declare function h5(id: string, options?: TagOptions): Tag;
+export declare function h6(id: string, options?: TagOptions): Tag;
+export { Tag, TagOptions };
 export default tag;
 //# sourceMappingURL=tag.d.ts.map

package/dist/lib/components/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;gBAEJ,IAAI,EAAE,GAAG;IAOrB,MAAM;IAIN,MAAM;CAWT;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAI5B;AAED,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,CAAC,CAAC,IAAI,GAAE,GAAQ,OAA4C;AAC5E,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAE9E,eAAe,GAAG,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;IAuBpC,UAAU,IAAI,WAAW,GAAG,IAAI;CACnC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAIxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AACzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}

package/dist/lib/components/tag.js

@@ -1,40 +1,56 @@
 import generateId from '../utils/idgen.js';
 class Tag {
-    constructor(data) {
-        this.id = generateId();
-        this.content = data.content || '';
-        this.options = data.options || {};
-        this.tagName = data.tagName || 'div';
+    constructor(id, tagName, options = {}) {
+        this._element = null;
+        this.id = id || generateId();
+        this.tagName = tagName;
+        this.opts = options;
     }
-    modify() {
-        return this;
-    }
-    render() {
+    // Fluent API
+    content(value) { this.opts.content = value; if (this._element)
+        this._element.textContent = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    style(value) { this.opts.style = value; if (this._element)
+        this._element.setAttribute('style', value); return this; }
+    render(target) {
         const el = document.createElement(this.tagName);
         el.id = this.id;
-        el.textContent = this.content;
-        for (const [key, value] of Object.entries(this.options)) {
+        if (this.opts.content)
+            el.textContent = this.opts.content;
+        if (this.opts.class)
+            el.className = this.opts.class;
+        if (this.opts.style)
+            el.setAttribute('style', this.opts.style);
+        // Apply any extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['content', 'class', 'style'].includes(key))
+                continue;
             el.setAttribute(key, String(value));
         }
-        const app = document.getElementById('app');
-        app?.appendChild(el);
-        return el;
+        this._element = el;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(el);
+        return this;
     }
+    getElement() { return this._element; }
 }
-export function tag(data) {
-    const t = new Tag(data);
+export function tag(id, tagName, options = {}) {
+    const t = new Tag(id, tagName, options);
     t.render();
     return t;
 }
-export function div(data = {}) { return tag({ ...data, tagName: 'div' }); }
-export function span(data = {}) { return tag({ ...data, tagName: 'span' }); }
-export function p(data = {}) { return tag({ ...data, tagName: 'p' }); }
-export function code(data = {}) { return tag({ ...data, tagName: 'code' }); }
-export function pre(data = {}) { return tag({ ...data, tagName: 'pre' }); }
-export function h1(data = {}) { return tag({ ...data, tagName: 'h1' }); }
-export function h2(data = {}) { return tag({ ...data, tagName: 'h2' }); }
-export function h3(data = {}) { return tag({ ...data, tagName: 'h3' }); }
-export function h4(data = {}) { return tag({ ...data, tagName: 'h4' }); }
-export function h5(data = {}) { return tag({ ...data, tagName: 'h5' }); }
-export function h6(data = {}) { return tag({ ...data, tagName: 'h6' }); }
+export function div(id, options = {}) { return tag(id, 'div', options); }
+export function span(id, options = {}) { return tag(id, 'span', options); }
+export function p(id, options = {}) { return tag(id, 'p', options); }
+export function code(id, options = {}) { return tag(id, 'code', options); }
+export function pre(id, options = {}) { return tag(id, 'pre', options); }
+export function h1(id, options = {}) { return tag(id, 'h1', options); }
+export function h2(id, options = {}) { return tag(id, 'h2', options); }
+export function h3(id, options = {}) { return tag(id, 'h3', options); }
+export function h4(id, options = {}) { return tag(id, 'h4', options); }
+export function h5(id, options = {}) { return tag(id, 'h5', options); }
+export function h6(id, options = {}) { return tag(id, 'h6', options); }
+export { Tag };
 export default tag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.254",
+  "version": "1.1.255",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",