vasille-jsx 3.1.3 → 3.2.1

package/README.md

@@ -11,7 +11,7 @@
 * [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 INTUITIVE is Vasille](#how-intuitive-is-vasille)
 * [How POWERFUL is Vasille](#how-powerful-is-vasille)
 * [Road Map](#road-map)
 
@@ -44,6 +44,7 @@ $ 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)
+* [Vasille Router Documentation](https://github.com/vasille-js/vasille-js/blob/v3/doc/Router-API.md)
 
 ### Examples
 * [TypeScript Example](https://github.com/vasille-js/example-typescript)
@@ -60,7 +61,7 @@ The safe of your application is ensured by
 * `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).
+  * computed properties (function parameters and result).
   * methods.
   * events (defined handlers & event emit).
   * DOM events & DOM operation (attributing, styling, etc.).
@@ -68,7 +69,7 @@ All entities of `vasille` core library are strongly typed, including:
   * 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
+## How INTUITIVE is Vasille
 
 There is the "Hello World":
 ```typescript jsx
@@ -105,7 +106,7 @@ All of these are supported:
 * [x] Develop the `Vasille Babel Plugin`.
 * [x] `100%` Test Coverage fot babel plugin.
 * [x] Add CSS support (define styles in components).
-* [ ] Add router.
+* [x] Add router.
 * [ ] Add SSR (server side rendering).
 * [ ] Develop tools extension for debugging.
 

package/lib/components.js

@@ -2,7 +2,7 @@ import { ArrayModel, ArrayView, Fragment, IValue, MapModel, MapView, SetModel, S
 export function readValue(v) {
     return v instanceof IValue ? v.$ : v;
 }
-export function Slot(ctx, options) {
+export function Slot(options, ctx, defaultSlot) {
     const model = readValue(options.model);
     if (model) {
         if (model.length <= 1) {
@@ -14,6 +14,7 @@ export function Slot(ctx, options) {
         }
         else {
             for (const key in options) {
+                /* istanbul ignore else */
                 if (!(options[key] instanceof IValue)) {
                     options[key] = ctx.ref(options[key]);
                 }
@@ -22,25 +23,27 @@ export function Slot(ctx, options) {
         model(options, ctx);
     }
     else {
-        readValue(options.slot)?.(ctx);
+        (readValue(options.slot) ?? defaultSlot)?.(ctx);
     }
 }
-export function If(ctx, { condition, slot: magicSlot }) {
-    const slot = readValue(magicSlot);
+export function If({ condition, slot: magicSlot }, ctx, defaultSlot) {
+    const slot = readValue(magicSlot) ?? defaultSlot;
     ctx.if(condition instanceof IValue ? condition : ctx.ref(condition), slot ?? (() => { }));
 }
-export function ElseIf(ctx, { condition, slot: magicSlot }) {
-    const slot = readValue(magicSlot);
+export function ElseIf({ condition, slot: magicSlot }, ctx, defaultSlot) {
+    const slot = readValue(magicSlot) ?? defaultSlot;
     ctx.elif(condition instanceof IValue ? condition : ctx.ref(condition), slot ?? (() => { }));
 }
-export function Else(ctx, { slot: magicSlot }) {
-    const slot = readValue(magicSlot);
+export function Else({ slot: magicSlot }, ctx, defaultSlot) {
+    const slot = readValue(magicSlot) ?? defaultSlot;
+    /* istanbul ignore else */
     if (slot) {
         ctx.else(slot);
     }
 }
-export function For(ctx, { of, slot: magicSlot }) {
-    const slot = readValue(magicSlot);
+export function For({ of, slot: magicSlot }, ctx, defaultSlot) {
+    const slot = readValue(magicSlot) ?? defaultSlot;
+    /* istanbul ignore else */
     if (of instanceof IValue) {
         ctx.create(new CoreWatch({
             model: of,
@@ -71,7 +74,7 @@ export function For(ctx, { of, slot: magicSlot }) {
         else if (model instanceof SetModel) {
             node.create(new SetView({
                 model,
-                slot,
+                slot: slot,
             }, node.runner));
         }
         // fallback if is used external Array/Map/Set
@@ -98,21 +101,23 @@ export function For(ctx, { of, slot: magicSlot }) {
         }
     }
 }
-export function Watch(ctx, { model, slot: magicSlot }) {
-    const slot = readValue(magicSlot);
+export function Watch({ model, slot: magicSlot }, ctx, defaultSlot) {
+    const slot = readValue(magicSlot) ?? defaultSlot;
+    /* istanbul ignore else */
     if (slot && model instanceof IValue) {
         ctx.create(new CoreWatch({ model, slot }, ctx.runner));
     }
 }
-export function Debug(ctx, { model }) {
+export function Debug({ model }, ctx) {
     const value = model instanceof IValue ? model : ctx.ref(model);
     ctx.debug(value);
 }
-export function Delay(ctx, { time, slot }) {
+export function Delay({ time, slot }, ctx, defaultSlot) {
     const fragment = new Fragment({}, ctx.runner, ":timer");
-    const dSlot = readValue(slot);
+    const dSlot = readValue(slot) ?? defaultSlot;
     let timer;
     ctx.create(fragment, function (node) {
+        /* istanbul ignore else */
         if (dSlot) {
             timer = setTimeout(() => {
                 dSlot(node);

package/lib/compose.js

@@ -1,36 +1,93 @@
 import { Fragment, 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(node, renderer, props, callback, slot, name) {
+    if (!node) {
+        throw new Error("Vasille: Component context is missing");
+    }
+    const frag = new Fragment(props, node.runner, name);
+    if (slot) {
+        props.slot = slot;
+    }
+    node.create(frag);
+    try {
+        const result = renderer(frag, props);
+        if (result !== undefined && callback) {
+            callback(result);
+        }
+    }
+    catch (e) {
+        reportError(e);
+    }
+}
+function fieldError(key) {
+    return new Error([
+        `Vasille: Field ${key} has a reactive value, which is not allowed in model.`,
+        "Use bridge.stored() to disable the reactivity of value,",
+        "or hybridView properties parameter which accepts reactive values.",
+    ].join(" "));
 }
-function create(renderer, name) {
-    return function (node, props, slot) {
-        const frag = new Fragment(props, node.runner, name);
-        if (slot) {
-            props.slot = slot;
+function getProp(target, p, isModel) {
+    if (isModel) {
+        const value = target[p];
+        if (value instanceof IValue) {
+            throw fieldError(String(p));
         }
-        node.create(frag);
-        try {
-            const result = renderer(frag, proxy(props));
-            if (result !== undefined && props.callback) {
-                props.callback(result);
-            }
+        return value;
+    }
+    else {
+        const value = target[p];
+        if (value instanceof IValue) {
+            return value;
         }
-        catch (e) {
-            reportError(e);
+        return (target[p] = new Reference(target[p]));
+    }
+}
+export function mvvmView(renderer, name) {
+    return function (props, node, slot) {
+        create(node, renderer, new Proxy(props, {
+            get(target, p) {
+                return getProp(target, p);
+            },
+        }), props.callback, slot, name);
+    };
+}
+export function mvcView(renderer, name) {
+    return function (props, node, slot) {
+        for (const key in props) {
+            if (props[key] instanceof IValue) {
+                throw fieldError(key);
+            }
         }
+        create(node, renderer, props, props.callback, slot, name);
     };
 }
-export function compose(renderer, name) {
-    return create(renderer, name);
+export function hybridView(renderer, modelProps, name) {
+    if (modelProps.length === 0) {
+        return mvvmView(renderer, name);
+    }
+    else if (modelProps.length === 1) {
+        const key = modelProps[0];
+        return function (props, node, slot) {
+            create(node, renderer, new Proxy(props, {
+                get(target, p) {
+                    return getProp(target, p, key === p);
+                },
+            }), props.callback, slot, name);
+        };
+    }
+    const modelPropsSet = new Set(modelProps);
+    return function (props, node, slot) {
+        create(node, renderer, new Proxy(props, {
+            get(target, p) {
+                return getProp(target, p, modelPropsSet.has(p));
+            },
+        }), props.callback, slot, name);
+    };
 }
-export function mount(tag, component, runner, $) {
+export function mount(tag, view, runner, $) {
     const root = new App(tag, runner, {});
     const frag = new Fragment({}, runner, ":app-root");
     root.create(frag, function () {
-        component(frag, $);
+        view($, frag);
     });
+    return root;
 }

package/lib/index.js

@@ -1,4 +1,4 @@
 export { Debug, Delay, Else, ElseIf, For, If, Slot, Watch } from "./components.js";
-export { compose, mount } from "./compose.js";
+export { mvvmView, mvcView, hybridView, mount } from "./compose.js";
 export { awaited, store } from "./library.js";
 export { internal as $ } from "./internal.js";

package/lib/internal.js

@@ -1,4 +1,4 @@
-import { proxyArrayModel, Expression, Pointer, Reference } from "vasille";
+import { IValue, proxyArrayModel, Expression, Pointer, Reference } from "vasille";
 import { reactiveObject, reactiveObjectProxy, storeReactiveObject } from "./objects.js";
 import { ContextArray, ContextMap, ContextSet } from "./models.js";
 export const internal = {
@@ -8,12 +8,15 @@ export const internal = {
     },
     /** create a forward-only pointer (without context), use it for OwningPointer */
     fo(v) {
-        return new Pointer(v instanceof Reference ? v : new Reference(v));
+        return new Pointer(v);
     },
     /** create a reference (without context), use it for default composing props values */
     r(v) {
         return new Reference(v);
     },
+    rv(v) {
+        return v instanceof IValue ? v.$ : v;
+    },
     /** create a reactive object proxy, use it for sending reactive objects to child components */
     rop(o) {
         return reactiveObjectProxy(o);

package/lib/models.js

@@ -90,6 +90,7 @@ export class ContextArray extends ArrayModel {
 export class ContextMap extends MapModel {
     constructor(map) {
         const ctx = new Context();
+        /* istanbul ignore else */
         if (map) {
             for (const item of map) {
                 item[1] = ctx.checkEnable(item[1]);
@@ -122,6 +123,7 @@ export class ContextSet extends SetModel {
     constructor(set) {
         const ctx = new Context();
         const real = new Map();
+        /* istanbul ignore else */
         if (set) {
             for (let i = 0; i < set.length; i++) {
                 real.set(set[i], (set[i] = ctx.checkEnable(set[i])));

package/lib/objects.js

@@ -13,6 +13,7 @@ export function proxyObject(obj, proxyRef) {
         },
         set(target, p, newValue, receiver) {
             const response = Reflect.set(target, p, newValue, receiver);
+            /* istanbul ignore else */
             if (response) {
                 proxyRef.forceUpdate();
             }
@@ -20,6 +21,7 @@ export function proxyObject(obj, proxyRef) {
         },
         defineProperty(target, property, attributes) {
             const response = Reflect.defineProperty(target, property, attributes);
+            /* istanbul ignore else */
             if (response) {
                 proxyRef.forceUpdate();
             }
@@ -27,6 +29,7 @@ export function proxyObject(obj, proxyRef) {
         },
         deleteProperty(target, p) {
             const response = Reflect.deleteProperty(target, p);
+            /* istanbul ignore else */
             if (response) {
                 proxyRef.forceUpdate();
             }
@@ -61,6 +64,7 @@ export function reactiveObject(node, o, name) {
             }
         },
         deleteProperty(_, p) {
+            /* istanbul ignore else */
             if (p in o && o[p] instanceof IValue) {
                 node.release(p[0]);
             }
@@ -81,6 +85,7 @@ export function reactiveObjectProxy(o) {
 }
 export function storeReactiveObject(o) {
     for (const key of Object.keys(o)) {
+        /* istanbul ignore else */
         if (!(o[key] instanceof IValue)) {
             o[key] = new Reference(proxy(o[key]));
         }

package/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/components.ts","../src/compose.ts","../src/index.ts","../src/internal.ts","../src/library.ts","../src/models.ts","../src/objects.ts"],"version":"5.9.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasille-jsx",
-  "version": "3.1.3",
+  "version": "3.2.1",
   "description": "The first Developer eXperience Orientated front-end framework (JSX components)",
   "main": "lib/index.js",
   "exports": {
@@ -37,7 +37,7 @@
     "url": "git+https://github.com/vasille-js/vasille-js.git"
   },
   "dependencies": {
-    "vasille": "^3.1.0"
+    "vasille": "^3.2.1"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",

package/types/components.d.ts

@@ -7,34 +7,34 @@ interface SlotOptions<Node, Element, TagOptions extends object, T extends object
     model?: (input: T, ctx: Fragment<Node, Element, TagOptions>) => void;
     slot?: (ctx: Fragment<Node, Element, TagOptions>) => void;
 }
-export declare function Slot<Node, Element, TagOptions extends object, T extends object = {}>(ctx: Fragment<Node, Element, TagOptions>, options: Magic<SlotOptions<Node, Element, TagOptions, T>> & T): void;
+export declare function Slot<Node, Element, TagOptions extends object, T extends object = {}>(options: Magic<SlotOptions<Node, Element, TagOptions, T>> & T, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
 interface IfOptions {
     condition: unknown;
     slot?: () => void;
 }
-export declare function If<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { condition, slot: magicSlot }: Magic<IfOptions>): void;
-export declare function ElseIf<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { condition, slot: magicSlot }: Magic<IfOptions>): void;
+export declare function If<Node, Element, TagOptions extends object>({ condition, slot: magicSlot }: Magic<IfOptions>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: () => void): void;
+export declare function ElseIf<Node, Element, TagOptions extends object>({ condition, slot: magicSlot }: Magic<IfOptions>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: () => void): void;
 interface ElseOptions {
     slot?: () => void;
 }
-export declare function Else<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { slot: magicSlot }: Magic<ElseOptions>): void;
+export declare function Else<Node, Element, TagOptions extends object>({ slot: magicSlot }: Magic<ElseOptions>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: () => void): void;
 interface ForOptions<Node, Element, TagOptions extends object, T, K, V> {
     of: T;
     slot?: (ctx: Fragment<Node, Element, TagOptions>, value: T, index: K) => void;
 }
-export declare function For<Node, Element, TagOptions extends object, T extends Set<unknown> | Map<unknown, unknown> | unknown[], K = T extends unknown[] ? number : T extends Set<infer R> ? R : T extends Map<infer R, unknown> ? R : never, V = T extends (infer R)[] ? R : T extends Set<infer R> ? R : T extends Map<unknown, infer R> ? R : never>(ctx: Fragment<Node, Element, TagOptions>, { of, slot: magicSlot }: Magic<ForOptions<Node, Element, TagOptions, T, K, V>>): void;
+export declare function For<Node, Element, TagOptions extends object, T extends Set<unknown> | Map<unknown, unknown> | unknown[], K = T extends unknown[] ? number : T extends Set<infer R> ? R : T extends Map<infer R, unknown> ? R : never, V = T extends (infer R)[] ? R : T extends Set<infer R> ? R : T extends Map<unknown, infer R> ? R : never>({ of, slot: magicSlot }: Magic<ForOptions<Node, Element, TagOptions, T, K, V>>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
 interface WatchOptions<Node, Element, TagOptions extends object, T> {
     model: T;
     slot?: (ctx: Fragment<Node, Element, TagOptions>, value: T) => void;
 }
-export declare function Watch<Node, Element, TagOptions extends object, T>(ctx: Fragment<Node, Element, TagOptions>, { model, slot: magicSlot }: Magic<WatchOptions<Node, Element, TagOptions, T>>): void;
+export declare function Watch<Node, Element, TagOptions extends object, T>({ model, slot: magicSlot }: Magic<WatchOptions<Node, Element, TagOptions, T>>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
 interface DebugOptions {
     model: unknown;
 }
-export declare function Debug<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { model }: DebugOptions): void;
+export declare function Debug<Node, Element, TagOptions extends object>({ model }: DebugOptions, ctx: Fragment<Node, Element, TagOptions>): void;
 interface DelayOptions<Node, Element, TagOptions extends object> {
     time?: number;
     slot?: (ctx: Fragment<Node, Element, TagOptions>) => unknown;
 }
-export declare function Delay<Node, Element, TagOptions extends object>(ctx: Fragment<Node, Element, TagOptions>, { time, slot }: Magic<DelayOptions<Node, Element, TagOptions>>): void;
+export declare function Delay<Node, Element, TagOptions extends object>({ time, slot }: Magic<DelayOptions<Node, Element, TagOptions>>, ctx: Fragment<Node, Element, TagOptions>, defaultSlot?: (ctx: Fragment<Node, Element, TagOptions>) => void): void;
 export {};

package/types/compose.d.ts

@@ -1,10 +1,12 @@
-import { Fragment, Runner } from "vasille";
+import { Fragment, App, Runner } from "vasille";
 interface CompositionProps {
     slot?: (...args: any[]) => void;
 }
-type Composed<Node, Element, TagOptions extends object, In extends CompositionProps, Out> = (node: Fragment<Node, Element, TagOptions>, $: In & {
+export type Composed<Node, Element, TagOptions extends object, In extends CompositionProps, Out> = ($: In & {
     callback?(data: Out | undefined): void;
-}, slot?: In["slot"]) => void;
-export declare function compose<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out, name: string): Composed<Node, Element, TagOptions, In, Out>;
-export declare function mount<Node, Element, TagOptions extends object, T>(tag: Element, component: (node: Fragment<Node, Element, TagOptions>, $: T) => unknown, runner: Runner<Node, Element, TagOptions>, $: T): void;
+}, node?: Fragment<Node, Element, TagOptions>, slot?: In["slot"]) => void;
+export declare function mvvmView<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out, name: string): Composed<Node, Element, TagOptions, In, Out>;
+export declare function mvcView<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out, name: string): Composed<Node, Element, TagOptions, In, Out>;
+export declare function hybridView<Node, Element, TagOptions extends object, In extends CompositionProps, Out>(renderer: (node: Fragment<Node, Element, TagOptions>, input: In) => Out, modelProps: string[], name: string): Composed<Node, Element, TagOptions, In, Out>;
+export declare function mount<Node, Element, TagOptions extends object, T>(tag: Element, view: ($: T, node: Fragment<Node, Element, TagOptions>) => unknown, runner: Runner<Node, Element, TagOptions>, $: T): App<Node, Element, TagOptions>;
 export {};

package/types/index.d.ts

@@ -1,4 +1,4 @@
 export { Debug, Delay, Else, ElseIf, For, If, Slot, Watch } from "./components.js";
-export { compose, mount } from "./compose.js";
+export { mvvmView, mvcView, hybridView, mount, Composed } from "./compose.js";
 export { awaited, store } from "./library.js";
 export { internal as $ } from "./internal.js";

package/types/internal.d.ts

@@ -5,9 +5,10 @@ export declare const internal: {
     /** create an expression (without context), use it for OwningPointer */
     ex<T, Args extends unknown[]>(func: (...args: Args) => T, values: KindOfIValue<Args>): Expression<T, Args>;
     /** create a forward-only pointer (without context), use it for OwningPointer */
-    fo<T>(v: IValue<T> | T): IValue<T>;
+    fo<T>(v: IValue<T>): IValue<T>;
     /** create a reference (without context), use it for default composing props values */
     r<T>(v: T): IValue<T>;
+    rv<T>(v: T | IValue<T>): T;
     /** create a reactive object proxy, use it for sending reactive objects to child components */
     rop<T extends {
         [k: string | symbol]: IValue<unknown>;

package/types/tsconfig-types.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../src/components.ts","../src/compose.ts","../src/index.ts","../src/internal.ts","../src/library.ts","../src/models.ts","../src/objects.ts"],"version":"5.9.2"}