vasille 3.0.2 → 3.2.0

package/README.md

@@ -11,7 +11,7 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-simple-is-vasille)
+* [How INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,10 +44,11 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### Full documentation:
 * [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
-* [JavaScript Example](https://github.com/vas[README.md](..%2Ftest%2Fmy-app%2FREADME.md)ille-js/example-javascript)
+* [JavaScript Example](https://github.com/vasille-js/example-javascript)
 
 <hr>
 
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `strong typing` makes your javascript/typescript code safe as C++ code.
 All entities of `vasille` core library are strongly typed, including:
   * data fields & properties.
-  * computed properties (function parameters & result).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ All entities of `vasille` core library are strongly typed, including:
   * references to children.
 * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
-## How SIMPLE is Vasille
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -103,12 +104,11 @@ All of these are supported:
 * [x] Develop the `Vasille JSX` library.
 * [x] `100%` Test Coverage for the JSX library.
 * [x] Develop the `Vasille Babel Plugin`.
-* [ ] `100%` Test Coverage fot babel plugin.
-* [ ] Add CSS support (define styles in components).
-* [ ] Add custom `<input/>` components with 2-way value binding.
-* [ ] Add router.
-* [ ] Develop dev-tools extension for debugging.
-* [ ] Develop a lot of libraries for the framework.
+* [x] `100%` Test Coverage fot babel plugin.
+* [x] Add CSS support (define styles in components).
+* [x] Add router.
+* [ ] Add SSR (server side rendering).
+* [ ] Develop tools extension for debugging.
 
 ## Questions
 

package/lib/core/core.js

@@ -1,7 +1,7 @@
 import { Destroyable } from "./destroyable.js";
-import { Expression } from "../value/expression";
-import { Reference } from "../value/reference";
-import { OwningPointer, Pointer } from "../value/pointer";
+import { Expression } from "../value/expression.js";
+import { Reference } from "../value/reference.js";
+import { OwningPointer, Pointer } from "../value/pointer.js";
 /**
  * A reactive object
  * @class Reactive
@@ -10,50 +10,62 @@ import { OwningPointer, Pointer } from "../value/pointer";
 export class Reactive extends Destroyable {
     constructor(input) {
         super();
-        /**
-         * A list of user-defined values
-         * @type {Set}
-         */
-        this._watch = new Set();
         /**
          * A list of user-defined bindings
          * @type {Set}
          */
         this.bindings = new Set();
         this.input = input;
+        this.state = {};
     }
     /**
      * Create a reference
      * @param value {*} value to reference
+     * @param name {string} used for debugging internal state
      */
-    ref(value) {
+    ref(value, name) {
         const ref = new Reference(value);
-        this._watch.add(ref);
+        this.bindings.add(ref);
+        if (name) {
+            this.addState("ref", name, ref);
+        }
         return ref;
     }
     /**
      * Create a forward-only pointer
      * @param value {IValue} value to point
+     * @param name {string} used for debugging internal state
      */
-    forward(value) {
+    forward(value, name) {
         const mirror = new Pointer(value);
-        this._watch.add(mirror);
+        this.bindings.add(mirror);
+        if (name) {
+            this.addState("forward", name, mirror);
+        }
         return mirror;
     }
     /**
      * Creates a pointer
      * @param value {*} default value to point
+     * @param name {string} used for debugging internal state
      */
-    own(value) {
+    own(value, name) {
         const pointer = new OwningPointer(value);
-        this._watch.add(pointer);
+        this.bindings.add(pointer);
+        /* istanbul ignore else */
+        if (name) {
+            this.addState("own", name, pointer);
+        }
         return pointer;
     }
     /**
      * Register a model/dependency
      */
-    register(data) {
+    register(data, name) {
         this.bindings.add(data);
+        if (name) {
+            this.addState("model", name, data);
+        }
         return data;
     }
     release(data) {
@@ -64,18 +76,22 @@ export class Reactive extends Destroyable {
      * @param func {function} function to run on any argument change
      * @param values
      */
-    watch(func, ...values) {
-        this._watch.add(new Expression(func, ...values));
+    watch(func, values) {
+        this.bindings.add(new Expression(func, values));
     }
     /**
      * Creates a computed value
      * @param func {function} function to run on any argument change
      * @param values
+     * @param name {string} used for debugging internal state
      * @return {IValue} the created ivalue
      */
-    expr(func, ...values) {
-        const res = new Expression(func, ...values);
-        this._watch.add(res);
+    expr(func, values, name) {
+        const res = new Expression(func, values);
+        this.bindings.add(res);
+        if (name) {
+            this.addState("expr", name, res);
+        }
         return res;
     }
     runOnDestroy(func) {
@@ -85,13 +101,13 @@ export class Reactive extends Destroyable {
         }
         this.onDestroy = func;
     }
+    addState(method, name, state) {
+        this.state[name === "#" ? `#${Object.keys(this.state).length}` : name] = [method, state];
+    }
     destroy() {
-        var _a;
         super.destroy();
-        this._watch.forEach(value => value.destroy());
-        this._watch.clear();
         this.bindings.forEach(binding => binding.destroy());
         this.bindings.clear();
-        (_a = this.onDestroy) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.onDestroy?.();
     }
 }

package/lib/core/ivalue.js

@@ -9,7 +9,6 @@ export class IValue extends Destroyable {
         return this.$;
     }
     toString() {
-        var _a, _b;
-        return (_b = (_a = this.$) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "iValue<void>";
+        return this.$?.toString() ?? "iValue<void>";
     }
 }

package/lib/index.js

@@ -1,22 +1,20 @@
-import { config } from "./core/config";
-import { Destroyable } from "./core/destroyable";
-import { Reactive } from "./core/core";
-import { IValue } from "./core/ivalue";
-import { reportError, setErrorHandler } from "./functional/safety";
-import { ArrayModel, proxyArrayModel } from "./models/array-model";
-import { Listener } from "./models/listener";
-import { MapModel } from "./models/map-model";
-import { SetModel } from "./models/set-model";
-import { App, Portal } from "./node/app";
-import { Extension, Fragment, INode, Tag } from "./node/node";
-import { Expression } from "./value/expression";
-import { Pointer } from "./value/pointer";
-import { Reference } from "./value/reference";
-import { ArrayView } from "./views/array-view";
-import { BaseView } from "./views/base-view";
-import { MapView } from "./views/map-view";
-import { SetView } from "./views/set-view";
-import { Binding } from "./binding/binding";
-import { userError } from "./core/errors";
-import { Watch } from "./node/watch";
-export { Destroyable, IValue, Reference, Pointer, ArrayModel, proxyArrayModel, MapModel, SetModel, BaseView, Listener, ArrayView, MapView, SetView, Fragment, INode, Tag, Extension, App, Portal, Expression, Binding, Reactive, Watch, userError, config, setErrorHandler, reportError, };
+import { Destroyable } from "./core/destroyable.js";
+import { Reactive } from "./core/core.js";
+import { IValue } from "./core/ivalue.js";
+import { reportError, setErrorHandler } from "./functional/safety.js";
+import { ArrayModel, proxyArrayModel } from "./models/array-model.js";
+import { Listener } from "./models/listener.js";
+import { MapModel } from "./models/map-model.js";
+import { SetModel } from "./models/set-model.js";
+import { App, Portal } from "./node/app.js";
+import { Fragment, Tag, TextNode, DebugNode } from "./node/node.js";
+import { Expression } from "./value/expression.js";
+import { Pointer } from "./value/pointer.js";
+import { Reference } from "./value/reference.js";
+import { ArrayView } from "./views/array-view.js";
+import { BaseView } from "./views/base-view.js";
+import { MapView } from "./views/map-view.js";
+import { SetView } from "./views/set-view.js";
+import { userError } from "./core/errors.js";
+import { Watch } from "./node/watch.js";
+export { Destroyable, IValue, Reference, Pointer, ArrayModel, proxyArrayModel, MapModel, SetModel, BaseView, Listener, ArrayView, MapView, SetView, Fragment, Tag, App, Portal, Expression, Reactive, TextNode, DebugNode, Watch, userError, setErrorHandler, reportError, };

package/lib/node/app.js

@@ -1,4 +1,4 @@
-import { Fragment, Root } from "./node";
+import { Fragment, Root } from "./node.js";
 /**
  * Represents a Vasille.js application
  * @class App
@@ -10,20 +10,20 @@ export class App extends Root {
      * @param node {Element} The root of application
      * @param input
      */
-    constructor(node, input) {
-        super(input);
+    constructor(node, runner, input) {
+        super(input, runner);
         this.node = node;
     }
     appendNode(node) {
-        this.node.appendChild(node);
+        this.runner.appendChild(this.node, node);
     }
 }
 export class Portal extends Fragment {
-    constructor(input) {
-        super(input, ":portal");
+    constructor(input, runner) {
+        super(input, runner, ":portal");
         this.node = input.node;
     }
     appendNode(node) {
-        this.node.appendChild(node);
+        this.runner.appendChild(this.node, node);
     }
 }