@ryupold/vode 1.2.0 → 1.3.0

package/src/vode.ts

@@ -1,8 +1,8 @@
-export type Vode<S> = FullVode<S> | JustTagVode | NoPropsVode<S>;
-export type FullVode<S> = [tag: Tag, props: Props<S>, ...children: ChildVode<S>[]];
-export type NoPropsVode<S> = [tag: Tag, ...children: ChildVode<S>[]] | (TextVode[]);
+export type Vode<S = PatchableState> = FullVode<S> | JustTagVode | NoPropsVode<S>;
+export type FullVode<S = PatchableState> = [tag: Tag, props: Props<S>, ...children: ChildVode<S>[]];
+export type NoPropsVode<S = PatchableState> = [tag: Tag, ...children: ChildVode<S>[]] | (TextVode[]);
 export type JustTagVode = [tag: Tag];
-export type ChildVode<S> = Vode<S> | TextVode | NoVode | Component<S>;
+export type ChildVode<S = PatchableState> = Vode<S> | TextVode | NoVode | Component<S>;
 export type TextVode = string & {};
 export type NoVode = undefined | null | number | boolean | bigint | void;
 export type AttachedVode<S> = Vode<S> & { node: ChildNode } | Text & { node?: never };
@@ -16,21 +16,21 @@ export type Patch<S> =
 
 export type IgnoredPatch = undefined | null | number | boolean | bigint | string | symbol | void;
 export type RenderPatch<S> = {} | DeepPartial<S>;
+export type AnimatedPatch<S> = Array<Patch<S>>;
 export type DeepPartial<S> = { [P in keyof S]?: S[P] extends Array<infer I> ? Array<DeepPartial<I>> : DeepPartial<S[P]> };
 
 export type Effect<S> =
     | (() => Patch<S>)
-    | EffectFunction<S>
-    | [effect: EffectFunction<S>, ...args: any[]]
-    | Generator<Patch<S>, unknown, void>
-    | AsyncGenerator<Patch<S>, unknown, void>;
+    | EventFunction<S>
+    | Generator<Patch<S>>
+    | AsyncGenerator<Patch<S>>;
 
-export type EffectFunction<S> = (state: S, ...args: any[]) => Patch<S>;
+export type EventFunction<S> = (state: S, evt: Event) => Patch<S>;
 
 export type Props<S> = Partial<
     Omit<HTMLElement,
         keyof (DocumentFragment & ElementCSSInlineStyle & GlobalEventHandlers)> &
-    { [K in keyof EventsMap]: ((state: S, evt: Event) => Patch<S>) | Patch<S> } // all on* events
+    { [K in keyof EventsMap]: EventFunction<S> | Patch<S> } // all on* events
 > & {
     [_: string]: unknown,
     class?: ClassProp,
@@ -68,26 +68,40 @@ export type PropertyValue<S> =
     | Patch<S>;
 
 export type Dispatch<S> = (action: Patch<S>) => void;
-export type PatchableState<S> = S & { patch: Dispatch<S> };
+export type PatchableState<S = object> = S & { patch: Dispatch<S> };
 
-export type ContainerNode<S> = HTMLElement & {
+export const globals = {
+    currentViewTransition: <ViewTransition | null | undefined>undefined,
+    requestAnimationFrame: !!window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : ((cb: () => void) => cb()),
+    startViewTransition: !!document.startViewTransition ? document.startViewTransition.bind(document) : null,
+};
+
+export type ContainerNode<S = PatchableState> = HTMLElement & {
     /** the `_vode` property is added to the container in `app()`.
      * it contains all necessary stuff for the vode app to function.
-     * delete it to clear all resources of the vode app, or remove the container itself */
+     * remove the container node to clear vodes resources */
     _vode: {
         state: PatchableState<S>,
         vode: AttachedVode<S>,
         patch: Dispatch<S>,
-        render: () => void,
-        q: object | null,  // next patch aggregate to be applied
+        renderSync: () => void,
+        renderAsync: () => Promise<unknown>,
+        syncRenderer: (cb: () => void) => void,
+        asyncRenderer: ((cb: () => void) => ViewTransition) | null | undefined,
+        qSync: {} | undefined | null,  // next patch aggregate to be applied
+        qAsync: {} | undefined | null,  // next render-patches to be animated after another
         isRendering: boolean,
+        isAnimating: boolean,
         /** stats about the overall patches & last render time */
         stats: {
             patchCount: number,
             liveEffectCount: number,
-            renderPatchCount: number,
-            renderCount: number,
-            lastRenderTime: number,
+            syncRenderPatchCount: number,
+            asyncRenderPatchCount: number,
+            syncRenderCount: number,
+            asyncRenderCount: number,
+            lastSyncRenderTime: number,
+            lastAsyncRenderTime: number,
         },
     }
 };
@@ -99,7 +113,7 @@ export type ContainerNode<S> = HTMLElement & {
  * - tag, props and children: `vode("div", { class: "foo" }, ["span", "bar"])` => `["div", { class: "foo" }, ["span", "bar"]]` --*rendered*-> `<div class="foo"><span>bar</span></div>`
  * - identity: `vode(["div", ["span", "bar"]])` => `["div", ["span", "bar"]]` --*rendered*-> `<div><span>bar</span></div>`
  */
-export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Props<S> | ChildVode<S>, ...children: ChildVode<S>[]): Vode<S> {
+export function vode<S = PatchableState>(tag: Tag | Vode<S>, props?: Props<S> | ChildVode<S>, ...children: ChildVode<S>[]): Vode<S> {
     if (!tag) throw new Error("first argument to vode() must be a tag name or a vode");
 
     if (Array.isArray(tag)) return tag;
@@ -114,35 +128,39 @@ export function vode<S extends object | unknown>(tag: Tag | Vode<S>, props?: Pro
  * @param initialPatches variadic list of patches that are applied after the first render
  * @returns a patch function that can be used to update the state
  */
-export function app<S extends object | unknown>(container: Element, state: Omit<S, "patch">, dom: (s: S) => Vode<S>, ...initialPatches: Patch<S>[]) {
+export function app<S = PatchableState>(container: Element, state: Omit<S, "patch">, dom: (s: S) => Vode<S>, ...initialPatches: Patch<S>[]) {
     if (!container?.parentElement) throw new Error("first argument to app() must be a valid HTMLElement inside the <html></html> document");
     if (!state || typeof state !== "object") throw new Error("second argument to app() must be a state object");
     if (typeof dom !== "function") throw new Error("third argument to app() must be a function that returns a vode");
 
-    const _vode = {} as ContainerNode<S>["_vode"];
-    _vode.stats = { lastRenderTime: 0, renderCount: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
+    const _vode = {} as ContainerNode<S>["_vode"] & { patch: (action: Patch<S>, animate?: boolean) => void };
+    _vode.syncRenderer = globals.requestAnimationFrame;
+    _vode.asyncRenderer = globals.startViewTransition;
+    _vode.qSync = null;
+    _vode.qAsync = null;
+    _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
 
     Object.defineProperty(state, "patch", {
         enumerable: false, configurable: true,
-        writable: false, value: async (action: Patch<S>) => {
+        writable: false, value: async (action: Patch<S>, isAsync?: boolean) => {
             if (!action || (typeof action !== "function" && typeof action !== "object")) return;
             _vode.stats.patchCount++;
 
-            if ((action as AsyncGenerator<Patch<S>, unknown, void>)?.next) {
-                const generator = action as AsyncGenerator<Patch<S>, unknown, void>;
+            if ((action as AsyncGenerator<Patch<S>>)?.next) {
+                const generator = action as AsyncGenerator<Patch<S>>;
                 _vode.stats.liveEffectCount++;
                 try {
                     let v = await generator.next();
                     while (v.done === false) {
                         _vode.stats.liveEffectCount++;
                         try {
-                            _vode.patch!(v.value);
+                            _vode.patch!(v.value, isAsync);
                             v = await generator.next();
                         } finally {
                             _vode.stats.liveEffectCount--;
                         }
                     }
-                    _vode.patch!(v.value as Patch<S>);
+                    _vode.patch!(v.value as Patch<S>, isAsync);
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
@@ -150,57 +168,99 @@ export function app<S extends object | unknown>(container: Element, state: Omit<
                 _vode.stats.liveEffectCount++;
                 try {
                     const nextState = await (action as Promise<S>);
-                    _vode.patch!(<Patch<S>>nextState);
+                    _vode.patch!(<Patch<S>>nextState, isAsync);
                 } finally {
                     _vode.stats.liveEffectCount--;
                 }
             } else if (Array.isArray(action)) {
-                if (typeof action[0] === "function") {
-                    if (action.length > 1)
-                        _vode.patch!(action[0](_vode.state!, ...(action as any[]).slice(1)));
-                    else _vode.patch!(action[0](_vode.state!));
-                } else {
-                    _vode.stats.patchCount--;
+                if (action.length > 0) {
+                    for (const p of action) {
+                        _vode.patch(p, !document.hidden && !!_vode.asyncRenderer);
+                    }
+                } else { //when [] is patched: 1. skip current animation 2. merge all queued async patches into synced queue
+                    _vode.qSync = mergeState(_vode.qSync || {}, _vode.qAsync, false);
+                    _vode.qAsync = null;
+                    globals.currentViewTransition?.skipTransition();
+                    _vode.stats.syncRenderPatchCount++;
+                    _vode.renderSync();
                 }
             } else if (typeof action === "function") {
-                _vode.patch!((<EffectFunction<S>>action)(_vode.state));
+                _vode.patch!((<(s: S) => unknown>action)(_vode.state), isAsync);
             } else {
-                _vode.stats.renderPatchCount++;
-                _vode.q = mergeState(_vode.q || {}, action, false);
-                if (!_vode.isRendering) _vode.render!();
+                if (isAsync) {
+                    _vode.stats.asyncRenderPatchCount++;
+                    _vode.qAsync = mergeState(_vode.qAsync || {}, action, false);
+                    await _vode.renderAsync();
+                } else {
+                    _vode.stats.syncRenderPatchCount++;
+                    _vode.qSync = mergeState(_vode.qSync || {}, action, false);
+                    _vode.renderSync();
+                }
             }
         }
     });
 
-    Object.defineProperty(_vode, "render", {
+    function renderDom(isAsync: boolean) {
+        const sw = Date.now();
+        const vom = dom(_vode.state);
+        _vode.vode = render(_vode.state, _vode.patch, container.parentElement as Element, 0, _vode.vode, vom)!;
+
+        if ((<ContainerNode<S>>container).tagName.toUpperCase() !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
+            container = _vode.vode.node as Element;
+            (<ContainerNode<S>>container)._vode = _vode
+        }
+
+        if (!isAsync) {
+            _vode.stats.lastSyncRenderTime = Date.now() - sw;
+            _vode.stats.syncRenderCount++;
+            _vode.isRendering = false;
+            if (_vode.qSync) _vode.renderSync();
+        }
+    }
+    const sr = renderDom.bind(null, false);
+    const ar = renderDom.bind(null, true);
+
+    Object.defineProperty(_vode, "renderSync", {
         enumerable: false, configurable: true,
-        writable: false, value: () => requestAnimationFrame(() => {
-            if (_vode.isRendering || !_vode.q) return;
+        writable: false, value: () => {
+            if (_vode.isRendering || !_vode.qSync) return;
+
             _vode.isRendering = true;
+
+            _vode.state = mergeState(_vode.state, _vode.qSync, true);
+            _vode.qSync = null;
+
+            _vode.syncRenderer(sr);
+        }
+    });
+
+    Object.defineProperty(_vode, "renderAsync", {
+        enumerable: false, configurable: true,
+        writable: false, value: async () => {
+            if (_vode.isAnimating || !_vode.qAsync) return;
+            await globals.currentViewTransition?.updateCallbackDone; //sandwich
+            if (_vode.isAnimating || !_vode.qAsync || document.hidden) return;
+
+            _vode.isAnimating = true;
             const sw = Date.now();
             try {
-                _vode.state = mergeState(_vode.state, _vode.q, true);
-                _vode.q = null;
-                const vom = dom(_vode.state);
-                _vode.vode = render(_vode.state, _vode.patch, container.parentElement as Element, 0, _vode.vode, vom)!;
-                if ((<ContainerNode<S>>container).tagName.toUpperCase() !== (vom[0] as Tag).toUpperCase()) { //the tag name was changed during render -> update reference to vode-app-root 
-                    container = _vode.vode.node as Element;
-                    (<ContainerNode<S>>container)._vode = _vode
-                }
+                _vode.state = mergeState(_vode.state, _vode.qAsync, true);
+                _vode.qAsync = null;
+
+                globals.currentViewTransition = _vode.asyncRenderer!(ar) as ViewTransition | undefined;
+
+                await globals.currentViewTransition?.updateCallbackDone;
             } finally {
-                _vode.isRendering = false;
-                _vode.stats.renderCount++;
-                _vode.stats.lastRenderTime = Date.now() - sw;
-                if (_vode.q) {
-                    _vode.render();
-                }
+                _vode.stats.lastAsyncRenderTime = Date.now() - sw;
+                _vode.stats.asyncRenderCount++;
+                _vode.isAnimating = false;
             }
-        })
+            if (_vode.qAsync) _vode.renderAsync();
+        }
     });
 
     _vode.patch = (<PatchableState<S>>state).patch;
     _vode.state = <PatchableState<S>>state;
-    _vode.q = null;
 
     const root = container as ContainerNode<S>;
     root._vode = _vode;
@@ -222,7 +282,7 @@ export function app<S extends object | unknown>(container: Element, state: Omit<
 }
 
 /** return vode representation of given DOM node */
-export function hydrate<S = unknown>(element: Element | Text, prepareForRender?: boolean): Vode<S> | string | AttachedVode<S> | undefined {
+export function hydrate<S = PatchableState>(element: Element | Text, prepareForRender?: boolean): Vode<S> | string | AttachedVode<S> | undefined {
     if ((element as Text)?.nodeType === Node.TEXT_NODE) {
         if ((element as Text).nodeValue?.trim() !== "")
             return prepareForRender ? element as Text : (element as Text).nodeValue!;
@@ -263,7 +323,7 @@ export function hydrate<S = unknown>(element: Element | Text, prepareForRender?:
 
 /** memoizes the resulting component or props by comparing element by element (===) with the
  * `compare` of the previous render. otherwise skips the render step (not calling `componentOrProps`)*/
-export function memo<S>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
+export function memo<S = PatchableState>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
     if (!compare || !Array.isArray(compare)) throw new Error("first argument to memo() must be an array of values to compare");
     if (typeof componentOrProps !== "function") throw new Error("second argument to memo() must be a function that returns a vode or props object");
 
@@ -272,17 +332,17 @@ export function memo<S>(compare: any[], componentOrProps: Component<S> | ((s: S)
 }
 
 /** create a state object used as state for `app()`. it is updated with `PatchableState.patch()` using `merge()` */
-export function createState<S extends object | unknown>(state: S): PatchableState<S> {
+export function createState<S = PatchableState>(state: S): PatchableState<S> {
     if (!state || typeof state !== "object") throw new Error("createState() must be called with a state object");
 
     return state as PatchableState<S>;
 }
 
 /** type safe way to create a patch. useful for type inference and autocompletion. */
-export function createPatch<S extends object | unknown>(p: DeepPartial<S> | Effect<S> | IgnoredPatch): typeof p { return p; }
+export function createPatch<S = PatchableState>(p: DeepPartial<S> | Effect<S> | IgnoredPatch): typeof p { return p; }
 
 /** html tag of the vode or `#text` if it is a text node */
-export function tag<S>(v: Vode<S> | TextVode | NoVode | AttachedVode<S>): Tag | "#text" | undefined {
+export function tag<S = PatchableState>(v: Vode<S> | TextVode | NoVode | AttachedVode<S>): Tag | "#text" | undefined {
     return !!v ? (Array.isArray(v)
         ? v[0] : (typeof v === "string" || (<any>v).nodeType === Node.TEXT_NODE)
             ? "#text" : undefined) as Tag
@@ -290,7 +350,7 @@ export function tag<S>(v: Vode<S> | TextVode | NoVode | AttachedVode<S>): Tag |
 }
 
 /** get properties object of a vode, if there is any */
-export function props<S>(vode: ChildVode<S> | AttachedVode<S>): Props<S> | undefined {
+export function props<S = PatchableState>(vode: ChildVode<S> | AttachedVode<S>): Props<S> | undefined {
     if (Array.isArray(vode)
         && vode.length > 1
         && vode[1]
@@ -307,59 +367,8 @@ export function props<S>(vode: ChildVode<S> | AttachedVode<S>): Props<S> | undef
     return undefined;
 }
 
-/** merge `ClassProp`s regardless of structure */
-export function mergeClass(a: ClassProp, b: ClassProp): ClassProp {
-    if (!a) return b;
-    if (!b) return a;
-
-    if (typeof a === "string" && typeof b === "string") {
-        const aSplit = a.split(" ");
-        const bSplit = b.split(" ");
-        const classSet = new Set([...aSplit, ...bSplit]);
-        return Array.from(classSet).join(" ").trim();
-    }
-    else if (typeof a === "string" && Array.isArray(b)) {
-        const classSet = new Set([...b, ...a.split(" ")]);
-        return Array.from(classSet).join(" ").trim();
-    }
-    else if (Array.isArray(a) && typeof b === "string") {
-        const classSet = new Set([...a, ...b.split(" ")]);
-        return Array.from(classSet).join(" ").trim();
-    }
-    else if (Array.isArray(a) && Array.isArray(b)) {
-        const classSet = new Set([...a, ...b]);
-        return Array.from(classSet).join(" ").trim();
-    }
-    else if (typeof a === "string" && typeof b === "object") {
-        return { [a]: true, ...b };
-    }
-    else if (typeof a === "object" && typeof b === "string") {
-        return { ...a, [b]: true };
-    }
-    else if (typeof a === "object" && typeof b === "object") {
-        return { ...a, ...b };
-    } else if (typeof a === "object" && Array.isArray(b)) {
-        const aa = { ...a };
-        for (const item of b as string[]) {
-            (<Record<string, boolean | null | undefined>>aa)[item] = true;
-        }
-        return aa;
-    } else if (Array.isArray(a) && typeof b === "object") {
-        const aa: Record<string, any> = {};
-        for (const item of a as string[]) {
-            aa[item] = true;
-        }
-        for (const bKey of Object.keys(b)) {
-            aa[bKey] = (<Record<string, boolean | null | undefined>>b)[bKey];
-        }
-        return aa;
-    }
-
-    throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
-}
-
 /** get a slice of all children of a vode, if there are any */
-export function children<S>(vode: ChildVode<S> | AttachedVode<S>): ChildVode<S>[] | null {
+export function children<S = PatchableState>(vode: ChildVode<S> | AttachedVode<S>): ChildVode<S>[] | null {
     const start = childrenStart(vode);
     if (start > 0) {
         return (<Vode<S>>vode).slice(start) as Vode<S>[];
@@ -368,14 +377,14 @@ export function children<S>(vode: ChildVode<S> | AttachedVode<S>): ChildVode<S>[
     return null;
 }
 
-export function childCount<S>(vode: Vode<S>) { return vode.length - childrenStart(vode); }
+export function childCount<S = PatchableState>(vode: Vode<S>) { return vode.length - childrenStart(vode); }
 
-export function child<S>(vode: Vode<S>, index: number): ChildVode<S> | undefined {
+export function child<S = PatchableState>(vode: Vode<S>, index: number): ChildVode<S> | undefined {
     return vode[index + childrenStart(vode)] as ChildVode<S>;
 }
 
 /** index in vode at which child-vodes start */
-export function childrenStart<S>(vode: ChildVode<S> | AttachedVode<S>): number {
+export function childrenStart<S = PatchableState>(vode: ChildVode<S> | AttachedVode<S>): number {
     return props(vode) ? 2 : 1;
 }
 
@@ -473,12 +482,12 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
     // falsy|text|element(A) -> element(B) 
     if (
         (isNode && (!oldNode || oldIsText || (<Vode<S>>oldVode)[0] !== (<Vode<S>>newVode)[0]))
-    ) {        
+    ) {
         const newvode = <Vode<S>>newVode;
         if (1 in newvode) {
             newvode[1] = remember(state, newvode[1], undefined) as Vode<S>;
         }
-        
+
         const properties = props(newVode);
 
         xmlns = properties?.xmlns as string || xmlns;
@@ -487,7 +496,7 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             : document.createElement((<Vode<S>>newVode)[0]);
         (<AttachedVode<S>>newVode).node = newNode;
 
-        patchProperties(patch, newNode, undefined, properties);
+        patchProperties(state, patch, newNode, undefined, properties);
 
         if (oldNode) {
             (<any>oldNode).onUnmount && patch((<any>oldNode).onUnmount(oldNode));
@@ -526,13 +535,13 @@ function render<S>(state: S, patch: Dispatch<S>, parent: Element, childIndex: nu
             newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
             if (prev !== newvode[1]) {
                 const properties = props(newVode);
-                patchProperties(patch, oldNode!, props(oldVode), properties);
+                patchProperties(state, patch, oldNode!, props(oldVode), properties);
                 hasProps = !!properties;
             }
         }
         else {
             const properties = props(newVode);
-            patchProperties(patch, oldNode!, props(oldVode), properties);
+            patchProperties(state, patch, oldNode!, props(oldVode), properties);
             hasProps = !!properties;
         }
 
@@ -611,7 +620,7 @@ function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
     }
 }
 
-function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>) {
+function patchProperties<S>(s: S, patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>) {
     if (!newProps && !oldProps) return;
 
     // match existing properties
@@ -621,8 +630,8 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
             const newValue = newProps?.[key as keyof Props<S>] as PropertyValue<S>;
 
             if (oldValue !== newValue) {
-                if (newProps) newProps[key as keyof Props<S>] = patchProperty(patch, node, key, oldValue, newValue);
-                else patchProperty(patch, node, key, oldValue, undefined);
+                if (newProps) newProps[key as keyof Props<S>] = patchProperty(s, patch, node, key, oldValue, newValue);
+                else patchProperty(s, patch, node, key, oldValue, undefined);
             }
         }
     }
@@ -632,7 +641,7 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
         for (const key in newProps) {
             if (!(key in oldProps)) {
                 const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-                newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue);
+                newProps[key as keyof Props<S>] = patchProperty(s, patch, <Element>node, key, undefined, newValue);
             }
         }
     }
@@ -640,12 +649,12 @@ function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Prop
     else if (newProps) {
         for (const key in newProps) {
             const newValue = newProps[key as keyof Props<S>] as PropertyValue<S>;
-            newProps[key as keyof Props<S>] = patchProperty(patch, <Element>node, key, undefined, newValue);
+            newProps[key as keyof Props<S>] = patchProperty(s, patch, <Element>node, key, undefined, newValue);
         }
     }
 }
 
-function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>) {
+function patchProperty<S>(s: S, patch: Dispatch<S>, node: ChildNode, key: string | keyof ElementEventMap, oldValue?: PropertyValue<S>, newValue?: PropertyValue<S>) {
     if (key === "style") {
         if (!newValue) {
             (node as HTMLElement).style.cssText = "";
@@ -675,17 +684,8 @@ function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | key
         if (newValue) {
             let eventHandler: Function | null = null;
             if (typeof newValue === "function") {
-                const action = newValue as EffectFunction<S>;
-                eventHandler = (evt: Event) => patch([action, evt]);
-            } else if (Array.isArray(newValue)) {
-                const arr = (newValue as Array<any>);
-                const action = newValue[0] as EffectFunction<S>;
-                if (arr.length > 1) {
-                    eventHandler = () => patch([action, ...arr.slice(1)]);
-                }
-                else {
-                    eventHandler = (evt: Event) => patch([action, evt]);
-                }
+                const action = newValue as EventFunction<S>;
+                eventHandler = (evt: Event) => patch(action(s, evt));
             } else if (typeof newValue === "object") {
                 eventHandler = () => patch(newValue as Patch<S>);
             }

package/tsconfig.json

@@ -24,7 +24,6 @@
   },
   "include": [
     "./index.ts",
-    "./src/vode.ts",
-    "./src/vode-tags.ts",
+    "./src/*.ts",
   ]
 }