vasille 2.2.2 → 2.3.0

package/README.md

@@ -1,4 +1,4 @@
-# Vasille
+# Vasille Core Library
 
 ![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/logo.png)
 
@@ -10,10 +10,10 @@
 ## Table of content
 
 * [Installation](#installation)
+* [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
 * [How FAST is Vasille](#how-fast-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [How to use Vasille](#how-to-use-vasille)
 * [Best Practices](#best-practices)
 
 
@@ -23,31 +23,28 @@
 
 ```
 npm install vasille --save
+npm install vasille-less --save
+npm install vasille-magic --save
 ```
 
-### How to create the first project step by step
+## How to use Vasille
 
-[Read instruction here](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/GetStarted.md).
+There are several modes to use Vasille.
 
-### CDN
+### Documentation for beginners (how to create the first project step by step):
+* [`Vasille Core Library` - the hard way - `low-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/GetStarted.md)
+* [`Vasille Less Library` - perfect for me - `high-level`](https://gitlab.com/vasille-js/vasille-less/-/blob/v2/pages/GetStarted.md)
+* [`Vasille Magic` - perfect for you - `highest-level`](https://gitlab.com/vasille-js/vcc/-/blob/master/pages/GetStarted.md)
 
-```html
-ES2015 version
-<script src="https://unpkg.com/vasille"></script>
-ES5 Compatible version
-<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
-```
+### Full documentation:
+* [`Vasille Core Library API`- write anything - `low-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Vasille-Core-Library-API.md)
+* [`Vasille Less Library API`- write less do more - `high-level`](https://gitlab.com/vasille-js/vasille-less/-/blob/v2/pages/Vasille-Less-Library-API.md)
+* [`Vasille Magic API`- compiler writes for you - `highest-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
 
 ### Getting ready be example
-* [JavaScript Example](https://gitlab.com/vasille-js/learning/vasille-js-example)
 * [TypeScript Example](https://gitlab.com/vasille-js/learning/vasille-ts-example)
-* [Flow.js Example](https://gitlab.com/vasille-js/learning/vasille-flow-js-example)
-
-### Flow.js typedef
-Add the next line to `[libs]` section in your `.flowconfig` file
-```
-node_modules/vasille/flow-typed
-```
+* [JavaScript Example (Vasille Magic not supported)](https://gitlab.com/vasille-js/learning/vasille-js-example)
+* [Flow.js Example (Vasille Magic not supported)](https://gitlab.com/vasille-js/learning/vasille-flow-js-example)
 
 <hr>
 
@@ -168,23 +165,32 @@ which will be reflected into a browser DOM and keep up to date it.
 * `DebugNode` reflects a `Comment` node, useful for debug.
 * `Watch` recompose children nodes on model value change.
 * `RepeatNode` creates multiples children nodes using the same code multiple time.
-* `Repeater` repeat slot content `n` times.
 * `BaseView` represent a view in context of MVC (Model-View-Controller).
 * `ObjectView` repeats slot content for each value of `ObjectModel`.
 * `MapView` repeats slot content for each `MapModel` value.
 * `SetView` repeats slot content for each `SetModel` value.
 * `ArrayView` repeats slot content for each `ArrayModel` value respecting its order.
-* `InterceptorNode` is used to send an event/signal from one child to other 
-without manually creating of interceptors.
 
-## How to use Vasille
+<hr>
+
+### CDN
 
-There are several modes, and most of it are WIP (Work In Progress):
-* [Object-Oriented Programming - Ready](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/OOP-API.md)
-* [Procedural Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Procedural-API.md)
-* [Template Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
+```html
+ES2015 version
+<script src="https://unpkg.com/vasille"></script>
+ES5 Compatible version
+<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
+```
+
+### Flow.js typedef
+Add the next lines to `[libs]` section in your `.flowconfig` file
+```
+node_modules/vasille/flow-typed
+node_modules/vasille-less/flow-typed
+node_modules/vasille-magic/flow-typed
+```
 
-## Best Practices
+## Best Practices applicable to Vasille Core Library
 
 * [Reactive Object Practice](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/reactive-object.ts)
 * [Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application.ts)

package/cdn/es2015.js

@@ -195,6 +195,9 @@ 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
@@ -205,23 +208,6 @@ 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();
     }
@@ -387,15 +373,6 @@ 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
@@ -576,6 +553,12 @@ 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();
     }
@@ -1464,7 +1447,7 @@ class Reactive extends Destroyable {
     }
     init() {
         this.applyOptions(this.input);
-        this.compose(this.input);
+        return this.compose(this.input);
     }
     applyOptions(input) {
         // empty
@@ -1473,7 +1456,7 @@ class Reactive extends Destroyable {
         this.applyOptions(this.input);
     }
     compose(input) {
-        // empty
+        throw notOverwritten();
     }
     composeNow() {
         this.compose(this.input);
@@ -1565,11 +1548,11 @@ 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 */
@@ -1677,7 +1660,7 @@ 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
@@ -2172,6 +2155,9 @@ 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();
     }
@@ -2847,7 +2833,7 @@ window.Watch = Watch;
 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/cdn/es5.js

@@ -400,6 +400,13 @@ var ObjectModel = /** @class */ (function (_super) {
         this.listener.emitAdded(key, this.container[key]);
         return this;
     };
+    Object.defineProperty(ObjectModel.prototype, "values", {
+        get: function () {
+            return this.container;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * Deletes an object property
      * @param key {string} property name
@@ -410,23 +417,6 @@ var ObjectModel = /** @class */ (function (_super) {
             delete this.container[key];
         }
     };
-    ObjectModel.prototype.proxy = function () {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        var ts = this;
-        return new Proxy(this.container, {
-            get: function (target, p) {
-                return ts.get(p);
-            },
-            set: function (target, p, value) {
-                ts.set(p, value);
-                return true;
-            },
-            deleteProperty: function (target, p) {
-                ts.delete(p);
-                return true;
-            }
-        });
-    };
     ObjectModel.prototype.enableReactivity = function () {
         this.listener.enableReactivity();
     };
@@ -610,15 +600,6 @@ var ArrayModel = /** @class */ (function (_super) {
         }
         return _this;
     }
-    // proxy
-    ArrayModel.prototype.proxy = function () {
-        return new Proxy(this, {
-            set: function (target, p, value) {
-                target.splice(parseInt(p), 1, value);
-                return true;
-            }
-        });
-    };
     Object.defineProperty(ArrayModel.prototype, "last", {
         /* Array members */
         /**
@@ -817,6 +798,12 @@ var ArrayModel = /** @class */ (function (_super) {
         this.removeAt(this.indexOf(v));
         return this;
     };
+    ArrayModel.prototype.replace = function (at, with_) {
+        this.listener.emitAdded(this[at], with_);
+        this.listener.emitRemoved(this[at], this[at]);
+        this[at] = with_;
+        return this;
+    };
     ArrayModel.prototype.enableReactivity = function () {
         this.listener.enableReactivity();
     };
@@ -1817,7 +1804,7 @@ var Reactive = /** @class */ (function (_super) {
     };
     Reactive.prototype.init = function () {
         this.applyOptions(this.input);
-        this.compose(this.input);
+        return this.compose(this.input);
     };
     Reactive.prototype.applyOptions = function (input) {
         // empty
@@ -1826,7 +1813,7 @@ var Reactive = /** @class */ (function (_super) {
         this.applyOptions(this.input);
     };
     Reactive.prototype.compose = function (input) {
-        // empty
+        throw notOverwritten();
     };
     Reactive.prototype.composeNow = function () {
         this.compose(this.input);
@@ -1935,11 +1922,11 @@ var Fragment = /** @class */ (function (_super) {
         $.preinit(app, parent);
     };
     Fragment.prototype.init = function () {
-        _super.prototype.init.call(this);
+        var ret = _super.prototype.init.call(this);
         this.ready();
+        return ret;
     };
     Fragment.prototype.compose = function (input) {
-        _super.prototype.compose.call(this, input);
         input.slot && input.slot(this);
     };
     /** To be overloaded: ready event handler */
@@ -2047,7 +2034,7 @@ var Fragment = /** @class */ (function (_super) {
         node.preinit($.app, this);
         node.input.slot = callback || node.input.slot;
         this.pushNode(node);
-        node.init();
+        return node.init();
     };
     /**
      * Defines an if node
@@ -2576,6 +2563,9 @@ var Extension = /** @class */ (function (_super) {
             throw userError("A extension node can be encapsulated only in a tag/extension/component", "virtual-dom");
         }
     };
+    Extension.prototype.extend = function (options) {
+        this.applyOptions(options);
+    };
     Extension.prototype.$destroy = function () {
         _super.prototype.$destroy.call(this);
     };
@@ -3355,7 +3345,7 @@ var ObjectView = /** @class */ (function (_super) {
     }
     ObjectView.prototype.compose = function (input) {
         _super.prototype.compose.call(this, input);
-        var obj = input.model.proxy();
+        var obj = input.model.values;
         for (var key in obj) {
             this.createChild(input, key, obj[key]);
         }

package/flow-typed/vasille.js

@@ -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;
 }
 /**
@@ -1130,13 +1131,13 @@ 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>>;
@@ -1342,10 +1343,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

@@ -6,7 +6,7 @@ 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,4 @@ 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 };
+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 };

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/package.json

@@ -3,7 +3,7 @@
   "description": "Vasille - Safe. Fast. Powerful.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "exports": {
     "import": "./lib/index.js",
     "browser": "./lib/index.js"

package/types/core/core.d.ts

@@ -4,7 +4,7 @@ import { Expression, KindOfIValue } from "../value/expression";
 import { Pointer } from "../value/pointer";
 import { Mirror } from "../value/mirror";
 import { IModel } from "../models/model";
-import { Options } from "../functional/options";
+import { FragmentOptions } from "../functional/options";
 export declare let current: Reactive | null;
 /**
  * Private stuff of a reactive object
@@ -55,7 +55,7 @@ export declare class ReactivePrivate extends Destroyable {
  * @class Reactive
  * @extends Destroyable
  */
-export declare class Reactive<T extends Options = Options> extends Destroyable {
+export declare class Reactive<T extends FragmentOptions = FragmentOptions> extends Destroyable {
     /**
      * Private stuff
      * @protected
@@ -121,10 +121,10 @@ export declare class Reactive<T extends Options = Options> extends Destroyable {
      * @param onOn {function} on hide feedback
      */
     bindAlive(cond: IValue<boolean>, onOff?: () => void, onOn?: () => void): this;
-    init(): void;
+    init(): T['return'];
     protected applyOptions(input: T): void;
     protected applyOptionsNow(): void;
-    protected compose(input: T): void;
+    protected compose(input: T): T['return'];
     protected composeNow(): void;
     runFunctional<F extends (...args: any) => any>(f: F, ...args: Parameters<F>): ReturnType<F>;
     runOnDestroy(func: () => void): void;

package/types/functional/options.d.ts

@@ -1,13 +1,13 @@
 import type { IValue } from "../core/ivalue";
 import { AcceptedTagsMap, AcceptedTagsSpec } from "../spec/react";
 import type { Fragment } from "../node/node";
-export interface Options {
+export interface FragmentOptions {
     "v:is"?: Record<string, IValue<any>>;
     return?: any;
     slot?: (node: Fragment, ...args: any[]) => void;
 }
 export declare type AttrType<T> = IValue<T | string | null> | T | string | null | undefined;
-export interface TagOptions<T extends keyof AcceptedTagsMap> extends Options {
+export interface TagOptions<T extends keyof AcceptedTagsMap> extends FragmentOptions {
     "v:attr"?: {
         [K in keyof AcceptedTagsSpec[T]['attrs']]?: AttrType<AcceptedTagsSpec[T]['attrs'][K]>;
     } & Record<string, AttrType<number | boolean>>;

package/types/index.d.ts

@@ -6,7 +6,7 @@ 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, AppOptions, Portal } from "./node/app";
 import { Component, Extension, Fragment, INode, Tag } from "./node/node";
 import { Expression } from "./value/expression";
 import { Mirror } from "./value/mirror";
@@ -18,6 +18,5 @@ import { MapView } from "./views/map-view";
 import { ObjectView } from "./views/object-view";
 import { SetView } from "./views/set-view";
 import { Binding } from "./binding/binding";
-import { Options, TagOptions } from "./functional/options";
-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, Options, TagOptions, libV };
+import { FragmentOptions, TagOptions } from "./functional/options";
+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, FragmentOptions, TagOptions, AppOptions };

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

@@ -11,7 +11,6 @@ export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T
      * @param data {Array} input data
      */
     constructor(data?: Array<T>);
-    proxy(): ArrayModel<T>;
     /**
      * Gets the last item of array
      * @return {*} the last item of array
@@ -99,6 +98,7 @@ export declare class ArrayModel<T> extends Array<T> implements ListenableModel<T
      * @return {this}
      */
     removeOne(v: T): this;
+    replace(at: number, with_: T): this;
     enableReactivity(): void;
     disableReactivity(): void;
 }

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

@@ -27,12 +27,12 @@ export declare class ObjectModel<T> extends Object implements ListenableModel<st
      * @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;
 }

package/types/node/node.d.ts

@@ -1,7 +1,7 @@
 import { Reactive, ReactivePrivate } from "../core/core";
 import { IValue } from "../core/ivalue";
 import type { AppNode } from "./app";
-import { Options, TagOptions } from "../functional/options";
+import { FragmentOptions, TagOptions } from "../functional/options";
 import { AcceptedTagsMap } from "../spec/react";
 /**
  * Represents a Vasille.js node
@@ -45,7 +45,7 @@ export declare class FragmentPrivate extends ReactivePrivate {
  * This class is symbolic
  * @extends Reactive
  */
-export declare class Fragment<T extends Options = Options> extends Reactive {
+export declare class Fragment<T extends FragmentOptions = FragmentOptions> extends Reactive {
     /**
      * Private part
      * @protected
@@ -74,7 +74,7 @@ export declare class Fragment<T extends Options = Options> extends Reactive {
      * @param data {*} additional data
      */
     preinit(app: AppNode, parent: Fragment, data?: unknown): void;
-    init(): void;
+    init(): T['return'];
     protected compose(input: T): void;
     /** To be overloaded: ready event handler */
     ready(): void;
@@ -119,7 +119,7 @@ export declare class Fragment<T extends Options = Options> extends Reactive {
      * @param node {Fragment} vasille element to insert
      * @param callback {function($ : *)}
      */
-    create<T extends Fragment>(node: T, callback?: T['input']['slot']): void;
+    create<T extends Fragment>(node: T, callback?: T['input']['slot']): T['input']['return'];
     /**
      * Defines an if node
      * @param cond {IValue} condition
@@ -317,6 +317,7 @@ export declare class Tag<K extends keyof AcceptedTagsMap> extends INode<TagOptio
  */
 export declare class Extension<T extends TagOptions<any> = TagOptions<any>> extends INode<T> {
     preinit(app: AppNode, parent: Fragment): void;
+    extend(options: T): void;
     $destroy(): void;
 }
 /**

package/types/node/watch.d.ts

@@ -1,7 +1,7 @@
 import { Fragment } from "./node";
 import { IValue } from "../core/ivalue";
-import { Options } from "../functional/options";
-interface WatchOptions<T> extends Options {
+import { FragmentOptions } from "../functional/options";
+interface WatchOptions<T> extends FragmentOptions {
     model: IValue<T>;
     slot?: (node: Fragment, value: T) => void;
 }

package/types/views/repeat-node.d.ts

@@ -1,5 +1,5 @@
 import { Fragment, INodePrivate } from "../node/node";
-import { Options } from "../functional/options";
+import { FragmentOptions } from "../functional/options";
 /**
  * Private part of repeat node
  * @class RepeatNodePrivate
@@ -14,7 +14,7 @@ export declare class RepeatNodePrivate<IdT> extends INodePrivate {
     constructor();
     $destroy(): void;
 }
-export interface RNO<T, IdT> extends Options {
+export interface RNO<T, IdT> extends FragmentOptions {
     slot?: (node: Fragment, value: T, index: IdT) => void;
 }
 /**