vasille-web 7.0.0-rc.2 → 7.0.0

package/build/web/css/lib.js

@@ -0,0 +1,75 @@
+let common;
+export let mobile;
+export let tablet;
+export let desktop;
+let dark;
+let light;
+export let mobileMaxWidth = 440;
+export let tabletMaxWidth = 880;
+export let laptopMaxWidth = 1320;
+export function setMobileMaxWidth(value) {
+    mobileMaxWidth = value;
+}
+export function setTabletMaxWidth(value) {
+    tabletMaxWidth = value;
+}
+export function setLaptopMaxWidth(value) {
+    laptopMaxWidth = value;
+}
+function createStyleSheet(media) {
+    const style = document.createElement("style");
+    style.media = media;
+    document.head.append(style);
+    return style.sheet;
+}
+export function insertRule(target, rule) {
+    let sheet;
+    switch (target) {
+        case 0:
+            /* istanbul ignore else */
+            if (!common) {
+                common = createStyleSheet("");
+            }
+            sheet = common;
+            break;
+        case 1:
+            /* istanbul ignore else */
+            if (!mobile) {
+                mobile = createStyleSheet(`(max-width:${mobileMaxWidth}px)`);
+            }
+            sheet = mobile;
+            break;
+        case 2:
+            /* istanbul ignore else */
+            if (!tablet) {
+                tablet = createStyleSheet(`(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)`);
+            }
+            sheet = tablet;
+            break;
+        case 3:
+            /* istanbul ignore else */
+            if (!desktop) {
+                desktop = createStyleSheet(`(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)`);
+            }
+            sheet = desktop;
+            break;
+        case 4:
+            /* istanbul ignore else */
+            if (!dark) {
+                dark = createStyleSheet("(prefers-color-scheme:dark)");
+            }
+            sheet = dark;
+            break;
+        case 5:
+            /* istanbul ignore else */
+            if (!light) {
+                light = createStyleSheet("(prefers-color-scheme:light)");
+            }
+            sheet = light;
+            break;
+    }
+    /* istanbul ignore else */
+    if (sheet) {
+        sheet.insertRule(rule, sheet.cssRules.length);
+    }
+}

package/build/web/index.d.ts

@@ -0,0 +1,6 @@
+export { safe } from "vasille";
+export { view, view as component, view as compose, ensure, ref, ref as state, expr, expr as bind, expr as calculate, expr as watch, expr as effect, expr as live, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, debounceRef as debounced, safeExpr as safeLive, safeRef as safeState, safeInit, toDeepFieldRef, toFieldRef, Zombie, abortSignal, SteelContext, Model, } from "vasille";
+export { screen, screen as page } from "vasille";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, styleSheet } from "./css/index.js";
+export { context, impute, receive, share, receiveOptional } from "vasille";
+export { Prompt, showPrompt, prompt, mount, modal, routerApp } from "./mount.js";

package/build/web/index.js

@@ -0,0 +1,6 @@
+export { safe } from "vasille";
+export { view, view as component, view as compose, ensure, ref, ref as state, expr, expr as bind, expr as calculate, expr as watch, expr as effect, expr as live, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, debounceRef as debounced, safeExpr as safeLive, safeRef as safeState, safeInit, toDeepFieldRef, toFieldRef, Zombie, abortSignal, SteelContext, Model, } from "vasille";
+export { screen, screen as page } from "vasille";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, styleSheet } from "./css/index.js";
+export { context, impute, receive, share, receiveOptional } from "vasille";
+export { Prompt, showPrompt, prompt, mount, modal, routerApp } from "./mount.js";

package/{types → build/web/jsx}/jsx-runtime.d.ts

@@ -1,5 +1,6 @@
-import type { RawStyleProps } from "./spec/css.ts";
+import type { ElementStyleProps } from "./spec/css.ts";
 import type { HtmlTagMap } from "./spec/html.ts";
+import { CssStyleInjector } from "../css/index.js";
 export type { TagEvents, TagAttrs, TagProps } from "./spec/html.ts";
 export type prefixedObject<T, P extends string> = {
     [K in keyof T as K extends string ? `${P}${K}` : never]?: T[K];
@@ -7,19 +8,19 @@ export type prefixedObject<T, P extends string> = {
 export type EventHandlers<T> = {
     [K in keyof T]: T[K] | [T[K], boolean | AddEventListenerOptions];
 };
-export type ClassItem = string | Record<string, boolean> | false;
+export type ClassItem = string | CssStyleInjector | false | null | undefined;
 declare const internal: unique symbol;
 export interface VasilleElement {
     [internal]: typeof internal;
 }
 export type VasilleChild = VasilleElement | string | number | boolean | null | undefined;
-export type VasilleSlot = VasilleChild | VasilleChild[];
+export type VasilleSlot = VasilleChild | VasilleChild[] | void[];
 type HtmlInput<K extends keyof HTMLElementTagNameMap & keyof HtmlTagMap> = {
-    callback?: (node: HTMLElementTagNameMap[K]) => unknown;
-    class?: ClassItem[] | string;
-    style?: RawStyleProps | string;
+    callback?: (node: HTMLElementTagNameMap[K]) => void | HTMLElementTagNameMap[K] | (() => void);
+    class?: ClassItem[] | string | CssStyleInjector;
+    style?: ElementStyleProps | string;
     "vasille:slot"?: VasilleSlot;
-} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<EventHandlers<HtmlTagMap[K]["events"]>, "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "bind:">>;
+} & Partial<HtmlTagMap[K]["attrs"]> & prefixedObject<EventHandlers<HtmlTagMap[K]["events"]>, "on"> & Partial<prefixedObject<HtmlTagMap[K]["props"], "property:">>;
 export declare namespace JSX {
     type ElementType = keyof IntrinsicElements | ((props: any) => void);
     type Element = VasilleElement;

package/build/web/jsx/spec/css.d.ts

@@ -0,0 +1,7 @@
+import type { ObsoletePropertiesHyphen, StandardPropertiesHyphen, VendorPropertiesHyphen } from "csstype";
+export type ElementStyleProps = StandardPropertiesHyphen<string | number | number[]> & VendorPropertiesHyphen<string | number | number[]> & ObsoletePropertiesHyphen<string | number | number[]> & {
+    [variable: `--${string}`]: string;
+};
+export type StyleSheetProps = {
+    [K in keyof ElementStyleProps]: ElementStyleProps[K] | ElementStyleProps[K][];
+};

package/build/web/jsx/spec/css.js

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

package/{types → build/web/jsx}/spec/html.d.ts

@@ -28,6 +28,7 @@ export interface TagAttrs {
     lang: string;
     nonce: string;
     part: string;
+    role: string;
     slot: string;
     spellcheck: "true" | "false" | "" | boolean;
     tabindex: number;
@@ -132,6 +133,7 @@ interface ImgAttrs extends TagAttrs {
     referrerpolicy: string;
     decoding: string;
     loading: string;
+    fetchpriority: "high" | "low" | "auto";
 }
 interface IframeAttrs extends TagAttrs {
     src: string;

package/build/web/jsx/spec/html.js

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

package/build/web/mount.d.ts

@@ -0,0 +1,19 @@
+import { AppNode, CompositionProps, Fragment, PortalNode } from "vasille";
+import { WebTagOptions } from "./runner/runner.js";
+import { WebRouterInitialization } from "./router/router.js";
+export declare function modal<T extends CompositionProps>(modal: (node: Fragment<Node, Element, WebTagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, WebTagOptions>) => PortalNode<Node, Element, WebTagOptions>): (input: T, node?: Fragment<Node, Element, WebTagOptions>, slot?: T["slot"]) => void;
+export interface PromptProps {
+    resolve(data: unknown): void;
+    reject(err: unknown): void;
+}
+export declare class Prompt<T extends PromptProps, Extra extends [number, ...unknown[]]> {
+    private readonly modal;
+    private readonly create;
+    private readonly debugProps?;
+    constructor(modal: (node: Fragment<Node, Element, WebTagOptions>, input: T) => void, create: (node: Fragment<Node, Element, WebTagOptions>, extra: Extra) => PortalNode<Node, Element, WebTagOptions>, debugProps?: PromptProps | undefined);
+    show(node: Fragment<Node, Element, WebTagOptions>, input: Omit<T, "resolve" | "reject">, ...extra: Extra): Promise<unknown>;
+}
+export declare function prompt<T extends PromptProps, Extra extends [number, ...unknown[]]>(modal: (node: Fragment<Node, Element, WebTagOptions>, input: T) => void, create?: (node: Fragment<Node, Element, WebTagOptions>) => PortalNode<Node, Element, WebTagOptions>): Prompt<T, Extra>;
+export declare function showPrompt<T extends PromptProps, Extra extends [number, ...unknown[]]>(ctx: Fragment<Node, Element, WebTagOptions>, prompt: Prompt<T, Extra>, input: Omit<T, "resolve" | "reject">, ...args: Extra): Promise<unknown>;
+export declare function mount<T>(element: Element, component: ($: T, node: Fragment<Node, Element, WebTagOptions>) => void, input: T): AppNode<Node, Element, WebTagOptions>;
+export declare function routerApp<Routes extends string>(init: WebRouterInitialization<Routes>, element?: Element): AppNode<Node, Element, WebTagOptions>;

package/{lib/index.js → build/web/mount.js}

@@ -1,17 +1,9 @@
-import { Portal, reportError } from "vasille";
-import { Runner } from "vasille/web-runner";
-import { mount as coreMount } from "vasille-jsx";
-import { routeApp as coreRouteApp } from "vasille-router/web-router";
-export { styleSheet } from "vasille-css";
-export { safe } from "vasille";
-export { view, view as component, view as compose, ensure, ref, expr, expr as bind, expr as calculate, expr as watch, set, Delay, For, Slot, Watch, awaited, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, ArrayView, ArrayModelView, MapModelView, SetModelView, QueuedRender, } from "vasille-jsx";
-export { screen, screen as page, } from "vasille-router";
-export { Router } from "vasille-router/web-router";
-export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
-export { context, impute, receive, share, receiveOptional } from "vasille-context";
+import { mountApp, PortalNode, reportError } from "vasille";
+import { WebRunner } from "./runner/runner.js";
+import { webRouterApp } from "./router/router.js";
 function createPortal(node) {
-    const portal = new Portal({ node: document.body }, node.runner, node.sDeep + 1);
-    node.create(portal);
+    const portal = new PortalNode(document.body, node.runner, node.sDeep + 1);
+    node.child(portal);
     return portal;
 }
 export function modal(modal, create = createPortal) {
@@ -31,15 +23,21 @@ export function modal(modal, create = createPortal) {
         }
     };
 }
-export function prompt(modal, create = createPortal) {
-    return function (node, input, timeout, debugProps) {
+export class Prompt {
+    constructor(modal, create, debugProps) {
+        this.modal = modal;
+        this.create = create;
+        this.debugProps = debugProps;
+    }
+    show(node, input, ...extra) {
+        const { modal, create, debugProps } = this;
         return new Promise((resolve, reject) => {
-            const portal = create(node);
-            const timer = timeout &&
+            const portal = create(node, extra);
+            const timer = extra[0] &&
                 setTimeout(() => {
                     destroy();
                     reject(new Error("Timeout"));
-                }, timeout);
+                }, extra[0]);
             function destroy() {
                 timer && clearTimeout(timer);
                 portal.destroy(portal.sDeep);
@@ -56,6 +54,7 @@ export function prompt(modal, create = createPortal) {
                         destroy();
                         debugProps?.reject(error);
                         reject(error);
+                        reject(error);
                     },
                 });
             }
@@ -64,11 +63,17 @@ export function prompt(modal, create = createPortal) {
                 reject(e);
             }
         });
-    };
+    }
+}
+export function prompt(modal, create = createPortal) {
+    return new Prompt(modal, create);
+}
+export function showPrompt(ctx, prompt, input, ...args) {
+    return prompt.show(ctx, input, ...args);
 }
 export function mount(element, component, input) {
-    return coreMount(element, component, new Runner(window.document), input);
+    return mountApp(element, component, new WebRunner(window.document), input);
 }
 export function routerApp(init, element) {
-    return coreRouteApp(element ?? document.body, window, window.location, init);
+    return webRouterApp(element ?? document.body, window, window.location, init);
 }

package/build/web/router/router.d.ts

@@ -0,0 +1,45 @@
+import { Answer, Fragment, QueryParams, Reference, Router, RouteRenderScope, RouterInitialization, ScreenProps } from "vasille";
+import { WebTagOptions } from "../runner/runner.js";
+export interface WebRouterInitialization<Routes extends string> extends RouterInitialization<Node, Element, WebTagOptions, Routes, {}> {
+    loadingScreen?(props: object, node: Fragment<Node, Element, WebTagOptions>): void;
+    loadingOverlay?(props: object, node: Fragment<Node, Element, WebTagOptions>): void;
+    Wrapper?(data: {
+        slot(data: object, ctx: Fragment<Node, Element, WebTagOptions>): void;
+    }, ctx: Fragment<Node, Element, WebTagOptions>): void;
+}
+export type NavigationMode = "silent" | "loading-screen" | "loading-overlay";
+export declare class WebRouter<Routes extends string> extends Router<Node, Element, WebTagOptions, Routes, {}, [
+    NavigationMode
+]> {
+    readonly $currentUrl: Reference<string, unknown>;
+    readonly $loadingUrl: Reference<string | null, unknown>;
+    protected readonly webInit: WebRouterInitialization<Routes>;
+    protected readonly window: Window;
+    protected readonly location: Location;
+    protected readonly node: Fragment<Node, Element, WebTagOptions>;
+    protected loadingNode: Fragment<Node, Element, WebTagOptions>;
+    protected contentNode: Fragment<Node, Element, WebTagOptions>;
+    protected overlayNode: Fragment<Node, Element, WebTagOptions>;
+    constructor(window: Window, location: Location, node: Fragment<Node, Element, WebTagOptions>, init: WebRouterInitialization<Routes>);
+    /**
+     * Navigate to a new page, showing the loading screen
+     */
+    goTo(url: string): void;
+    /**
+     * Navigate to a new page in an AJAX way, showing a loading overlay
+     */
+    ajax(url: string): void;
+    /**
+     * Load the new page in the background, will throw on errors
+     */
+    load(url: string): Promise<void>;
+    reload(): void;
+    protected doNavigate(url: string, canNavigate: boolean, mode: NavigationMode): void;
+    protected parseUrl(url: string): [string, QueryParams, string];
+    protected loadTarget<Route extends string>(target: Answer<Node, Element, WebTagOptions, Route, {}>, props: ScreenProps<Route>, mode: NavigationMode): Promise<void>;
+    protected renderScreen<Props>(screen: (props: Props, ctx: Fragment<Node, Element, WebTagOptions>) => void | Promise<void>, props: Props, scope: RouteRenderScope): Promise<void>;
+    protected clearLoadings(): void;
+    protected clearNode(node: Fragment<Node, Element, WebTagOptions>): void;
+    protected build(node: Fragment<Node, Element, WebTagOptions>, run?: (node: Fragment<Node, Element, WebTagOptions>) => void): void;
+}
+export declare function webRouterApp<Routes extends string>(node: Element, window: Window, location: Location, init: WebRouterInitialization<Routes>): import("vasille").AppNode<Node, Element, WebTagOptions, import("vasille").IRunner<Node, Element, WebTagOptions>>;

package/build/web/router/router.js

@@ -0,0 +1,131 @@
+import { Fragment, mountApp, Reference, reportError, Router, } from "vasille";
+import { WebRunner } from "../runner/runner.js";
+export class WebRouter extends Router {
+    constructor(window, location, node, init) {
+        super(init);
+        this.$currentUrl = new Reference("");
+        this.$loadingUrl = new Reference(null);
+        this.webInit = init;
+        this.window = window;
+        this.location = location;
+        this.node = node;
+        this.$currentUrl.V = location.pathname;
+        let routerNode = node;
+        if (init.Wrapper) {
+            init.Wrapper({
+                slot(_data, ctx) {
+                    routerNode = ctx;
+                },
+            }, node);
+        }
+        this.build(routerNode, node => (this.loadingNode = node));
+        this.build(routerNode, node => (this.contentNode = node));
+        this.build(routerNode, node => (this.overlayNode = node));
+        window.addEventListener("popstate", () => {
+            this.doNavigate(location.href, false, "loading-screen");
+        });
+        this.doNavigate(location.href, true, "loading-screen");
+    }
+    /**
+     * Navigate to a new page, showing the loading screen
+     */
+    goTo(url) {
+        this.doNavigate(url, true, "loading-screen");
+    }
+    /**
+     * Navigate to a new page in an AJAX way, showing a loading overlay
+     */
+    ajax(url) {
+        this.doNavigate(url, true, "loading-overlay");
+    }
+    /**
+     * Load the new page in the background, will throw on errors
+     */
+    load(url) {
+        return this.prepareNavigation(url, true, true, "silent");
+    }
+    reload() {
+        this.doNavigate(this.$currentUrl.V, true, "loading-screen");
+    }
+    doNavigate(url, canNavigate, mode) {
+        this.prepareNavigation(url, canNavigate, false, mode).catch(e => {
+            this.clearLoadings();
+            reportError(e);
+        });
+    }
+    parseUrl(url) {
+        const parsed = new URL(url, this.location.origin);
+        const query = [...parsed.searchParams].reduce((prev, [key]) => {
+            return { ...prev, [key]: parsed.searchParams.getAll(key) };
+        }, {});
+        return [parsed.pathname, query, parsed.hash];
+    }
+    async loadTarget(target, props, mode) {
+        this.$loadingUrl.V = props.path;
+        try {
+            const { loadingScreen, loadingOverlay } = this.webInit;
+            if (mode === "loading-screen" && loadingScreen) {
+                this.clearNode(this.contentNode);
+                this.build(this.loadingNode, node => loadingScreen({}, node));
+            }
+            if (mode === "loading-overlay" && loadingOverlay) {
+                this.build(this.overlayNode, node => loadingOverlay({}, node));
+            }
+            await this.renderScreen(target.screen, props, "found");
+            this.$currentUrl.V = props.url;
+            if (this.location.href !== props.url && this.location.hash !== "#" + props.url) {
+                this.window.history.pushState({}, "", props.url);
+            }
+        }
+        catch (error) {
+            if (mode !== "silent") {
+                this.clearNode(this.contentNode);
+            }
+            throw error;
+        }
+        finally {
+            this.clearLoadings();
+            this.$loadingUrl.V = null;
+        }
+    }
+    async renderScreen(screen, props, scope) {
+        const children = this.contentNode.children;
+        const oldChildren = [...children];
+        let ctx = null;
+        this.build(this.contentNode, node => (ctx = node));
+        /* istanbul ignore else */
+        if (ctx) {
+            await screen(props, ctx);
+        }
+        oldChildren.forEach(node => {
+            node.destroy(node.sDeep);
+        });
+        children.splice(0, oldChildren.length);
+        if (scope === "not-found") {
+            this.window.history.replaceState({}, "", "/");
+        }
+    }
+    clearLoadings() {
+        this.clearNode(this.loadingNode);
+        this.clearNode(this.overlayNode);
+    }
+    clearNode(node) {
+        const { children } = node;
+        children.forEach(node => node.destroy(node.sDeep));
+        children.splice(0);
+    }
+    build(node, run) {
+        const child = new Fragment(node.runner, node.sDeep + 1);
+        node.child(child, run);
+    }
+}
+export function webRouterApp(node, window, location, init) {
+    const runner = new WebRunner(window.document);
+    return mountApp(node, (_data, node) => {
+        const router = new WebRouter(window, location, node, init);
+        Object.defineProperty(runner, "router", {
+            value: router,
+            writable: false,
+        });
+    }, runner, {});
+}

package/build/web/runner/binding/attribute.d.ts

@@ -0,0 +1,16 @@
+import { Binding } from "./binding.js";
+import { IValue, Tag } from "vasille";
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+export declare class AttributeBinding extends Binding<string | number | boolean | null | undefined> {
+    /**
+     * Constructs an attribute binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of attribute
+     * @param value {IValue} value to bind
+     */
+    constructor(node: Tag<Node, Element, object>, name: string, value: IValue<string | number | boolean | null | undefined, unknown>);
+}

package/build/web/runner/binding/attribute.js

@@ -0,0 +1,30 @@
+import { Binding } from "./binding.js";
+/**
+ * Represents an Attribute binding description
+ * @class AttributeBinding
+ * @extends Binding
+ */
+export class AttributeBinding extends Binding {
+    /**
+     * Constructs an attribute binding description
+     * @param node {INode} the vasille node
+     * @param name {String} the name of attribute
+     * @param value {IValue} value to bind
+     */
+    constructor(node, name, value) {
+        super(value);
+        this.init((value) => {
+            if (value || value === 0) {
+                if (typeof value === "boolean") {
+                    node.node.setAttribute(name, "");
+                }
+                else {
+                    node.node.setAttribute(name, `${value}`);
+                }
+            }
+            else {
+                node.node.removeAttribute(name);
+            }
+        });
+    }
+}

package/build/web/runner/binding/binding.d.ts

@@ -0,0 +1,20 @@
+import { IValue, Destroyable } from "vasille";
+/**
+ * Describe a common binding logic
+ * @class Binding
+ */
+export declare class Binding<T> implements Destroyable {
+    readonly rDeep: number;
+    private binding;
+    private func;
+    /**
+     * Constructs a common binding logic
+     * @param value {IValue} the value to bind
+     */
+    constructor(value: IValue<T, unknown>);
+    protected init(bounded: (v: T) => void): void;
+    /**
+     * Just clear bindings
+     */
+    destroy(deep: number): void;
+}

package/build/web/runner/binding/binding.js

@@ -0,0 +1,28 @@
+/**
+ * Describe a common binding logic
+ * @class Binding
+ */
+export class Binding {
+    /**
+     * Constructs a common binding logic
+     * @param value {IValue} the value to bind
+     */
+    constructor(value) {
+        this.binding = value;
+        this.rDeep = value.rDeep;
+    }
+    init(bounded) {
+        this.func = bounded;
+        this.binding.on(this.func);
+        this.func(this.binding.V);
+    }
+    /**
+     * Just clear bindings
+     */
+    destroy(deep) {
+        /* istanbul ignore else */
+        if (this.binding.rDeep < deep) {
+            this.binding.off(this.func);
+        }
+    }
+}

package/build/web/runner/binding/class.d.ts

@@ -0,0 +1,9 @@
+import { Binding } from "./binding.js";
+import { CssStyleInjector } from "../../css/index.js";
+import { IValue, Tag } from "vasille";
+export declare function addClass(node: Tag<Node, Element, object>, cl: string): void;
+export declare function removeClass(node: Tag<Node, Element, object>, cl: string): void;
+export declare class DynamicalClassBinding extends Binding<string | CssStyleInjector | false | null | undefined> {
+    private current;
+    constructor(node: Tag<Node, Element, object>, value: IValue<string | CssStyleInjector | false | null | undefined, unknown>);
+}

package/build/web/runner/binding/class.js

@@ -0,0 +1,32 @@
+import { Binding } from "./binding.js";
+import { CssStyleInjector } from "../../css/index.js";
+export function addClass(node, cl) {
+    node.node?.classList.add(cl);
+}
+export function removeClass(node, cl) {
+    node.node?.classList.remove(cl);
+}
+export class DynamicalClassBinding extends Binding {
+    constructor(node, value) {
+        super(value);
+        this.current = "";
+        this.init(value => {
+            /* istanbul ignore else */
+            if (this.current != value) {
+                if (this.current.length) {
+                    removeClass(node, this.current);
+                }
+                /* istanbul ignore else */
+                if (value instanceof CssStyleInjector) {
+                    addClass(node, (this.current = value.inject()));
+                }
+                else if (typeof value === "string" && value.length) {
+                    addClass(node, (this.current = value));
+                }
+                else {
+                    this.current = "";
+                }
+            }
+        });
+    }
+}

package/build/web/runner/binding/property.d.ts

@@ -0,0 +1,16 @@
+import { Binding } from "./binding.js";
+import { IValue, Tag } from "vasille";
+/**
+ * Represents a property binding
+ * @class PropertyBinding
+ * @extends Binding
+ */
+export declare class PropertyBinding<T> extends Binding<T> {
+    /**
+     * Constructs a property binding description
+     * @param node the vasille node
+     * @param name the name of property
+     * @param value the value of property
+     */
+    constructor(node: Tag<Node, Element, object>, name: string, value: IValue<T, unknown>);
+}

package/build/web/runner/binding/property.js

@@ -0,0 +1,20 @@
+import { Binding } from "./binding.js";
+/**
+ * Represents a property binding
+ * @class PropertyBinding
+ * @extends Binding
+ */
+export class PropertyBinding extends Binding {
+    /**
+     * Constructs a property binding description
+     * @param node the vasille node
+     * @param name the name of property
+     * @param value the value of property
+     */
+    constructor(node, name, value) {
+        super(value);
+        this.init(value => {
+            node.node[name] = value;
+        });
+    }
+}

package/build/web/runner/binding/style.d.ts

@@ -0,0 +1,17 @@
+import { Binding } from "./binding.js";
+import { IValue, Tag } from "vasille";
+export declare function stringifyStyleValue(value: string | number | number[]): string;
+/**
+ * Describes a style attribute binding
+ * @class StyleBinding
+ * @extends Binding
+ */
+export declare class StyleBinding extends Binding<string | number | number[] | false | null | undefined> {
+    /**
+     * Constructs a style binding attribute
+     * @param node {Tag} the vasille node
+     * @param name {string} the name of style property
+     * @param value {IValue} the value to bind
+     */
+    constructor(node: Tag<Node, Element, object>, name: string, value: IValue<string | number | number[] | undefined, unknown>);
+}