vasille 1.2.9 → 2.0.3

package/lib/binding/attribute.js

@@ -0,0 +1,32 @@
+import { Binding } from "./binding";
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+export class AttributeBinding extends Binding {
+    /**
+     * Constructs an attribute binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of attribute
+     * @param value {IValue} value to bind
+     */
+    constructor(node, name, value) {
+        super(node, name, value);
+    }
+    /**
+     * Generates a function which updates the attribute value
+     * @param name {String} The name of attribute
+     * @returns {Function} a function which will update attribute value
+     */
+    bound(name) {
+        return function (node, value) {
+            if (value) {
+                node.app.$run.setAttribute(node.node, name, value);
+            }
+            else {
+                node.app.$run.removeAttribute(node.node, name);
+            }
+        };
+    }
+}

package/lib/binding/binding.js

@@ -0,0 +1,39 @@
+import { Destroyable } from "../core/destroyable";
+import { notOverwritten } from "../core/errors";
+/**
+ * Describe a common binding logic
+ * @class Binding
+ * @extends Destroyable
+ */
+export class Binding extends Destroyable {
+    /**
+     * Constructs a common binding logic
+     * @param node {INode} the vasille node
+     * @param name {String} the name of property/attribute/class
+     * @param value {IValue} the value to bind
+     */
+    constructor(node, name, value) {
+        super();
+        this.updateFunc = this.bound(name).bind(null, node);
+        this.binding = value;
+        this.binding.on(this.updateFunc);
+        this.updateFunc(this.binding.$);
+        this.$seal();
+    }
+    /**
+     * Is a virtual function to get the specific bind function
+     * @param name {String} the name of attribute/property
+     * @returns {Function} a function to update attribute/property value
+     * @throws Always throws and must be overloaded in child class
+     */
+    bound(name) {
+        throw notOverwritten();
+    }
+    /**
+     * Just clear bindings
+     */
+    $destroy() {
+        this.binding.off(this.updateFunc);
+        super.$destroy();
+    }
+}

package/lib/binding/class.js

@@ -0,0 +1,51 @@
+import { Binding } from "./binding";
+/**
+ * Represents a HTML class binding description
+ * @class ClassBinding
+ * @extends Binding
+ */
+export class ClassBinding extends Binding {
+    /**
+     * Constructs an HTML class binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of class
+     * @param value {IValue} the value to bind
+     */
+    constructor(node, name, value) {
+        super(node, name, value);
+        this.$seal();
+    }
+    /**
+     * Generates a function which updates the html class value
+     * @param name {String} The name of attribute
+     * @returns {Function} a function which will update attribute value
+     */
+    bound(name) {
+        let current = null;
+        function addClass(node, cl) {
+            node.app.$run.addClass(node.node, cl);
+        }
+        function removeClass(node, cl) {
+            node.app.$run.removeClass(node.node, cl);
+        }
+        return (node, value) => {
+            if (value !== current) {
+                if (typeof current === "string" && current !== "") {
+                    removeClass(node, current);
+                }
+                if (typeof value === "boolean") {
+                    if (value) {
+                        addClass(node, name);
+                    }
+                    else {
+                        removeClass(node, name);
+                    }
+                }
+                else if (typeof value === "string" && value !== "") {
+                    addClass(node, value);
+                }
+                current = value;
+            }
+        };
+    }
+}

package/lib/binding/style.js

@@ -0,0 +1,29 @@
+import { Binding } from "./binding";
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+export class StyleBinding extends Binding {
+    /**
+     * Constructs a style binding attribute
+     * @param node {INode} the vasille node
+     * @param name {string} the name of style property
+     * @param value {IValue} the value to bind
+     */
+    constructor(node, name, value) {
+        super(node, name, value);
+    }
+    /**
+     * Generates a function to update style property value
+     * @param name {string}
+     * @returns {Function} a function to update style property
+     */
+    bound(name) {
+        return function (node, value) {
+            if (node.node instanceof HTMLElement) {
+                node.app.$run.setStyle(node.node, name, value);
+            }
+        };
+    }
+}

package/lib/core/core.js

@@ -0,0 +1,186 @@
+import { Destroyable } from "./destroyable.js";
+import { wrongBinding } from "./errors";
+import { IValue } from "./ivalue.js";
+import { Expression } from "../value/expression";
+import { Reference } from "../value/reference";
+import { Pointer } from "../value/pointer";
+import { Mirror } from "../value/mirror";
+/**
+ * Private stuff of a reactive object
+ * @class ReactivePrivate
+ * @extends Destroyable
+ */
+export class ReactivePrivate extends Destroyable {
+    constructor() {
+        super();
+        /**
+         * A list of user-defined values
+         * @type {Set}
+         */
+        this.watch = new Set;
+        /**
+         * A list of user-defined bindings
+         * @type {Set}
+         */
+        this.bindings = new Set;
+        /**
+         * A list of user defined models
+         */
+        this.models = new Set;
+        /**
+         * Reactivity switch state
+         * @type {boolean}
+         */
+        this.enabled = true;
+        /**
+         * The frozen state of object
+         * @type {boolean}
+         */
+        this.frozen = false;
+        this.$seal();
+    }
+    $destroy() {
+        var _a;
+        this.watch.forEach(value => value.$destroy());
+        this.watch.clear();
+        this.bindings.forEach(binding => binding.$destroy());
+        this.bindings.clear();
+        (_a = this.freezeExpr) === null || _a === void 0 ? void 0 : _a.$destroy();
+        super.$destroy();
+    }
+}
+/**
+ * A reactive object
+ * @class Reactive
+ * @extends Destroyable
+ */
+export class Reactive extends Destroyable {
+    constructor($) {
+        super();
+        this.$ = $ || new ReactivePrivate;
+    }
+    /**
+     * Create a reference
+     * @param value {*} value to reference
+     */
+    $ref(value) {
+        const $ = this.$;
+        const ref = new Reference(value);
+        $.watch.add(ref);
+        return ref;
+    }
+    /**
+     * Create a mirror
+     * @param value {IValue} value to mirror
+     */
+    $mirror(value) {
+        const mirror = new Mirror(value, false);
+        this.$.watch.add(mirror);
+        return mirror;
+    }
+    /**
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
+     */
+    $forward(value) {
+        const mirror = new Mirror(value, true);
+        this.$.watch.add(mirror);
+        return mirror;
+    }
+    /**
+     * Creates a pointer
+     * @param value {*} default value to point
+     * @param forwardOnly {boolean} forward only sync
+     */
+    $point(value, forwardOnly = false) {
+        const $ = this.$;
+        const ref = value instanceof IValue ? value : new Reference(value);
+        const pointer = new Pointer(ref, forwardOnly);
+        // when value is an ivalue will be equal to ref
+        if (value !== ref) {
+            $.watch.add(ref);
+        }
+        $.watch.add(pointer);
+        return pointer;
+    }
+    /**
+     * Register a model
+     * @param model
+     */
+    $register(model) {
+        this.$.models.add(model);
+        return model;
+    }
+    $watch(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+        const $ = this.$;
+        $.watch.add(new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9));
+    }
+    $bind(func, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
+        const res = new Expression(func, !this.$.frozen, v1, v2, v3, v4, v5, v6, v7, v8, v9);
+        const $ = this.$;
+        $.watch.add(res);
+        return res;
+    }
+    /**
+     * Enable reactivity of fields
+     */
+    $enable() {
+        const $ = this.$;
+        if (!$.enabled) {
+            $.watch.forEach(watcher => {
+                watcher.enable();
+            });
+            $.models.forEach(model => {
+                model.enableReactivity();
+            });
+            $.enabled = true;
+        }
+    }
+    /**
+     * Disable reactivity of fields
+     */
+    $disable() {
+        const $ = this.$;
+        if ($.enabled) {
+            $.watch.forEach(watcher => {
+                watcher.disable();
+            });
+            $.models.forEach(model => {
+                model.disableReactivity();
+            });
+            $.enabled = false;
+        }
+    }
+    /**
+     * Disable/Enable reactivity of object fields with feedback
+     * @param cond {IValue} show condition
+     * @param onOff {function} on show feedback
+     * @param onOn {function} on hide feedback
+     */
+    $bindAlive(cond, onOff, onOn) {
+        const $ = this.$;
+        if ($.freezeExpr) {
+            throw wrongBinding("this component already have a freeze state");
+        }
+        if ($.watch.has(cond)) {
+            throw wrongBinding("freeze state must be bound to an external component");
+        }
+        $.freezeExpr = new Expression((cond) => {
+            $.frozen = !cond;
+            if (cond) {
+                onOn === null || onOn === void 0 ? void 0 : onOn();
+                this.$enable();
+            }
+            else {
+                onOff === null || onOff === void 0 ? void 0 : onOff();
+                this.$disable();
+            }
+        }, true, cond);
+        return this;
+    }
+    $destroy() {
+        super.$destroy();
+        this.$.$destroy();
+        this.$ = null;
+    }
+}

package/lib/core/destroyable.js

@@ -0,0 +1,45 @@
+/**
+ * Mark an object which can be destroyed
+ * @class Destroyable
+ */
+export class Destroyable {
+    /**
+     * Make object fields non configurable
+     * @protected
+     */
+    $seal() {
+        const $ = this;
+        Object.keys($).forEach(i => {
+            // eslint-disable-next-line no-prototype-builtins
+            if (this.hasOwnProperty(i)) {
+                const config = Object.getOwnPropertyDescriptor($, i);
+                if (config.configurable) {
+                    let descriptor;
+                    if (config.set || config.get) {
+                        descriptor = {
+                            configurable: false,
+                            get: config.get,
+                            set: config.set,
+                            enumerable: config.enumerable
+                        };
+                    }
+                    else {
+                        descriptor = {
+                            value: $[i],
+                            configurable: false,
+                            writable: config.writable,
+                            enumerable: config.enumerable
+                        };
+                    }
+                    Object.defineProperty($, i, descriptor);
+                }
+            }
+        });
+    }
+    /**
+     * Garbage collector method
+     */
+    $destroy() {
+        // nothing here
+    }
+}

package/lib/core/errors.js

@@ -0,0 +1,16 @@
+const reportIt = "Report it here: https://gitlab.com/vasille-js/vasille-js/-/issues";
+export function notOverwritten() {
+    console.error("Vasille-SFP: Internal error", "Must be overwritten", reportIt);
+    return "not-overwritten";
+}
+export function internalError(msg) {
+    console.error("Vasille-SFP: Internal error", msg, reportIt);
+    return "internal-error";
+}
+export function userError(msg, err) {
+    console.error("Vasille-SFP: User error", msg);
+    return err;
+}
+export function wrongBinding(msg) {
+    return userError(msg, "wrong-binding");
+}

package/lib/core/executor.js

@@ -0,0 +1,154 @@
+import { internalError, notOverwritten } from "./errors";
+/**
+ * Represents an executor unit interface
+ * @class Executor
+ */
+export class Executor {
+    /**
+     * Adds a CSS class
+     * @param el {Element} element to manipulate
+     * @param cl {string} class to be added
+     */
+    addClass(el, cl) {
+        throw notOverwritten();
+    }
+    /**
+     * Removes a CSS class
+     * @param el {Element} element to manipulate
+     * @param cl {string} class to be removed
+     */
+    removeClass(el, cl) {
+        throw notOverwritten();
+    }
+    /**
+     * Sets a tag attribute
+     * @param el {Element} element to manipulate
+     * @param name {string} name of attribute
+     * @param value {string} value of attribute
+     */
+    setAttribute(el, name, value) {
+        throw notOverwritten();
+    }
+    /**
+     * Removes a tag attribute
+     * @param el {Element} element to manipulate
+     * @param name {string} name of attribute
+     */
+    removeAttribute(el, name) {
+        throw notOverwritten();
+    }
+    /**
+     * Sets a style attribute
+     * @param el {HTMLElement} element to manipulate
+     * @param prop {string} property name
+     * @param value {string} property value
+     */
+    setStyle(el, prop, value) {
+        throw notOverwritten();
+    }
+    /**
+     * Inserts a child before target
+     * @param target {Element} target element
+     * @param child {Node} element to insert before
+     */
+    insertBefore(target, child) {
+        throw notOverwritten();
+    }
+    /**
+     * Appends a child to element
+     * @param el {Element} element
+     * @param child {Node} child to be inserted
+     */
+    appendChild(el, child) {
+        throw notOverwritten();
+    }
+    /**
+     * Calls a call-back function
+     * @param cb {function} call-back function
+     */
+    callCallback(cb) {
+        throw notOverwritten();
+    }
+}
+/**
+ * Executor which execute any commands immediately
+ * @class InstantExecutor
+ * @extends Executor
+ */
+export class InstantExecutor extends Executor {
+    addClass(el, cl) {
+        el.classList.add(cl);
+    }
+    removeClass(el, cl) {
+        el.classList.remove(cl);
+    }
+    setAttribute(el, name, value) {
+        el.setAttribute(name, value);
+    }
+    removeAttribute(el, name) {
+        el.removeAttribute(name);
+    }
+    setStyle(el, prop, value) {
+        el.style.setProperty(prop, value);
+    }
+    insertBefore(target, child) {
+        const parent = target.parentNode;
+        if (!parent) {
+            throw internalError('element don\'t have a parent node');
+        }
+        parent.insertBefore(child, target);
+    }
+    appendChild(el, child) {
+        el.appendChild(child);
+    }
+    callCallback(cb) {
+        cb();
+    }
+}
+/**
+ * Executor which execute any commands over timeout
+ * @class TimeoutExecutor
+ * @extends InstantExecutor
+ */
+export class TimeoutExecutor extends InstantExecutor {
+    addClass(el, cl) {
+        setTimeout(() => {
+            super.addClass(el, cl);
+        }, 0);
+    }
+    removeClass(el, cl) {
+        setTimeout(() => {
+            super.removeClass(el, cl);
+        }, 0);
+    }
+    setAttribute(el, name, value) {
+        setTimeout(() => {
+            super.setAttribute(el, name, value);
+        }, 0);
+    }
+    removeAttribute(el, name) {
+        setTimeout(() => {
+            super.removeAttribute(el, name);
+        }, 0);
+    }
+    setStyle(el, prop, value) {
+        setTimeout(() => {
+            super.setStyle(el, prop, value);
+        }, 0);
+    }
+    insertBefore(target, child) {
+        setTimeout(() => {
+            super.insertBefore(target, child);
+        }, 0);
+    }
+    appendChild(el, child) {
+        setTimeout(() => {
+            super.appendChild(el, child);
+        }, 0);
+    }
+    callCallback(cb) {
+        setTimeout(cb, 0);
+    }
+}
+export const instantExecutor = new InstantExecutor();
+export const timeoutExecutor = new TimeoutExecutor();

package/lib/core/ivalue.js

@@ -0,0 +1,56 @@
+import { Destroyable } from "./destroyable.js";
+import { notOverwritten } from "./errors";
+/**
+ * Interface which describes a value
+ * @class IValue
+ * @extends Destroyable
+ */
+export class IValue extends Destroyable {
+    /**
+     * @param isEnabled {boolean} initial is enabled state
+     */
+    constructor(isEnabled) {
+        super();
+        this.isEnabled = isEnabled;
+    }
+    /**
+     * Get the encapsulated value
+     * @return {*} the encapsulated value
+     */
+    get $() {
+        throw notOverwritten();
+    }
+    /**
+     * Sets the encapsulated value
+     * @param value {*} value to encapsulate
+     */
+    set $(value) {
+        throw notOverwritten();
+    }
+    /**
+     * Add a new handler to value change
+     * @param handler {function(value : *)} the handler to add
+     */
+    on(handler) {
+        throw notOverwritten();
+    }
+    /**
+     * Removes a handler of value change
+     * @param handler {function(value : *)} the handler to remove
+     */
+    off(handler) {
+        throw notOverwritten();
+    }
+    /**
+     * Enable update handlers triggering
+     */
+    enable() {
+        throw notOverwritten();
+    }
+    /**
+     * disable update handlers triggering
+     */
+    disable() {
+        throw notOverwritten();
+    }
+}

package/lib/core/signal.js

@@ -0,0 +1,50 @@
+/**
+ * Signal is an event generator
+ * @class Signal
+ */
+export class Signal {
+    constructor() {
+        /**
+         * Handler of event
+         * @type {Set}
+         * @private
+         */
+        this.handlers = new Set;
+    }
+    /**
+     * Emit event
+     * @param a1 {*} argument
+     * @param a2 {*} argument
+     * @param a3 {*} argument
+     * @param a4 {*} argument
+     * @param a5 {*} argument
+     * @param a6 {*} argument
+     * @param a7 {*} argument
+     * @param a8 {*} argument
+     * @param a9 {*} argument
+     */
+    emit(a1, a2, a3, a4, a5, a6, a7, a8, a9) {
+        this.handlers.forEach(handler => {
+            try {
+                handler(a1, a2, a3, a4, a5, a6, a7, a8, a9);
+            }
+            catch (e) {
+                console.error(`Vasille.js: Handler throw exception: `, e);
+            }
+        });
+    }
+    /**
+     * Subscribe to event
+     * @param func {function} handler
+     */
+    subscribe(func) {
+        this.handlers.add(func);
+    }
+    /**
+     * Unsubscribe from event
+     * @param func {function} handler
+     */
+    unsubscribe(func) {
+        this.handlers.delete(func);
+    }
+}