vasille - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

lib/core/core.js

 import { Destroyable } from "./destroyable.js";
-import { wrongBinding } from "./errors";
+import { notOverwritten, wrongBinding } from "./errors";
 import { Expression } from "../value/expression";
@@ -207,3 +207,3 @@ import { Reference } from "../value/reference";
         this.applyOptions(this.input);
-        this.compose(this.input);
+        return this.compose(this.input);
     }
@@ -217,3 +217,3 @@ applyOptions(input) {
     compose(input) {
-        // empty
+        throw notOverwritten();
     }
@@ -220,0 +220,0 @@ composeNow() {

lib/index.js

@@ -9,3 +9,3 @@ import { Destroyable } from "./core/destroyable";
 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";
@@ -22,3 +22,2 @@ import { Expression } from "./value/expression";
 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 };

lib/models/array-model.js

@@ -22,11 +22,2 @@ import { Listener } from "./listener";
     }
-    // proxy
-    proxy() {
-        return new Proxy(this, {
-            set(target, p, value) {
-                target.splice(parseInt(p), 1, value);
-                return true;
-            }
-        });
-    }
     /* Array members */
@@ -212,2 +203,8 @@ /**
     }
+    replace(at, with_) {
+        this.listener.emitAdded(this[at], with_);
+        this.listener.emitRemoved(this[at], this[at]);
+        this[at] = with_;
+        return this;
+    }
     enableReactivity() {
@@ -214,0 +211,0 @@ this.listener.enableReactivity();

lib/models/object-model.js

@@ -59,2 +59,5 @@ import { Listener } from "./listener";
     }
+    get values() {
+        return this.container;
+    }
     /**
@@ -70,19 +73,2 @@ * Deletes an object property
     }
-    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() {
@@ -89,0 +75,0 @@ this.listener.enableReactivity();

lib/node/node.js

@@ -73,7 +73,7 @@ import { Reactive, ReactivePrivate } from "../core/core";
     init() {
-        super.init();
+        const ret = super.init();
         this.ready();
+        return ret;
     }
     compose(input) {
-        super.compose(input);
         input.slot && input.slot(this);
@@ -186,3 +186,3 @@ }
         this.pushNode(node);
-        node.init();
+        return node.init();
     }
@@ -682,2 +682,5 @@ /**
     }
+    extend(options) {
+        this.applyOptions(options);
+    }
     $destroy() {
@@ -684,0 +687,0 @@ super.$destroy();

lib/views/object-view.js

@@ -10,3 +10,3 @@ import { BaseView } from "./base-view";
         super.compose(input);
-        const obj = input.model.proxy();
+        const obj = input.model.values;
         for (const key in obj) {
@@ -13,0 +13,0 @@ this.createChild(input, key, obj[key]);

package.json

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

README.md

@@ -1,2 +0,2 @@
-# Vasille
+# Vasille Core Library
 
@@ -13,6 +13,6 @@ ![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/img/logo.png)
 * [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)
@@ -27,28 +27,25 @@
 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)
+* [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)
 
-### Flow.js typedef
-Add the next line to `[libs]` section in your `.flowconfig` file
-```
-node_modules/vasille/flow-typed
-```
-
 <hr>
@@ -173,3 +170,2 @@
 * `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).
@@ -180,14 +176,24 @@ * `ObjectView` repeats slot content for each value of `ObjectModel`.
 * `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>
 
-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)
+### CDN
 
-## Best Practices
+```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 applicable to Vasille Core Library
+
 * [Reactive Object Practice](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/reactive-object.ts)
@@ -194,0 +200,0 @@ * [Application](https://gitlab.com/vasille-js/vasille-practices/-/blob/main/practices/application.ts)

types/core/core.d.ts

@@ -7,3 +7,3 @@ import { Destroyable } from "./destroyable.js";
 import { IModel } from "../models/model";
-import { Options } from "../functional/options";
+import { FragmentOptions } from "../functional/options";
 export declare let current: Reactive | null;
@@ -59,3 +59,3 @@ /**
  */
-export declare class Reactive<T extends Options = Options> extends Destroyable {
+export declare class Reactive<T extends FragmentOptions = FragmentOptions> extends Destroyable {
     /**
@@ -126,6 +126,6 @@ * Private stuff
     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;
@@ -132,0 +132,0 @@ runFunctional<F extends (...args: any) => any>(f: F, ...args: Parameters<F>): ReturnType<F>;

types/functional/options.d.ts

 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>>;
@@ -10,3 +10,3 @@ return?: any;
 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"?: {
@@ -13,0 +13,0 @@ [K in keyof AcceptedTagsSpec[T]['attrs']]?: AttrType<AcceptedTagsSpec[T]['attrs'][K]>;

types/index.d.ts

@@ -9,3 +9,3 @@ import { Destroyable } from "./core/destroyable";
 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";
@@ -22,4 +22,3 @@ import { Expression } from "./value/expression";
 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 };

types/models/array-model.d.ts

@@ -14,3 +14,2 @@ import { Listener } from "./listener";
     constructor(data?: Array<T>);
-    proxy(): ArrayModel<T>;
     /**
@@ -103,4 +102,5 @@ * Gets the last item of array
     removeOne(v: T): this;
+    replace(at: number, with_: T): this;
     enableReactivity(): void;
     disableReactivity(): void;
 }

types/models/object-model.d.ts

@@ -30,2 +30,3 @@ import { Listener } from "./listener";
     set(key: string, v: T): this;
+    get values(): Record<string, T>;
     /**
@@ -36,5 +37,4 @@ * Deletes an object property
     delete(key: string): void;
-    proxy(): Record<string, T>;
     enableReactivity(): void;
     disableReactivity(): void;
 }

types/node/node.d.ts

 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";
@@ -48,3 +48,3 @@ /**
  */
-export declare class Fragment<T extends Options = Options> extends Reactive {
+export declare class Fragment<T extends FragmentOptions = FragmentOptions> extends Reactive {
     /**
@@ -78,3 +78,3 @@ * Private part
     preinit(app: AppNode, parent: Fragment, data?: unknown): void;
-    init(): void;
+    init(): T['return'];
     protected compose(input: T): void;
@@ -124,3 +124,3 @@ /** To be overloaded: ready event handler */
      */
-    create<T extends Fragment>(node: T, callback?: T['input']['slot']): void;
+    create<T extends Fragment>(node: T, callback?: T['input']['slot']): T['input']['return'];
     /**
@@ -323,2 +323,3 @@ * Defines an if node
     preinit(app: AppNode, parent: Fragment): void;
+    extend(options: T): void;
     $destroy(): void;
@@ -325,0 +326,0 @@ }

types/node/watch.d.ts

 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>;
@@ -6,0 +6,0 @@ slot?: (node: Fragment, value: T) => void;

types/views/repeat-node.d.ts

 import { Fragment, INodePrivate } from "../node/node";
-import { Options } from "../functional/options";
+import { FragmentOptions } from "../functional/options";
 /**
@@ -17,3 +17,3 @@ * Private part of repeat node
 }
-export interface RNO<T, IdT> extends Options {
+export interface RNO<T, IdT> extends FragmentOptions {
     slot?: (node: Fragment, value: T, index: IdT) => void;
@@ -20,0 +20,0 @@ }

No alert changes

Improved metrics

Number of lines in readme file

216

increased by2.86%

Worsened metrics

Total package byte prevSize

435198

decreased by-0.04%

Lines of code

14939

decreased by-0.25%

No dependency changes