vasille 2.0.0 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +195 -129
- package/cdn/es2015.js +3234 -0
- package/cdn/es5.js +3678 -0
- package/flow-typed/vasille.js +46 -38
- package/lib/core/core.js +11 -3
- package/lib/node/app.js +1 -0
- package/lib/node/interceptor.js +2 -2
- package/lib/node/node.js +30 -8
- package/lib/node/watch.js +3 -3
- package/lib/views/array-view.js +3 -6
- package/lib/views/base-view.js +4 -4
- package/lib/views/map-view.js +3 -4
- package/lib/views/object-view.js +3 -4
- package/lib/views/set-view.js +3 -4
- package/package.json +13 -7
- package/types/core/core.d.ts +15 -11
- package/types/core/slot.d.ts +4 -4
- package/types/node/app.d.ts +5 -0
- package/types/node/interceptor.d.ts +3 -3
- package/types/node/node.d.ts +4 -1
- package/types/node/watch.d.ts +3 -3
- package/types/views/array-view.d.ts +1 -1
- package/types/views/base-view.d.ts +2 -3
- package/types/views/map-view.d.ts +1 -1
- package/types/views/object-view.d.ts +1 -1
- package/types/views/repeat-node.d.ts +1 -1
- package/types/views/set-view.d.ts +1 -1
- package/img/favicon.svg +0 -254
- package/img/getLocus.svg +0 -18
- package/img/logo.png +0 -0
- package/img/logo.svg +0 -550
- package/img/scores-o-log.png +0 -0
- package/img/scores-o.png +0 -0
- package/img/scores-wo-log.png +0 -0
- package/img/scores-wo.png +0 -0
- package/img/x1-x32.png +0 -0
package/README.md
CHANGED
|
@@ -1,132 +1,198 @@
|
|
|
1
|
-
# Vasille
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
[
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
*
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
* Vue 3
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
results
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
1
|
+
# Vasille
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
`Vasille` core library is frontend solution for `safe`, `fast` & `powerful` applications.
|
|
6
|
+
|
|
7
|
+
[](https://gitlab.com/vasille-js/vasille-js)
|
|
8
|
+
[](https://www.npmjs.com/package/vasille)
|
|
9
|
+
|
|
10
|
+
## Table of content
|
|
11
|
+
|
|
12
|
+
* [Installation](#installation)
|
|
13
|
+
* [How SAFE is Vasille](#how-safe-is-vasille)
|
|
14
|
+
* [How FAST is Vasille](#how-fast-is-vasille)
|
|
15
|
+
* [How POWERFUL is Vasille](#how-powerful-is-vasille)
|
|
16
|
+
* [How to use Vasille](#how-to-use-vasille)
|
|
17
|
+
* [Best Practices](#best-practices)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
<hr>
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
npm install vasille --save
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### CDN
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
ES2015 version
|
|
32
|
+
<script src="https://unpkg.com/vasille"></script>
|
|
33
|
+
ES5 Compatible version
|
|
34
|
+
<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Getting ready be example
|
|
38
|
+
* JavaScript Example
|
|
39
|
+
* TypeScript Example
|
|
40
|
+
* Flow.js Example
|
|
41
|
+
|
|
42
|
+
### Flow.js typedef
|
|
43
|
+
Add the next line to `[libs]` section in your `.flowconfig` file
|
|
44
|
+
```
|
|
45
|
+
node_modules/vasille/flow-typed
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
<hr>
|
|
49
|
+
|
|
50
|
+
## How SAFE is Vasille
|
|
51
|
+
|
|
52
|
+
The safe of your application is ensured by
|
|
53
|
+
* `100%` coverage of `vasille` code by unit tests.
|
|
54
|
+
Each function, each branch are working as designed.
|
|
55
|
+
* `strong typing` makes your javascript/typescript code safe as C++ code.
|
|
56
|
+
All entities of `vasille` core library are strong typed, including:
|
|
57
|
+
* data fields & properties.
|
|
58
|
+
* computed properties (function parameters & result).
|
|
59
|
+
* methods.
|
|
60
|
+
* events (defined handlers & event emit).
|
|
61
|
+
* DOM events & DOM operation (attributing, styling, etc.).
|
|
62
|
+
* slots of component.
|
|
63
|
+
* references to children.
|
|
64
|
+
* What you write is what you get - there is no hidden operations, you can control everything.
|
|
65
|
+
* No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
|
|
66
|
+
|
|
67
|
+
## How FAST is Vasille
|
|
68
|
+
|
|
69
|
+
The test project was coded using the next frameworks:
|
|
70
|
+
* Angular /
|
|
71
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/angular/) /
|
|
72
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/angular/).
|
|
73
|
+
* React /
|
|
74
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/react/) /
|
|
75
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/react/).
|
|
76
|
+
* Vue 2 /
|
|
77
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/vue-2/) /
|
|
78
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vue-2/).
|
|
79
|
+
* Vue 3 /
|
|
80
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/vue-3/) /
|
|
81
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vue-3/).
|
|
82
|
+
* Svelte /
|
|
83
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/svelte/) /
|
|
84
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/svelte/).
|
|
85
|
+
* Vasille /
|
|
86
|
+
[Try Initial](https://vasille-js.gitlab.io/project-x32/vasille-js/) /
|
|
87
|
+
[Try Optimized](https://vasille-js.gitlab.io/project-x32-if/vasille-js/).
|
|
88
|
+
|
|
89
|
+
The result of test are demonstrated in figures 1 & 2.
|
|
90
|
+
The test result are measured in FPS (frames per second), which is calculated as `1000 / ft`,
|
|
91
|
+
where `ft` is an average frame time in ms of 20 frames. All values are absolute. Higher is better.
|
|
92
|
+
|
|
93
|
+
The initial version is updating all the page content in each frame.
|
|
94
|
+
The page reactivity connections are very complex, and we get poor results in Angular, React, Vue & Svelte.
|
|
95
|
+
|
|
96
|
+
The optimized version disables the offscreen & non-actual content, which simplifies the
|
|
97
|
+
reactivity complexity in time. Angular & Svelte give result similar to Vasille.
|
|
98
|
+
React & Vue continue to be slow in the beginning of test.
|
|
99
|
+
|
|
100
|
+
**Conclusion:** The reactivity system of Vasille is very fast
|
|
101
|
+
and its complexity is not slowing down the application.
|
|
102
|
+
|
|
103
|
+
<hr>
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
Figure 1: Initial version
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
<hr>
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
Figure 2: Optimized version
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<hr>
|
|
120
|
+
|
|
121
|
+
## How POWERFUL is Vasille
|
|
122
|
+
|
|
123
|
+
The secret of `Vasille` is a good task decomposition. The core library is composed of
|
|
124
|
+
an effective reactive module and a DOM generation engine based on it.
|
|
125
|
+
|
|
126
|
+
<hr>
|
|
127
|
+
|
|
128
|
+
### Reactivity Module
|
|
129
|
+
|
|
130
|
+
Reactivity module is used to create a model of data. It can contain self-updating values,
|
|
131
|
+
forward-only shared data. Reactivity of objects/fields can be disabled/enabled manually.
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
* `Destroyable` is an entity which has a custom destructor.
|
|
136
|
+
* `IValue<T>` is a common interface for any value container, with next members:
|
|
137
|
+
* `get $` gets the encapsulated value.
|
|
138
|
+
* `set $` manually update the encapsulated value, if enabled triggers updating of all linked data.
|
|
139
|
+
* `disable` disables the reactivity.
|
|
140
|
+
* `enable` enables the reactivity and triggers updating of all linked data.
|
|
141
|
+
* `Reference<T>` contains a value of type `T`.
|
|
142
|
+
* `Mirror<T>` syncs self value with another `IValue` container, can be used to share a value forward-only.
|
|
143
|
+
* `Pointer<T>` same as `Mirror`, but it can switch between `IValue` target anytime.
|
|
144
|
+
* `Expression<ReturnType, Args...>` is a self-updating value.
|
|
145
|
+
* `Reactive` is a reactive object which can have multiple reactive fields, emit/receive events/signals.
|
|
146
|
+
|
|
147
|
+
<hr>
|
|
148
|
+
|
|
149
|
+
### DOM Generation Engine
|
|
150
|
+
|
|
151
|
+
DOM Generation Engine is used to describe a virtual DOM of reactive fragments,
|
|
152
|
+
which will be reflected into a browser DOM and keep up to date it.
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
* `Fragment` describes a virtual DOM node, which has siblings, children, parent & slots.
|
|
157
|
+
* `TextNode` reflects a `Text` node.
|
|
158
|
+
* `INode` reflects a `Element` node.
|
|
159
|
+
* `Tag` reflect a self created `Element` node.
|
|
160
|
+
* `Extension` reflects an existing `Element` node.
|
|
161
|
+
* `Component` reflects a `Element` node created by a `Tag` child.
|
|
162
|
+
* `AppNode` is root of a `Vasille` application, can be used to create applications in application.
|
|
163
|
+
* `App` is root of a definitive `Vasille` application.
|
|
164
|
+
* `DebugNode` reflects a `Comment` node, useful for debug.
|
|
165
|
+
* `Watch` recompose children nodes on model value change.
|
|
166
|
+
* `RepeatNode` creates multiples children nodes using the same code multiple time.
|
|
167
|
+
* `Repeater` repeat slot content `n` times.
|
|
168
|
+
* `BaseView` represent a view in context of MVC (Model-View-Controller).
|
|
169
|
+
* `ObjectView` repeats slot content for each value of `ObjectModel`.
|
|
170
|
+
* `MapView` repeats slot content for each `MapModel` value.
|
|
171
|
+
* `SetView` repeats slot content for each `SetModel` value.
|
|
172
|
+
* `ArrayView` repeats slot content for each `ArrayModel` value respecting its order.
|
|
173
|
+
* `InterceptorNode` is used to send an event/signal from one child to other
|
|
174
|
+
without manually creating of interceptors.
|
|
175
|
+
|
|
176
|
+
## How to use Vasille
|
|
177
|
+
|
|
178
|
+
There are several modes, and most of it are WIP (Work In Progress):
|
|
179
|
+
* [Object-Oriented Programming - Ready](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/OOP-API.md)
|
|
180
|
+
* [Procedural Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/Procedural-API.md)
|
|
181
|
+
* [Template Programming - WIP](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/pages/API.md)
|
|
182
|
+
|
|
183
|
+
## Best Practices
|
|
184
|
+
|
|
185
|
+
* [Reactive Object Practice](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/reactive-object.ts)
|
|
186
|
+
* [Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application.ts)
|
|
187
|
+
* [Application in Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application-in-application.ts)
|
|
188
|
+
* [Signaling](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/signaling.ts)
|
|
189
|
+
* [Forward Only Data Exchange](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/forward-only.ts)
|
|
190
|
+
* [Absolute, Relative & Auto Values](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/auto-value.ts)
|
|
191
|
+
* [Signaling Intercepting](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/singaling-intercepting.ts)
|
|
192
|
+
* [Debugging](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/debugging.ts)
|
|
193
|
+
* [Fragment vs Component](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/fragment-component.ts)
|
|
194
|
+
* [Extensions](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/extension.ts)
|
|
195
|
+
* [Model-View-Controller](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/model-view-controller.ts)
|
|
130
196
|
|
|
131
197
|
## Questions
|
|
132
198
|
|