vasille-web 7.0.0-rc.3 → 7.0.0

package/build/dev/mount.js

@@ -0,0 +1,91 @@
+import { devRouterApp } from "./router.js";
+import { devDynamicalModule, DevFragment, devMountApp, DevPortalNode, errorToString, inspector, toDevValue, } from "vasille/dev";
+import { modal, Prompt } from "../web/index.js";
+import { DevWebRunner } from "./runner.js";
+function createPortal(node, declaration, usage, name) {
+    const portal = new DevPortalNode(document.body, node.runner, declaration, usage, name);
+    node.child(portal);
+    return portal;
+}
+export function devModal(modalFn, declaration, name) {
+    const fragments = new Map();
+    const run = function (parent, input, usage) {
+        modal(modalFn, node => {
+            const portal = createPortal(node, declaration, usage, name);
+            const event = {
+                position: usage,
+                target: portal.id,
+            };
+            inspector.eventTrigger({
+                eventName: "open",
+                time: Date.now(),
+                ...event,
+            });
+            portal.runOnDestroy(() => {
+                inspector.eventTrigger({
+                    eventName: "close",
+                    time: Date.now(),
+                    ...event,
+                });
+            });
+            return portal;
+        })(input, parent, undefined);
+    };
+    const renderer = (input, node, slot, usage) => {
+        if (!node) {
+            throw new Error("Vasille: Modal context is missing");
+        }
+        const frag = new DevFragment(node.runner, null, null, name, {});
+        if (!input.slot && slot) {
+            input.slot = slot;
+        }
+        node.child(frag);
+        fragments.set(frag, { props: input, node: frag, usage });
+        run(frag, input, usage);
+    };
+    return devDynamicalModule(renderer, fragments, run);
+}
+export function devPrompt(modal, declaration, name) {
+    let target;
+    return new Prompt(modal, (node, extra) => {
+        const portal = createPortal(node, declaration, extra[1], name);
+        target = portal.id;
+        inspector.eventTrigger({
+            eventName: "open",
+            time: Date.now(),
+            target: target,
+        });
+        return portal;
+    }, {
+        resolve(data) {
+            if (inspector && target) {
+                inspector.eventTrigger({
+                    eventName: "close",
+                    time: Date.now(),
+                    target,
+                    result: {
+                        value: toDevValue(data),
+                    },
+                });
+            }
+        },
+        reject(err) {
+            if (inspector && target) {
+                inspector.eventTrigger({
+                    eventName: "close",
+                    time: Date.now(),
+                    target,
+                    result: {
+                        error: errorToString(err),
+                    },
+                });
+            }
+        },
+    });
+}
+export function webDevMountApp(element, component, input, inspector) {
+    return devMountApp(element, component, new DevWebRunner(window.document), input, inspector);
+}
+export function webDevRouterApp(init, element, inspector) {
+    return devRouterApp(element, window, window.location, init, inspector);
+}

package/build/dev/router.d.ts

@@ -0,0 +1,23 @@
+import { DevFragment, Inspector, StaticPosition } from "vasille/dev";
+import { Fragment, IRunner, ScreenProps } from "vasille";
+import { WebRouter, WebRouterInitialization } from "../web/router/router.js";
+import { DevWebTagOptions } from "./runner.js";
+export declare function devScreen<Node, Element, TagOptions extends object, Route extends string>(renderer: (node: DevFragment<Node, Element, TagOptions>, input: ScreenProps<Route>) => Promise<void>, declaration: StaticPosition, name: string): (props: ScreenProps<Route>, ctx?: Fragment<Node, Element, TagOptions, IRunner<Node, Element, TagOptions>>) => Promise<void>;
+export declare class DevWebRouter<Routes extends string> extends WebRouter<Routes> {
+    constructor(window: Window, location: Location, node: Fragment<Node, Element, DevWebTagOptions, IRunner<Node, Element, DevWebTagOptions>>, init: WebRouterInitialization<Routes>);
+    goTo(url: string): void;
+    ajax(url: string): void;
+    load(url: string): Promise<void>;
+    reload(): void;
+    protected targetByUrl(url: string): {
+        url: string;
+        path: string;
+        query: import("vasille").QueryParams;
+        hash: string;
+        target: {
+            screen: import("vasille").Screen<Node, Element, import("../types/index.js").WebTagOptions, Routes>;
+        } | undefined;
+        params: object;
+    };
+}
+export declare function devRouterApp<Routes extends string>(node: Element, window: Window, location: Location, init: WebRouterInitialization<Routes>, inspector: Inspector): import("vasille/dev").DevAppNode<Node, Element, DevWebTagOptions>;

package/build/dev/router.js

@@ -0,0 +1,67 @@
+import { DevFragment, inspector, devMountApp } from "vasille/dev";
+import { createScreen } from "vasille";
+import { WebRouter } from "../web/router/router.js";
+import { DevWebRunner } from "./runner.js";
+export function devScreen(renderer, declaration, name) {
+    return createScreen(renderer, (node, props) => new DevFragment(node.runner, declaration, null, name, props));
+}
+let targetLookUpResultId = 0;
+export class DevWebRouter extends WebRouter {
+    constructor(window, location, node, init) {
+        super(window, location, node, init);
+        const data = Date.now();
+        Object.keys(init.routes).forEach(path => {
+            inspector.registeredRoute({ path });
+        });
+        this.$currentUrl.on(value => {
+            inspector.routerStateChange({ name: "currentUrl", value, time: Date.now() });
+        });
+        this.$loadingUrl.on(value => {
+            inspector.routerStateChange({ name: "loadingUrl", value, time: Date.now() });
+        });
+    }
+    goTo(url) {
+        inspector.routerActionCall({ name: "goTo", path: url, time: Date.now() });
+        super.goTo(url);
+    }
+    ajax(url) {
+        inspector.routerActionCall({ name: "ajax", path: url, time: Date.now() });
+        super.ajax(url);
+    }
+    load(url) {
+        inspector.routerActionCall({ name: "load", path: url, time: Date.now() });
+        return super.load(url);
+    }
+    reload() {
+        inspector.routerActionCall({ name: "reload", path: this.$currentUrl.V, time: Date.now() });
+        super.reload();
+    }
+    targetByUrl(url) {
+        const result = super.targetByUrl(url);
+        const id = ++targetLookUpResultId;
+        inspector.routerTargetResult({
+            id: id,
+            url: result.url,
+            path: result.path,
+            hash: result.hash,
+            params: result.params,
+            targetFound: !!result.target,
+            time: Date.now(),
+        });
+        Object.entries(result.query).forEach(([name, values]) => {
+            values.forEach(value => {
+                inspector.routerTargetResultQueryArg({ id, name, value });
+            });
+        });
+        return result;
+    }
+}
+export function devRouterApp(node, window, location, init, inspector) {
+    const runner = new DevWebRunner(window.document);
+    return devMountApp(node, (_data, node) => {
+        const router = new DevWebRouter(window, location, node, init);
+        Object.defineProperty(runner, "router", {
+            value: router,
+        });
+    }, runner, {}, inspector);
+}

package/build/dev/runner.d.ts

@@ -0,0 +1,34 @@
+import { WebRunner, WebTag, WebTagOptions, WebTextNode } from "../web/runner/runner.js";
+import { StaticPosition } from "vasille/dev";
+import { IRunner, TextProps } from "vasille";
+export interface DevWebTagOptions extends WebTagOptions {
+    usage?: StaticPosition;
+}
+export declare class PositionedText {
+    text: unknown;
+    position: StaticPosition;
+    constructor(text: unknown, position: StaticPosition);
+}
+export declare function positionedText(text: unknown, position: StaticPosition): PositionedText;
+export declare class DevWebTextNode extends WebTextNode<DevWebTagOptions, DevWebRunner> {
+    id: number;
+    constructor(input: TextProps, runner: DevWebRunner, deep: number, usage: StaticPosition);
+    destroy(deep: number, keepNodes?: boolean): void;
+    compose(): void;
+}
+export declare function remapObject<Before, After>(obj: {
+    [k: string]: Before;
+} | undefined, transform: (v: Before) => After): {
+    [k: string]: After;
+};
+export declare class DevWebTag extends WebTag<DevWebTagOptions, DevWebRunner> {
+    id: number;
+    constructor(options: DevWebTagOptions, runner: DevWebRunner, deep: number, tagName: string, usage: StaticPosition | undefined);
+    applyOptions(options: DevWebTagOptions): void;
+    destroy(deep: number, keepNodes?: boolean): void;
+    compose(): void;
+}
+export declare class DevWebRunner extends WebRunner<DevWebTagOptions> implements IRunner<Node, Element, DevWebTagOptions> {
+    textNode(deep: number, text: unknown): WebTextNode<DevWebTagOptions, DevWebRunner>;
+    tag(deep: number, tagName: string, input: DevWebTagOptions, cb?: ((ctx: DevWebTag) => void) | undefined): DevWebTag;
+}

package/build/dev/runner.js

@@ -0,0 +1,128 @@
+import { WebRunner, WebTag, WebTextNode } from "../web/runner/runner.js";
+import { getPosition, inspector, processDevObject, provideId, toDevIdOrValue } from "vasille/dev";
+import { CssStyleInjector } from "../web/css/index.js";
+export class PositionedText {
+    constructor(text, position) {
+        this.text = text;
+        this.position = position;
+    }
+}
+export function positionedText(text, position) {
+    return new PositionedText(text, position);
+}
+export class DevWebTextNode extends WebTextNode {
+    constructor(input, runner, deep, usage) {
+        super(input, runner, deep);
+        this.id = provideId();
+        inspector.createNode({
+            id: this.id,
+            time: Date.now(),
+            text: toDevIdOrValue(input.text),
+            position: usage,
+        });
+    }
+    destroy(deep, keepNodes) {
+        inspector.destroy({ id: this.id, time: Date.now() });
+        super.destroy(deep, keepNodes);
+    }
+    compose() {
+        super.compose();
+        Object.defineProperty(this.node, "vasille", { value: this.id, configurable: false, enumerable: false });
+    }
+}
+export function remapObject(obj, transform) {
+    const r = {};
+    for (const key in obj) {
+        r[key] = transform(obj[key]);
+    }
+    return r;
+}
+export class DevWebTag extends WebTag {
+    constructor(options, runner, deep, tagName, usage) {
+        super(options, runner, tagName, deep);
+        const id = (this.id = provideId());
+        inspector.createTag({
+            id: this.id,
+            time: Date.now(),
+            tagName: tagName,
+            usage: usage,
+        });
+        if (options.k) {
+            inspector.tagCallback({
+                id: id,
+                value: toDevIdOrValue(options.k),
+            });
+        }
+        if (options.d) {
+            inspector.tagOnDestroy({
+                id: id,
+                value: toDevIdOrValue(options.d),
+            });
+        }
+        processDevObject(options.a, (key, value) => {
+            inspector.tagAttr({
+                id: id,
+                name: key,
+                value: value,
+            });
+        });
+        if (options.c) {
+            for (const item of options.c) {
+                const value = item instanceof CssStyleInjector ? item.inject() : item;
+                inspector.tagClass({ id: id, value: toDevIdOrValue(value) });
+            }
+        }
+        processDevObject(options.s, (name, value) => {
+            inspector.tagStyle({ id, name, value });
+        });
+        processDevObject(options.e, (name, value) => {
+            inspector.tagEvent({ id, name, value });
+        });
+        processDevObject(options.b, (name, value) => {
+            inspector.tagBind({ id, name, value });
+        });
+    }
+    applyOptions(options) {
+        if (options.e) {
+            for (const [key, handler] of Object.entries(options.e)) {
+                const userHandler = handler instanceof Array ? handler[0] : handler;
+                const evOptions = handler instanceof Array ? handler[1] : {};
+                options.e[key] = [
+                    ev => {
+                        inspector.eventTrigger({
+                            target: this.id,
+                            eventName: key,
+                            time: Date.now(),
+                            position: getPosition(handler[0]),
+                        });
+                        userHandler(ev);
+                    },
+                    evOptions,
+                ];
+            }
+        }
+        super.applyOptions(options);
+    }
+    destroy(deep, keepNodes) {
+        inspector.destroy({ id: this.id, time: Date.now() });
+        super.destroy(deep, keepNodes);
+    }
+    compose() {
+        super.compose();
+        Object.defineProperty(this.node, "vasille", { value: this.id, configurable: false, enumerable: false });
+    }
+}
+export class DevWebRunner extends WebRunner {
+    textNode(deep, text) {
+        if (text instanceof PositionedText) {
+            return new DevWebTextNode({ text: text.text }, this, deep, text.position);
+        }
+        return new WebTextNode({ text: text }, this, deep);
+    }
+    tag(deep, tagName, input, cb) {
+        if (cb) {
+            input.l = cb;
+        }
+        return new DevWebTag(input, this, deep, tagName, input.usage);
+    }
+}

package/build/shadow/css.d.ts

@@ -0,0 +1,23 @@
+import { CssStyleInjector } from "../web/css/index.js";
+export declare class StyleSheetsManager {
+    protected readonly sheets: CSSStyleSheet[];
+    protected readonly classes: Set<string>;
+    addRoot(root: ShadowRoot): void;
+    get(index: number): CSSStyleSheet | undefined;
+    has(className: string): boolean;
+    add(className: string): void;
+}
+export declare class ShadowCssStyleInjector extends CssStyleInjector {
+    protected manager: StyleSheetsManager | undefined;
+    protected staticName: string | null;
+    protected rules: (string | [number, string])[];
+    constructor(rules: (string | [number, string])[]);
+    link(manager?: StyleSheetsManager): void;
+    protected generateClassName(): string;
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+export declare function shadowStyleSheet<T extends {
+    [k: string]: (string | [number, string])[];
+}>(styles: T): {
+    [K in keyof T]: ShadowCssStyleInjector;
+};

package/build/shadow/css.js

@@ -0,0 +1,77 @@
+import { CssStyleInjector, laptopMaxWidth, mobileMaxWidth, tabletMaxWidth } from "../web/css/index.js";
+export class StyleSheetsManager {
+    constructor() {
+        this.sheets = [];
+        this.classes = new Set();
+    }
+    addRoot(root) {
+        /* istanbul ignore else */
+        if (this.sheets.length === 0) {
+            this.sheets.push(new CSSStyleSheet({ media: "" }), new CSSStyleSheet({ media: `(max-width:${mobileMaxWidth}px)` }), new CSSStyleSheet({ media: `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)` }), new CSSStyleSheet({ media: `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)` }), new CSSStyleSheet({ media: "(prefers-color-scheme:dark)" }), new CSSStyleSheet({ media: "(prefers-color-scheme:light)" }));
+        }
+        root.adoptedStyleSheets = this.sheets;
+    }
+    get(index) {
+        return this.sheets[index];
+    }
+    has(className) {
+        const has = this.classes.has(className);
+        this.classes.add(className);
+        return has;
+    }
+    add(className) {
+        this.classes.add(className);
+    }
+}
+export class ShadowCssStyleInjector extends CssStyleInjector {
+    constructor(rules) {
+        super(rules);
+        this.staticName = null;
+        this.rules = [...rules];
+    }
+    link(manager) {
+        /* istanbul ignore else */
+        if (this.manager !== manager) {
+            this.manager = manager;
+            if (this.staticName && !manager?.has(this.staticName)) {
+                this.className = null;
+                /* istanbul ignore else */
+                if (this.styles.length === 0) {
+                    this.styles.push(...this.rules);
+                }
+            }
+            else {
+                this.className = this.staticName;
+            }
+        }
+    }
+    generateClassName() {
+        const name = this.staticName ?? super.generateClassName();
+        this.manager?.add(name);
+        return (this.staticName = name);
+    }
+    insertRule(rule, className) {
+        const index = typeof rule === "string" ? 0 : rule[0];
+        const value = typeof rule === "string" ? rule : rule[1];
+        const sheet = this.manager?.get(index);
+        try {
+            if (sheet) {
+                sheet.insertRule(value.replace("{}", className), sheet.cssRules.length);
+            }
+            else {
+                super.insertRule(rule, className);
+            }
+        }
+        catch (e) {
+            // ignore css related errors
+            void e;
+        }
+    }
+}
+export function shadowStyleSheet(styles) {
+    const result = {};
+    for (const key in styles) {
+        result[key] = new ShadowCssStyleInjector(styles[key]);
+    }
+    return result;
+}

package/build/shadow/index.d.ts

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

package/build/shadow/index.js

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

package/build/shadow/lib.d.ts

@@ -0,0 +1,11 @@
+import { WebTagOptions } from "../web/runner/runner.js";
+import { Fragment } from "vasille";
+declare const any = 0;
+declare const string = 1;
+declare const number = 2;
+declare const boolean = 3;
+interface PropsDeclaration {
+    [key: string]: typeof string | typeof number | typeof boolean | typeof any;
+}
+export declare function shadow(renderer: (node: Fragment<Node, Element, WebTagOptions>, input: object) => unknown, name: string, props: PropsDeclaration): void;
+export {};

package/build/shadow/lib.js

@@ -0,0 +1,145 @@
+import { WebRunner, WebTag } from "../web/runner/runner.js";
+import { ShadowCssStyleInjector, StyleSheetsManager } from "./css.js";
+import { AppNode, Fragment, IValue, ref, Reference } from "vasille";
+const any = 0;
+const string = 1;
+const number = 2;
+const boolean = 3;
+class ShadowTag extends WebTag {
+    applyOptions(options) {
+        if (options.c) {
+            for (const className of options.c) {
+                if (className instanceof ShadowCssStyleInjector) {
+                    className.link(this.runner.styles);
+                }
+            }
+        }
+        super.applyOptions(options);
+    }
+}
+class ShadowFragment extends Fragment {
+    constructor(app) {
+        super(app.runner, app.sDeep + 1);
+        this.parent = app;
+    }
+}
+class ShadowRunner extends WebRunner {
+    constructor(document, styles) {
+        super(document);
+        this.styles = styles;
+    }
+    tag(deep, tagName, input, cb) {
+        if (cb) {
+            input.l = cb;
+        }
+        return new ShadowTag(input, this, tagName, deep);
+    }
+}
+function toKebabCase(propName) {
+    let index = propName.startsWith("$") ? 1 : 0;
+    let name = propName[index].toLowerCase();
+    for (index++; index < propName.length; index++) {
+        const curr = propName[index];
+        if (curr === curr.toUpperCase()) {
+            name += "-";
+        }
+        name += curr.toLowerCase();
+    }
+    return name;
+}
+function readRef(ref) {
+    if (ref instanceof IValue) {
+        return ref.V;
+    }
+    return ref;
+}
+function matchAndSet(o, key, value) {
+    if (key.startsWith("$")) {
+        if (value instanceof Reference) {
+            o[key] = value;
+        }
+        else {
+            o[key].V = value;
+        }
+    }
+    else {
+        o[key] = readRef(value);
+    }
+}
+export function shadow(renderer, name, props) {
+    var _a;
+    const observableAttributes = [];
+    const attributesNamesMap = new Map();
+    const styleManager = new StyleSheetsManager();
+    for (const key in props) {
+        if (props[key]) {
+            const attributeName = toKebabCase(key);
+            observableAttributes.push(attributeName);
+            attributesNamesMap.set(attributeName, key);
+        }
+    }
+    customElements.define(name, (_a = class extends HTMLElement {
+            constructor() {
+                super();
+                const entityProps = (this.props = {});
+                const entityEvents = (this.events = {});
+                for (const key in props) {
+                    const isEvent = key.startsWith("on");
+                    const isReactive = key.startsWith("$");
+                    const container = isEvent ? entityEvents : entityProps;
+                    Object.defineProperty(this, isReactive ? key.slice(1) : key, {
+                        get: () => readRef(container[key]),
+                        set: (value) => matchAndSet(container, key, value),
+                    });
+                    if (isReactive) {
+                        entityProps[key] = ref(void 0);
+                    }
+                    if (isEvent) {
+                        const kebab = toKebabCase(key);
+                        const eventName = kebab[2] === "-" ? kebab.slice(3) : kebab.slice(2);
+                        entityProps[key] = (...args) => {
+                            this.dispatchEvent(new CustomEvent(eventName, { detail: args[0] }));
+                            return entityEvents[key]?.(...args);
+                        };
+                    }
+                }
+                const shadowRoot = this.attachShadow({ mode: "open" });
+                styleManager.addRoot(shadowRoot);
+                this.root = new AppNode(shadowRoot, new ShadowRunner(document, styleManager));
+            }
+            connectedCallback() {
+                const result = renderer(new ShadowFragment(this.root), this.props);
+                /* istanbul ignore else */
+                if (result && typeof result === "object" && result.constructor === Object) {
+                    // Object.assign does not copy getters and setters
+                    Object.defineProperties(this, Object.getOwnPropertyDescriptors(result));
+                }
+            }
+            disconnectedCallback() {
+                this.root.destroy(this.root.sDeep);
+            }
+            attributeChangedCallback(name, oldValue, newValue) {
+                const propName = attributesNamesMap.get(name);
+                /* istanbul ignore else */
+                if (propName) {
+                    const type = props[propName];
+                    switch (type) {
+                        case string: {
+                            matchAndSet(this.props, propName, newValue);
+                            break;
+                        }
+                        case number: {
+                            matchAndSet(this.props, propName, newValue ? parseFloat(newValue) : 0);
+                            break;
+                        }
+                        case boolean: {
+                            matchAndSet(this.props, propName, newValue !== null);
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+        _a.observedAttributes = observableAttributes,
+        _a));
+}

package/build/shadow/types.d.ts

@@ -0,0 +1,31 @@
+import { ClassItem, EventHandlers, prefixedObject, TagAttrs, TagEvents, TagProps } from "../web/jsx/jsx-runtime.js";
+import { ElementStyleProps } from "../web/jsx/spec/css.js";
+type Kebab<T extends string, A extends string = ""> = T extends `${infer F}${infer R}` ? Kebab<R, `${A}${F extends Lowercase<F> ? "" : "-"}${Lowercase<F>}`> : A;
+export type WebComponentAttributes<T extends object> = {
+    [K in keyof T as K extends `$${infer R}` ? Kebab<R> : K extends `on${string}` ? never : K extends string ? Kebab<K> : K]?: string extends T[K] ? T[K] : number extends T[K] ? T[K] : boolean extends T[K] ? T[K] : never;
+};
+export type WebComponentEventHandler<T, Element> = T extends (arg: infer Arg, ...args: unknown[]) => unknown ? (ev: CustomEvent<Arg>, element: Element) => void : (ev: CustomEvent<never>, element: Element) => void;
+export type WebComponentEvents<T extends object, Element> = {
+    [K in keyof T as K extends `on${infer R}` ? `on${Kebab<R>}` : never]?: ((...args: unknown[]) => any) extends T[K] ? WebComponentEventHandler<T[K], Element> : never;
+};
+export type WebComponentProps<T extends object> = {
+    [K in keyof T as K extends `$${infer R}` ? R : K]?: T[K];
+};
+export type EmptyObject = NonNullable<unknown>;
+export type WebComponent<T extends (arg: object) => void, Props extends object = T extends (arg: infer Arg) => void ? Arg extends object ? Omit<Arg, "slot" | "callback"> : EmptyObject : EmptyObject, Return extends object = T extends (arg: {
+    callback: (arg: infer Arg) => void;
+}) => void ? Arg extends object ? Arg : EmptyObject : EmptyObject> = {
+    class?: ClassItem[] | string;
+    style?: ElementStyleProps | string;
+    callback?: (element: WebComponentProps<Props> & Return & HTMLElement) => void;
+    slot?: unknown;
+} & WebComponentEvents<Props, HTMLElement & Return & WebComponentProps<Props>> & prefixedObject<EventHandlers<TagEvents<HTMLElement & Return & WebComponentProps<Props>>>, "on"> & WebComponentAttributes<Props> & Partial<TagAttrs> & prefixedObject<WebComponentProps<Props> & TagProps<HTMLElement>, "property:">;
+type EventHandlersAdapter<T, Element> = {
+    [K in keyof T]: T[K] extends (arg: infer Arg, ...args: unknown[]) => unknown ? (arg: Arg, element: Element) => void : (_: never, element: Element) => void;
+};
+export type WebComponentAdapter<Attributes extends object, Properties extends object, Methods extends object, Events extends object> = {
+    class?: ClassItem[] | string;
+    style?: ElementStyleProps | string;
+    callback?: (element: HTMLElement & Properties & Methods) => void;
+} & Partial<Attributes> & Partial<TagAttrs> & prefixedObject<Properties, "property:"> & prefixedObject<EventHandlersAdapter<Events, HTMLElement & Properties & Methods>, "on-"> & prefixedObject<EventHandlers<TagEvents<HTMLElement & Properties & Methods>>, "on">;
+export {};

package/build/ssg/awaited.d.ts

@@ -0,0 +1,3 @@
+import { IValue } from "vasille";
+export declare function awaited<T>(target: () => Promise<T>): [IValue<unknown, unknown>, IValue<unknown, unknown>];
+export declare function waitForAsyncData(): Promise<void>;

package/build/ssg/awaited.js

@@ -0,0 +1,24 @@
+import { ref } from "vasille";
+const promises = [];
+export function awaited(target) {
+    const value = ref(undefined);
+    const err = ref(undefined);
+    let current;
+    try {
+        current = target();
+    }
+    catch (e) {
+        current = undefined;
+        err.V = e;
+    }
+    if (current instanceof Promise) {
+        promises.push(current.then(result => (value.V = result)).catch(e => (err.V = e)));
+    }
+    else {
+        value.V = current;
+    }
+    return [err, value];
+}
+export async function waitForAsyncData() {
+    await Promise.all(promises);
+}