vasille 2.0.0 → 2.0.1

package/README.md

@@ -1,132 +1,166 @@
-# Vasille.js
+# Vasille
 
-|Intro|
-|:---:|
-|![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/logo.png)|
-|Vasille.js is **very fast** javascript frontend framework, it is not using virtual DOM, it updates DOM directly using an own reactive mechanism.|
+![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/logo.png)
 
-This framework is in active development, if you want to contribute contact
-the maintainer: Lelițac Vasile (lixcode@vivaldi.net).
+`Vasille` core library is frontend solution for `safe`, `fast` & `powerful` applications.
 
-### Table of content
+## Table of content
 [[_TOC_]]
 
 
-## Project roadmap
+<hr>
 
-| Feature                                     | Deadline     | Status     |
-|---------------------------------------------|--------------|------------|
-| Initial Version                             | 01.07.2021   | Ready      |
-| Patch to 1.1                                | 02.12.2021   | Ready      |
-| Describe API                                | 02.14.2021   | Ready      |
-| Describe JS API                             | 02.15.2021   | Ready      |
-| Describe VCC architecture                   | 02.22.2021   | Waiting    |
-| Code and debug VCC                          | 03.xx.2021   |            |
-| First enterprise ready version              | xx.xx.2021   |            |
-| Boost by HTML templates                     | xx.xx.2021   |            |
+## Installation
 
-## API documentation
+```
+npm install vasille --save
+```
+
+### Getting ready be example
+* JavaScript Example
+* TypeScript Example
+* Flow.js Example
+
+### Flow.js typedef
+Add the next line to `[libs]` section in your `.flowconfig` file
+```
+node_modules/vasille/flow-typed
+```
+
+<hr>
+
+## How SAFE is Vasille
+
+The safe of your application is ensured by 
+* `100%` coverage of `vasille` code by unit tests.
+  Each function, each branch are working as designed.
+* `strong typing` makes your javascript/typescript code safe as C++ code.
+All entities of `vasille` core library are strong typed, including:
+  * data fields & properties.
+  * computed properties (function parameters & result).
+  * methods.
+  * events (defined handlers & event emit).
+  * DOM events & DOM operation (attributing, styling, etc.).
+  * slots of component.
+  * references to children.
+* What you write is what you get - there is no hidden operations, you can control everything.
+* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
+
+## How FAST is Vasille
+
+The test project was coded using the next frameworks:
+* Angular /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/angular/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/angular/).
+* React /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/react/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/react/).
+* Vue 2 /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/vue-2/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vue-2/).
+* Vue 3 /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/vue-3/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vue-3/).
+* Svelte /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/svelte/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/svelte/).
+* Vasille /
+  [Try Initial](https://vasille-js.gitlab.io/project-x32/vasille-js/) /
+  [Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vasille-js/).
+
+The result of test are demonstrated in figures 1 & 2. 
+The test result are measured in FPS (frames per second), which is calculated as `1000 / ft`,
+where `ft` is an average frame time in ms of 20 frames. All values are absolute. Higher is better.
+
+The initial version is updating all the page content in each frame. 
+The page reactivity connections are very complex, and we get poor results in Angular, React, Vue & Svelte.
+
+The optimized version disables the offscreen & non-actual content, which simplifies the
+reactivity complexity in time. Angular & Svelte give result similar to Vasille.
+React & Vue continue to be slow in the beginning of test.
+
+**Conclusion:** The reactivity system of Vasille is very fast
+and its complexity is not slowing down the application.
+
+<hr>
 
+&nbsp;
+
+Figure 1: Initial version
+
+![results 1](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/scores-wo.png)
+
+<hr>
+
+&nbsp;
+
+Figure 2: Optimized version
+
+![results 2](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/scores-o.png)
+
+<hr>
+
+## How POWERFUL is Vasille
+
+The secret of `Vasille` is a good task decomposition. The core library is composed of
+an effective reactive module and a DOM generation engine based on it.
+
+<hr>
+
+### Reactivity Module
+
+Reactivity module is used to create a model of data. It can contain self-updating values,
+forward-only shared data. Reactivity of objects/fields can be disabled/enabled manually.
+
+![Reactivity Module](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/reactive.png)
+
+* `Destroyable` is an entity which has a custom destructor.
+* `IValue<T>` is a common interface for any value container, with next members:
+  * `get $` gets the encapsulated value.
+  * `set $` manually update the encapsulated value, if enabled triggers updating of all linked data.
+  * `disable` disables the reactivity.
+  * `enable` enables the reactivity and triggers updating of all linked data.
+* `Reference<T>` contains a value of type `T`.
+* `Mirror<T>` syncs self value with another `IValue` container, can be used to share a value forward-only.
+* `Pointer<T>` same as `Mirror`, but it can switch between `IValue` target anytime.
+* `Expression<ReturnType, Args...>` is a self-updating value.
+* `Reactive` is a reactive object which can have multiple reactive fields, emit/receive events/signals.
+
+<hr>
+
+### DOM Generation Engine
+
+DOM Generation Engine is used to describe a virtual DOM of reactive fragments, 
+which will be reflected into a browser DOM and keep up to date it.
+
+![DOM Generation Engine](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/nodes.png)
+
+* `Fragment` describes a virtual DOM node, which has siblings, children, parent & slots.
+* `TextNode` reflects a `Text` node.
+* `INode` reflects a `Element` node.
+* `Tag` reflect a self created `Element` node.
+* `Extension` reflects an existing `Element` node.
+* `Component` reflects a `Element` node created by a `Tag` child.
+* `AppNode` is root of a `Vasille` application, can be used to create applications in application.
+* `App` is root of a definitive `Vasille` application.
+* `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.
+
+## API documentation
 
-Currently, the [API](pages/API.md) is in development, 
-but the [JavaScript API](pages/JavaScriptAPI.md)
-is available.
-
-* [API Documentation](https://gitlab.com/vasille-js/vasille-js/-/blob/master/pages/API.md)
-* [JS API Documentation](https://gitlab.com/vasille-js/vasille-js/-/blob/master/pages/JavaScriptAPI.md)
-
-## Tools in development
-
-* **Vasille.js** is a component based framework without any dependencies
-* **Reactive Reference** is a build in reactivity library of Vasille.js
-* **Vasille Language** is a user-friendy language to describe Vasille.js 
-  components
-* **VCC** (*Vasille Component Compiler*) translate code from Vasille 
-  language to high-effective Vasille.js components performing a 
-  lot of performance improvements.
-  
-## How it works
-
-To test the speed of frameworks (inclusive Vasille JS) I had created a map, 
-which can be zoomed up to 32x, this project was called "Project x32".
-
-On the next image is demonstrated the difference between 1x zoom (on the 
-left side) and x32 zoom (on the right side):
-![x1-x32](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/x1-x32.png)
-
-There are 100 random squares over each brick, on small zoom the squares 
-are hidden to optimize browser performance, because the page is composed 
-of over than 23 000 nodes. The random squares added one by one to not 
-freeze zoom animation. The zoom animation duration is 300ms, and it 
-must consist of 20 frames on 60Hz screen.
-
-The project x32 was coded using the next frameworks:
-* Angular.
-* React.
-* Vue 2.
-* Vue 3.
-* Svelte.
-* Vasille JS.
-
-### Measuring zoom performance
-
-After zooming in each production build and measuring performance 
-I had got the next results:
-![results 1](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/scores-wo.png)
-
-The Vue & React builds are the slowest: the average frame time of:
-* React build is 1263.48ms.
-* Vue 3 build is 971.80ms.
-* Vue 2 build is 823.56ms.
-
-There is the same graphic in logarithmic scale:
-![results 1](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/scores-wo-log.png)
-
-Let's analyze the Angular, Svelte & Vasille JS results:
-* Angular & Svelte has a similar result, the average time of frame 
-  is 53.94ms for Angular & 53.98 for Svelte.
-* The Vasille JS is the unique framework which support the zoom 
-  animation at 60fps without any additional optimization.  
-  Average time of frame is 3.22ms.
-
-#### Try it:
-* [Project x32 powered by Angular](https://vasille-js.gitlab.io/project-x32/angular/)
-* [Project x32 powered by React](https://vasille-js.gitlab.io/project-x32/react/)
-* [Project x32 powered by Vue 2](https://vasille-js.gitlab.io/project-x32/vue-2/)
-* [Project x32 powered by Vue 3](https://vasille-js.gitlab.io/project-x32/vue-3/)
-* [Project x32 powered by Svelte](https://vasille-js.gitlab.io/project-x32/svelte/)
-* [Project x32 powered by Vasille JS](https://vasille-js.gitlab.io/project-x32/vasille-js/)
-
-### Let's optimize Project x32
-
-To optimize the Project x32 realizations, the optimization consist 
-of removing the off-screen components, that change will decrease 
-the number of components. So let's zoom each optimized build 
-from x1 to x32.
-
-Tests results:
-![results 2](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/scores-o.png)
-
-After X8 the number of onscreen components is very small, the optimization has a good result.
-The Reactive frameworks are the slowest before and after optimization.
-
-There is the same graphic in logarithmic scale:
-![results 2](https://gitlab.com/vasille-js/vasille-js/-/raw/master/img/scores-o-log.png)
-
-After optimization Angular, Svelte & Vasille JS has very good 
-results close to Vasille JS before optimization.
-
-#### Try it:
-* [Optimized Project x32 powered by Angular](https://vasille-js.gitlab.io/project-x32-if/angular/)
-* [Optimized Project x32 powered by React](https://vasille-js.gitlab.io/project-x32-if/react/)
-* [Optimized Project x32 powered by Vue 2](https://vasille-js.gitlab.io/project-x32-if/vue-2/)
-* [Optimized Project x32 powered by Vue 3](https://vasille-js.gitlab.io/project-x32-if/vue-3/)
-* [Optimized Project x32 powered by Svelte](https://vasille-js.gitlab.io/project-x32-if/svelte/)
-* [Optimized Project x32 powered by Vasille JS](https://vasille-js.gitlab.io/project-x32-if/vasille-js/)
-
-## Conclusions
-The main goal of Vasille JS is not to be the fastest JavaScript framework, 
-but to ensure excellent performance without any optimizations.
+There are several API, and most of it are WIP (Work In Progress):
+* [OOP API - Ready](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/OOP-API.md)
+* [Procedural API - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Procedural-API.md)
+* [Final API - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
 
 ## Questions
 

package/flow-typed/vasille.js

@@ -87,48 +87,48 @@ declare module "vasille" {
         $bind<T, T1> (
             func : (a1 : T1) => T,
             v1: IValue<T1>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2> (
             func : (a1 : T1, a2 : T2) => T,
             v1: IValue<T1>, v2: IValue<T2>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3> (
             func : (a1 : T1, a2 : T2, a3 : T3) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4, T5> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>, v5: IValue<T5>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4, T5, T6> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5, a6 : T6) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4, T5, T6, T7> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5, a6 : T6, a7 : T7) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>,
             v7: IValue<T7>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4, T5, T6, T7, T8> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5, a6 : T6, a7 : T7, a8 : T8) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>,
             v7: IValue<T7>, v8: IValue<T8>,
-        ) : void;
+        ) : IValue<T>;
         $bind<T, T1, T2, T3, T4, T5, T6, T7, T8, T9> (
             func : (a1 : T1, a2 : T2, a3 : T3, a4 : T4, a5 : T5, a6 : T6, a7 : T7, a8 : T8, a9 : T9) => T,
             v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>,
             v4: IValue<T4>, v5: IValue<T5>, v6: IValue<T6>,
             v7: IValue<T7>, v8: IValue<T8>, v9: IValue<T9>,
-        ) : void;
+        ) : IValue<T>;
 
         $enable () : void;
         $disable () : void;
@@ -324,7 +324,8 @@ declare module "vasille" {
         ) : this;
         $create<T> (
             node : T,
-            callback : ($ : T) => void
+            callback : ($ : T) => void,
+            callback1 : ($ : T) => void
         ) : this;
         $if (
             cond : IValue<boolean>,
@@ -598,9 +599,9 @@ declare module "vasille" {
 
         $preinit (app : AppNode, parent : Fragment, text : ?IValue<string>) : void;
     }
-    declare export class Watch extends Fragment {
-        slot : Slot<>;
-        model : IValue<any>;
+    declare export class Watch<T> extends Fragment {
+        slot : Slot<T>;
+        model : IValue<T>;
 
         constructor () : void;
 

package/lib/node/interceptor.js

@@ -1,4 +1,4 @@
-import { Extension } from "./node";
+import { Fragment } from "./node";
 import { Destroyable } from "../core/destroyable";
 import { Signal } from "../core/signal";
 import { Slot } from "../core/slot";
@@ -63,7 +63,7 @@ export class Interceptor extends Destroyable {
  * @class InterceptorNode
  * @extends Extension
  */
-export class InterceptorNode extends Extension {
+export class InterceptorNode extends Fragment {
     constructor() {
         super(...arguments);
         /**

package/lib/node/node.js

@@ -204,14 +204,18 @@ export class Fragment extends Reactive {
      * Defines a custom element
      * @param node {Fragment} vasille element to insert
      * @param callback {function($ : *)}
+     * @param callback1 {function($ : *)}
      */
-    $create(node, callback) {
+    $create(node, callback, callback1) {
         const $ = this.$;
         node.$.parent = this;
         node.$preinit($.app, this);
         if (callback) {
             callback(node);
         }
+        if (callback1) {
+            callback1(node);
+        }
         this.$$pushNode(node);
         node.$init().$ready();
         return this;
@@ -947,6 +951,19 @@ export class Tag extends INode {
     $$findFirstChild() {
         return this.$.unmounted ? null : 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) {
         const $ = this.$;
         $.app.$run.appendChild($.node, node);
@@ -1054,7 +1071,7 @@ export class SwitchedNodePrivate extends INodePrivate {
 /**
  * Defines a node witch can switch its children conditionally
  */
-class SwitchedNode extends Extension {
+class SwitchedNode extends Fragment {
     /**
      * Constructs a switch node and define a sync function
      */

package/lib/node/watch.js

@@ -13,15 +13,15 @@ export class Watch extends Fragment {
         this.$seal();
     }
     $createWatchers() {
-        this.$watch(() => {
+        this.$watch((value) => {
             this.$children.forEach(child => {
                 child.$destroy();
             });
             this.$children.splice(0);
-            this.slot.release(this);
+            this.slot.release(this, value);
         }, this.model);
     }
     $compose() {
-        this.slot.release(this);
+        this.slot.release(this, this.model.$);
     }
 }

package/lib/views/array-view.js

@@ -8,15 +8,14 @@ import { ArrayModel } from "../models/array-model";
 export class ArrayView extends BaseView {
     constructor() {
         super();
-        this.model = this.$ref(new ArrayModel);
+        this.model = new ArrayModel;
         this.$seal();
     }
     createChild(id, item, before) {
         super.createChild(item, item, before || this.$.nodes.get(id));
     }
     $ready() {
-        const arr = this.model.$;
-        arr.forEach(item => {
+        this.model.forEach(item => {
             this.createChild(item, item);
         });
         super.$ready();

package/lib/views/base-view.js

@@ -33,8 +33,8 @@ export class BaseView extends RepeatNode {
      */
     $ready() {
         const $ = this.$;
-        this.model.$.listener.onAdd($.addHandler);
-        this.model.$.listener.onRemove($.removeHandler);
+        this.model.listener.onAdd($.addHandler);
+        this.model.listener.onRemove($.removeHandler);
         super.$ready();
     }
     /**
@@ -42,8 +42,8 @@ export class BaseView extends RepeatNode {
      */
     $destroy() {
         const $ = this.$;
-        this.model.$.listener.offAdd($.addHandler);
-        this.model.$.listener.offRemove($.removeHandler);
+        this.model.listener.offAdd($.addHandler);
+        this.model.listener.offRemove($.removeHandler);
         super.$destroy();
     }
 }

package/lib/views/map-view.js

@@ -8,10 +8,10 @@ import { MapModel } from "../models/map-model";
 export class MapView extends BaseView {
     constructor() {
         super();
-        this.model = this.$ref(new MapModel);
+        this.model = new MapModel;
     }
     $ready() {
-        const map = this.model.$;
+        const map = this.model;
         map.forEach((value, key) => {
             this.createChild(key, value);
         });

package/lib/views/object-view.js

@@ -8,10 +8,10 @@ import { ObjectModel } from "../models/object-model";
 export class ObjectView extends BaseView {
     constructor() {
         super();
-        this.model = this.$ref(new ObjectModel);
+        this.model = new ObjectModel;
     }
     $ready() {
-        const obj = this.model.$;
+        const obj = this.model;
         for (const key in obj) {
             this.createChild(key, obj[key]);
         }

package/lib/views/set-view.js

@@ -8,11 +8,11 @@ import { SetModel } from "../models/set-model";
 export class SetView extends BaseView {
     constructor() {
         super();
-        this.model = this.$ref(new SetModel());
+        this.model = new SetModel();
     }
     $ready() {
         const $ = this.$;
-        const set = this.model.$;
+        const set = this.model;
         set.forEach(item => {
             $.app.$run.callCallback(() => {
                 this.createChild(item, item);

package/package.json

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

package/types/node/interceptor.d.ts

@@ -1,4 +1,4 @@
-import { Extension } from "./node";
+import { Fragment } from "./node";
 import { Destroyable } from "../core/destroyable";
 import { Signal } from "../core/signal";
 import { Slot } from "../core/slot";
@@ -35,7 +35,7 @@ export declare class Interceptor<t1 = void, t2 = void, t3 = void, t4 = void, t5
  * @class InterceptorNode
  * @extends Extension
  */
-export declare class InterceptorNode<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> extends Extension {
+export declare class InterceptorNode<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> extends Fragment {
     /**
      * Internal interceptor
      * @type Interceptor

package/types/node/node.d.ts

@@ -127,8 +127,9 @@ export declare class Fragment extends Reactive {
      * Defines a custom element
      * @param node {Fragment} vasille element to insert
      * @param callback {function($ : *)}
+     * @param callback1 {function($ : *)}
      */
-    $create<T extends Fragment>(node: T, callback?: ($: T) => void): this;
+    $create<T extends Fragment>(node: T, callback?: ($: T) => void, callback1?: ($: T) => void): this;
     /**
      * Defines an if node
      * @param cond {IValue} condition
@@ -636,6 +637,7 @@ export declare class Tag extends INode {
     constructor();
     $preinit(app: AppNode, parent: Fragment, tagName?: string): void;
     protected $$findFirstChild(): Node;
+    $$insertAdjacent(node: Node): void;
     $$appendNode(node: Node): void;
     /**
      * Mount/Unmount a node

package/types/node/watch.d.ts

@@ -6,17 +6,17 @@ import { IValue } from "../core/ivalue";
  * @class Watch
  * @extends Fragment
  */
-export declare class Watch extends Fragment {
+export declare class Watch<T> extends Fragment {
     /**
      * Default slot
      * @type Slot
      */
-    slot: Slot;
+    slot: Slot<T>;
     /**
      * iValue to watch
      * @type IValue
      */
-    model: IValue<unknown>;
+    model: IValue<T>;
     constructor();
     $createWatchers(): void;
     $compose(): void;

package/types/views/base-view.d.ts

@@ -1,5 +1,4 @@
 import { RepeatNode, RepeatNodePrivate } from "./repeat-node";
-import { IValue } from "../core/ivalue";
 import { IModel } from "../models/model";
 /**
  * Private part of BaseView
@@ -29,9 +28,9 @@ export declare class BaseView<K, T, Model extends IModel<K, T>> extends RepeatNo
     protected $: BaseViewPrivate<K, T>;
     /**
      * Property which will contain a model
-     * @type {IValue<*>}
+     * @type {IModel}
      */
-    model: IValue<Model>;
+    model: Model;
     constructor($1?: BaseViewPrivate<K, T>);
     /**
      * Handle ready event