vasille 2.3.9 → 3.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 ![Vasille.js logo](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/logo.png)
 
-`Vasille` core library is frontend solution for `safe`, `performant` & `powerful` applications.
+`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)
 
@@ -11,9 +11,9 @@
 * [Installation](#installation)
 * [How to use Vasille](#how-to-use-vasille)
 * [How SAFE is Vasille](#how-safe-is-vasille)
-* [How SIMPLE is Vasille](#how-fast-is-vasille)
+* [How SIMPLE is Vasille](#how-simple-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
-* [Best Practices](#best-practices)
+* [Road Map](#road-map)
 
 
 <hr>
@@ -21,36 +21,42 @@
 ## Installation
 
 ```
-npm install vasille --save
-npm install vasille-less --save
-npm install vasille-magic --save
+npm install vasille-web --save
 ```
 
 ## How to use Vasille
 
-There are several modes to use Vasille.
+Create an app from a template
 
-### Documentation for beginners (how to create the first project step by step):
-* [`Vasille Magic` - perfect for you - `highest-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/magic/GetStarted.md)
-* [`Vasille Less Library` - no transcriber usage - `high-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/less/GetStarted.md)
-* [`Vasille Core Library` - the hard way - `low-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/core/GetStarted.md)
+```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:
-* [`Vasille Magic API`- compiler writes for you - `highest-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/magic/Vasille-Magic-API.md)
-* [`Vasille Less Library API`- write less do more - `high-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/less/Vasille-Less-Library-API.md)
-* [`Vasille Core Library API`- write anything - `low-level`](https://gitlab.com/vasille-js/vasille-js/-/blob/v2/doc/core/Vasille-Core-Library-API.md)
+* [Learn `Vasille` in 5 minutes](https://github.com/vasille-js/vasille-js/blob/v3/doc/V3-API.md)
 
-### Getting ready be example
-* [TypeScript Example](https://gitlab.com/vasille-js/learning/vasille-ts-example)
-* [JavaScript Example (Vasille Magic not supported)](https://gitlab.com/vasille-js/learning/vasille-js-example)
+### 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 `vasille` code by unit tests.
+* `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.
@@ -58,158 +64,51 @@ All entities of `vasille` core library are strongly typed, including:
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
-  * slots of component.
+  * slots of components.
   * references to children.
-* What you write is what you get. There are no hidden operations, you can control everything.
 * No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.
 
 ## How SIMPLE is Vasille
 
-Can you detect the correct order of console logs in the next code snippet:
-```javascript
-import logo from './logo.svg';
-import './App.css';
-import {useEffect} from 'react';
-
-function C1 ({children}) {
-  console.log(1);
-
-  useEffect(() => {
-    console.log(2);
-  });
-
-  return <div>{children}</div>;
-}
-
-function C2 () {
-  console.log(3);
-
-  useEffect(() => {
-    console.log(4);
-  });
-
-  return <div></div>;
-}
-
-function App() {
-  return <C1>
-    <C2/>
-  </C1>;
-}
+There is the "Hello World":
+```typescript jsx
+import { compose, mount } from "vasille-dx";
 
-export default App;
-```
+const App = compose(() => {
+  <p>Hello world</p>;
+});
 
-So let's see the same example using Vasille:
-```typescript jsx
-interface Options extends FragmentOptions {
-    slot?: () => void;
-}
-
-const C1 : VFragment<Options> = ({slot}) => {
-  console.log(1);
-  
-  <div>
-    <vxSlot model={slot} />
-  </div>;
-  
-  console.log(2);
-}
-
-const C2: VFragment = () => {
-  console.log(3);
-  
-  <div></div>;
-    
-  console.log(4);
-}
-
-const App: VApp = () => {
-  <C1>
-    <C2/>
-  </C1>
-}
+mount(document.body, App, {});
 ```
 
-The `C2` function is sent to `C1` as function,
-so it will be called after `console.log(1)` and before `console.log(2)`.
-No return is present in this case,
-then construction like `for` & `if` can be used in place of `[].map()` and ternary operator.
-The component function is called once, no recalls on component update.
-
 ## How POWERFUL is Vasille
 
-The secret of `Vasille` is a good task decomposition. The core library is composed of
-an effective reactive module and a DOM generation engine based on it.
-
-<hr>
-
-### Reactivity Module
-
-Reactivity module is used to create a model of data. It can contain self-updating values,
-forward-only shared data. Reactivity of objects/fields can be disabled/enabled manually.
-
-![Reactivity Module](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/reactive.png)
-
-* `Destroyable` is an entity which has a custom destructor.
-* `IValue<T>` is a common interface for any value container, with next members:
-  * `get $` gets the encapsulated value.
-  * `set $` manually update the encapsulated value, if enabled triggers updating of all linked data.
-  * `disable` disables the reactivity.
-  * `enable` enables the reactivity and triggers updating of all linked data.
-* `Reference<T>` contains a value of type `T`.
-* `Mirror<T>` syncs self value with another `IValue` container, can be used to share a value forward-only.
-* `Pointer<T>` same as `Mirror`, but it can switch between `IValue` target anytime.
-* `Expression<ReturnType, Args...>` is a self-updating value.
-* `Reactive` is a reactive object which can have multiple reactive fields, emit/receive events/signals.
+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>
 
-### DOM Generation Engine
-
-DOM Generation Engine is used to describe a virtual DOM of reactive fragments, 
-which will be reflected into a browser DOM and keep up to date it.
-
-![DOM Generation Engine](https://gitlab.com/vasille-js/vasille-js/-/raw/v2/doc/img/nodes.png)
-
-* `Fragment` describes a virtual DOM node, which has siblings, children, parent & slots.
-* `TextNode` reflects a `Text` node.
-* `INode` reflects a `Element` node.
-* `Tag` reflect a self created `Element` node.
-* `Extension` reflects an existing `Element` node.
-* `Component` reflects a `Element` node created by a `Tag` child.
-* `AppNode` is root of a `Vasille` application, can be used to create applications in application.
-* `App` is root of a definitive `Vasille` application.
-* `DebugNode` reflects a `Comment` node, useful for debug.
-* `Watch` recompose children nodes on model value change.
-* `RepeatNode` creates multiples children nodes using the same code multiple time.
-* `BaseView` represent a view in context of MVC (Model-View-Controller).
-* `ObjectView` repeats slot content for each value of `ObjectModel`.
-* `MapView` repeats slot content for each `MapModel` value.
-* `SetView` repeats slot content for each `SetModel` value.
-* `ArrayView` repeats slot content for each `ArrayModel` value respecting its order.
+## Road map
 
-<hr>
-
-### CDN
-
-```html
-<script src="https://unpkg.com/vasille"></script>
-```
-
-## Best Practices applicable to Vasille Core Library
-
-* [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 (Micro frontends)](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)
+* [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
 
@@ -218,3 +117,6 @@ 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);
     }
 }