@ryupold/vode 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ryupold/vode",
-    "version": "0.10.0",
+    "version": "0.12.0",
     "description": "Small web framework for minimal websites",
     "author": "Michael Scherbakow (ryupold)",
     "license": "MIT",

package/src/vode.ts

@@ -11,10 +11,9 @@ export type Component<S> = (s: S) => ChildVode<S>;
 
 export type Patch<S> =
     | NoRenderPatch // ignored
-    | typeof EmptyPatch | DeepPartial<S> // render patches
-    | Promise<Patch<S>> | Effect<S> // effects resulting in patches
+    | {} | DeepPartial<S> // render patches
+    | Promise<Patch<S>> | Effect<S>; // effects resulting in patches
 
-export const EmptyPatch = {} as const; // smallest patch to cause a render without any changes
 export type NoRenderPatch = undefined | null | number | boolean | bigint | string | symbol | void;
 
 export type DeepPartial<S> = { [P in keyof S]?: S[P] extends Array<infer I> ? Array<Patch<I>> : Patch<S[P]> };
@@ -28,9 +27,6 @@ export type Effect<S> =
 
 export type EffectFunction<S> = (state: S, ...args: any[]) => Patch<S>;
 
-export type Dispatch<S> = (action: Patch<S>) => void;
-export type PatchableState<S> = S & { patch: Dispatch<Patch<S>> };
-
 export type Props<S> = Partial<
     Omit<HTMLElement,
         keyof (DocumentFragment & ElementCSSInlineStyle & GlobalEventHandlers)> &
@@ -48,34 +44,42 @@ export type Props<S> = Partial<
 export type MountFunction<S> =
     | ((s: S, node: HTMLElement) => Patch<S>)
     | ((s: S, node: SVGSVGElement) => Patch<S>)
-    | ((s: S, node: MathMLElement) => Patch<S>)
+    | ((s: S, node: MathMLElement) => Patch<S>);
 
 export type ClassProp =
     | "" | false | null | undefined // no class
     | string // "class1 class2"
     | string[] // ["class1", "class2"]
-    | Record<string, boolean | undefined | null> // { class1: true, class2: false }
+    | Record<string, boolean | undefined | null>; // { class1: true, class2: false }
 
 export type StyleProp = Record<number, never> & {
     [K in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[K] | null
-}
+};
 
 export type EventsMap =
     & { [K in keyof HTMLElementEventMap as `on${K}`]: HTMLElementEventMap[K] }
     & { [K in keyof WindowEventMap as `on${K}`]: WindowEventMap[K] }
     & { [K in keyof SVGElementEventMap as `on${K}`]: SVGElementEventMap[K] }
-    & { onsearch: Event }
+    & { onsearch: Event };
 
 export type PropertyValue<S> = string | boolean | null | undefined | StyleProp | ClassProp | Patch<S> | void;
 
+
+export type Dispatch<S> = (action: Patch<S>) => void;
+export type PatchableState<S> = S & { patch: Dispatch<Patch<S>> };
+
 export type ContainerNode<S> = 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 */
     _vode: {
-        state: PatchableState<S>,
-        vode: AttachedVode<S>,
-        patch: Dispatch<S>,
-        render: () => void,
-        q: Patch<S>[]
-        isRendering: boolean,
+        state: PatchableState<S>, // can touch this, but let it be an object
+        vode: AttachedVode<S>, //don't touch this
+        patch: Dispatch<S>, // can't touch this
+        render: () => void, // can't touch this
+        q: object | null,  // next patch aggregate to be applied
+        isRendering: boolean,  // under no circumstances touch this
+        /** stats about the overall patches & last render time */
         stats: {
             patchCount: number,
             liveEffectCount: number,
@@ -88,40 +92,38 @@ export type ContainerNode<S> = HTMLElement & {
     }
 };
 
+/** create a state object used as initial state for `app()`. it is updated with `PatchableState.patch()` using `merge()` */
+export function createState<S extends object | unknown>(state: S): PatchableState<S> { 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> | NoRenderPatch): typeof p { return p; }
+
 /** type-safe way to create a vode. useful for type inference and autocompletion.
  * 
- * overloads:
- * - just a tag: `vode("div") // => ["div"]`
- * - tag and props: `vode("div", { class: "foo" }) // => ["div", { class: "foo" }]`
- * - tag, props and children: `vode("div", { class: "foo" }, ["span", "bar"]) // => ["div", { class: "foo" }, ["span", "bar"]]`
- * - identity: `vode(["div", ["span", "bar"]]) // => ["div", ["span", "bar"]]`
+ * - just a tag: `vode("div")` => `["div"]` --*rendered*-> `<div></div>`
+ * - tag and props: `vode("div", { class: "foo" })` => `["div", { class: "foo" }]` --*rendered*-> `<div class="foo"></div>`
+ * - 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> {
-    if (Array.isArray(tag)) {
-        return tag;
-    }
-    if (props) {
-        return [tag, props as Props<S>, ...children];
-    }
-    return [tag, ...children];
+    if(!tag) throw new Error("tag must be a string or vode");
+    if (Array.isArray(tag)) return tag;
+    else if (props) return [tag, props as Props<S>, ...children];
+    else return [tag, ...children];
 }
 
-/** pass an object whose type determines the initial state */
-export function createState<S>(state: S): PatchableState<S> { return state as PatchableState<S>; }
-
-
-/** for a type safe way to create a deeply partial patch object or effect */
-export function patch<S>(p: DeepPartial<S> | Effect<S> | NoRenderPatch): typeof p { return p; }
-
-/**
- * create a vode app inside a container element
+/** create a vode app inside a container element
  * @param container will use this container as root and places the result of the dom function and further renderings in it
- * @param initialState @see createState
+ * @param initialState
  * @param dom creates the initial dom from the state and is called on every render
  * @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>(container: HTMLElement, initialState: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
+export function app<S extends object | unknown>(container: HTMLElement, initialState: Omit<S, "patch">, dom: Component<S>, ...initialPatches: Patch<S>[]) {
+    if (!container) throw new Error("container must be a valid HTMLElement");
+    if (!initialState || typeof initialState !== "object") throw new Error("initialState must be an object");
+    if (typeof dom !== "function") throw new Error("dom must be a function that returns a vode");
+
     const _vode = {} as ContainerNode<S>["_vode"];
     _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
 
@@ -169,7 +171,7 @@ export function app<S>(container: HTMLElement, initialState: Omit<S, "patch">, d
                 _vode.patch!((<EffectFunction<S>>action)(_vode.state));
             } else {
                 _vode.stats.renderPatchCount++;
-                _vode.q!.push(<Patch<S>>action);
+                _vode.q = mergeState(_vode.q || {}, action);
                 if (!_vode.isRendering) _vode.render!();
             }
         }
@@ -178,25 +180,19 @@ export function app<S>(container: HTMLElement, initialState: Omit<S, "patch">, d
     Object.defineProperty(_vode, "render", {
         enumerable: false, configurable: true,
         writable: false, value: () => requestAnimationFrame(() => {
-            if (_vode.isRendering || _vode.q!.length === 0) return;
+            if (_vode.isRendering || !_vode.q) return;
             _vode.isRendering = true;
             const sw = Date.now();
             try {
-                _vode.stats.queueLengthBeforeRender = _vode.q!.length;
-
-                while (_vode.q!.length > 0) {
-                    const patch = _vode.q!.shift();
-                    if (patch === EmptyPatch) continue;
-                    mergeState(_vode.state, patch);
-                }
+                _vode.state = mergeState(_vode.state, _vode.q);
+                _vode.q = null;
                 _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state))!;
             } finally {
                 _vode.isRendering = false;
                 _vode.stats.renderCount++;
                 _vode.stats.renderTime = Date.now() - sw;
-                _vode.stats.queueLengthAfterRender = _vode.q!.length;
-                if (_vode.q!.length > 0) {
-                    _vode.render!();
+                if (_vode.q) {
+                    _vode.render();
                 }
             }
         })
@@ -204,8 +200,8 @@ export function app<S>(container: HTMLElement, initialState: Omit<S, "patch">, d
 
     _vode.patch = (<PatchableState<S>>initialState).patch;
     _vode.state = <PatchableState<S>>initialState;
-    _vode.q = [];
-    
+    _vode.q = null;
+
     const root = container as ContainerNode<S>;
     root._vode = _vode;
 
@@ -220,8 +216,23 @@ export function app<S>(container: HTMLElement, initialState: Omit<S, "patch">, d
     return _vode.patch;
 }
 
-/** get properties of a vode, if there are any */
-export function props<S extends object | unknown>(vode: ChildVode<S> | AttachedVode<S>): Props<S> | undefined {
+/** 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> {
+    (<any>componentOrProps).__memo = compare;
+    return componentOrProps as typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S>;
+}
+
+/** 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 {
+    return !!v ? (Array.isArray(v)
+        ? v[0] : (typeof v === "string" || (<any>v).nodeType === Node.TEXT_NODE)
+            ? "#text" : undefined) as Tag
+        : undefined;
+}
+
+/** get properties object of a vode, if there is any */
+export function props<S>(vode: ChildVode<S> | AttachedVode<S>): Props<S> | undefined {
     if (Array.isArray(vode)
         && vode.length > 1
         && vode[1]
@@ -238,6 +249,7 @@ export function props<S extends object | unknown>(vode: ChildVode<S> | AttachedV
     return undefined;
 }
 
+/** merge `ClassProp`s regardless of structure */
 export function mergeClass(a: ClassProp, b: ClassProp): ClassProp {
     if (!a) return b;
     if (!b) return a;
@@ -288,48 +300,14 @@ export function mergeClass(a: ClassProp, b: ClassProp): ClassProp {
     throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
 }
 
-export function patchProps<S extends object | unknown>(vode: Vode<S>, props: Props<S>): void {
-    if (!Array.isArray(vode)) return;
-
-    if (vode.length > 1) {
-        if (!Array.isArray(vode[1]) && typeof vode[1] === "object") {
-            vode[1] = merge(vode[1], props);
-            return;
-        }
-
-        if (childCount(vode) > 0) {
-            (<FullVode<S>>vode).push(null);
-        }
-        for (let i = vode.length - 1; i > 0; i--) {
-            if (i > 1) vode[i] = vode[i - 1];
-        }
-        vode[1] = props;
-    } else {
-        (<FullVode<S>>vode).push(props);
-    }
-}
-
 /** get a slice of all children of a vode, if there are any */
-export function children<S extends object | unknown>(vode: ChildVode<S> | AttachedVode<S>): ChildVode<S>[] | undefined {
+export function children<S>(vode: ChildVode<S> | AttachedVode<S>): ChildVode<S>[] | null {
     const start = childrenStart(vode);
     if (start > 0) {
         return (<Vode<S>>vode).slice(start) as Vode<S>[];
     }
 
-    return undefined;
-}
-
-/** index in vode at which child-vodes start */
-export function childrenStart<S extends object | unknown>(vode: ChildVode<S> | AttachedVode<S>): number {
-    return props(vode) ? 2 : 1;
-}
-
-/** html tag of the vode or #text if it is a text node */
-export function tag<S extends object | unknown>(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
-        : undefined;
+    return null;
 }
 
 export function childCount<S>(vode: Vode<S>) { return vode.length - childrenStart(vode); }
@@ -338,11 +316,13 @@ export function child<S>(vode: Vode<S>, index: number): ChildVode<S> | undefined
     return vode[index + childrenStart(vode)] as ChildVode<S>;
 }
 
-/** merge multiple objects into one, applying from left to right
- * @param first object to merge
- * @returns merged object
- */
-export function merge(first?: any, ...p: any[]): any {
+/** index in vode at which child-vodes start */
+export function childrenStart<S>(vode: ChildVode<S> | AttachedVode<S>): number {
+    return props(vode) ? 2 : 1;
+}
+
+/** @returns multiple merged objects as one, applying from left to right ({}, first, ...p) */
+export function merge(first?: object | unknown, ...p: (object | unknown)[]): object {
     first = mergeState({}, first);
     for (const pp of p) {
         if (!pp) continue;
@@ -351,66 +331,40 @@ export function merge(first?: any, ...p: any[]): any {
     return first!;
 }
 
-function classString(classProp: ClassProp): string {
-    if (typeof classProp === "string") {
-        return classProp;
-    } else if (Array.isArray(classProp)) {
-        return classProp.map(classString).join(" ");
-    } else if (typeof classProp === "object") {
-        return Object.keys(classProp!).filter(k => classProp![k]).join(" ");
-    } else {
-        return "";
-    }
-}
-
-function isNaturalVode(x: ChildVode<any>) {
-    return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
-}
-
-function isTextVode(x: ChildVode<any>) {
-    return typeof x === "string" || (<Text><unknown>x)?.nodeType === Node.TEXT_NODE;
-}
-
-function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
-    if (typeof c === "function") {
-        return unwrap(c(s), s);
-    } else {
-        return c;
-    }
-}
-
-/** memoization of the given component or props (compare array is compared element by element (===) with the previous render) */
-export function memo<S extends object | unknown>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
-    (<any>componentOrProps).__memo = compare;
-    return componentOrProps as typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S>;
-}
-
-function remember<S>(state: S, present: any, past: any): ChildVode<S> | AttachedVode<S> {
-    if (typeof present !== "function")
-        return present;
-
-    const presentMemo = present?.__memo;
-    const pastMemo = past?.__memo;
+function mergeState(target: any, source: any) {
+    if (!source) return target;
 
-    if (Array.isArray(presentMemo)
-        && Array.isArray(pastMemo)
-        && presentMemo.length === pastMemo.length
-    ) {
-        let same = true;
-        for (let i = 0; i < presentMemo.length; i++) {
-            if (presentMemo[i] !== pastMemo[i]) {
-                same = false;
-                break;
+    for (const key in source) {
+        const value = source[key];
+        if (value && typeof value === "object") {
+            const targetValue = target[key];
+            if (targetValue) {
+                if (Array.isArray(value)) {
+                    target[key] = [...value];
+                } else if (value instanceof Date && targetValue !== value) {
+                    target[key] = new Date(value);
+                } else {
+                    if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
+                    else if (typeof targetValue === "object") mergeState(target[key], value);
+                    else target[key] = mergeState({}, value);
+                }
+            } else if (Array.isArray(value)) {
+                target[key] = [...value];
+            } else if (value instanceof Date) {
+                target[key] = new Date(value);
+            } else {
+                target[key] = mergeState({}, value);
             }
         }
-        if (same) return past;
-    }
-    const newRender = unwrap(present, state);
-    if (typeof newRender === "object") {
-        (<any>newRender).__memo = present?.__memo;
+        else if (value === undefined) {
+            delete target[key];
+        }
+        else {
+            target[key] = value;
+        }
     }
-    return newRender;
-}
+    return target;
+};
 
 function render<S>(state: S, patch: Dispatch<S>, parent: ChildNode, childIndex: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, svg?: boolean): AttachedVode<S> | undefined {
     // unwrap component if it is memoized
@@ -567,6 +521,49 @@ function render<S>(state: S, patch: Dispatch<S>, parent: ChildNode, childIndex:
     return undefined;
 }
 
+function isNaturalVode(x: ChildVode<any>) {
+    return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
+}
+
+function isTextVode(x: ChildVode<any>) {
+    return typeof x === "string" || (<Text><unknown>x)?.nodeType === Node.TEXT_NODE;
+}
+
+function remember<S>(state: S, present: any, past: any): ChildVode<S> | AttachedVode<S> {
+    if (typeof present !== "function")
+        return present;
+
+    const presentMemo = present?.__memo;
+    const pastMemo = past?.__memo;
+
+    if (Array.isArray(presentMemo)
+        && Array.isArray(pastMemo)
+        && presentMemo.length === pastMemo.length
+    ) {
+        let same = true;
+        for (let i = 0; i < presentMemo.length; i++) {
+            if (presentMemo[i] !== pastMemo[i]) {
+                same = false;
+                break;
+            }
+        }
+        if (same) return past;
+    }
+    const newRender = unwrap(present, state);
+    if (typeof newRender === "object") {
+        (<any>newRender).__memo = present?.__memo;
+    }
+    return newRender;
+}
+
+function unwrap<S>(c: Component<S> | ChildVode<S>, s: S): ChildVode<S> {
+    if (typeof c === "function") {
+        return unwrap(c(s), s);
+    } else {
+        return c;
+    }
+}
+
 function patchProperties<S>(patch: Dispatch<S>, node: ChildNode, oldProps?: Props<S>, newProps?: Props<S>, isSvg?: boolean) {
     if (!newProps && !oldProps) return;
     if (!oldProps) {         // set new props
@@ -664,37 +661,14 @@ function patchProperty<S>(patch: Dispatch<S>, node: ChildNode, key: string | key
     return newValue;
 }
 
-function mergeState(target: any, source: any) {
-    if (!source) return target;
-
-    for (const key in source) {
-        const value = source[key];
-        if (value && typeof value === "object") {
-            const targetValue = target[key];
-            if (targetValue) {
-                if (Array.isArray(value)) {
-                    target[key] = [...value];
-                } else if (value instanceof Date && targetValue !== value) {
-                    target[key] = new Date(value);
-                } else {
-                    if (Array.isArray(targetValue)) target[key] = mergeState({}, value);
-                    else if (typeof targetValue === "object") mergeState(target[key], value);
-                    else target[key] = mergeState({}, value);
-                }
-            } else if (Array.isArray(value)) {
-                target[key] = [...value];
-            } else if (value instanceof Date) {
-                target[key] = new Date(value);
-            } else {
-                target[key] = mergeState({}, value);
-            }
-        }
-        else if (value === undefined) {
-            delete target[key];
-        }
-        else {
-            target[key] = value;
-        }
+function classString(classProp: ClassProp): string {
+    if (typeof classProp === "string") {
+        return classProp;
+    } else if (Array.isArray(classProp)) {
+        return classProp.map(classString).join(" ");
+    } else if (typeof classProp === "object") {
+        return Object.keys(classProp!).filter(k => classProp![k]).join(" ");
+    } else {
+        return "";
     }
-    return target;
-};
+}

package/vode.mjs

@@ -1,21 +1,27 @@
 // src/vode.ts
-var EmptyPatch = {};
-function vode(tag, props, ...children) {
-  if (Array.isArray(tag)) {
-    return tag;
-  }
-  if (props) {
-    return [tag, props, ...children];
-  }
-  return [tag, ...children];
-}
 function createState(state) {
   return state;
 }
-function patch(p) {
+function createPatch(p) {
   return p;
 }
+function vode(tag, props, ...children) {
+  if (!tag)
+    throw new Error("tag must be a string or vode");
+  if (Array.isArray(tag))
+    return tag;
+  else if (props)
+    return [tag, props, ...children];
+  else
+    return [tag, ...children];
+}
 function app(container, initialState, dom, ...initialPatches) {
+  if (!container)
+    throw new Error("container must be a valid HTMLElement");
+  if (!initialState || typeof initialState !== "object")
+    throw new Error("initialState must be an object");
+  if (typeof dom !== "function")
+    throw new Error("dom must be a function that returns a vode");
   const _vode = {};
   _vode.stats = { renderTime: 0, renderCount: 0, queueLengthBeforeRender: 0, queueLengthAfterRender: 0, liveEffectCount: 0, patchCount: 0, renderPatchCount: 0 };
   Object.defineProperty(initialState, "patch", {
@@ -65,7 +71,7 @@ function app(container, initialState, dom, ...initialPatches) {
         _vode.patch(action(_vode.state));
       } else {
         _vode.stats.renderPatchCount++;
-        _vode.q.push(action);
+        _vode.q = mergeState(_vode.q || {}, action);
         if (!_vode.isRendering)
           _vode.render();
       }
@@ -76,25 +82,19 @@ function app(container, initialState, dom, ...initialPatches) {
     configurable: true,
     writable: false,
     value: () => requestAnimationFrame(() => {
-      if (_vode.isRendering || _vode.q.length === 0)
+      if (_vode.isRendering || !_vode.q)
         return;
       _vode.isRendering = true;
       const sw = Date.now();
       try {
-        _vode.stats.queueLengthBeforeRender = _vode.q.length;
-        while (_vode.q.length > 0) {
-          const patch2 = _vode.q.shift();
-          if (patch2 === EmptyPatch)
-            continue;
-          mergeState(_vode.state, patch2);
-        }
+        _vode.state = mergeState(_vode.state, _vode.q);
+        _vode.q = null;
         _vode.vode = render(_vode.state, _vode.patch, container, 0, _vode.vode, dom(_vode.state));
       } finally {
         _vode.isRendering = false;
         _vode.stats.renderCount++;
         _vode.stats.renderTime = Date.now() - sw;
-        _vode.stats.queueLengthAfterRender = _vode.q.length;
-        if (_vode.q.length > 0) {
+        if (_vode.q) {
           _vode.render();
         }
       }
@@ -102,7 +102,7 @@ function app(container, initialState, dom, ...initialPatches) {
   });
   _vode.patch = initialState.patch;
   _vode.state = initialState;
-  _vode.q = [];
+  _vode.q = null;
   const root = container;
   root._vode = _vode;
   const initialVode = dom(initialState);
@@ -113,6 +113,13 @@ function app(container, initialState, dom, ...initialPatches) {
   }
   return _vode.patch;
 }
+function memo(compare, componentOrProps) {
+  componentOrProps.__memo = compare;
+  return componentOrProps;
+}
+function tag(v) {
+  return v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : undefined : undefined;
+}
 function props(vode2) {
   if (Array.isArray(vode2) && vode2.length > 1 && vode2[1] && !Array.isArray(vode2[1])) {
     if (typeof vode2[1] === "object" && vode2[1].nodeType !== Node.TEXT_NODE) {
@@ -164,38 +171,12 @@ function mergeClass(a, b) {
   }
   throw new Error(`cannot merge classes of ${a} (${typeof a}) and ${b} (${typeof b})`);
 }
-function patchProps(vode2, props2) {
-  if (!Array.isArray(vode2))
-    return;
-  if (vode2.length > 1) {
-    if (!Array.isArray(vode2[1]) && typeof vode2[1] === "object") {
-      vode2[1] = merge(vode2[1], props2);
-      return;
-    }
-    if (childCount(vode2) > 0) {
-      vode2.push(null);
-    }
-    for (let i = vode2.length - 1;i > 0; i--) {
-      if (i > 1)
-        vode2[i] = vode2[i - 1];
-    }
-    vode2[1] = props2;
-  } else {
-    vode2.push(props2);
-  }
-}
 function children(vode2) {
   const start = childrenStart(vode2);
   if (start > 0) {
     return vode2.slice(start);
   }
-  return;
-}
-function childrenStart(vode2) {
-  return props(vode2) ? 2 : 1;
-}
-function tag(v) {
-  return v ? Array.isArray(v) ? v[0] : typeof v === "string" || v.nodeType === Node.TEXT_NODE ? "#text" : undefined : undefined;
+  return null;
 }
 function childCount(vode2) {
   return vode2.length - childrenStart(vode2);
@@ -203,6 +184,9 @@ function childCount(vode2) {
 function child(vode2, index) {
   return vode2[index + childrenStart(vode2)];
 }
+function childrenStart(vode2) {
+  return props(vode2) ? 2 : 1;
+}
 function merge(first, ...p) {
   first = mergeState({}, first);
   for (const pp of p) {
@@ -212,57 +196,42 @@ function merge(first, ...p) {
   }
   return first;
 }
-function classString(classProp) {
-  if (typeof classProp === "string") {
-    return classProp;
-  } else if (Array.isArray(classProp)) {
-    return classProp.map(classString).join(" ");
-  } else if (typeof classProp === "object") {
-    return Object.keys(classProp).filter((k) => classProp[k]).join(" ");
-  } else {
-    return "";
-  }
-}
-function isNaturalVode(x) {
-  return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
-}
-function isTextVode(x) {
-  return typeof x === "string" || x?.nodeType === Node.TEXT_NODE;
-}
-function unwrap(c, s) {
-  if (typeof c === "function") {
-    return unwrap(c(s), s);
-  } else {
-    return c;
-  }
-}
-function memo(compare, componentOrProps) {
-  componentOrProps.__memo = compare;
-  return componentOrProps;
-}
-function remember(state, present, past) {
-  if (typeof present !== "function")
-    return present;
-  const presentMemo = present?.__memo;
-  const pastMemo = past?.__memo;
-  if (Array.isArray(presentMemo) && Array.isArray(pastMemo) && presentMemo.length === pastMemo.length) {
-    let same = true;
-    for (let i = 0;i < presentMemo.length; i++) {
-      if (presentMemo[i] !== pastMemo[i]) {
-        same = false;
-        break;
+function mergeState(target, source) {
+  if (!source)
+    return target;
+  for (const key in source) {
+    const value = source[key];
+    if (value && typeof value === "object") {
+      const targetValue = target[key];
+      if (targetValue) {
+        if (Array.isArray(value)) {
+          target[key] = [...value];
+        } else if (value instanceof Date && targetValue !== value) {
+          target[key] = new Date(value);
+        } else {
+          if (Array.isArray(targetValue))
+            target[key] = mergeState({}, value);
+          else if (typeof targetValue === "object")
+            mergeState(target[key], value);
+          else
+            target[key] = mergeState({}, value);
+        }
+      } else if (Array.isArray(value)) {
+        target[key] = [...value];
+      } else if (value instanceof Date) {
+        target[key] = new Date(value);
+      } else {
+        target[key] = mergeState({}, value);
       }
+    } else if (value === undefined) {
+      delete target[key];
+    } else {
+      target[key] = value;
     }
-    if (same)
-      return past;
   }
-  const newRender = unwrap(present, state);
-  if (typeof newRender === "object") {
-    newRender.__memo = present?.__memo;
-  }
-  return newRender;
+  return target;
 }
-function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
+function render(state, patch, parent, childIndex, oldVode, newVode, svg) {
   newVode = remember(state, newVode, oldVode);
   const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
   if (newVode === oldVode || !oldVode && isNoVode) {
@@ -271,7 +240,7 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
   const oldIsText = oldVode?.nodeType === Node.TEXT_NODE;
   const oldNode = oldIsText ? oldVode : oldVode?.node;
   if (isNoVode) {
-    oldNode?.onUnmount && patch2(oldNode.onUnmount(oldNode));
+    oldNode?.onUnmount && patch(oldNode.onUnmount(oldNode));
     oldNode?.remove();
     return;
   }
@@ -294,7 +263,7 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
   if (isText && (!oldNode || !oldIsText)) {
     const text = document.createTextNode(newVode);
     if (oldNode) {
-      oldNode.onUnmount && patch2(oldNode.onUnmount(oldNode));
+      oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(text);
     } else {
       if (parent.childNodes[childIndex]) {
@@ -314,9 +283,9 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
       newvode[1] = remember(state, newvode[1], undefined);
     }
     const properties = props(newVode);
-    patchProperties(patch2, newNode, undefined, properties, svg);
+    patchProperties(patch, newNode, undefined, properties, svg);
     if (oldNode) {
-      oldNode.onUnmount && patch2(oldNode.onUnmount(oldNode));
+      oldNode.onUnmount && patch(oldNode.onUnmount(oldNode));
       oldNode.replaceWith(newNode);
     } else {
       if (parent.childNodes[childIndex]) {
@@ -329,11 +298,11 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
     if (newChildren) {
       for (let i = 0;i < newChildren.length; i++) {
         const child2 = newChildren[i];
-        const attached = render(state, patch2, newNode, i, undefined, child2, svg);
+        const attached = render(state, patch, newNode, i, undefined, child2, svg);
         newVode[properties ? i + 2 : i + 1] = attached;
       }
     }
-    newNode.onMount && patch2(newNode.onMount(newNode));
+    newNode.onMount && patch(newNode.onMount(newNode));
     return newVode;
   }
   if (!oldIsText && isNode && oldVode[0] === newVode[0]) {
@@ -347,12 +316,12 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
       newvode[1] = remember(state, newvode[1], oldvode[1]);
       if (prev !== newvode[1]) {
         const properties = props(newVode);
-        patchProperties(patch2, oldNode, props(oldVode), properties, svg);
+        patchProperties(patch, oldNode, props(oldVode), properties, svg);
         hasProps = !!properties;
       }
     } else {
       const properties = props(newVode);
-      patchProperties(patch2, oldNode, props(oldVode), properties, svg);
+      patchProperties(patch, oldNode, props(oldVode), properties, svg);
       hasProps = !!properties;
     }
     const newKids = children(newVode);
@@ -361,7 +330,7 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
       for (let i = 0;i < newKids.length; i++) {
         const child2 = newKids[i];
         const oldChild = oldKids && oldKids[i];
-        const attached = render(state, patch2, oldNode, i, oldChild, child2, svg);
+        const attached = render(state, patch, oldNode, i, oldChild, child2, svg);
         if (attached) {
           newVode[hasProps ? i + 2 : i + 1] = attached;
         }
@@ -383,13 +352,48 @@ function render(state, patch2, parent, childIndex, oldVode, newVode, svg) {
   }
   return;
 }
-function patchProperties(patch2, node, oldProps, newProps, isSvg) {
+function isNaturalVode(x) {
+  return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
+}
+function isTextVode(x) {
+  return typeof x === "string" || x?.nodeType === Node.TEXT_NODE;
+}
+function remember(state, present, past) {
+  if (typeof present !== "function")
+    return present;
+  const presentMemo = present?.__memo;
+  const pastMemo = past?.__memo;
+  if (Array.isArray(presentMemo) && Array.isArray(pastMemo) && presentMemo.length === pastMemo.length) {
+    let same = true;
+    for (let i = 0;i < presentMemo.length; i++) {
+      if (presentMemo[i] !== pastMemo[i]) {
+        same = false;
+        break;
+      }
+    }
+    if (same)
+      return past;
+  }
+  const newRender = unwrap(present, state);
+  if (typeof newRender === "object") {
+    newRender.__memo = present?.__memo;
+  }
+  return newRender;
+}
+function unwrap(c, s) {
+  if (typeof c === "function") {
+    return unwrap(c(s), s);
+  } else {
+    return c;
+  }
+}
+function patchProperties(patch, node, oldProps, newProps, isSvg) {
   if (!newProps && !oldProps)
     return;
   if (!oldProps) {
     for (const key in newProps) {
       const newValue = newProps[key];
-      newProps[key] = patchProperty(patch2, node, key, undefined, newValue, isSvg);
+      newProps[key] = patchProperty(patch, node, key, undefined, newValue, isSvg);
     }
   } else if (newProps) {
     const combinedKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)]);
@@ -399,21 +403,21 @@ function patchProperties(patch2, node, oldProps, newProps, isSvg) {
       if (key[0] === "o" && key[1] === "n") {
         const oldEvent = node["__" + key];
         if (oldEvent && oldEvent !== newValue || !oldEvent && oldValue !== newValue) {
-          newProps[key] = patchProperty(patch2, node, key, oldValue, newValue, isSvg);
+          newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
         }
         node["__" + key] = newValue;
       } else if (oldValue !== newValue) {
-        newProps[key] = patchProperty(patch2, node, key, oldValue, newValue, isSvg);
+        newProps[key] = patchProperty(patch, node, key, oldValue, newValue, isSvg);
       }
     }
   } else {
     for (const key in oldProps) {
       const oldValue = oldProps[key];
-      oldProps[key] = patchProperty(patch2, node, key, oldValue, undefined, isSvg);
+      oldProps[key] = patchProperty(patch, node, key, oldValue, undefined, isSvg);
     }
   }
 }
-function patchProperty(patch2, node, key, oldValue, newValue, isSvg) {
+function patchProperty(patch, node, key, oldValue, newValue, isSvg) {
   if (key === "style") {
     if (!newValue) {
       node.style.cssText = "";
@@ -451,17 +455,17 @@ function patchProperty(patch2, node, key, oldValue, newValue, isSvg) {
       let eventHandler = null;
       if (typeof newValue === "function") {
         const action = newValue;
-        eventHandler = (evt) => patch2([action, evt]);
+        eventHandler = (evt) => patch([action, evt]);
       } else if (Array.isArray(newValue)) {
         const arr = newValue;
         const action = newValue[0];
         if (arr.length > 1) {
-          eventHandler = () => patch2([action, ...arr.slice(1)]);
+          eventHandler = () => patch([action, ...arr.slice(1)]);
         } else {
-          eventHandler = (evt) => patch2([action, evt]);
+          eventHandler = (evt) => patch([action, evt]);
         }
       } else if (typeof newValue === "object") {
-        eventHandler = () => patch2(newValue);
+        eventHandler = () => patch(newValue);
       }
       node[key] = eventHandler;
     } else {
@@ -474,40 +478,16 @@ function patchProperty(patch2, node, key, oldValue, newValue, isSvg) {
   }
   return newValue;
 }
-function mergeState(target, source) {
-  if (!source)
-    return target;
-  for (const key in source) {
-    const value = source[key];
-    if (value && typeof value === "object") {
-      const targetValue = target[key];
-      if (targetValue) {
-        if (Array.isArray(value)) {
-          target[key] = [...value];
-        } else if (value instanceof Date && targetValue !== value) {
-          target[key] = new Date(value);
-        } else {
-          if (Array.isArray(targetValue))
-            target[key] = mergeState({}, value);
-          else if (typeof targetValue === "object")
-            mergeState(target[key], value);
-          else
-            target[key] = mergeState({}, value);
-        }
-      } else if (Array.isArray(value)) {
-        target[key] = [...value];
-      } else if (value instanceof Date) {
-        target[key] = new Date(value);
-      } else {
-        target[key] = mergeState({}, value);
-      }
-    } else if (value === undefined) {
-      delete target[key];
-    } else {
-      target[key] = value;
-    }
+function classString(classProp) {
+  if (typeof classProp === "string") {
+    return classProp;
+  } else if (Array.isArray(classProp)) {
+    return classProp.map(classString).join(" ");
+  } else if (typeof classProp === "object") {
+    return Object.keys(classProp).filter((k) => classProp[k]).join(" ");
+  } else {
+    return "";
   }
-  return target;
 }
 // src/vode-tags.ts
 var A = "a";
@@ -747,13 +727,12 @@ export {
   vode,
   tag,
   props,
-  patchProps,
-  patch,
   mergeClass,
   merge,
   memo,
   htmlToVode,
   createState,
+  createPatch,
   childrenStart,
   children,
   childCount,
@@ -915,7 +894,6 @@ export {
   FECOMPONENTTRANSFER,
   FECOLORMATRIX,
   FEBLEND,
-  EmptyPatch,
   EMBED,
   EM,
   ELLIPSE,