vasille 2.2.2 → 2.3.2

package/flow-typed/vasille.js

@@ -16,7 +16,7 @@ declare class Mirror<T> extends Reference<T> {
      * Collection of handlers
      * @type Set
      */
-    $handler;
+    $handler: any;
     /**
      * Ensure forward only synchronization
      */
@@ -91,13 +91,13 @@ declare class Reference<T> extends IValue<T> {
      * The encapsulated value
      * @type {*}
      */
-    $value;
+    $value: any;
     /**
      * Array of handlers
      * @type {Set}
      * @readonly
      */
-    $onchange;
+    $onchange: any;
     /**
      * @param value {any} the initial value
      */
@@ -165,7 +165,7 @@ declare class RepeatNodePrivate<IdT> extends INodePrivate {
     constructor(): void;
     $destroy(): void;
 }
-declare interface RNO<T, IdT> extends Options {
+declare interface RNO<T, IdT> extends FragmentOptions {
     slot?: (node: Fragment, value: T, index: IdT) => void;
 }
 /**
@@ -268,12 +268,12 @@ declare class ObjectModel<T> extends Object implements ListenableModel<string, T
      * @return {ObjectModel} a pointer to this
      */
     set(key: string, v: T): this;
+    get values(): Record<string, T>;
     /**
      * Deletes an object property
      * @param key {string} property name
      */
     delete(key: string): void;
-    proxy(): Record<string, T>;
     enableReactivity(): void;
     disableReactivity(): void;
 }
@@ -325,7 +325,6 @@ declare class ArrayModel<T> extends Array<T> implements ListenableModel<T, T> {
      * @param data {Array} input data
      */
     constructor(data?: Array<T>): void;
-    proxy(): ArrayModel<T>;
     /**
      * Gets the last item of array
      * @return {*} the last item of array
@@ -413,6 +412,7 @@ declare class ArrayModel<T> extends Array<T> implements ListenableModel<T, T> {
      * @return {this}
      */
     removeOne(v: T): this;
+    replace(at: number, with_: T): this;
     enableReactivity(): void;
     disableReactivity(): void;
 }
@@ -550,7 +550,7 @@ declare interface ListenableModel<K, T> extends IModel {
 }
 
 
-declare interface WatchOptions<T> extends Options {
+declare interface WatchOptions<T> extends FragmentOptions {
     model: IValue<T>;
     slot?: (node: Fragment, value: T) => void;
 }
@@ -637,7 +637,7 @@ declare class Fragment<T> extends Reactive {
      * @param data {*} additional data
      */
     preinit(app: AppNode, parent: Fragment, data?: any): void;
-    init(): void;
+    init(): T['return'];
     compose(input: T): void;
     /** To be overloaded: ready event handler */
     ready(): void;
@@ -682,7 +682,7 @@ declare class Fragment<T> extends Reactive {
      * @param node {Fragment} vasille element to insert
      * @param callback {function($ : *)}
      */
-    create<T>(node: T, callback?: T['input']['slot']): void;
+    create<T>(node: T, callback?: T['input']['slot']): T['input']['return'];
     /**
      * Defines an if node
      * @param cond {IValue} condition
@@ -880,6 +880,7 @@ declare class Tag<K> extends INode<TagOptionsWithSlot<K>> {
  */
 declare class Extension<T> extends INode<T> {
     preinit(app: AppNode, parent: Fragment): void;
+    extend(options: T): void;
     $destroy(): void;
 }
 /**
@@ -1087,56 +1088,13 @@ declare class StyleBinding extends Binding<string> {
 }
 
 
-declare function arrayModel<T>(arr?: T[]): ArrayModel<T>;
-declare function mapModel<K, T>(map?: [K, T][]): MapModel<K, T>;
-declare function setModel<T>(arr?: T[]): SetModel<T>;
-declare function objectModel<T>(obj?: {
-    [p: string]: T;
-}): ObjectModel<T>;
-
-
-declare function ref<T>(value: T): [IValue<T>, (value: T) => void];
-declare function mirror<T>(value: IValue<T>): Mirror<T>;
-declare function forward<T>(value: IValue<T>): Mirror<T>;
-declare function point<T>(value: IValue<T>): Pointer<T>;
-declare function expr<T,Args>(func: (...args: Args) => T, ...values: KindOfIValue<Args>): IValue<T>;
-declare function watch<Args>(func: (...args: Args) => void, ...values: KindOfIValue<Args>): void;
-declare function valueOf<T>(value: IValue<T>): T;
-declare function setValue<T>(ref: IValue<T>, value: IValue<T> | T): void;
-
-
-declare function app<In>(renderer: (opts: In) => In["return"]): (node: Element, opts: In) => In["return"];
-declare function component<In>(renderer: (opts: In) => In["return"]): (opts: In, callback?: In['slot']) => In["return"];
-declare function fragment<In>(renderer: (opts: In) => In["return"]): (opts: In, callback?: In['slot']) => In["return"];
-declare function extension<In>(renderer: (opts: In) => In["return"]): (opts: In, callback?: In['slot']) => In["return"];
-declare function tag<K>(name: K, opts: TagOptionsWithSlot<K>, callback?: () => void): {
-    node: (HTMLElementTagNameMap & SVGElementTagNameMap)[K];
-};
-declare type ExtractParams = any[];
-declare function create<T>(node: T, callback?: (...args: ExtractParams<T['input']['slot']>) => void): T;
-declare var vx: {
-    if(condition: IValue<boolean>, callback: () => void): void;
-    else(callback: () => void): void;
-    elif(condition: IValue<boolean>, callback: () => void): void;
-    for<T, K>(model: ListenableModel<K, T>, callback: (value: T, index: K) => void): void;
-    watch<T_1>(model: IValue<T_1>, callback: (value: T_1) => void): void;
-    nextTick(callback: () => void): void;
-};
-
-
-
-declare function text(text: string | IValue<string>): void;
-declare function debug(text: IValue<string>): void;
-declare function predefine<T>(slot: T | null | undefined, predefined: T): T;
-
-
-declare interface Options {
+declare interface FragmentOptions {
     "v:is"?: Record<string, IValue<any>>;
     return?: any;
     slot?: (node: Fragment, ...args: any[]) => void;
 }
 declare type AttrType<T> = IValue<T | string | null> | T | string | null | undefined;
-declare interface TagOptions<T> extends Options {
+declare interface TagOptions<T> extends FragmentOptions {
     "v:attr"?: {
         [K : string]:? AttrType<AcceptedTagsSpec[T]['attrs'][K]>;
     } & Record<string, AttrType<number | boolean>>;
@@ -1152,9 +1110,6 @@ declare interface TagOptions<T> extends Options {
 }
 
 
-declare function merge(main: Record<string, any>, ...targets: Record<string, any>[]): void;
-
-
 /**
  * Mark an object which can be destroyed
  * @class Destroyable
@@ -1342,10 +1297,10 @@ declare class Reactive<T> extends Destroyable {
      * @param onOn {function} on hide feedback
      */
     bindAlive(cond: IValue<boolean>, onOff?: () => void, onOn?: () => void): this;
-    init(): void;
+    init(): T['return'];
     applyOptions(input: T): void;
     applyOptionsNow(): void;
-    compose(input: T): void;
+    compose(input: T): T['return'];
     composeNow(): void;
     runFunctional<F>(f: F, ...args: Parameters<F>): ReturnType<F>;
     runOnDestroy(func: () => void): void;

package/lib/core/core.js

@@ -1,5 +1,5 @@
 import { Destroyable } from "./destroyable.js";
-import { wrongBinding } from "./errors";
+import { notOverwritten, wrongBinding } from "./errors";
 import { Expression } from "../value/expression";
 import { Reference } from "../value/reference";
 import { Pointer } from "../value/pointer";
@@ -204,7 +204,7 @@ export class Reactive extends Destroyable {
     }
     init() {
         this.applyOptions(this.input);
-        this.compose(this.input);
+        return this.compose(this.input);
     }
     applyOptions(input) {
         // empty
@@ -213,7 +213,7 @@ export class Reactive extends Destroyable {
         this.applyOptions(this.input);
     }
     compose(input) {
-        // empty
+        throw notOverwritten();
     }
     composeNow() {
         this.compose(this.input);

package/lib/index.js

@@ -1,12 +1,12 @@
 import { Destroyable } from "./core/destroyable";
-import { Reactive } from "./core/core";
+import { current, Reactive } from "./core/core";
 import { IValue } from "./core/ivalue";
 import { ArrayModel } from "./models/array-model";
 import { Listener } from "./models/listener";
 import { MapModel } from "./models/map-model";
 import { ObjectModel } from "./models/object-model";
 import { SetModel } from "./models/set-model";
-import { App, AppNode } from "./node/app";
+import { App, AppNode, Portal } from "./node/app";
 import { Component, Extension, Fragment, INode, Tag } from "./node/node";
 import { Expression } from "./value/expression";
 import { Mirror } from "./value/mirror";
@@ -18,5 +18,6 @@ import { MapView } from "./views/map-view";
 import { ObjectView } from "./views/object-view";
 import { SetView } from "./views/set-view";
 import { Binding } from "./binding/binding";
-import * as libV from "./v/index";
-export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Expression, Binding, Reactive, libV };
+import { userError } from "./core/errors";
+import { Watch } from "./node/watch";
+export { Destroyable, IValue, Reference, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Portal, Expression, Binding, Reactive, Watch, userError, current, };

package/lib/models/array-model.js

@@ -19,15 +19,6 @@ export class ArrayModel extends Array {
             super.push(data[i]);
         }
     }
-    // proxy
-    proxy() {
-        return new Proxy(this, {
-            set(target, p, value) {
-                target.splice(parseInt(p), 1, value);
-                return true;
-            }
-        });
-    }
     /* Array members */
     /**
      * Gets the last item of array
@@ -208,6 +199,12 @@ export class ArrayModel extends Array {
         this.removeAt(this.indexOf(v));
         return this;
     }
+    replace(at, with_) {
+        this.listener.emitAdded(this[at], with_);
+        this.listener.emitRemoved(this[at], this[at]);
+        this[at] = with_;
+        return this;
+    }
     enableReactivity() {
         this.listener.enableReactivity();
     }

package/lib/models/object-model.js

@@ -56,6 +56,9 @@ export class ObjectModel extends Object {
         this.listener.emitAdded(key, this.container[key]);
         return this;
     }
+    get values() {
+        return this.container;
+    }
     /**
      * Deletes an object property
      * @param key {string} property name
@@ -66,23 +69,6 @@ export class ObjectModel extends Object {
             delete this.container[key];
         }
     }
-    proxy() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const ts = this;
-        return new Proxy(this.container, {
-            get(target, p) {
-                return ts.get(p);
-            },
-            set(target, p, value) {
-                ts.set(p, value);
-                return true;
-            },
-            deleteProperty(target, p) {
-                ts.delete(p);
-                return true;
-            }
-        });
-    }
     enableReactivity() {
         this.listener.enableReactivity();
     }

package/lib/node/node.js

@@ -70,11 +70,11 @@ export class Fragment extends Reactive {
         $.preinit(app, parent);
     }
     init() {
-        super.init();
+        const ret = super.init();
         this.ready();
+        return ret;
     }
     compose(input) {
-        super.compose(input);
         input.slot && input.slot(this);
     }
     /** To be overloaded: ready event handler */
@@ -182,7 +182,7 @@ export class Fragment extends Reactive {
         node.preinit($.app, this);
         node.input.slot = callback || node.input.slot;
         this.pushNode(node);
-        node.init();
+        return node.init();
     }
     /**
      * Defines an if node
@@ -677,6 +677,9 @@ export class Extension extends INode {
             throw userError("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
         }
     }
+    extend(options) {
+        this.applyOptions(options);
+    }
     $destroy() {
         super.$destroy();
     }

package/lib/views/object-view.js

@@ -7,7 +7,7 @@ import { BaseView } from "./base-view";
 export class ObjectView extends BaseView {
     compose(input) {
         super.compose(input);
-        const obj = input.model.proxy();
+        const obj = input.model.values;
         for (const key in obj) {
             this.createChild(input, key, obj[key]);
         }

package/lib-node/binding/attribute.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeBinding = void 0;
+const binding_1 = require("./binding");
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+class AttributeBinding extends binding_1.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(value);
+        this.init((value) => {
+            if (value) {
+                if (typeof value === 'boolean') {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, `${value}`);
+                }
+            }
+            else {
+                node.node.removeAttribute(name);
+            }
+        });
+        this.$seal();
+    }
+}
+exports.AttributeBinding = AttributeBinding;

package/lib-node/binding/binding.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Binding = void 0;
+const destroyable_1 = require("../core/destroyable");
+/**
+ * Describe a common binding logic
+ * @class Binding
+ * @extends Destroyable
+ */
+class Binding extends destroyable_1.Destroyable {
+    /**
+     * Constructs a common binding logic
+     * @param value {IValue} the value to bind
+     */
+    constructor(value) {
+        super();
+        this.binding = value;
+        this.$seal();
+    }
+    init(bounded) {
+        this.func = bounded;
+        this.binding.$on(this.func);
+        this.func(this.binding.$);
+    }
+    /**
+     * Just clear bindings
+     */
+    $destroy() {
+        this.binding.$off(this.func);
+        super.$destroy();
+    }
+}
+exports.Binding = Binding;

package/lib-node/binding/class.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicalClassBinding = exports.StaticClassBinding = void 0;
+const binding_1 = require("./binding");
+function addClass(node, cl) {
+    node.node.classList.add(cl);
+}
+function removeClass(node, cl) {
+    node.node.classList.remove(cl);
+}
+class StaticClassBinding extends binding_1.Binding {
+    constructor(node, name, value) {
+        super(value);
+        this.current = false;
+        this.init((value) => {
+            if (value !== this.current) {
+                if (value) {
+                    addClass(node, name);
+                }
+                else {
+                    removeClass(node, name);
+                }
+                this.current = value;
+            }
+        });
+        this.$seal();
+    }
+}
+exports.StaticClassBinding = StaticClassBinding;
+class DynamicalClassBinding extends binding_1.Binding {
+    constructor(node, value) {
+        super(value);
+        this.current = "";
+        this.init((value) => {
+            if (this.current != value) {
+                if (this.current.length) {
+                    removeClass(node, this.current);
+                }
+                if (value.length) {
+                    addClass(node, value);
+                }
+                this.current = value;
+            }
+        });
+        this.$seal();
+    }
+}
+exports.DynamicalClassBinding = DynamicalClassBinding;

package/lib-node/binding/style.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleBinding = void 0;
+const binding_1 = require("./binding");
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+class StyleBinding extends binding_1.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(value);
+        this.init((value) => {
+            if (node.node instanceof HTMLElement) {
+                node.node.style.setProperty(name, value);
+            }
+        });
+        this.$seal();
+    }
+}
+exports.StyleBinding = StyleBinding;