vasille-jsx 3.0.1

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/components.js

@@ -0,0 +1,148 @@
+import { ArrayModel, ArrayView, Fragment, IValue, MapModel, MapView, SetModel, SetView, userError, Watch as CoreWatch, Tag, } from "vasille";
+export function readValue(v) {
+    return v instanceof IValue ? v.$ : v;
+}
+export function Adapter(ctx, { node, slot }) {
+    const dNode = readValue(node);
+    const dSlot = readValue(slot);
+    if (dNode && dSlot) {
+        ctx.create(dNode, dSlot);
+    }
+}
+export function Slot(ctx, options) {
+    var _a;
+    const model = readValue(options.model);
+    if (model) {
+        if (model.length <= 1) {
+            for (const key in options) {
+                if (options[key] instanceof IValue) {
+                    options[key] = options[key].$;
+                }
+            }
+        }
+        else {
+            for (const key in options) {
+                if (!(options[key] instanceof IValue)) {
+                    options[key] = ctx.ref(options[key]);
+                }
+            }
+        }
+        model(options, ctx);
+    }
+    else {
+        (_a = readValue(options.slot)) === null || _a === void 0 ? void 0 : _a(ctx);
+    }
+}
+export function If(ctx, { condition, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    ctx.if(condition instanceof IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+}
+export function ElseIf(ctx, { condition, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    ctx.elif(condition instanceof IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+}
+export function Else(ctx, { slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (slot) {
+        ctx.else(slot);
+    }
+}
+export function For(ctx, { of, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (of instanceof IValue) {
+        ctx.create(new CoreWatch({
+            model: of,
+            slot: function (ctx, model) {
+                create(model, ctx);
+            },
+        }));
+    }
+    else if (of) {
+        create(of, ctx);
+    }
+    function create(model, node) {
+        if (!slot) {
+            return;
+        }
+        if (model instanceof ArrayModel) {
+            node.create(new ArrayView({
+                model,
+                slot: slot,
+            }));
+        }
+        else if (model instanceof MapModel) {
+            node.create(new MapView({
+                model,
+                slot,
+            }));
+        }
+        else if (model instanceof SetModel) {
+            node.create(new SetView({
+                model,
+                slot,
+            }));
+        }
+        // fallback if is used external Array/Map/Set
+        else {
+            console.warn("Vasille <For of/> fallback detected. Please provide reactive data.");
+            if (model instanceof Array) {
+                model.forEach((value) => {
+                    slot(node, value, value);
+                });
+            }
+            else if (model instanceof Map) {
+                for (const [key, value] of model) {
+                    slot(node, value, key);
+                }
+            }
+            else if (model instanceof Set) {
+                for (const value of model) {
+                    slot(node, value, value);
+                }
+            }
+            else {
+                throw userError("wrong use of `<For of/>` component", "wrong-model");
+            }
+        }
+    }
+}
+export function Watch(ctx, { model, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (slot && model instanceof IValue) {
+        ctx.create(new CoreWatch({ model, slot }));
+    }
+}
+export function Debug(ctx, { model }) {
+    const value = model instanceof IValue ? model : ctx.ref(model);
+    ctx.debug(value);
+}
+export function Mount(ctx, { bind }) {
+    if (!(ctx instanceof Tag)) {
+        throw userError("<Mount bind/> can be used only as direct child of html tags", "context-mismatch");
+    }
+    ctx.bindMount(bind instanceof IValue ? bind : ctx.ref(bind));
+}
+export function Show(ctx, { bind }) {
+    if (!(ctx instanceof Tag)) {
+        throw userError("<Show bind/> can be used only as direct child of html tags", "context-mismatch");
+    }
+    ctx.bindShow(bind instanceof IValue ? bind : ctx.ref(bind));
+}
+export function Delay(ctx, { time, slot }) {
+    const fragment = new Fragment({}, ":timer");
+    const dSlot = readValue(slot);
+    let timer;
+    ctx.create(fragment, function (node) {
+        if (dSlot) {
+            timer = setTimeout(() => {
+                dSlot(node);
+                timer = undefined;
+            }, readValue(time));
+        }
+        node.runOnDestroy(() => {
+            if (timer !== undefined) {
+                clearTimeout(timer);
+            }
+        });
+    });
+}

package/lib/compose.js

@@ -0,0 +1,46 @@
+import { Extension, Fragment, config, App, reportError, IValue, Reference } from "vasille";
+function proxy(obj) {
+    return new Proxy(obj, {
+        get(target, p) {
+            return p in target && target[p] instanceof IValue ? target[p] : new Reference(target[p]);
+        },
+    });
+}
+function create(renderer, create, name) {
+    return function (node, props, slot) {
+        const frag = create(props);
+        if (slot) {
+            props.slot = slot;
+        }
+        node.create(frag);
+        try {
+            const result = renderer(frag, proxy(props));
+            if (result !== undefined && props.callback) {
+                props.callback(result);
+            }
+        }
+        catch (e) {
+            if (config.debugUi) {
+                console.error(`Vasille: Error found in component ${name}`, e);
+            }
+            reportError(e);
+        }
+    };
+}
+export function compose(renderer, name) {
+    return create(renderer, props => {
+        return new Fragment(props, name);
+    }, name);
+}
+export function extend(renderer, name) {
+    return create(renderer, props => {
+        return new Extension(props, name);
+    }, name);
+}
+export function mount(tag, component, $) {
+    const root = new App(tag, {});
+    const frag = new Fragment({}, ":app-root");
+    root.create(frag, function () {
+        component(frag, $);
+    });
+}

package/lib/expression.js

@@ -0,0 +1,52 @@
+import { IValue, Reference } from "vasille";
+export class PartialExpression extends IValue {
+    constructor(func, values) {
+        super();
+        this.linkedFunc = [];
+        const handler = (i) => {
+            if (typeof i === "number") {
+                const dependency = this.values[i];
+                if (dependency instanceof IValue) {
+                    this.valuesCache[i] = dependency.$;
+                }
+            }
+            this.sync.$ = func.apply(this, this.valuesCache);
+        };
+        this.valuesCache = values.map(item => (item instanceof IValue ? item.$ : item));
+        this.sync = new Reference(func.apply(this, this.valuesCache));
+        let i = 0;
+        for (const value of values) {
+            const index = i++;
+            if (value instanceof IValue) {
+                value.on((this.linkedFunc[index] = handler.bind(this, index)));
+            }
+        }
+        this.values = values;
+        this.func = handler;
+        handler();
+    }
+    get $() {
+        return this.sync.$;
+    }
+    set $(value) {
+        this.sync.$ = value;
+    }
+    on(handler) {
+        this.sync.on(handler);
+    }
+    off(handler) {
+        this.sync.off(handler);
+    }
+    destroy() {
+        for (let i = 0; i < this.values.length; i++) {
+            const value = this.values[i];
+            if (value instanceof IValue) {
+                value.off(this.linkedFunc[i]);
+            }
+        }
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+        super.destroy();
+    }
+}

package/lib/index.js

@@ -0,0 +1,4 @@
+export { Adapter, Debug, Delay, Else, ElseIf, For, If, Mount, Show, Slot, Watch } from "./components";
+export { compose, extend, mount } from "./compose";
+export { awaited } from "./library";
+export { internal as $ } from "./internal";

package/lib/inline.js

@@ -0,0 +1,23 @@
+import { Fragment, IValue, Pointer, userError } from "vasille";
+export function readValue(v) {
+    return v instanceof IValue ? v.$ : v;
+}
+export function setValue(target, value, fallback) {
+    if (target instanceof IValue) {
+        if (target instanceof Pointer && value instanceof IValue) {
+            target.$$ = value;
+        }
+        else {
+            target.$ = value instanceof IValue ? value.$ : value;
+        }
+    }
+    else {
+        fallback === null || fallback === void 0 ? void 0 : fallback(value);
+    }
+}
+export function asFragment(node) {
+    if (!(node instanceof Fragment)) {
+        throw userError("missing context", "out-of-context");
+    }
+    return node;
+}

package/lib/internal.js

@@ -0,0 +1,43 @@
+import { proxyArrayModel, Expression, Pointer, Reference } from "vasille";
+import { reactiveObject, reactiveObjectProxy } from "./objects";
+import { ContextArray, ContextMap, ContextSet } from "./models";
+export const internal = {
+    /** create an expression (without context), use it for OwningPointer */
+    ex(func, ...values) {
+        return new Expression(func, ...values);
+    },
+    /** create a forward-only pointer (without context), use it for OwningPointer */
+    fo(v) {
+        return new Pointer(v);
+    },
+    /** create a reference (without context), use it for default composing props values */
+    r(v) {
+        return new Reference(v);
+    },
+    /** create a reactive object proxy, use it for sending reactive objects to child components */
+    rop(o) {
+        return reactiveObjectProxy(o);
+    },
+    /**
+     * translate `{...}` to `$.ro(this, {...})`
+     */
+    ro: reactiveObject,
+    /**
+     * translate `new Set(#)` to `$.sm(this, #)`
+     */
+    sm(node, data) {
+        return node.register(new ContextSet(data));
+    },
+    /**
+     * translate `new Map(#)` to `$.mm(this, #)`
+     */
+    mm(node, data) {
+        return node.register(new ContextMap(data));
+    },
+    /**
+     * translate `[...]` to `$.am(this, [...])`
+     */
+    am(node, data) {
+        return node.register(proxyArrayModel(new ContextArray(data)));
+    },
+};

package/lib/library.js

@@ -0,0 +1,25 @@
+import { IValue } from "vasille";
+export function awaited(node, target) {
+    const value = node.ref(undefined);
+    const err = node.ref(undefined);
+    let current = target;
+    if (typeof current === "function") {
+        try {
+            current = current();
+        }
+        catch (e) {
+            current = undefined;
+            err.$ = e;
+        }
+    }
+    if (current instanceof Promise) {
+        current.then(result => (value.$ = result)).catch(e => (err.$ = e));
+    }
+    else {
+        value.$ = current;
+    }
+    return [err, value];
+}
+export function ensureIValue(node, value) {
+    return value instanceof IValue ? value : node.ref(value);
+}

package/lib/models.js

@@ -0,0 +1,170 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Context_instances, _Context_ctx, _Context_enableObject, _Context_disableObject;
+import { ArrayModel, Destroyable, MapModel, Reactive, SetModel } from "vasille";
+import { ProxyReference, proxyObject } from "./objects";
+const symbol = Symbol("proxy");
+class Context extends Destroyable {
+    constructor() {
+        super(...arguments);
+        _Context_instances.add(this);
+        _Context_ctx.set(this, new Reactive({}));
+    }
+    checkEnable(value) {
+        if (value && typeof value === "object" && value.constructor === Object) {
+            return __classPrivateFieldGet(this, _Context_instances, "m", _Context_enableObject).call(this, value);
+        }
+        return value;
+    }
+    checkDisable(value) {
+        if (value && typeof value === "object" && value.constructor === Object) {
+            __classPrivateFieldGet(this, _Context_instances, "m", _Context_disableObject).call(this, value);
+        }
+    }
+    destroy() {
+        __classPrivateFieldGet(this, _Context_ctx, "f").destroy();
+    }
+}
+_Context_ctx = new WeakMap(), _Context_instances = new WeakSet(), _Context_enableObject = function _Context_enableObject(o) {
+    const ref = new ProxyReference(undefined);
+    o[symbol] = ref;
+    __classPrivateFieldGet(this, _Context_ctx, "f").register(ref);
+    return proxyObject(o, ref);
+}, _Context_disableObject = function _Context_disableObject(o) {
+    __classPrivateFieldGet(this, _Context_ctx, "f").release(o[symbol]);
+};
+export class ContextArray extends ArrayModel {
+    constructor(data) {
+        const ctx = new Context();
+        if (data instanceof Array) {
+            for (let i = 0; i < data.length; i++) {
+                data[i] = ctx.checkEnable(data[i]);
+            }
+        }
+        super(data);
+        this.ctx = ctx;
+    }
+    fill(value, start, end) {
+        value = this.ctx.checkEnable(value);
+        return super.fill(value, start, end);
+    }
+    pop() {
+        const value = super.pop();
+        this.ctx.checkDisable(value);
+        return value;
+    }
+    push(...items) {
+        for (let i = 0; i < items.length; i++) {
+            items[i] = this.ctx.checkEnable(items[i]);
+        }
+        return super.push(...items);
+    }
+    shift() {
+        const value = super.shift();
+        this.ctx.checkDisable(value);
+        return value;
+    }
+    splice(start, deleteCount, ...items) {
+        for (let i = 0; i < items.length; i++) {
+            items[i] = this.ctx.checkEnable(items[i]);
+        }
+        const removed = super.splice(start, deleteCount, ...items);
+        for (const item of removed) {
+            this.ctx.checkDisable(removed);
+        }
+        return removed;
+    }
+    unshift(...items) {
+        for (let i = 0; i < items.length; i++) {
+            items[i] = this.ctx.checkEnable(items[i]);
+        }
+        return super.unshift(...items);
+    }
+    replace(at, with_) {
+        this.ctx.checkDisable(this[at]);
+        with_ = this.ctx.checkEnable(with_);
+        return super.replace(at, with_);
+    }
+    destroy() {
+        super.destroy();
+        this.ctx.destroy();
+    }
+}
+export class ContextMap extends MapModel {
+    constructor(map) {
+        const ctx = new Context();
+        if (map) {
+            for (const item of map) {
+                item[1] = ctx.checkEnable(item[1]);
+            }
+        }
+        super(map);
+        this.ctx = ctx;
+    }
+    clear() {
+        for (const value of this.values()) {
+            this.ctx.checkDisable(value);
+        }
+        super.clear();
+    }
+    delete(key) {
+        this.ctx.checkDisable(this.get(key));
+        return super.delete(key);
+    }
+    set(key, value) {
+        this.ctx.checkDisable(this.get(key));
+        value = this.ctx.checkEnable(value);
+        return super.set(key, value);
+    }
+    destroy() {
+        super.destroy();
+        this.ctx.destroy();
+    }
+}
+export class ContextSet extends SetModel {
+    constructor(set) {
+        const ctx = new Context();
+        const real = new Map();
+        if (set) {
+            for (let i = 0; i < set.length; i++) {
+                real.set(set[i], (set[i] = ctx.checkEnable(set[i])));
+            }
+        }
+        super(set);
+        this.ctx = ctx;
+        this.real = real;
+    }
+    add(value) {
+        if (!this.real.has(value)) {
+            this.real.set(value, (value = this.ctx.checkEnable(value)));
+            return super.add(value);
+        }
+        return this;
+    }
+    has(value) {
+        return this.real.has(value);
+    }
+    clear() {
+        for (const item of this) {
+            this.ctx.checkDisable(item);
+        }
+        super.clear();
+        this.real.clear();
+    }
+    delete(value) {
+        const real = this.real.get(value);
+        if (real !== undefined) {
+            this.ctx.checkDisable(value);
+            this.real.delete(value);
+            return super.delete(real);
+        }
+        return false;
+    }
+    destroy() {
+        super.destroy();
+        this.ctx.destroy();
+    }
+}