vasille 2.3.8 → 3.0.0

package/README.md

@@ -0,0 +1,122 @@
+# Vasille
+
+![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/logo.png)
+
+`Vasille Web` is a front-end framework, which is developed to provide the best `developer experience` ever. **Our goal is to keep is as simple as possible.** Developing web applications using Vasille must be *as fast as possible*.
+
+[![npm](https://img.shields.io/npm/v/vasille?style=flat-square)](https://www.npmjs.com/package/vasille)
+
+## Table of content
+
+* [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 POWERFUL is Vasille](#how-powerful-is-vasille)
+* [Road Map](#road-map)
+
+
+<hr>
+
+## Installation
+
+```
+npm install vasille-web --save
+```
+
+## How to use Vasille
+
+Create an app from a template
+
+```bash
+$ npx create vasille
+```
+
+Alternative method to create a TypeScript app.
+```bash
+$ npx degit vasille-js/example-typescript my-project
+```
+
+Alternative method to create a JavaScript app.
+```bash
+$ 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)
+
+### 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)
+
+<hr>
+
+## How SAFE is Vasille
+
+The safe of your application is ensured by
+* `100%` coverage of code by unit tests.
+  Each function, each branch is working as designed.
+* OOP, DRY, KISS and SOLID principles are applied.
+* `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).
+  * methods.
+  * events (defined handlers & event emit).
+  * DOM events & DOM operation (attributing, styling, etc.).
+  * slots of components.
+  * 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
+
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "vasille-dx";
+
+const App = compose(() => {
+  <p>Hello world</p>;
+});
+
+mount(document.body, App, {});
+```
+
+## How POWERFUL is Vasille
+
+All of these are supported:
+* Components.
+* Reactive values (observables).
+* Inline computed values.
+* Multiline computed values.
+* HTML & SVG tags.
+* Component custom slots.
+* 2-way data binding in components.
+* Logic block (if, else).
+* Loops (array, map, set).
+
+<hr>
+
+## Road map
+
+* [x] Update the `Vasille Core` library to version 3.0.
+* [x] `100%` Test Coverage for core Library v3.
+* [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.
+
+## Questions
+
+If you have questions, feel free to contact the maintainer of the project:
+
+* [Author's Email](mailto:vas.lixcode@gmail.com)
+* [Author's Telegram](https://t.me/lixcode)
+
+<hr>
+
+**Made in Moldova** 🇲🇩

package/lib/binding/attribute.js

@@ -15,17 +15,16 @@ export class AttributeBinding extends Binding {
         super(value);
         this.init((value) => {
             if (value) {
-                if (typeof value === 'boolean') {
-                    node.node.setAttribute(name, "");
+                if (typeof value === "boolean") {
+                    node.element.setAttribute(name, "");
                 }
                 else {
-                    node.node.setAttribute(name, `${value}`);
+                    node.element.setAttribute(name, `${value}`);
                 }
             }
             else {
-                node.node.removeAttribute(name);
+                node.element.removeAttribute(name);
             }
         });
-        this.$seal();
     }
 }

package/lib/binding/binding.js

@@ -12,18 +12,17 @@ export class Binding extends Destroyable {
     constructor(value) {
         super();
         this.binding = value;
-        this.$seal();
     }
     init(bounded) {
         this.func = bounded;
-        this.binding.$on(this.func);
+        this.binding.on(this.func);
         this.func(this.binding.$);
     }
     /**
      * Just clear bindings
      */
-    $destroy() {
-        this.binding.$off(this.func);
-        super.$destroy();
+    destroy() {
+        this.binding.off(this.func);
+        super.destroy();
     }
 }

package/lib/binding/class.js

@@ -1,9 +1,9 @@
 import { Binding } from "./binding";
 function addClass(node, cl) {
-    node.node.classList.add(cl);
+    node.element.classList.add(cl);
 }
 function removeClass(node, cl) {
-    node.node.classList.remove(cl);
+    node.element.classList.remove(cl);
 }
 export class StaticClassBinding extends Binding {
     constructor(node, name, value) {
@@ -20,7 +20,6 @@ export class StaticClassBinding extends Binding {
                 this.current = value;
             }
         });
-        this.$seal();
     }
 }
 export class DynamicalClassBinding extends Binding {
@@ -38,6 +37,5 @@ export class DynamicalClassBinding extends Binding {
                 this.current = value;
             }
         });
-        this.$seal();
     }
 }

package/lib/binding/style.js

@@ -1,4 +1,13 @@
 import { Binding } from "./binding";
+export function stringifyStyleValue(value) {
+    if (value instanceof Array) {
+        return value.map(item => `${item}px`).join(" ");
+    }
+    if (typeof value === "number") {
+        return `${value}px`;
+    }
+    return value;
+}
 /**
  * Describes a style attribute binding
  * @class StyleBinding
@@ -13,11 +22,10 @@ export class StyleBinding extends Binding {
      */
     constructor(node, name, value) {
         super(value);
-        this.init((value) => {
-            if (node.node instanceof HTMLElement) {
-                node.node.style.setProperty(name, value);
+        this.init(value => {
+            if (node.element instanceof HTMLElement) {
+                node.element.style.setProperty(name, stringifyStyleValue(value));
             }
         });
-        this.$seal();
     }
 }

package/lib/core/config.js

@@ -0,0 +1,3 @@
+export const config = {
+    debugUi: true,
+};

package/lib/core/core.js

@@ -1,128 +1,63 @@
 import { Destroyable } from "./destroyable.js";
-import { notOverwritten, wrongBinding } from "./errors";
 import { Expression } from "../value/expression";
 import { Reference } from "../value/reference";
-import { Pointer } from "../value/pointer";
-import { Mirror } from "../value/mirror";
-export let current = null;
-const currentStack = [];
-export function stack(node) {
-    currentStack.push(current);
-    current = node;
-}
-export function unstack() {
-    current = currentStack.pop();
-}
+import { OwningPointer, Pointer } from "../value/pointer";
 /**
- * Private stuff of a reactive object
- * @class ReactivePrivate
+ * A reactive object
+ * @class Reactive
  * @extends Destroyable
  */
-export class ReactivePrivate extends Destroyable {
-    constructor() {
+export class Reactive extends Destroyable {
+    constructor(input) {
         super();
         /**
          * A list of user-defined values
          * @type {Set}
          */
-        this.watch = new Set;
+        this._watch = new Set();
         /**
          * A list of user-defined bindings
          * @type {Set}
          */
-        this.bindings = new Set;
-        /**
-         * A list of user defined models
-         */
-        this.models = new Set;
-        /**
-         * Reactivity switch state
-         * @type {boolean}
-         */
-        this.enabled = true;
-        /**
-         * The frozen state of object
-         * @type {boolean}
-         */
-        this.frozen = false;
-        this.$seal();
-    }
-    $destroy() {
-        this.watch.forEach(value => value.$destroy());
-        this.watch.clear();
-        this.bindings.forEach(binding => binding.$destroy());
-        this.bindings.clear();
-        this.models.forEach(model => model.disableReactivity());
-        this.models.clear();
-        this.freezeExpr && this.freezeExpr.$destroy();
-        this.onDestroy && this.onDestroy();
-        super.$destroy();
-    }
-}
-/**
- * A reactive object
- * @class Reactive
- * @extends Destroyable
- */
-export class Reactive extends Destroyable {
-    constructor(input, $) {
-        super();
+        this.bindings = new Set();
         this.input = input;
-        this.$ = $ || new ReactivePrivate;
-        this.$seal();
-    }
-    /**
-     * Get parent node
-     */
-    get parent() {
-        return this.$.parent;
     }
     /**
      * Create a reference
      * @param value {*} value to reference
      */
     ref(value) {
-        const $ = this.$;
         const ref = new Reference(value);
-        $.watch.add(ref);
+        this._watch.add(ref);
         return ref;
     }
     /**
-     * Create a mirror
-     * @param value {IValue} value to mirror
-     */
-    mirror(value) {
-        const mirror = new Mirror(value, false);
-        this.$.watch.add(mirror);
-        return mirror;
-    }
-    /**
-     * Create a forward-only mirror
-     * @param value {IValue} value to mirror
+     * Create a forward-only pointer
+     * @param value {IValue} value to point
      */
     forward(value) {
-        const mirror = new Mirror(value, true);
-        this.$.watch.add(mirror);
+        const mirror = new Pointer(value);
+        this._watch.add(mirror);
         return mirror;
     }
     /**
      * Creates a pointer
      * @param value {*} default value to point
-     * @param forwardOnly {boolean} forward only sync
      */
-    point(value, forwardOnly = false) {
-        const $ = this.$;
-        const pointer = new Pointer(value, forwardOnly);
-        $.watch.add(pointer);
+    own(value) {
+        const pointer = new OwningPointer(value);
+        this._watch.add(pointer);
         return pointer;
     }
     /**
-     * Register a model
-     * @param model
+     * Register a model/dependency
      */
-    register(model) {
-        this.$.models.add(model);
-        return model;
+    register(data) {
+        this.bindings.add(data);
+        return data;
+    }
+    release(data) {
+        this.bindings.delete(data);
     }
     /**
      * Creates a watcher
@@ -130,8 +65,7 @@ export class Reactive extends Destroyable {
      * @param values
      */
     watch(func, ...values) {
-        const $ = this.$;
-        $.watch.add(new Expression(func, !this.$.frozen, ...values));
+        this._watch.add(new Expression(func, ...values));
     }
     /**
      * Creates a computed value
@@ -140,96 +74,24 @@ export class Reactive extends Destroyable {
      * @return {IValue} the created ivalue
      */
     expr(func, ...values) {
-        const res = new Expression(func, !this.$.frozen, ...values);
-        const $ = this.$;
-        $.watch.add(res);
+        const res = new Expression(func, ...values);
+        this._watch.add(res);
         return res;
     }
-    /**
-     * Enable reactivity of fields
-     */
-    enable() {
-        const $ = this.$;
-        if (!$.enabled) {
-            $.watch.forEach(watcher => {
-                watcher.$enable();
-            });
-            $.models.forEach(model => {
-                model.enableReactivity();
-            });
-            $.enabled = true;
-        }
-    }
-    /**
-     * Disable reactivity of fields
-     */
-    disable() {
-        const $ = this.$;
-        if ($.enabled) {
-            $.watch.forEach(watcher => {
-                watcher.$disable();
-            });
-            $.models.forEach(model => {
-                model.disableReactivity();
-            });
-            $.enabled = false;
-        }
-    }
-    /**
-     * Disable/Enable reactivity of object fields with feedback
-     * @param cond {IValue} show condition
-     * @param onOff {function} on show feedback
-     * @param onOn {function} on hide feedback
-     */
-    bindAlive(cond, onOff, onOn) {
-        const $ = this.$;
-        if ($.freezeExpr) {
-            throw wrongBinding("this component already have a freeze state");
-        }
-        if ($.watch.has(cond)) {
-            throw wrongBinding("freeze state must be bound to an external component");
-        }
-        $.freezeExpr = new Expression((cond) => {
-            $.frozen = !cond;
-            if (cond) {
-                onOn === null || onOn === void 0 ? void 0 : onOn();
-                this.enable();
-            }
-            else {
-                onOff === null || onOff === void 0 ? void 0 : onOff();
-                this.disable();
-            }
-        }, true, cond);
-        return this;
-    }
-    init() {
-        this.applyOptions(this.input);
-        return this.compose(this.input);
-    }
-    applyOptions(input) {
-        // empty
-    }
-    applyOptionsNow() {
-        this.applyOptions(this.input);
-    }
-    compose(input) {
-        throw notOverwritten();
-    }
-    composeNow() {
-        return this.compose(this.input);
-    }
-    runFunctional(f, ...args) {
-        stack(this);
-        const result = f(...args);
-        unstack();
-        return result;
-    }
     runOnDestroy(func) {
-        this.$.onDestroy = func;
-    }
-    $destroy() {
-        super.$destroy();
-        this.$.$destroy();
-        this.$ = null;
+        if (this.onDestroy) {
+            console.warn(new Error("You rewrite onDestroy existing handler"));
+            console.log(this.onDestroy);
+        }
+        this.onDestroy = func;
+    }
+    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);
     }
 }

package/lib/core/destroyable.js

@@ -3,43 +3,8 @@
  * @class Destroyable
  */
 export class Destroyable {
-    /**
-     * Make object fields non configurable
-     * @protected
-     */
-    $seal() {
-        const $ = this;
-        Object.keys($).forEach(i => {
-            // eslint-disable-next-line no-prototype-builtins
-            if (this.hasOwnProperty(i)) {
-                const config = Object.getOwnPropertyDescriptor($, i);
-                if (config.configurable) {
-                    let descriptor;
-                    if (config.set || config.get) {
-                        descriptor = {
-                            configurable: false,
-                            get: config.get,
-                            set: config.set,
-                            enumerable: config.enumerable
-                        };
-                    }
-                    else {
-                        descriptor = {
-                            value: $[i],
-                            configurable: false,
-                            writable: config.writable,
-                            enumerable: config.enumerable
-                        };
-                    }
-                    Object.defineProperty($, i, descriptor);
-                }
-            }
-        });
-    }
     /**
      * Garbage collector method
      */
-    $destroy() {
-        // nothing here
-    }
+    destroy() { }
 }

package/lib/core/ivalue.js

@@ -1,58 +1,15 @@
 import { Destroyable } from "./destroyable.js";
-import { notOverwritten } from "./errors";
-export class Switchable extends Destroyable {
-    /**
-     * Enable update handlers triggering
-     */
-    $enable() {
-        throw notOverwritten();
-    }
-    /**
-     * disable update handlers triggering
-     */
-    $disable() {
-        throw notOverwritten();
-    }
-}
 /**
  * Interface which describes a value
  * @class IValue
  * @extends Destroyable
  */
-export class IValue extends Switchable {
-    /**
-     * @param isEnabled {boolean} initial is enabled state
-     */
-    constructor(isEnabled) {
-        super();
-        this.isEnabled = isEnabled;
-    }
-    /**
-     * Get the encapsulated value
-     * @return {*} the encapsulated value
-     */
-    get $() {
-        throw notOverwritten();
-    }
-    /**
-     * Sets the encapsulated value
-     * @param value {*} value to encapsulate
-     */
-    set $(value) {
-        throw notOverwritten();
-    }
-    /**
-     * Add a new handler to value change
-     * @param handler {function(value : *)} the handler to add
-     */
-    $on(handler) {
-        throw notOverwritten();
+export class IValue extends Destroyable {
+    toJSON() {
+        return this.$;
     }
-    /**
-     * Removes a handler of value change
-     * @param handler {function(value : *)} the handler to remove
-     */
-    $off(handler) {
-        throw notOverwritten();
+    toString() {
+        var _a, _b;
+        return (_b = (_a = this.$) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "iValue<void>";
     }
 }

package/lib/functional/safety.js

@@ -0,0 +1,7 @@
+export let reportError = (e) => {
+    console.error(e);
+    console.log("Docs Link /");
+};
+export function setErrorHandler(handler) {
+    reportError = handler;
+}

package/lib/index.js

@@ -1,23 +1,22 @@
+import { config } from "./core/config";
 import { Destroyable } from "./core/destroyable";
-import { current, Reactive, stack, unstack } from "./core/core";
+import { Reactive } from "./core/core";
 import { IValue } from "./core/ivalue";
-import { ArrayModel } from "./models/array-model";
+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 { ObjectModel } from "./models/object-model";
 import { SetModel } from "./models/set-model";
-import { App, AppNode, Portal } from "./node/app";
-import { Component, Extension, Fragment, INode, Tag } from "./node/node";
+import { App, Portal } from "./node/app";
+import { Extension, Fragment, INode, Tag } from "./node/node";
 import { Expression } from "./value/expression";
-import { Mirror } from "./value/mirror";
 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 { ObjectView } from "./views/object-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, Mirror, Pointer, ArrayModel, MapModel, ObjectModel, SetModel, BaseView, Listener, ArrayView, MapView, ObjectView, SetView, Fragment, INode, Tag, Component, Extension, AppNode, App, Portal, Expression, Binding, Reactive, Watch, stack, unstack, userError, current, };
+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, };