vasille 3.0.2 → 3.2.0

package/lib-node/node/app.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = exports.App = void 0;
-const node_1 = require("./node");
-/**
- * Represents a Vasille.js application
- * @class App
- * @extends AppNode
- */
-class App extends node_1.Root {
-    /**
-     * Constructs an app node
-     * @param node {Element} The root of application
-     * @param input
-     */
-    constructor(node, input) {
-        super(input);
-        this.node = node;
-    }
-    appendNode(node) {
-        this.node.appendChild(node);
-    }
-}
-exports.App = App;
-class Portal extends node_1.Fragment {
-    constructor(input) {
-        super(input, ":portal");
-        this.node = input.node;
-    }
-    appendNode(node) {
-        this.node.appendChild(node);
-    }
-}
-exports.Portal = Portal;

package/lib-node/node/node.js

@@ -1,656 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DebugNode = exports.SwitchedNode = exports.Extension = exports.Tag = exports.INode = exports.TextNode = exports.Fragment = exports.Root = 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");
-const config_1 = require("../core/config");
-/**
- * This class is symbolic
- * @extends Reactive
- */
-class Root extends core_1.Reactive {
-    constructor() {
-        super(...arguments);
-        /**
-         * The children list
-         * @type Array
-         */
-        this.children = new Set();
-        this.lastChild = undefined;
-    }
-    /**
-     * Pushes a node to children immediately
-     * @param node {Fragment} A node to push
-     * @protected
-     */
-    pushNode(node) {
-        node.parent = this;
-        this.lastChild = node;
-        this.children.add(node);
-    }
-    /**
-     * Find the first node in the element if so exists
-     * @return {?Element}
-     * @protected
-     */
-    findFirstChild() {
-        let first;
-        this.children.forEach(child => {
-            first = first || child.findFirstChild();
-        });
-        return first;
-    }
-    /**
-     * Defines a text fragment
-     * @param text {String | IValue} A text fragment string
-     * @param cb {function (TextNode)} Callback if previous is slot name
-     */
-    text(text) {
-        const node = new TextNode({ text });
-        this.pushNode(node);
-        node.compose();
-    }
-    debug(text) {
-        if (config_1.config.debugUi) {
-            const node = new DebugNode({ text });
-            this.pushNode(node);
-            node.compose();
-        }
-    }
-    /**
-     * Defines a tag element
-     * @param tagName {String} the tag name
-     * @param input
-     * @param cb {function(Tag, *)} callback
-     */
-    tag(tagName, input, cb) {
-        const tag = new Tag(input, tagName);
-        input.slot = cb || input.slot;
-        this.pushNode(tag);
-        tag.compose();
-    }
-    /**
-     * Defines a custom element
-     * @param node {Fragment} vasille element to insert
-     * @param callback {function($ : *)}
-     */
-    create(node, callback) {
-        this.pushNode(node);
-        node.compose();
-        callback === null || callback === void 0 ? void 0 : callback(node);
-    }
-    /**
-     * 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();
-        this.pushNode(node);
-        node.addCase(this.case(cond, cb));
-    }
-    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 };
-    }
-    destroy() {
-        this.children.forEach(child => child.destroy());
-        this.children.clear();
-        this.lastChild = undefined;
-        super.destroy();
-    }
-}
-exports.Root = Root;
-class Fragment extends Root {
-    constructor(input, name) {
-        super(input);
-        this.name = name;
-    }
-    /**
-     * 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;
-        super.pushNode(node);
-    }
-    /**
-     * Append a node to end of element
-     * @param node {Node} node to insert
-     */
-    appendNode(node) {
-        if (this.next) {
-            this.next.insertAdjacent(node);
-        }
-        else {
-            this.parent.appendNode(node);
-        }
-    }
-    /**
-     * Insert a node as a sibling of this
-     * @param node {Node} node to insert
-     */
-    insertAdjacent(node) {
-        const child = this.findFirstChild();
-        if (child) {
-            const parent = child.parentElement;
-            if (parent) {
-                child.parentElement.insertBefore(node, child);
-            }
-        }
-        else if (this.next) {
-            this.next.insertAdjacent(node);
-        }
-        else {
-            this.parent.appendNode(node);
-        }
-    }
-    compose() {
-        // do nothing
-        // to override it
-    }
-    insertBefore(node) {
-        node.prev = this.prev;
-        node.next = this;
-        if (this.prev) {
-            this.prev.next = node;
-        }
-        this.prev = node;
-    }
-    insertAfter(node) {
-        node.prev = this;
-        node.next = this.next;
-        this.next = node;
-    }
-    remove() {
-        if (this.next) {
-            this.next.prev = this.prev;
-        }
-        if (this.prev) {
-            this.prev.next = this.next;
-        }
-    }
-    destroy() {
-        if (this.parent.lastChild === this) {
-            this.parent.lastChild = this.prev;
-        }
-        super.destroy();
-    }
-}
-exports.Fragment = Fragment;
-const trueIValue = new reference_1.Reference(true);
-/**
- * Represents a text node
- * @class TextNode
- * @extends Fragment
- */
-class TextNode extends Fragment {
-    constructor(input) {
-        super(input, ":text");
-    }
-    compose() {
-        var _a, _b;
-        const text = this.input.text;
-        this.node = document.createTextNode((_b = (_a = (text instanceof ivalue_1.IValue ? text.$ : text)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
-        if (text instanceof ivalue_1.IValue) {
-            this.register(new expression_1.Expression((v) => {
-                var _a;
-                this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
-            }, text));
-        }
-        this.parent.appendNode(this.node);
-    }
-    findFirstChild() {
-        return this.node;
-    }
-    destroy() {
-        this.node.remove();
-        super.destroy();
-    }
-}
-exports.TextNode = TextNode;
-/**
- * Vasille node which can manipulate an element node
- * @class INode
- * @extends Fragment
- */
-class INode extends Fragment {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines if node is unmounted
-         * @type {boolean}
-         */
-        this.unmounted = false;
-    }
-    get element() {
-        return this.node;
-    }
-    /**
-     * Bind attribute value
-     * @param name {String} name of attribute
-     * @param value {IValue} value
-     */
-    attr(name, value) {
-        this.register(new attribute_1.AttributeBinding(this, name, value));
-    }
-    /**
-     * 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 if (value !== null && value !== undefined) {
-            this.node.setAttribute(name, `${value}`);
-        }
-        return this;
-    }
-    /**
-     * Adds a CSS class
-     * @param cl {string} Class name
-     */
-    addClass(cl) {
-        this.node.classList.add(cl);
-    }
-    /**
-     * Adds some CSS classes
-     * @param cl {string} classes names
-     */
-    removeClass(cl) {
-        this.node.classList.remove(cl);
-    }
-    /**
-     * Bind a CSS class
-     * @param className {IValue}
-     */
-    bindClass(className) {
-        this.register(new class_1.DynamicalClassBinding(this, className));
-    }
-    /**
-     * Bind a floating class name
-     * @param cond {IValue} condition
-     * @param className {string} class name
-     */
-    floatingClass(cond, className) {
-        this.register(new class_1.StaticClassBinding(this, className, cond));
-    }
-    /**
-     * Defines a style attribute
-     * @param name {String} name of style attribute
-     * @param value {IValue} value
-     */
-    style(name, value) {
-        if (this.node instanceof HTMLElement) {
-            this.register(new style_1.StyleBinding(this, name, value));
-        }
-        else {
-            throw (0, errors_1.userError)("style can be applied to HTML elements only", "non-html-element");
-        }
-    }
-    /**
-     * 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, (0, style_1.stringifyStyleValue)(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);
-    }
-    insertAdjacent(node) {
-        const parent = this.node.parentNode;
-        if (parent) {
-            parent.insertBefore(node, this.node);
-        }
-    }
-    /**
-     * A v-show & ngShow alternative
-     * @param cond {IValue} show condition
-     */
-    bindShow(cond) {
-        const node = this.node;
-        if (node instanceof HTMLElement) {
-            let lastDisplay = node.style.display;
-            const htmlNode = node;
-            this.register(new expression_1.Expression(cond => {
-                if (cond) {
-                    if (htmlNode.style.display === "none") {
-                        htmlNode.style.display = lastDisplay;
-                    }
-                }
-                else {
-                    if (htmlNode.style.display !== "none") {
-                        lastDisplay = htmlNode.style.display;
-                        htmlNode.style.display = "none";
-                    }
-                }
-            }, cond));
-        }
-        else {
-            throw (0, errors_1.userError)("the element must be a html element", "bind-show");
-        }
-    }
-    /**
-     * bind HTML
-     * @param value {IValue}
-     */
-    bindDomApi(name, value) {
-        const node = this.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");
-        }
-    }
-    applyAttrs(attrs) {
-        for (const name in attrs) {
-            const value = attrs[name];
-            if (value instanceof ivalue_1.IValue) {
-                this.attr(name, value);
-            }
-            else {
-                this.setAttr(name, value);
-            }
-        }
-    }
-    applyStyle(style) {
-        for (const name in style) {
-            const value = style[name];
-            if (value instanceof ivalue_1.IValue) {
-                this.style(name, value);
-            }
-            else {
-                this.setStyle(name, value);
-            }
-        }
-    }
-    applyBind(bind) {
-        const inode = this.node;
-        for (const k in bind) {
-            const value = bind[k];
-            if (!(value instanceof ivalue_1.IValue)) {
-                inode[k] = value;
-                return;
-            }
-            this.bindDomApi(k, value);
-        }
-    }
-    applyOptions(options) {
-        options.attr && this.applyAttrs(options.attr);
-        options.class &&
-            options.class.forEach(item => {
-                if (item instanceof ivalue_1.IValue) {
-                    this.bindClass(item);
-                }
-                else if (typeof item == "string") {
-                    this.addClass(item);
-                }
-                else {
-                    for (const name in item) {
-                        const value = item[name];
-                        if (value instanceof ivalue_1.IValue) {
-                            this.floatingClass(value, name);
-                        }
-                        else if (value && name !== "$") {
-                            this.addClass(name);
-                        }
-                        else {
-                            this.removeClass(name);
-                        }
-                    }
-                }
-            });
-        options.style && this.applyStyle(options.style);
-        if (options.events) {
-            for (const name of Object.keys(options.events)) {
-                this.listen(name, options.events[name]);
-            }
-        }
-        options.bind && this.applyBind(options.bind);
-    }
-}
-exports.INode = INode;
-/**
- * Represents an Vasille.js HTML element node
- * @class Tag
- * @extends INode
- */
-class Tag extends INode {
-    constructor(input, tagName) {
-        super(input, tagName);
-    }
-    compose() {
-        var _a, _b, _c, _d;
-        if (!this.name) {
-            throw (0, errors_1.internalError)("wrong Tag constructor call");
-        }
-        const node = document.createElement(this.name);
-        this.node = node;
-        this.applyOptions(this.input);
-        this.parent.appendNode(node);
-        (_b = (_a = this.input).callback) === null || _b === void 0 ? void 0 : _b.call(_a, this.node);
-        (_d = (_c = this.input).slot) === null || _d === void 0 ? void 0 : _d.call(_c, this);
-    }
-    findFirstChild() {
-        return this.unmounted ? undefined : 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);
-    }
-    extent(options) {
-        this.applyOptions(options);
-    }
-    /**
-     * Mount/Unmount a node
-     * @param cond {IValue} show condition
-     */
-    bindMount(cond) {
-        this.register(new expression_1.Expression(cond => {
-            if (cond) {
-                if (this.unmounted) {
-                    this.insertAdjacent(this.node);
-                    this.unmounted = false;
-                }
-            }
-            else {
-                if (!this.unmounted) {
-                    this.node.remove();
-                    this.unmounted = true;
-                }
-            }
-        }, cond));
-    }
-    /**
-     * Runs GC
-     */
-    destroy() {
-        this.node.remove();
-        super.destroy();
-    }
-}
-exports.Tag = Tag;
-/**
- * Represents a vasille extension node
- * @class Extension
- * @extends INode
- */
-class Extension extends Fragment {
-    tag(tagName, input) {
-        var _a;
-        let parent = this.parent;
-        const target = tagName.toLowerCase();
-        while (parent instanceof Fragment && !(parent instanceof Tag)) {
-            parent = parent.parent;
-        }
-        if (parent instanceof Tag && parent.element.tagName.toLowerCase() === target) {
-            parent.extent(input);
-            (_a = input.slot) === null || _a === void 0 ? void 0 : _a.call(input, parent);
-        }
-    }
-}
-exports.Extension = Extension;
-/**
- * Defines a node which can switch its children conditionally
- */
-class SwitchedNode extends Fragment {
-    /**
-     * Constructs a switch node and define a sync function
-     */
-    constructor() {
-        super({}, ":switch");
-        /**
-         * Array of possible cases
-         * @type {Array<{cond : IValue<unknown>, cb : function(Fragment)}>}
-         */
-        this.cases = [];
-        this.sync = () => {
-            let i = 0;
-            for (; i < this.cases.length; i++) {
-                if (this.cases[i].cond.$) {
-                    break;
-                }
-            }
-            if (i === this.index) {
-                return;
-            }
-            if (this.lastChild) {
-                this.lastChild.destroy();
-                this.children.clear();
-                this.lastChild = undefined;
-            }
-            if (i !== this.cases.length) {
-                this.index = i;
-                this.createChild(this.cases[i].cb);
-            }
-            else {
-                this.index = -1;
-            }
-        };
-    }
-    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({}, ":case");
-        node.parent = this;
-        this.lastChild = node;
-        this.children.add(node);
-        cb(node);
-    }
-    destroy() {
-        this.cases.forEach(c => {
-            c.cond.off(this.sync);
-        });
-        this.cases.splice(0);
-        super.destroy();
-    }
-}
-exports.SwitchedNode = SwitchedNode;
-/**
- * Represents a debug node
- * @class DebugNode
- * @extends Fragment
- */
-class DebugNode extends Fragment {
-    constructor(input) {
-        super(input, ":debug");
-    }
-    compose() {
-        var _a, _b;
-        const text = this.input.text;
-        this.node = document.createComment((_b = (_a = text.$) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "");
-        this.register(new expression_1.Expression((v) => {
-            var _a;
-            this.node.replaceData(0, -1, (_a = v === null || v === void 0 ? void 0 : v.toString()) !== null && _a !== void 0 ? _a : "");
-        }, text));
-        this.parent.appendNode(this.node);
-    }
-    /**
-     * Runs garbage collector
-     */
-    destroy() {
-        this.node.remove();
-        super.destroy();
-    }
-}
-exports.DebugNode = DebugNode;

package/lib-node/node/watch.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Watch = void 0;
-const node_1 = require("./node");
-/**
- * Watch Node
- * @class Watch
- * @extends Fragment
- */
-class Watch extends node_1.Fragment {
-    constructor(input) {
-        super(input, ":watch");
-    }
-    compose() {
-        this.watch(value => {
-            var _a, _b;
-            this.children.forEach(child => {
-                child.destroy();
-            });
-            this.children.clear();
-            this.lastChild = undefined;
-            (_b = (_a = this.input).slot) === null || _b === void 0 ? void 0 : _b.call(_a, this, value);
-        }, this.input.model);
-    }
-}
-exports.Watch = Watch;

package/lib-node/spec/html.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });