vasille 3.1.0 → 3.2.0

package/README.md

@@ -11,7 +11,7 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-simple-is-vasille)
+* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,6 +44,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `strong typing` makes your javascript/typescript code safe as C++ code.
 All entities of `vasille` core library are strongly typed, including:
   * data fields & properties.
-  * computed properties (function parameters & result).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ All entities of `vasille` core library are strongly typed, including:
   * references to children.
 * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
-## How SIMPLE is Vasille
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -105,7 +106,7 @@ All of these are supported:
 * [x] Develop the `Vasille Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add router.
+* [x] Add router.
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/lib/core/core.js

@@ -10,11 +10,6 @@ import { OwningPointer, Pointer } from "../value/pointer.js";
 export class Reactive extends Destroyable {
     constructor(input) {
         super();
-        /**
-         * A list of user-defined values
-         * @type {Set}
-         */
-        this._watch = new Set();
         /**
          * A list of user-defined bindings
          * @type {Set}
@@ -30,7 +25,7 @@ export class Reactive extends Destroyable {
      */
     ref(value, name) {
         const ref = new Reference(value);
-        this._watch.add(ref);
+        this.bindings.add(ref);
         if (name) {
             this.addState("ref", name, ref);
         }
@@ -43,7 +38,7 @@ export class Reactive extends Destroyable {
      */
     forward(value, name) {
         const mirror = new Pointer(value);
-        this._watch.add(mirror);
+        this.bindings.add(mirror);
         if (name) {
             this.addState("forward", name, mirror);
         }
@@ -56,7 +51,8 @@ export class Reactive extends Destroyable {
      */
     own(value, name) {
         const pointer = new OwningPointer(value);
-        this._watch.add(pointer);
+        this.bindings.add(pointer);
+        /* istanbul ignore else */
         if (name) {
             this.addState("own", name, pointer);
         }
@@ -81,7 +77,7 @@ export class Reactive extends Destroyable {
      * @param values
      */
     watch(func, values) {
-        this._watch.add(new Expression(func, values));
+        this.bindings.add(new Expression(func, values));
     }
     /**
      * Creates a computed value
@@ -92,7 +88,7 @@ export class Reactive extends Destroyable {
      */
     expr(func, values, name) {
         const res = new Expression(func, values);
-        this._watch.add(res);
+        this.bindings.add(res);
         if (name) {
             this.addState("expr", name, res);
         }
@@ -110,8 +106,6 @@ export class Reactive extends Destroyable {
     }
     destroy() {
         super.destroy();
-        this._watch.forEach(value => value.destroy());
-        this._watch.clear();
         this.bindings.forEach(binding => binding.destroy());
         this.bindings.clear();
         this.onDestroy?.();

package/lib/node/node.js

@@ -33,6 +33,7 @@ export class Root extends Reactive {
         let first;
         for (const child of this.children) {
             first = child.findFirstChild();
+            /* istanbul ignore else */
             if (first) {
                 break;
             }
@@ -322,6 +323,7 @@ export class DebugNode extends Fragment {
         super(input, runner, ":debug");
     }
     destroy() {
+        /* istanbul ignore else */
         if (this.handler) {
             this.input.text.off(this.handler);
         }

package/lib/runner/web/binding/class.js

@@ -27,10 +27,12 @@ export class DynamicalClassBinding extends Binding {
         super(value);
         this.current = "";
         this.init((value) => {
+            /* istanbul ignore else */
             if (this.current != value) {
                 if (this.current.length) {
                     removeClass(node, this.current);
                 }
+                /* istanbul ignore else */
                 if (value.length) {
                     addClass(node, value);
                 }

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

@@ -23,6 +23,7 @@ export class StyleBinding extends Binding {
     constructor(node, name, value) {
         super(value);
         this.init(value => {
+            /* istanbul ignore else */
             if (node.element instanceof HTMLElement) {
                 node.element.style.setProperty(name, stringifyStyleValue(value));
             }

package/lib/runner/web/runner.js

@@ -65,7 +65,9 @@ export class Tag extends AbstractTag {
                     this.register(new AttributeBinding(this, name, value));
                 }
                 else {
+                    /* istanbul ignore else */
                     if (typeof value === "boolean") {
+                        /* istanbul ignore else */
                         if (value) {
                             this.node.setAttribute(name, "");
                         }
@@ -140,6 +142,7 @@ export class Runner {
     }
     insertBefore(node, before) {
         const parent = before.parentElement;
+        /* istanbul ignore else */
         if (parent) {
             parent.insertBefore(node, before);
         }

package/lib/value/expression.js

@@ -19,6 +19,7 @@ export class Expression extends IValue {
          */
         this.linkedFunc = [];
         const handler = (i) => {
+            /* istanbul ignore else */
             if (typeof i === "number") {
                 this.valuesCache[i] = this.values[i].$;
             }

package/lib/value/pointer.js

@@ -31,6 +31,7 @@ export class Pointer extends IValue {
         return this.reference.$;
     }
     set $$(v) {
+        /* istanbul ignore else */
         if (this.target !== v) {
             this.disconnectTarget();
         }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "vasille",
-  "description": "The first Developer eXperience orientated front-end framework (core library).",
+  "description": "The first Developer eXperience Orientated front-end framework (core library).",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",

package/types/core/core.d.ts

@@ -8,11 +8,6 @@ import { Pointer } from "../value/pointer.js";
  * @extends Destroyable
  */
 export declare class Reactive<T extends object = object> extends Destroyable {
-    /**
-     * A list of user-defined values
-     * @type {Set}
-     */
-    private _watch;
     /**
      * A list of user-defined bindings
      * @type {Set}

package/lib/models/array-model.js

@@ -1,147 +0,0 @@
-import { Listener } from "./listener.js";
-/**
- * Model based on Array class
- * @extends Array
- * @implements IModel
- */
-export class ArrayModel extends Array {
-    /**
-     * @param data {Array} input data
-     */
-    constructor(data) {
-        super();
-        this.passive = false;
-        this.listener = new Listener();
-        if (data instanceof Array) {
-            for (let i = 0; i < data.length; i++) {
-                super.push(data[i]);
-            }
-        }
-    }
-    /* Array members */
-    /**
-     * Calls Array.fill and notify about changes
-     * @param value {*} value to fill with
-     * @param start {?number} begin index
-     * @param end {?number} end index
-     */
-    fill(value, start, end) {
-        this.passive = true;
-        if (!start) {
-            start = 0;
-        }
-        if (!end) {
-            end = this.length;
-        }
-        for (let i = start; i < end; i++) {
-            this.listener.emitRemoved(this[i], this[i]);
-            this[i] = value;
-            this.listener.emitAdded(value, value);
-        }
-        this.passive = false;
-        return this;
-    }
-    /**
-     * Calls Array.pop and notify about changes
-     * @return {*} removed value
-     */
-    pop() {
-        this.passive = true;
-        const v = super.pop();
-        if (v !== undefined) {
-            this.listener.emitRemoved(v, v);
-        }
-        this.passive = false;
-        return v;
-    }
-    /**
-     * Calls Array.push and notify about changes
-     * @param items {...*} values to push
-     * @return {number} new length of array
-     */
-    push(...items) {
-        this.passive = true;
-        items.forEach(item => {
-            this.listener.emitAdded(item, item);
-            super.push(item);
-        });
-        this.passive = false;
-        return this.length;
-    }
-    /**
-     * Calls Array.shift and notify about changed
-     * @return {*} the shifted value
-     */
-    shift() {
-        this.passive = true;
-        const v = super.shift();
-        if (v !== undefined) {
-            this.listener.emitRemoved(v, v);
-        }
-        this.passive = false;
-        return v;
-    }
-    /**
-     * Calls Array.splice and notify about changed
-     * @param start {number} start index
-     * @param deleteCount {?number} delete count
-     * @param items {...*}
-     * @return {ArrayModel} a pointer to this
-     */
-    splice(start, deleteCount, ...items) {
-        this.passive = true;
-        start = Math.min(start, this.length);
-        deleteCount = typeof deleteCount === "number" ? deleteCount : this.length - start;
-        const before = this[start + deleteCount];
-        for (let i = 0; i < deleteCount; i++) {
-            const index = start + deleteCount - i - 1;
-            if (this[index] !== undefined) {
-                this.listener.emitRemoved(this[index], this[index]);
-            }
-        }
-        for (let i = 0; i < items.length; i++) {
-            this.listener.emitAdded(before, items[i]);
-        }
-        this.passive = false;
-        return new ArrayModel(super.splice(start, deleteCount, ...items));
-    }
-    /**
-     * Calls Array.unshift and notify about changed
-     * @param items {...*} values to insert
-     * @return {number} the length after prepend
-     */
-    unshift(...items) {
-        this.passive = true;
-        for (let i = 0; i < items.length; i++) {
-            this.listener.emitAdded(this[i], items[i]);
-        }
-        const r = super.unshift(...items);
-        this.passive = false;
-        return r;
-    }
-    replace(at, with_) {
-        this.passive = true;
-        this.listener.emitAdded(this[at], with_);
-        this.listener.emitRemoved(this[at], this[at]);
-        this[at] = with_;
-        this.passive = false;
-        return this;
-    }
-    destroy() {
-        this.splice(0);
-    }
-}
-export function proxyArrayModel(arr) {
-    return new Proxy(arr, {
-        set(target, p, newValue, receiver) {
-            if (!arr.passive && typeof p === "string") {
-                const index = parseInt(p);
-                if (Number.isFinite(index)) {
-                    arr.replace(index, newValue);
-                    return true;
-                }
-            }
-            return Reflect.set(target, p, newValue, receiver);
-        },
-    });
-}

package/lib/models/listener.js

@@ -1,66 +0,0 @@
-/**
- * Represent a listener for a model
- * @class Listener
- */
-export class Listener {
-    constructor() {
-        /**
-         * Functions to run on adding new items
-         * @type Set
-         */
-        this.onAdded = new Set();
-        /**
-         * Functions to run on item removing
-         * @type Set
-         */
-        this.onRemoved = new Set();
-    }
-    /**
-     * Emits added event to listeners
-     * @param index {*} index of value
-     * @param value {*} value of added item
-     */
-    emitAdded(index, value) {
-        this.onAdded.forEach(handler => {
-            handler(index, value);
-        });
-    }
-    /**
-     * Emits removed event to listeners
-     * @param index {*} index of removed value
-     * @param value {*} value of removed item
-     */
-    emitRemoved(index, value) {
-        this.onRemoved.forEach(handler => {
-            handler(index, value);
-        });
-    }
-    /**
-     * Adds a handler to added event
-     * @param handler {function} function to run on event emitting
-     */
-    onAdd(handler) {
-        this.onAdded.add(handler);
-    }
-    /**
-     * Adds a handler to removed event
-     * @param handler {function} function to run on event emitting
-     */
-    onRemove(handler) {
-        this.onRemoved.add(handler);
-    }
-    /**
-     * Removes an handler from added event
-     * @param handler {function} handler to remove
-     */
-    offAdd(handler) {
-        this.onAdded.delete(handler);
-    }
-    /**
-     * Removes an handler form removed event
-     * @param handler {function} handler to remove
-     */
-    offRemove(handler) {
-        this.onRemoved.delete(handler);
-    }
-}

package/lib/models/map-model.js

@@ -1,59 +0,0 @@
-import { Listener } from "./listener.js";
-/**
- * A Map based memory
- * @class MapModel
- * @extends Map
- * @implements IModel
- */
-export class MapModel extends Map {
-    /**
-     * Constructs a map model
-     * @param map {[*, *][]} input data
-     */
-    constructor(map) {
-        super();
-        this.listener = new Listener();
-        map?.forEach(([key, value]) => {
-            super.set(key, value);
-        });
-    }
-    /**
-     * Calls Map.clear and notify about changes
-     */
-    clear() {
-        this.forEach((value, key) => {
-            this.listener.emitRemoved(key, value);
-        });
-        super.clear();
-    }
-    /**
-     * Calls Map.delete and notify abut changes
-     * @param key {*} key
-     * @return {boolean} true if removed something, otherwise false
-     */
-    delete(key) {
-        const tmp = super.get(key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
-        }
-        return super.delete(key);
-    }
-    /**
-     * Calls Map.set and notify abut changes
-     * @param key {*} key
-     * @param value {*} value
-     * @return {MapModel} a pointer to this
-     */
-    set(key, value) {
-        const tmp = super.get(key);
-        if (tmp) {
-            this.listener.emitRemoved(key, tmp);
-        }
-        super.set(key, value);
-        this.listener.emitAdded(key, value);
-        return this;
-    }
-    destroy() {
-        this.clear();
-    }
-}

package/lib/models/model.js

@@ -1 +0,0 @@
-export {};

package/lib/models/set-model.js

@@ -1,55 +0,0 @@
-import { Listener } from "./listener.js";
-/**
- * A Set based model
- * @class SetModel
- * @extends Set
- * @implements IModel
- */
-export class SetModel extends Set {
-    /**
-     * Constructs a set model based on a set
-     * @param set {Set} input data
-     */
-    constructor(set) {
-        super();
-        this.listener = new Listener();
-        set?.forEach(item => {
-            super.add(item);
-        });
-    }
-    /**
-     * Calls Set.add and notify abut changes
-     * @param value {*} value
-     * @return {this} a pointer to this
-     */
-    add(value) {
-        if (!super.has(value)) {
-            this.listener.emitAdded(value, value);
-            super.add(value);
-        }
-        return this;
-    }
-    /**
-     * Calls Set.clear and notify abut changes
-     */
-    clear() {
-        this.forEach(item => {
-            this.listener.emitRemoved(item, item);
-        });
-        super.clear();
-    }
-    /**
-     * Calls Set.delete and notify abut changes
-     * @param value {*}
-     * @return {boolean} true if a value was deleted, otherwise false
-     */
-    delete(value) {
-        if (super.has(value)) {
-            this.listener.emitRemoved(value, value);
-        }
-        return super.delete(value);
-    }
-    destroy() {
-        this.clear();
-    }
-}

package/types/models/array-model.d.ts

@@ -1,55 +0,0 @@
-import { Listener } from "./listener.js";
-import { ListenableModel } from "./model.js";
-/**
- * Model based on Array class
- * @extends Array
- * @implements IModel
- */
-export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T, T> {
-    listener: Listener<T, T>;
-    passive: boolean;
-    /**
-     * @param data {Array} input data
-     */
-    constructor(data?: Array<T> | number);
-    /**
-     * Calls Array.fill and notify about changes
-     * @param value {*} value to fill with
-     * @param start {?number} begin index
-     * @param end {?number} end index
-     */
-    fill(value: T, start?: number, end?: number): this;
-    /**
-     * Calls Array.pop and notify about changes
-     * @return {*} removed value
-     */
-    pop(): T | undefined;
-    /**
-     * Calls Array.push and notify about changes
-     * @param items {...*} values to push
-     * @return {number} new length of array
-     */
-    push(...items: Array<T>): number;
-    /**
-     * Calls Array.shift and notify about changed
-     * @return {*} the shifted value
-     */
-    shift(): T | undefined;
-    /**
-     * Calls Array.splice and notify about changed
-     * @param start {number} start index
-     * @param deleteCount {?number} delete count
-     * @param items {...*}
-     * @return {ArrayModel} a pointer to this
-     */
-    splice(start: number, deleteCount?: number, ...items: Array<T>): ArrayModel<T>;
-    /**
-     * Calls Array.unshift and notify about changed
-     * @param items {...*} values to insert
-     * @return {number} the length after prepend
-     */
-    unshift(...items: Array<T>): number;
-    replace(at: number, with_: T): this;
-    destroy(): void;
-}
-export declare function proxyArrayModel<T>(arr: ArrayModel<T>): ArrayModel<T>;

package/types/models/listener.d.ts

@@ -1,48 +0,0 @@
-/**
- * Represent a listener for a model
- * @class Listener
- */
-export declare class Listener<ValueT, IndexT = string | number> {
-    /**
-     * Functions to run on adding new items
-     * @type Set
-     */
-    private readonly onAdded;
-    /**
-     * Functions to run on item removing
-     * @type Set
-     */
-    private readonly onRemoved;
-    /**
-     * Emits added event to listeners
-     * @param index {*} index of value
-     * @param value {*} value of added item
-     */
-    emitAdded(index: IndexT, value: ValueT): void;
-    /**
-     * Emits removed event to listeners
-     * @param index {*} index of removed value
-     * @param value {*} value of removed item
-     */
-    emitRemoved(index: IndexT, value: ValueT): void;
-    /**
-     * Adds a handler to added event
-     * @param handler {function} function to run on event emitting
-     */
-    onAdd(handler: (index: IndexT, value: ValueT) => void): void;
-    /**
-     * Adds a handler to removed event
-     * @param handler {function} function to run on event emitting
-     */
-    onRemove(handler: (index: IndexT, value: ValueT) => void): void;
-    /**
-     * Removes an handler from added event
-     * @param handler {function} handler to remove
-     */
-    offAdd(handler: (index: IndexT, value: ValueT) => void): void;
-    /**
-     * Removes an handler form removed event
-     * @param handler {function} handler to remove
-     */
-    offRemove(handler: (index: IndexT, value: ValueT) => void): void;
-}

package/types/models/map-model.d.ts

@@ -1,34 +0,0 @@
-import { Listener } from "./listener.js";
-import { ListenableModel } from "./model.js";
-/**
- * A Map based memory
- * @class MapModel
- * @extends Map
- * @implements IModel
- */
-export declare class MapModel<K, T> extends Map<K, T> implements ListenableModel<K, T> {
-    listener: Listener<T, K>;
-    /**
-     * Constructs a map model
-     * @param map {[*, *][]} input data
-     */
-    constructor(map?: [K, T][]);
-    /**
-     * Calls Map.clear and notify about changes
-     */
-    clear(): void;
-    /**
-     * Calls Map.delete and notify abut changes
-     * @param key {*} key
-     * @return {boolean} true if removed something, otherwise false
-     */
-    delete(key: K): boolean;
-    /**
-     * Calls Map.set and notify abut changes
-     * @param key {*} key
-     * @param value {*} value
-     * @return {MapModel} a pointer to this
-     */
-    set(key: K, value: T): this;
-    destroy(): void;
-}

package/types/models/model.d.ts

@@ -1,14 +0,0 @@
-import { IDestroyable } from "../core/destroyable.js";
-import { Listener } from "./listener.js";
-/**
- * @interface IModel
- */
-export interface IModel extends IDestroyable {
-}
-export interface ListenableModel<K, T> extends IModel {
-    /**
-     * The listener of model
-     * @type Listener
-     */
-    listener: Listener<T, K>;
-}

package/types/models/set-model.d.ts

@@ -1,33 +0,0 @@
-import { Listener } from "./listener.js";
-import { ListenableModel } from "./model.js";
-/**
- * A Set based model
- * @class SetModel
- * @extends Set
- * @implements IModel
- */
-export declare class SetModel<T> extends Set<T> implements ListenableModel<T, T> {
-    listener: Listener<T, T>;
-    /**
-     * Constructs a set model based on a set
-     * @param set {Set} input data
-     */
-    constructor(set?: T[]);
-    /**
-     * Calls Set.add and notify abut changes
-     * @param value {*} value
-     * @return {this} a pointer to this
-     */
-    add(value: T): this;
-    /**
-     * Calls Set.clear and notify abut changes
-     */
-    clear(): void;
-    /**
-     * Calls Set.delete and notify abut changes
-     * @param value {*}
-     * @return {boolean} true if a value was deleted, otherwise false
-     */
-    delete(value: T): boolean;
-    destroy(): void;
-}