vasille-web 7.0.0-rc.2 → 7.0.0

package/build/web/runner/binding/style.js

@@ -0,0 +1,32 @@
+import { Binding } from "./binding.js";
+export function stringifyStyleValue(value) {
+    if (value instanceof Array) {
+        return value.map(item => `${item}px`).join(" ");
+    }
+    if (typeof value === "number") {
+        return `${value}px`;
+    }
+    return value;
+}
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+export class StyleBinding extends Binding {
+    /**
+     * Constructs a style binding attribute
+     * @param node {Tag} the vasille node
+     * @param name {string} the name of style property
+     * @param value {IValue} the value to bind
+     */
+    constructor(node, name, value) {
+        super(value);
+        this.init(value => {
+            /* istanbul ignore else */
+            if (node.node instanceof HTMLElement && (value || value === 0)) {
+                node.node.style.setProperty(name, stringifyStyleValue(value));
+            }
+        });
+    }
+}

package/build/web/runner/runner.d.ts

@@ -0,0 +1,45 @@
+import { IRunner, IValue, Tag, TextNode } from "vasille";
+import { CssStyleInjector } from "../css/index.js";
+export type AttrType<T> = IValue<T | string | null, unknown> | T | string | null | undefined;
+export type StyleType<T> = T | number | number[] | IValue<string | number | number[] | undefined, unknown> | undefined;
+export interface WebTagOptions {
+    /** attributes */
+    a?: Record<string, AttrType<number | boolean>>;
+    /** classes */
+    c?: (string | CssStyleInjector | IValue<string | CssStyleInjector | false | null | undefined, unknown> | null | undefined)[];
+    /** style */
+    s?: Record<string, StyleType<string>>;
+    /** events */
+    e?: Record<string, ((...args: unknown[]) => unknown) | [(...args: unknown[]) => unknown, object | boolean]>;
+    /** bindings */
+    b?: Record<string, any>;
+    /** slot */
+    l?: (ctx: WebTag<typeof this, WebRunner<typeof this>>) => void;
+    /** callback */
+    k?: (node: Element) => void | Element | (() => void);
+    /** run on destroy */
+    d?: () => void;
+}
+export declare class WebTextNode<Options extends WebTagOptions, RunnerT extends WebRunner<Options>> extends TextNode<Node, Element, Options, RunnerT> {
+    protected node: Text;
+    compose(): void;
+    destroy(deep: number, keepNodes?: boolean): void;
+    unmount(): void;
+    remount(): void;
+    protected findFirstChild(): Node;
+}
+export declare class WebTag<Options extends WebTagOptions, RunnerT extends WebRunner<Options>> extends Tag<Node, Element, Options, RunnerT> {
+    compose(): void;
+    destroy(deep: number, keepNodes?: boolean): void;
+    unmount(): void;
+    remount(): void;
+    protected applyOptions(options: WebTagOptions): void;
+}
+export declare class WebRunner<Options extends WebTagOptions> implements IRunner<Node, Element, Options> {
+    readonly document: Document;
+    constructor(document: Document);
+    insertBefore(node: Node, before: Element | Node): void;
+    appendChild(node: Element, child: Element | Node): void;
+    textNode(deep: number, text: unknown): TextNode<Node, Element, Options>;
+    tag(deep: number, tagName: string, input: Options, cb?: ((ctx: Tag<Node, Element, Options>) => void) | undefined): Tag<Node, Element, Options>;
+}

package/build/web/runner/runner.js

@@ -0,0 +1,176 @@
+import { AttributeBinding } from "./binding/attribute.js";
+import { addClass, DynamicalClassBinding } from "./binding/class.js";
+import { PropertyBinding } from "./binding/property.js";
+import { stringifyStyleValue, StyleBinding } from "./binding/style.js";
+import { internalError, IValue, safe, Tag, TextNode } from "vasille";
+import { CssStyleInjector } from "../css/index.js";
+export class WebTextNode extends TextNode {
+    compose() {
+        const text = this.data;
+        this.node = this.runner.document.createTextNode((text instanceof IValue ? text.V : text)?.toString() ?? "");
+        if (text instanceof IValue) {
+            this.handler = (v) => {
+                this.node.replaceData(0, -1, v?.toString() ?? "");
+            };
+            text.on(this.handler);
+        }
+        this.parent.appendNode(this.node);
+    }
+    destroy(deep, keepNodes) {
+        /* istanbul ignore else */
+        if (!keepNodes) {
+            this.node.remove();
+        }
+        super.destroy(deep, keepNodes);
+    }
+    unmount() {
+        this.node.remove();
+    }
+    remount() {
+        if (this.next) {
+            this.next.insertAdjacent(this.node);
+        }
+        else {
+            this.parent.appendNode(this.node);
+        }
+    }
+    findFirstChild() {
+        return this.node;
+    }
+}
+export class WebTag extends Tag {
+    compose() {
+        const name = this.name;
+        if (!name) {
+            throw internalError("wrong Tag constructor call");
+        }
+        const node = this.runner.document.createElement(name);
+        const options = this.options;
+        this.node = node;
+        this.applyOptions(options);
+        this.parent.appendNode(node);
+        options.l?.(this);
+        const destructor = options.k?.(node);
+        if (typeof destructor === "function") {
+            this.runOnDestroy(destructor);
+        }
+        if (options.d) {
+            this.runOnDestroy(options.d);
+        }
+    }
+    destroy(deep, keepNodes) {
+        super.destroy(deep, true);
+        /* istanbul ignore else */
+        if (!keepNodes) {
+            this.node?.remove();
+        }
+    }
+    unmount() {
+        this.node?.remove();
+    }
+    remount() {
+        const { node } = this;
+        /* istanbul ignore else */
+        if (node) {
+            if (this.next) {
+                this.next.insertAdjacent(node);
+            }
+            else {
+                this.parent.appendNode(node);
+            }
+        }
+    }
+    applyOptions(options) {
+        const { node } = this;
+        if (options.a && node) {
+            for (const name in options.a) {
+                const value = options.a[name];
+                if (value instanceof IValue) {
+                    this.bind(new AttributeBinding(this, name, value));
+                }
+                else {
+                    /* istanbul ignore else */
+                    if (typeof value === "boolean") {
+                        /* istanbul ignore else */
+                        if (value) {
+                            node.setAttribute(name, "");
+                        }
+                    }
+                    else if (value !== null && value !== undefined) {
+                        node.setAttribute(name, `${value}`);
+                    }
+                }
+            }
+        }
+        if (options.c) {
+            options.c.forEach(item => {
+                if (item instanceof IValue) {
+                    this.bind(new DynamicalClassBinding(this, item));
+                }
+                else if (typeof item == "string") {
+                    addClass(this, item);
+                }
+                else {
+                    /* istanbul ignore else */
+                    if (item instanceof CssStyleInjector) {
+                        addClass(this, item.inject());
+                    }
+                }
+            });
+        }
+        if (options.s && node instanceof HTMLElement) {
+            for (const name in options.s) {
+                const value = options.s[name];
+                if (value instanceof IValue) {
+                    this.bind(new StyleBinding(this, name, value));
+                }
+                else if (value) {
+                    node.style.setProperty(name, stringifyStyleValue(value));
+                }
+            }
+        }
+        if (options.e && node) {
+            for (const name in options.e) {
+                const event = options.e[name];
+                const handler = event instanceof Array ? event : [event, {}];
+                node.addEventListener(name, safe(ev => handler[0](ev, node)), handler[1]);
+            }
+        }
+        if (options.b) {
+            for (const k in options.b) {
+                const value = options.b[k];
+                if (!(value instanceof IValue)) {
+                    node[k] = value;
+                }
+                else {
+                    node[k] = value.V;
+                    this.bind(new PropertyBinding(this, k, value));
+                }
+            }
+        }
+    }
+}
+export class WebRunner {
+    constructor(document) {
+        this.document = document;
+    }
+    insertBefore(node, before) {
+        const parent = before.parentElement;
+        /* istanbul ignore else */
+        if (parent) {
+            parent.insertBefore(node, before);
+        }
+    }
+    appendChild(node, child) {
+        node.appendChild(child);
+    }
+    textNode(deep, text) {
+        return new WebTextNode({ text }, this, deep);
+    }
+    tag(deep, tagName, input, cb) {
+        if (cb) {
+            input.l = cb;
+        }
+        return new WebTag(input, this, tagName, deep);
+    }
+}