vasille 3.0.0 → 3.1.0

package/README.md

@@ -29,7 +29,7 @@ npm install vasille-web --save
 Create an app from a template
 
 ```bash
-$ npx create vasille
+$ npm create vasille
 ```
 
 Alternative method to create a TypeScript app.
@@ -47,7 +47,7 @@ $ npx degit vasille-js/example-javascript my-project
 
 ### 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>
 
@@ -103,12 +103,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.
+* [x] `100%` Test Coverage fot babel plugin.
+* [x] Add CSS support (define styles in components).
 * [ ] Add router.
-* [ ] Develop dev-tools extension for debugging.
-* [ ] Develop a lot of libraries for the framework.
+* [ ] 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
@@ -21,39 +21,55 @@ export class Reactive extends Destroyable {
          */
         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);
+        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);
+        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);
+        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 +80,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._watch.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);
+    expr(func, values, name) {
+        const res = new Expression(func, values);
         this._watch.add(res);
+        if (name) {
+            this.addState("expr", name, res);
+        }
         return res;
     }
     runOnDestroy(func) {
@@ -85,13 +105,15 @@ 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/models/array-model.js

@@ -1,4 +1,4 @@
-import { Listener } from "./listener";
+import { Listener } from "./listener.js";
 /**
  * Model based on Array class
  * @extends Array

package/lib/models/map-model.js

@@ -1,4 +1,4 @@
-import { Listener } from "./listener";
+import { Listener } from "./listener.js";
 /**
  * A Map based memory
  * @class MapModel
@@ -13,7 +13,7 @@ export class MapModel extends Map {
     constructor(map) {
         super();
         this.listener = new Listener();
-        map === null || map === void 0 ? void 0 : map.forEach(([key, value]) => {
+        map?.forEach(([key, value]) => {
             super.set(key, value);
         });
     }

package/lib/models/set-model.js

@@ -1,4 +1,4 @@
-import { Listener } from "./listener";
+import { Listener } from "./listener.js";
 /**
  * A Set based model
  * @class SetModel
@@ -13,7 +13,7 @@ export class SetModel extends Set {
     constructor(set) {
         super();
         this.listener = new Listener();
-        set === null || set === void 0 ? void 0 : set.forEach(item => {
+        set?.forEach(item => {
             super.add(item);
         });
     }

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);
     }
 }