vasille 2.2.2 → 2.3.2

package/lib-node/node/node.js

@@ -0,0 +1,885 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebugNode = exports.DebugPrivate = exports.SwitchedNode = exports.SwitchedNodePrivate = exports.Component = exports.Extension = exports.Tag = exports.INode = exports.INodePrivate = exports.TextNode = exports.TextNodePrivate = exports.Fragment = exports.FragmentPrivate = void 0;
+const core_1 = require("../core/core");
+const ivalue_1 = require("../core/ivalue");
+const reference_1 = require("../value/reference");
+const expression_1 = require("../value/expression");
+const attribute_1 = require("../binding/attribute");
+const class_1 = require("../binding/class");
+const style_1 = require("../binding/style");
+const errors_1 = require("../core/errors");
+/**
+ * Represents a Vasille.js node
+ * @class FragmentPrivate
+ * @extends ReactivePrivate
+ */
+class FragmentPrivate extends core_1.ReactivePrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes the base of a fragment
+     * @param app {App} the app node
+     * @param parent {Fragment} the parent node
+     */
+    preinit(app, parent) {
+        this.app = app;
+        this.parent = parent;
+    }
+    /**
+     * Unlinks all bindings
+     */
+    $destroy() {
+        this.next = null;
+        this.prev = null;
+        super.$destroy();
+    }
+}
+exports.FragmentPrivate = FragmentPrivate;
+/**
+ * This class is symbolic
+ * @extends Reactive
+ */
+class Fragment extends core_1.Reactive {
+    /**
+     * Constructs a Vasille Node
+     * @param input
+     * @param $ {FragmentPrivate}
+     */
+    constructor(input, $) {
+        super(input, $ || new FragmentPrivate);
+        /**
+         * The children list
+         * @type Array
+         */
+        this.children = new Set;
+        this.lastChild = null;
+    }
+    /**
+     * Gets the app of node
+     */
+    get app() {
+        return this.$.app;
+    }
+    /**
+     * Prepare to init fragment
+     * @param app {AppNode} app of node
+     * @param parent {Fragment} parent of node
+     * @param data {*} additional data
+     */
+    preinit(app, parent, data) {
+        const $ = this.$;
+        $.preinit(app, parent);
+    }
+    init() {
+        const ret = super.init();
+        this.ready();
+        return ret;
+    }
+    compose(input) {
+        input.slot && input.slot(this);
+    }
+    /** To be overloaded: ready event handler */
+    ready() {
+        // empty
+    }
+    /**
+     * Pushes a node to children immediately
+     * @param node {Fragment} A node to push
+     * @protected
+     */
+    pushNode(node) {
+        if (this.lastChild) {
+            this.lastChild.$.next = node;
+        }
+        node.$.prev = this.lastChild;
+        this.lastChild = node;
+        this.children.add(node);
+    }
+    /**
+     * Find first node in element if so exists
+     * @return {?Element}
+     * @protected
+     */
+    findFirstChild() {
+        let first;
+        this.children.forEach(child => {
+            first = first || child.findFirstChild();
+        });
+        return first;
+    }
+    /**
+     * Append a node to end of element
+     * @param node {Node} node to insert
+     */
+    appendNode(node) {
+        const $ = this.$;
+        if ($.next) {
+            $.next.insertAdjacent(node);
+        }
+        else {
+            $.parent.appendNode(node);
+        }
+    }
+    /**
+     * Insert a node as a sibling of this
+     * @param node {Node} node to insert
+     */
+    insertAdjacent(node) {
+        const child = this.findFirstChild();
+        const $ = this.$;
+        if (child) {
+            child.parentElement.insertBefore(node, child);
+        }
+        else if ($.next) {
+            $.next.insertAdjacent(node);
+        }
+        else {
+            $.parent.appendNode(node);
+        }
+    }
+    /**
+     * Defines a text fragment
+     * @param text {String | IValue} A text fragment string
+     * @param cb {function (TextNode)} Callback if previous is slot name
+     */
+    text(text, cb) {
+        const $ = this.$;
+        const node = new TextNode();
+        node.preinit($.app, this, text);
+        this.pushNode(node);
+        cb && cb(node);
+    }
+    debug(text) {
+        if (this.$.app.debugUi) {
+            const node = new DebugNode();
+            node.preinit(this.$.app, this, text);
+            this.pushNode(node);
+        }
+    }
+    /**
+     * Defines a tag element
+     * @param tagName {String} the tag name
+     * @param input
+     * @param cb {function(Tag, *)} callback
+     */
+    tag(tagName, input, cb) {
+        const $ = this.$;
+        const node = new Tag(input);
+        input.slot = cb || input.slot;
+        node.preinit($.app, this, tagName);
+        node.init();
+        this.pushNode(node);
+        node.ready();
+        return node.node;
+    }
+    /**
+     * Defines a custom element
+     * @param node {Fragment} vasille element to insert
+     * @param callback {function($ : *)}
+     */
+    create(node, callback) {
+        const $ = this.$;
+        node.$.parent = this;
+        node.preinit($.app, this);
+        node.input.slot = callback || node.input.slot;
+        this.pushNode(node);
+        return node.init();
+    }
+    /**
+     * Defines an if node
+     * @param cond {IValue} condition
+     * @param cb {function(Fragment)} callback to run on true
+     * @return {this}
+     */
+    if(cond, cb) {
+        const node = new SwitchedNode();
+        node.preinit(this.$.app, this);
+        node.init();
+        this.pushNode(node);
+        node.addCase(this.case(cond, cb));
+        node.ready();
+    }
+    else(cb) {
+        if (this.lastChild instanceof SwitchedNode) {
+            this.lastChild.addCase(this.default(cb));
+        }
+        else {
+            throw (0, errors_1.userError)('wrong `else` function use', 'logic-error');
+        }
+    }
+    elif(cond, cb) {
+        if (this.lastChild instanceof SwitchedNode) {
+            this.lastChild.addCase(this.case(cond, cb));
+        }
+        else {
+            throw (0, errors_1.userError)('wrong `elif` function use', 'logic-error');
+        }
+    }
+    /**
+     * Create a case for switch
+     * @param cond {IValue<boolean>}
+     * @param cb {function(Fragment) : void}
+     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
+     */
+    case(cond, cb) {
+        return { cond, cb };
+    }
+    /**
+     * @param cb {(function(Fragment) : void)}
+     * @return {{cond : IValue, cb : (function(Fragment) : void)}}
+     */
+    default(cb) {
+        return { cond: trueIValue, cb };
+    }
+    insertBefore(node) {
+        const $ = this.$;
+        node.$.prev = $.prev;
+        node.$.next = this;
+        if ($.prev) {
+            $.prev.$.next = node;
+        }
+        $.prev = node;
+    }
+    insertAfter(node) {
+        const $ = this.$;
+        node.$.prev = this;
+        node.$.next = $.next;
+        $.next = node;
+    }
+    remove() {
+        const $ = this.$;
+        if ($.next) {
+            $.next.$.prev = $.prev;
+        }
+        if ($.prev) {
+            $.prev.$.next = $.next;
+        }
+    }
+    $destroy() {
+        this.children.forEach(child => child.$destroy());
+        this.children.clear();
+        this.lastChild = null;
+        if (this.$.parent.lastChild === this) {
+            this.$.parent.lastChild = this.$.prev;
+        }
+        super.$destroy();
+    }
+}
+exports.Fragment = Fragment;
+const trueIValue = new reference_1.Reference(true);
+/**
+ * The private part of a text node
+ * @class TextNodePrivate
+ * @extends FragmentPrivate
+ */
+class TextNodePrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes a text node
+     * @param app {AppNode} the app node
+     * @param parent
+     * @param text {IValue}
+     */
+    preinitText(app, parent, text) {
+        super.preinit(app, parent);
+        this.node = document.createTextNode(text instanceof ivalue_1.IValue ? text.$ : text);
+        if (text instanceof ivalue_1.IValue) {
+            this.bindings.add(new expression_1.Expression((v) => {
+                this.node.replaceData(0, -1, v);
+            }, true, text));
+        }
+    }
+    /**
+     * Clear node data
+     */
+    $destroy() {
+        super.$destroy();
+    }
+}
+exports.TextNodePrivate = TextNodePrivate;
+/**
+ * Represents a text node
+ * @class TextNode
+ * @extends Fragment
+ */
+class TextNode extends Fragment {
+    constructor($ = new TextNodePrivate()) {
+        super({}, $);
+        this.$seal();
+    }
+    preinit(app, parent, text) {
+        const $ = this.$;
+        if (!text) {
+            throw (0, errors_1.internalError)('wrong TextNode::$preninit call');
+        }
+        $.preinitText(app, parent, text);
+        $.parent.appendNode($.node);
+    }
+    findFirstChild() {
+        return this.$.node;
+    }
+    $destroy() {
+        this.$.node.remove();
+        this.$.$destroy();
+        super.$destroy();
+    }
+}
+exports.TextNode = TextNode;
+/**
+ * The private part of a base node
+ * @class INodePrivate
+ * @extends FragmentPrivate
+ */
+class INodePrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        /**
+         * Defines if node is unmounted
+         * @type {boolean}
+         */
+        this.unmounted = false;
+        this.$seal();
+    }
+    $destroy() {
+        super.$destroy();
+    }
+}
+exports.INodePrivate = INodePrivate;
+/**
+ * Vasille node which can manipulate an element node
+ * @class INode
+ * @extends Fragment
+ */
+class INode extends Fragment {
+    /**
+     * Constructs a base node
+     * @param input
+     * @param $ {?INodePrivate}
+     */
+    constructor(input, $) {
+        super(input, $ || new INodePrivate);
+        this.$seal();
+    }
+    /**
+     * Get the bound node
+     */
+    get node() {
+        return this.$.node;
+    }
+    /**
+     * Bind attribute value
+     * @param name {String} name of attribute
+     * @param value {IValue} value
+     */
+    attr(name, value) {
+        const $ = this.$;
+        const attr = new attribute_1.AttributeBinding(this, name, value);
+        $.bindings.add(attr);
+    }
+    /**
+     * Set attribute value
+     * @param name {string} name of attribute
+     * @param value {string} value
+     */
+    setAttr(name, value) {
+        if (typeof value === 'boolean') {
+            if (value) {
+                this.$.node.setAttribute(name, "");
+            }
+        }
+        else {
+            this.$.node.setAttribute(name, `${value}`);
+        }
+        return this;
+    }
+    /**
+     * Adds a CSS class
+     * @param cl {string} Class name
+     */
+    addClass(cl) {
+        this.$.node.classList.add(cl);
+        return this;
+    }
+    /**
+     * Adds some CSS classes
+     * @param cls {...string} classes names
+     */
+    removeClasse(cl) {
+        this.$.node.classList.remove(cl);
+        return this;
+    }
+    /**
+     * Bind a CSS class
+     * @param className {IValue}
+     */
+    bindClass(className) {
+        const $ = this.$;
+        $.bindings.add(new class_1.DynamicalClassBinding(this, className));
+        return this;
+    }
+    /**
+     * Bind a floating class name
+     * @param cond {IValue} condition
+     * @param className {string} class name
+     */
+    floatingClass(cond, className) {
+        this.$.bindings.add(new class_1.StaticClassBinding(this, className, cond));
+        return this;
+    }
+    /**
+     * Defines a style attribute
+     * @param name {String} name of style attribute
+     * @param value {IValue} value
+     */
+    style(name, value) {
+        const $ = this.$;
+        if ($.node instanceof HTMLElement) {
+            $.bindings.add(new style_1.StyleBinding(this, name, value));
+        }
+        else {
+            throw (0, errors_1.userError)('style can be applied to HTML elements only', 'non-html-element');
+        }
+        return this;
+    }
+    /**
+     * Sets a style property value
+     * @param prop {string} Property name
+     * @param value {string} Property value
+     */
+    setStyle(prop, value) {
+        if (this.$.node instanceof HTMLElement) {
+            this.$.node.style.setProperty(prop, value);
+        }
+        else {
+            throw (0, errors_1.userError)("Style can be set for HTML elements only", "non-html-element");
+        }
+        return this;
+    }
+    /**
+     * Add a listener for an event
+     * @param name {string} Event name
+     * @param handler {function (Event)} Event handler
+     * @param options {Object | boolean} addEventListener options
+     */
+    listen(name, handler, options) {
+        this.$.node.addEventListener(name, handler, options);
+        return this;
+    }
+    insertAdjacent(node) {
+        this.$.node.parentNode.insertBefore(node, this.$.node);
+    }
+    /**
+     * A v-show & ngShow alternative
+     * @param cond {IValue} show condition
+     */
+    bindShow(cond) {
+        const $ = this.$;
+        const node = $.node;
+        if (node instanceof HTMLElement) {
+            let lastDisplay = node.style.display;
+            const htmlNode = node;
+            return this.bindAlive(cond, () => {
+                lastDisplay = htmlNode.style.display;
+                htmlNode.style.display = 'none';
+            }, () => {
+                htmlNode.style.display = lastDisplay;
+            });
+        }
+        else {
+            throw (0, errors_1.userError)('the element must be a html element', 'bind-show');
+        }
+    }
+    /**
+     * bind HTML
+     * @param value {IValue}
+     */
+    bindDomApi(name, value) {
+        const $ = this.$;
+        const node = $.node;
+        if (node instanceof HTMLElement) {
+            node[name] = value.$;
+            this.watch((v) => {
+                node[name] = v;
+            }, value);
+        }
+        else {
+            throw (0, errors_1.userError)("HTML can be bound for HTML nodes only", "dom-error");
+        }
+    }
+    applyOptions(options) {
+        options["v:attr"] && Object.keys(options["v:attr"]).forEach(name => {
+            const value = options["v:attr"][name];
+            if (value instanceof ivalue_1.IValue) {
+                this.attr(name, value);
+            }
+            else {
+                this.setAttr(name, value);
+            }
+        });
+        if (options.class) {
+            const handleClass = (name, value) => {
+                if (value instanceof ivalue_1.IValue) {
+                    this.floatingClass(value, name);
+                }
+                else if (value && name !== '$') {
+                    this.addClass(name);
+                }
+                else {
+                    this.removeClasse(name);
+                }
+            };
+            if (Array.isArray(options.class)) {
+                options.class.forEach(item => {
+                    if (item instanceof ivalue_1.IValue) {
+                        this.bindClass(item);
+                    }
+                    else if (typeof item == "string") {
+                        this.addClass(item);
+                    }
+                    else {
+                        Reflect.ownKeys(item).forEach((name) => {
+                            handleClass(name, item[name]);
+                        });
+                    }
+                });
+            }
+            else {
+                options.class.$.forEach(item => {
+                    this.bindClass(item);
+                });
+                Reflect.ownKeys(options.class).forEach((name) => {
+                    handleClass(name, options.class[name]);
+                });
+            }
+        }
+        options.style && Object.keys(options.style).forEach(name => {
+            const value = options.style[name];
+            if (value instanceof ivalue_1.IValue) {
+                this.style(name, value);
+            }
+            else if (typeof value === "string") {
+                this.setStyle(name, value);
+            }
+            else {
+                if (value[0] instanceof ivalue_1.IValue) {
+                    this.style(name, this.expr((v) => v + value[1], value[0]));
+                }
+                else {
+                    this.setStyle(name, value[0] + value[1]);
+                }
+            }
+        });
+        options["v:events"] && Object.keys(options["v:events"]).forEach(name => {
+            this.listen(name, options["v:events"][name]);
+        });
+        if (options["v:bind"]) {
+            const inode = this.node;
+            Reflect.ownKeys(options["v:bind"]).forEach((k) => {
+                const value = options["v:bind"][k];
+                if (k === 'value' && (inode instanceof HTMLInputElement || inode instanceof HTMLTextAreaElement)) {
+                    inode.oninput = () => value.$ = inode.value;
+                }
+                else if (k === 'checked' && inode instanceof HTMLInputElement) {
+                    inode.oninput = () => value.$ = inode.checked;
+                }
+                else if (k === 'volume' && inode instanceof HTMLMediaElement) {
+                    inode.onvolumechange = () => value.$ = inode.volume;
+                }
+                this.bindDomApi(k, value);
+            });
+        }
+        options["v:set"] && Object.keys(options["v:set"]).forEach(key => {
+            this.node[key] = options["v:set"][key];
+        });
+    }
+}
+exports.INode = INode;
+/**
+ * Represents an Vasille.js HTML element node
+ * @class Tag
+ * @extends INode
+ */
+class Tag extends INode {
+    constructor(input) {
+        super(input);
+        this.$seal();
+    }
+    preinit(app, parent, tagName) {
+        if (!tagName || typeof tagName !== "string") {
+            throw (0, errors_1.internalError)('wrong Tag::$preinit call');
+        }
+        const node = document.createElement(tagName);
+        const $ = this.$;
+        $.preinit(app, parent);
+        $.node = node;
+        $.parent.appendNode(node);
+    }
+    compose(input) {
+        input.slot && input.slot(this);
+    }
+    findFirstChild() {
+        return this.$.unmounted ? null : this.$.node;
+    }
+    insertAdjacent(node) {
+        if (this.$.unmounted) {
+            if (this.$.next) {
+                this.$.next.insertAdjacent(node);
+            }
+            else {
+                this.$.parent.appendNode(node);
+            }
+        }
+        else {
+            super.insertAdjacent(node);
+        }
+    }
+    appendNode(node) {
+        this.$.node.appendChild(node);
+    }
+    /**
+     * Mount/Unmount a node
+     * @param cond {IValue} show condition
+     */
+    bindMount(cond) {
+        const $ = this.$;
+        this.bindAlive(cond, () => {
+            $.node.remove();
+            $.unmounted = true;
+        }, () => {
+            if ($.unmounted) {
+                this.insertAdjacent($.node);
+                $.unmounted = false;
+            }
+        });
+    }
+    /**
+     * Runs GC
+     */
+    $destroy() {
+        this.node.remove();
+        super.$destroy();
+    }
+}
+exports.Tag = Tag;
+/**
+ * Represents a vasille extension node
+ * @class Extension
+ * @extends INode
+ */
+class Extension extends INode {
+    preinit(app, parent) {
+        const $ = this.$;
+        let it = parent;
+        while (it && !(it instanceof INode)) {
+            it = it.parent;
+        }
+        if (it && it instanceof INode) {
+            $.node = it.node;
+        }
+        $.preinit(app, parent);
+        if (!it) {
+            throw (0, errors_1.userError)("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
+        }
+    }
+    extend(options) {
+        this.applyOptions(options);
+    }
+    $destroy() {
+        super.$destroy();
+    }
+}
+exports.Extension = Extension;
+/**
+ * Node which cas has just a child
+ * @class Component
+ * @extends Extension
+ */
+class Component extends Extension {
+    init() {
+        super.composeNow();
+        this.ready();
+        super.applyOptionsNow();
+    }
+    ready() {
+        super.ready();
+        if (this.children.size !== 1) {
+            throw (0, errors_1.userError)("Component must have a child only", "dom-error");
+        }
+        const child = this.lastChild;
+        if (child instanceof Tag || child instanceof Component) {
+            const $ = this.$;
+            $.node = child.node;
+        }
+        else {
+            throw (0, errors_1.userError)("Component child must be Tag or Component", "dom-error");
+        }
+    }
+    preinit(app, parent) {
+        this.$.preinit(app, parent);
+    }
+}
+exports.Component = Component;
+/**
+ * Private part of switch node
+ * @class SwitchedNodePrivate
+ * @extends INodePrivate
+ */
+class SwitchedNodePrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        /**
+         * Array of possible cases
+         * @type {Array<{cond : IValue<boolean>, cb : function(Fragment)}>}
+         */
+        this.cases = [];
+        this.$seal();
+    }
+    /**
+     * Runs GC
+     */
+    $destroy() {
+        this.cases.forEach(c => {
+            delete c.cond;
+            delete c.cb;
+        });
+        this.cases.splice(0);
+        super.$destroy();
+    }
+}
+exports.SwitchedNodePrivate = SwitchedNodePrivate;
+/**
+ * Defines a node witch can switch its children conditionally
+ */
+class SwitchedNode extends Fragment {
+    /**
+     * Constructs a switch node and define a sync function
+     */
+    constructor() {
+        super({}, new SwitchedNodePrivate);
+        this.$.sync = () => {
+            const $ = this.$;
+            let i = 0;
+            for (; i < $.cases.length; i++) {
+                if ($.cases[i].cond.$) {
+                    break;
+                }
+            }
+            if (i === $.index) {
+                return;
+            }
+            if (this.lastChild) {
+                this.lastChild.$destroy();
+                this.children.clear();
+                this.lastChild = null;
+            }
+            if (i !== $.cases.length) {
+                $.index = i;
+                this.createChild($.cases[i].cb);
+            }
+            else {
+                $.index = -1;
+            }
+        };
+        this.$seal();
+    }
+    addCase(case_) {
+        this.$.cases.push(case_);
+        case_.cond.$on(this.$.sync);
+        this.$.sync();
+    }
+    /**
+     * Creates a child node
+     * @param cb {function(Fragment)} Call-back
+     */
+    createChild(cb) {
+        const node = new Fragment({});
+        node.preinit(this.$.app, this);
+        node.init();
+        this.lastChild = node;
+        this.children.add(node);
+        cb(node);
+    }
+    ready() {
+        const $ = this.$;
+        $.cases.forEach(c => {
+            c.cond.$on($.sync);
+        });
+        $.sync();
+    }
+    $destroy() {
+        const $ = this.$;
+        $.cases.forEach(c => {
+            c.cond.$off($.sync);
+        });
+        super.$destroy();
+    }
+}
+exports.SwitchedNode = SwitchedNode;
+/**
+ * The private part of a text node
+ */
+class DebugPrivate extends FragmentPrivate {
+    constructor() {
+        super();
+        this.$seal();
+    }
+    /**
+     * Pre-initializes a text node
+     * @param app {App} the app node
+     * @param parent {Fragment} parent node
+     * @param text {String | IValue}
+     */
+    preinitComment(app, parent, text) {
+        super.preinit(app, parent);
+        this.node = document.createComment(text.$);
+        this.bindings.add(new expression_1.Expression((v) => {
+            this.node.replaceData(0, -1, v);
+        }, true, text));
+        this.parent.appendNode(this.node);
+    }
+    /**
+     * Clear node data
+     */
+    $destroy() {
+        this.node.remove();
+        super.$destroy();
+    }
+}
+exports.DebugPrivate = DebugPrivate;
+/**
+ * Represents a debug node
+ * @class DebugNode
+ * @extends Fragment
+ */
+class DebugNode extends Fragment {
+    constructor() {
+        super({});
+        /**
+         * private data
+         * @type {DebugNode}
+         */
+        this.$ = new DebugPrivate();
+        this.$seal();
+    }
+    preinit(app, parent, text) {
+        const $ = this.$;
+        if (!text) {
+            throw (0, errors_1.internalError)('wrong DebugNode::$preninit call');
+        }
+        $.preinitComment(app, parent, text);
+    }
+    /**
+     * Runs garbage collector
+     */
+    $destroy() {
+        this.$.$destroy();
+        super.$destroy();
+    }
+}
+exports.DebugNode = DebugNode;