vasille - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

flow-typed/vasille.js

@@ -10,2 +10,3 @@ // @flow
 type AppOptions = ?{
+    debugUi?: boolean,
     freezeUi ?: boolean,
@@ -38,3 +39,4 @@ executor ?: Executor
         $ref<T> (value : T) : IValue<T>;
-        $mirror<T> (value : IValue<T>, forwardOnly?: boolean) : Mirror<T>;
+        $mirror<T> (value : IValue<T>) : Mirror<T>;
+        $forward<T> (value : IValue<T>) : Mirror<T>;
         $point<T>(value: T | IValue<T>, forwardOnly?: boolean): Pointer<T>;
@@ -166,3 +168,3 @@ $register<T>(model: T): T;
     declare export class Signal<
-        T1 = void, T2 = void, T3 = void, T4 = void, T5 = void, T6 = void, T7 = void, T8 = void, T9 = void
+        T = Fragment, T1 = void, T2 = void, T3 = void, T4 = void, T5 = void, T6 = void, T7 = void, T8 = void, T9 = void
         > {
@@ -184,13 +186,13 @@ handlers : Set<
         > {
-        runner : ?(a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void;
+        runner : ?(a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void;
 
         insert (
-            func : (a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void
+            func : (a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void
         ) : void;
         release (
-            a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
+            a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
         ) : void;
         predefine (
-            func : (a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void,
-            a0 : Fragment, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
+            func : (a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9) => void,
+            a0 : T, a1 : t1, a2 : t2, a3 : t3, a4 : t4, a5 : t5, a6 : t6, a7 : t7, a8 : t8, a9 : t9
         ) : void;
@@ -290,3 +292,3 @@ }
         interceptor : Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>;
-        slot : Slot<Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
+        slot : Slot<Fragment, Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
     }
@@ -608,3 +610,3 @@ declare export class FragmentPrivate extends ReactivePrivate {
     declare export class Watch<T> extends Fragment {
-        slot : Slot<T>;
+        slot : Slot<Fragment, T>;
         model : IValue<T>;
@@ -763,10 +765,10 @@
     declare export class ArrayView<T> extends BaseView<?T, T, ArrayModel<T>> {
-        constructor () : void;
+        constructor (model : ArrayModel<T>) : void;
         createChild (id : ?T, item : T, before : ?Fragment) : any;
     }
     declare export class MapView<K, T> extends BaseView<K, T, MapModel<K, T>> {
-        constructor () : void;
+        constructor (model : MapModel<K, T>) : void;
     }
     declare export class ObjectView<T> extends BaseView<string, T, ObjectModel<T>> {
-        constructor () : void;
+        constructor (model : ObjectModel<T>) : void;
     }
@@ -779,3 +781,3 @@ declare export class RepeatNodePrivate<IdT> extends INodePrivate {
     declare export class RepeatNode<IdT, T> extends Fragment {
-        slot : Slot<T, IdT>;
+        slot : Slot<Fragment, T, IdT>;
         freezeUi : boolean;
@@ -802,3 +804,3 @@
     declare export class SetView<T> extends BaseView<T, T, SetModel<T>> {
-        constructor () : void;
+        constructor (model : SetModel<T>) : void;
     }
@@ -805,0 +807,0 @@ declare export class AttributeBinding extends Binding<?string> {

lib/core/core.js

@@ -75,6 +75,5 @@ import { Destroyable } from "./destroyable.js";
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    $mirror(value, forwardOnly = false) {
-        const mirror = new Mirror(value, forwardOnly);
+    $mirror(value) {
+        const mirror = new Mirror(value, false);
         this.$.watch.add(mirror);
@@ -84,2 +83,11 @@ return mirror;
     /**
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
+     */
+    $forward(value) {
+        const mirror = new Mirror(value, true);
+        this.$.watch.add(mirror);
+        return mirror;
+    }
+    /**
      * Creates a pointer
@@ -86,0 +94,0 @@ * @param value {*} default value to point

lib/node/app.js

@@ -15,2 +15,3 @@ import { instantExecutor, timeoutExecutor } from "../core/executor";
         this.$run = (options === null || options === void 0 ? void 0 : options.executor) || ((options === null || options === void 0 ? void 0 : options.freezeUi) === false ? timeoutExecutor : instantExecutor);
+        this.$debugUi = (options === null || options === void 0 ? void 0 : options.debugUi) || false;
     }
@@ -17,0 +18,0 @@ }

lib/node/node.js

@@ -184,5 +184,7 @@ import { Reactive, ReactivePrivate } from "../core/core";
     $debug(text) {
-        const node = new DebugNode();
-        node.$preinit(this.$.app, this, text);
-        this.$$pushNode(node);
+        if (this.$.app.$debugUi) {
+            const node = new DebugNode();
+            node.$preinit(this.$.app, this, text);
+            this.$$pushNode(node);
+        }
         return this;
@@ -189,0 +191,0 @@ }

lib/views/array-view.js

 import { BaseView } from "./base-view";
-import { ArrayModel } from "../models/array-model";
 /**
@@ -9,6 +8,5 @@ * Represents a view of an array model
 export class ArrayView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ArrayModel;
-        this.$seal();
+        this.model = model;
     }
@@ -15,0 +13,0 @@ createChild(id, item, before) {

lib/views/map-view.js

 import { BaseView } from "./base-view";
-import { MapModel } from "../models/map-model";
 /**
@@ -9,5 +8,5 @@ * Create a children pack for each map value
 export class MapView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new MapModel;
+        this.model = model;
     }
@@ -14,0 +13,0 @@ $ready() {

lib/views/object-view.js

 import { BaseView } from "./base-view";
-import { ObjectModel } from "../models/object-model";
 /**
@@ -9,5 +8,5 @@ * Create a children pack for each object field
 export class ObjectView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new ObjectModel;
+        this.model = model;
     }
@@ -14,0 +13,0 @@ $ready() {

lib/views/set-view.js

 import { BaseView } from "./base-view";
-import { SetModel } from "../models/set-model";
 /**
@@ -9,5 +8,5 @@ * Create a children pack for each set value
 export class SetView extends BaseView {
-    constructor() {
+    constructor(model) {
         super();
-        this.model = new SetModel();
+        this.model = model;
     }
@@ -14,0 +13,0 @@ $ready() {

package.json

@@ -6,3 +6,3 @@ {
   "types": "types/index.d.ts",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "exports": {
@@ -9,0 +9,0 @@ "import": "./lib/index.js",

README.md

@@ -7,6 +7,15 @@ # Vasille
 
+[![build](https://gitlab.com/vasille-js/vasille-js/badges/v2/pipeline.svg)](https://gitlab.com/vasille-js/vasille-js)
+[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+
 ## Table of content
-[[_TOC_]]
 
+* [Installation](#installation)
+* [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)
 
+
 <hr>
@@ -23,4 +32,6 @@
 ```html
-<script src="https://unpkg.com/vasille"></script>            - ES215 version
-<script src="https://unpkg.com/vasille/cdn/es5.js"></script> - ES5 Compatible version
+ES2015 version
+<script src="https://unpkg.com/vasille"></script>
+ES5 Compatible version
+<script src="https://unpkg.com/vasille/cdn/es5.js"></script>
 ```
@@ -167,9 +178,23 @@
 
-## API documentation
+## How to use Vasille
 
-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)
+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)
 
+## Best Practices
+
+* [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)
+* [Application in Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application-in-application.ts)
+* [Signaling](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/signaling.ts)
+* [Forward Only Data Exchange](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/forward-only.ts)
+* [Absolute, Relative & Auto Values](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/auto-value.ts)
+* [Signaling Intercepting](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/singaling-intercepting.ts)
+* [Debugging](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/debugging.ts)
+* [Fragment vs Component](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/fragment-component.ts)
+* [Extensions](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/extension.ts)
+* [Model-View-Controller](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/model-view-controller.ts)
+
 ## Questions
@@ -176,0 +201,0 @@

types/core/core.d.ts

@@ -65,6 +65,10 @@ import { Destroyable } from "./destroyable.js";
      * @param value {IValue} value to mirror
-     * @param forwardOnly {boolean} forward only sync
      */
-    $mirror<T>(value: IValue<T>, forwardOnly?: boolean): Mirror<T>;
+    $mirror<T>(value: IValue<T>): Mirror<T>;
     /**
+     * Create a forward-only mirror
+     * @param value {IValue} value to mirror
+     */
+    $forward<T>(value: IValue<T>): Mirror<T>;
+    /**
      * Creates a pointer
@@ -116,11 +120,11 @@ * @param value {*} default value to point
      */
-    $bind<T, T1>(func: (a1: T1) => T, v1: IValue<T1>): any;
-    $bind<T, T1, T2>(func: (a1: T1, a2: T2) => T, v1: IValue<T1>, v2: IValue<T2>): any;
-    $bind<T, T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): any;
-    $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>): any;
-    $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>): any;
-    $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>): any;
-    $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>): any;
-    $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>): any;
-    $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>): any;
+    $bind<T, T1>(func: (a1: T1) => T, v1: IValue<T1>): IValue<T>;
+    $bind<T, T1, T2>(func: (a1: T1, a2: T2) => T, v1: IValue<T1>, v2: IValue<T2>): IValue<T>;
+    $bind<T, T1, T2, T3>(func: (a1: T1, a2: T2, a3: T3) => T, v1: IValue<T1>, v2: IValue<T2>, v3: IValue<T3>): 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>): 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>): 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>): 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>): 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>): 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>): IValue<T>;
     /**
@@ -127,0 +131,0 @@ * Enable reactivity of fields

types/core/slot.d.ts

@@ -6,3 +6,3 @@ import { Fragment } from "../node/node";
  */
-export declare class Slot<t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> {
+export declare class Slot<t extends Fragment = Fragment, t1 = void, t2 = void, t3 = void, t4 = void, t5 = void, t6 = void, t7 = void, t8 = void, t9 = void> {
     /**
@@ -17,3 +17,3 @@ * Function to run
      */
-    insert(func: (a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void): void;
+    insert(func: (a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void): void;
     /**
@@ -31,3 +31,3 @@ * @param a0 {Fragment} node to paste content
      */
-    release(a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
+    release(a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
     /**
@@ -47,3 +47,3 @@ * Predefine a handler for a slot
      */
-    predefine(func: (a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void, a0: Fragment, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
+    predefine(func: (a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9) => void, a0: t, a1: t1, a2: t2, a3: t3, a4: t4, a5: t5, a6: t6, a7: t7, a8: t8, a9: t9): void;
 }

types/node/app.d.ts

 import { Executor } from "../core/executor";
 import { INode } from "./node";
 declare type AppOptions = {
+    debugUi?: boolean;
     freezeUi?: boolean;
@@ -19,2 +20,6 @@ executor?: Executor;
     /**
+     * Enables debug comments
+     */
+    $debugUi: boolean;
+    /**
      * @param options {Object} Application options
@@ -21,0 +26,0 @@ */

types/node/interceptor.d.ts

@@ -48,4 +48,4 @@ import { Fragment } from "./node";
      */
-    slot: Slot<Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
+    slot: Slot<Fragment, Interceptor<t1, t2, t3, t4, t5, t6, t7, t8, t9>>;
     $compose(): void;
 }

types/node/watch.d.ts

@@ -14,3 +14,3 @@ import { Fragment } from "./node";
      */
-    slot: Slot<T>;
+    slot: Slot<Fragment, T>;
     /**
@@ -17,0 +17,0 @@ * iValue to watch

types/views/array-view.d.ts

@@ -10,5 +10,5 @@ import { BaseView } from "./base-view";
 export declare class ArrayView<T> extends BaseView<T, T, ArrayModel<T>> {
-    constructor();
+    constructor(model: ArrayModel<T>);
     createChild(id: T, item: T, before?: Fragment): any;
     $ready(): void;
 }

types/views/map-view.d.ts

@@ -9,4 +9,4 @@ import { BaseView } from "./base-view";
 export declare class MapView<K, T> extends BaseView<K, T, MapModel<K, T>> {
-    constructor();
+    constructor(model: MapModel<K, T>);
     $ready(): void;
 }

types/views/object-view.d.ts

@@ -9,4 +9,4 @@ import { BaseView } from "./base-view";
 export declare class ObjectView<T> extends BaseView<string, T, ObjectModel<T>> {
-    constructor();
+    constructor(model: ObjectModel<T>);
     $ready(): void;
 }

types/views/repeat-node.d.ts

@@ -27,3 +27,3 @@ import { Fragment, INodePrivate } from "../node/node";
      */
-    slot: Slot<T, IdT>;
+    slot: Slot<Fragment, T, IdT>;
     /**
@@ -30,0 +30,0 @@ * If false will use timeout executor, otherwise the app executor

types/views/set-view.d.ts

@@ -9,4 +9,4 @@ import { BaseView } from "./base-view";
 export declare class SetView<T> extends BaseView<T, T, SetModel<T>> {
-    constructor();
+    constructor(model: SetModel<T>);
     $ready(): void;
 }

No alert changes

Improved metrics

Total package byte prevSize

388863

increased by0.39%

Lines of code

12601

increased by0.24%

Number of lines in readme file

206

increased by13.81%

Worsened metrics

Number of package files

72

decreased by-1.37%

No dependency changes