vasille-jsx 3.0.1

package/lib/objects.js

@@ -0,0 +1,78 @@
+import { IValue, Reference } from "vasille";
+import { ensureIValue } from "./library";
+export class ProxyReference extends Reference {
+    forceUpdate() {
+        this.updateDeps(this.state);
+    }
+}
+export function proxyObject(obj, proxyRef) {
+    return new Proxy(obj, {
+        get(target, p, receiver) {
+            const value = Reflect.get(target, p, receiver);
+            return value instanceof Object ? proxyObject(value, proxyRef) : value;
+        },
+        set(target, p, newValue, receiver) {
+            const response = Reflect.set(target, p, newValue, receiver);
+            if (response) {
+                proxyRef.forceUpdate();
+            }
+            return response;
+        },
+        defineProperty(target, property, attributes) {
+            const response = Reflect.defineProperty(target, property, attributes);
+            if (response) {
+                proxyRef.forceUpdate();
+            }
+            return response;
+        },
+        deleteProperty(target, p) {
+            const response = Reflect.deleteProperty(target, p);
+            if (response) {
+                proxyRef.forceUpdate();
+            }
+            return response;
+        },
+    });
+}
+export function proxy(o) {
+    if (typeof o === "object" && o && o.constructor === Object) {
+        const proxyRef = new ProxyReference(undefined);
+        proxyRef.$ = proxyObject(o, proxyRef);
+        return proxyRef;
+    }
+    return o;
+}
+export function reactiveObject(node, o) {
+    for (const key of Object.keys(o)) {
+        if (!(o[key] instanceof IValue)) {
+            o[key] = ensureIValue(node, proxy(o[key]));
+        }
+    }
+    return new Proxy(o, {
+        get(_, p) {
+            if (p in o) {
+                return o[p];
+            }
+            else {
+                return (o[p] = node.register(new Reference(undefined)));
+            }
+        },
+        deleteProperty(_, p) {
+            if (p in o && o[p] instanceof IValue) {
+                node.release(p[0]);
+            }
+            return Reflect.deleteProperty(o, p);
+        },
+    });
+}
+export function reactiveObjectProxy(o) {
+    return new Proxy(o, {
+        get(_, p) {
+            return o[p].$;
+        },
+        set(_, p, newValue) {
+            o[p].$ = newValue;
+            return true;
+        },
+    });
+}

package/lib/spec/html.js

@@ -0,0 +1 @@
+export {};

package/lib/spec/svg.js

@@ -0,0 +1 @@
+export {};

package/lib-node/components.js

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readValue = readValue;
+exports.Adapter = Adapter;
+exports.Slot = Slot;
+exports.If = If;
+exports.ElseIf = ElseIf;
+exports.Else = Else;
+exports.For = For;
+exports.Watch = Watch;
+exports.Debug = Debug;
+exports.Mount = Mount;
+exports.Show = Show;
+exports.Delay = Delay;
+const vasille_1 = require("vasille");
+function readValue(v) {
+    return v instanceof vasille_1.IValue ? v.$ : v;
+}
+function Adapter(ctx, { node, slot }) {
+    const dNode = readValue(node);
+    const dSlot = readValue(slot);
+    if (dNode && dSlot) {
+        ctx.create(dNode, dSlot);
+    }
+}
+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 vasille_1.IValue) {
+                    options[key] = options[key].$;
+                }
+            }
+        }
+        else {
+            for (const key in options) {
+                if (!(options[key] instanceof vasille_1.IValue)) {
+                    options[key] = ctx.ref(options[key]);
+                }
+            }
+        }
+        model(options, ctx);
+    }
+    else {
+        (_a = readValue(options.slot)) === null || _a === void 0 ? void 0 : _a(ctx);
+    }
+}
+function If(ctx, { condition, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    ctx.if(condition instanceof vasille_1.IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+}
+function ElseIf(ctx, { condition, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    ctx.elif(condition instanceof vasille_1.IValue ? condition : ctx.ref(condition), slot !== null && slot !== void 0 ? slot : (() => { }));
+}
+function Else(ctx, { slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (slot) {
+        ctx.else(slot);
+    }
+}
+function For(ctx, { of, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (of instanceof vasille_1.IValue) {
+        ctx.create(new vasille_1.Watch({
+            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 vasille_1.ArrayModel) {
+            node.create(new vasille_1.ArrayView({
+                model,
+                slot: slot,
+            }));
+        }
+        else if (model instanceof vasille_1.MapModel) {
+            node.create(new vasille_1.MapView({
+                model,
+                slot,
+            }));
+        }
+        else if (model instanceof vasille_1.SetModel) {
+            node.create(new vasille_1.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 (0, vasille_1.userError)("wrong use of `<For of/>` component", "wrong-model");
+            }
+        }
+    }
+}
+function Watch(ctx, { model, slot: magicSlot }) {
+    const slot = readValue(magicSlot);
+    if (slot && model instanceof vasille_1.IValue) {
+        ctx.create(new vasille_1.Watch({ model, slot }));
+    }
+}
+function Debug(ctx, { model }) {
+    const value = model instanceof vasille_1.IValue ? model : ctx.ref(model);
+    ctx.debug(value);
+}
+function Mount(ctx, { bind }) {
+    if (!(ctx instanceof vasille_1.Tag)) {
+        throw (0, vasille_1.userError)("<Mount bind/> can be used only as direct child of html tags", "context-mismatch");
+    }
+    ctx.bindMount(bind instanceof vasille_1.IValue ? bind : ctx.ref(bind));
+}
+function Show(ctx, { bind }) {
+    if (!(ctx instanceof vasille_1.Tag)) {
+        throw (0, vasille_1.userError)("<Show bind/> can be used only as direct child of html tags", "context-mismatch");
+    }
+    ctx.bindShow(bind instanceof vasille_1.IValue ? bind : ctx.ref(bind));
+}
+function Delay(ctx, { time, slot }) {
+    const fragment = new vasille_1.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-node/compose.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compose = compose;
+exports.extend = extend;
+exports.mount = mount;
+const vasille_1 = require("vasille");
+function proxy(obj) {
+    return new Proxy(obj, {
+        get(target, p) {
+            return p in target && target[p] instanceof vasille_1.IValue ? target[p] : new vasille_1.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 (vasille_1.config.debugUi) {
+                console.error(`Vasille: Error found in component ${name}`, e);
+            }
+            (0, vasille_1.reportError)(e);
+        }
+    };
+}
+function compose(renderer, name) {
+    return create(renderer, props => {
+        return new vasille_1.Fragment(props, name);
+    }, name);
+}
+function extend(renderer, name) {
+    return create(renderer, props => {
+        return new vasille_1.Extension(props, name);
+    }, name);
+}
+function mount(tag, component, $) {
+    const root = new vasille_1.App(tag, {});
+    const frag = new vasille_1.Fragment({}, ":app-root");
+    root.create(frag, function () {
+        component(frag, $);
+    });
+}

package/lib-node/expression.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PartialExpression = void 0;
+const vasille_1 = require("vasille");
+class PartialExpression extends vasille_1.IValue {
+    constructor(func, values) {
+        super();
+        this.linkedFunc = [];
+        const handler = (i) => {
+            if (typeof i === "number") {
+                const dependency = this.values[i];
+                if (dependency instanceof vasille_1.IValue) {
+                    this.valuesCache[i] = dependency.$;
+                }
+            }
+            this.sync.$ = func.apply(this, this.valuesCache);
+        };
+        this.valuesCache = values.map(item => (item instanceof vasille_1.IValue ? item.$ : item));
+        this.sync = new vasille_1.Reference(func.apply(this, this.valuesCache));
+        let i = 0;
+        for (const value of values) {
+            const index = i++;
+            if (value instanceof vasille_1.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 vasille_1.IValue) {
+                value.off(this.linkedFunc[i]);
+            }
+        }
+        this.values.splice(0);
+        this.valuesCache.splice(0);
+        this.linkedFunc.splice(0);
+        super.destroy();
+    }
+}
+exports.PartialExpression = PartialExpression;

package/lib-node/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$ = exports.awaited = exports.mount = exports.extend = exports.compose = exports.Watch = exports.Slot = exports.Show = exports.Mount = exports.If = exports.For = exports.ElseIf = exports.Else = exports.Delay = exports.Debug = exports.Adapter = void 0;
+var components_1 = require("./components");
+Object.defineProperty(exports, "Adapter", { enumerable: true, get: function () { return components_1.Adapter; } });
+Object.defineProperty(exports, "Debug", { enumerable: true, get: function () { return components_1.Debug; } });
+Object.defineProperty(exports, "Delay", { enumerable: true, get: function () { return components_1.Delay; } });
+Object.defineProperty(exports, "Else", { enumerable: true, get: function () { return components_1.Else; } });
+Object.defineProperty(exports, "ElseIf", { enumerable: true, get: function () { return components_1.ElseIf; } });
+Object.defineProperty(exports, "For", { enumerable: true, get: function () { return components_1.For; } });
+Object.defineProperty(exports, "If", { enumerable: true, get: function () { return components_1.If; } });
+Object.defineProperty(exports, "Mount", { enumerable: true, get: function () { return components_1.Mount; } });
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return components_1.Show; } });
+Object.defineProperty(exports, "Slot", { enumerable: true, get: function () { return components_1.Slot; } });
+Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return components_1.Watch; } });
+var compose_1 = require("./compose");
+Object.defineProperty(exports, "compose", { enumerable: true, get: function () { return compose_1.compose; } });
+Object.defineProperty(exports, "extend", { enumerable: true, get: function () { return compose_1.extend; } });
+Object.defineProperty(exports, "mount", { enumerable: true, get: function () { return compose_1.mount; } });
+var library_1 = require("./library");
+Object.defineProperty(exports, "awaited", { enumerable: true, get: function () { return library_1.awaited; } });
+var internal_1 = require("./internal");
+Object.defineProperty(exports, "$", { enumerable: true, get: function () { return internal_1.internal; } });

package/lib-node/inline.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readValue = readValue;
+exports.setValue = setValue;
+exports.asFragment = asFragment;
+const vasille_1 = require("vasille");
+function readValue(v) {
+    return v instanceof vasille_1.IValue ? v.$ : v;
+}
+function setValue(target, value, fallback) {
+    if (target instanceof vasille_1.IValue) {
+        if (target instanceof vasille_1.Pointer && value instanceof vasille_1.IValue) {
+            target.$$ = value;
+        }
+        else {
+            target.$ = value instanceof vasille_1.IValue ? value.$ : value;
+        }
+    }
+    else {
+        fallback === null || fallback === void 0 ? void 0 : fallback(value);
+    }
+}
+function asFragment(node) {
+    if (!(node instanceof vasille_1.Fragment)) {
+        throw (0, vasille_1.userError)("missing context", "out-of-context");
+    }
+    return node;
+}

package/lib-node/internal.js

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

package/lib-node/library.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.awaited = awaited;
+exports.ensureIValue = ensureIValue;
+const vasille_1 = require("vasille");
+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];
+}
+function ensureIValue(node, value) {
+    return value instanceof vasille_1.IValue ? value : node.ref(value);
+}

package/lib-node/models.js

@@ -0,0 +1,176 @@
+"use strict";
+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;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextSet = exports.ContextMap = exports.ContextArray = void 0;
+const vasille_1 = require("vasille");
+const objects_1 = require("./objects");
+const symbol = Symbol("proxy");
+class Context extends vasille_1.Destroyable {
+    constructor() {
+        super(...arguments);
+        _Context_instances.add(this);
+        _Context_ctx.set(this, new vasille_1.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 objects_1.ProxyReference(undefined);
+    o[symbol] = ref;
+    __classPrivateFieldGet(this, _Context_ctx, "f").register(ref);
+    return (0, objects_1.proxyObject)(o, ref);
+}, _Context_disableObject = function _Context_disableObject(o) {
+    __classPrivateFieldGet(this, _Context_ctx, "f").release(o[symbol]);
+};
+class ContextArray extends vasille_1.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();
+    }
+}
+exports.ContextArray = ContextArray;
+class ContextMap extends vasille_1.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();
+    }
+}
+exports.ContextMap = ContextMap;
+class ContextSet extends vasille_1.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();
+    }
+}
+exports.ContextSet = ContextSet;