@ryupold/vode 1.8.6 → 1.8.8

package/src/vode.ts

@@ -5,9 +5,9 @@ export type JustTagVode = [tag: Tag];
 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, unmountCount: number, unmountStart: number } | Text & { node?: never, unmounts?: never, unmountStart?: never };
+export type AttachedVode<S> = Vode<S> & { node: ChildNode } | Text & { node?: never };
 export type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap & MathMLElementTagNameMap) | (string & {});
-export type Component<S> = (s: S) => ChildVode<S>;
+export type Component<S = PatchableState> = (s: S) => ChildVode<S>;
 
 export type Patch<S> =
     | IgnoredPatch // ignored
@@ -97,7 +97,6 @@ export interface ContainerNode<S = PatchableState> extends HTMLElement {
         qAsync: {} | undefined | null,  // next render-patches to be animated after another
         isRendering: boolean,
         isAnimating: boolean,
-        unmounts: (MountFunction<S> | null)[],
         /** stats about the overall patches & last render time */
         stats: {
             patchCount: number,
@@ -150,7 +149,6 @@ export function app<S extends PatchableState = PatchableState>(
     _vode.qSync = null;
     _vode.qAsync = null;
     _vode.stats = { lastSyncRenderTime: 0, lastAsyncRenderTime: 0, syncRenderCount: 0, asyncRenderCount: 0, liveEffectCount: 0, patchCount: 0, syncRenderPatchCount: 0, asyncRenderPatchCount: 0 };
-    _vode.unmounts = [];
 
     const patchableState = state as PatchableState<S> & { patch: (action: Patch<S>, animate?: boolean) => void };
 
@@ -219,9 +217,9 @@ export function app<S extends PatchableState = PatchableState>(
     });
 
     function renderDom(isAsync: boolean) {
-        const sw = Date.now();
+        const sw = performance.now();
         const vom = dom(_vode.state);
-        _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, 0, _vode.vode, vom, null, _vode.unmounts, 0)!;
+        _vode.vode = render<S>(_vode.state, container.parentElement as Element, 0, 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;
@@ -229,7 +227,7 @@ export function app<S extends PatchableState = PatchableState>(
         }
 
         if (!isAsync) {
-            _vode.stats.lastSyncRenderTime = Date.now() - sw;
+            _vode.stats.lastSyncRenderTime = performance.now() - sw;
             _vode.stats.syncRenderCount++;
             _vode.isRendering = false;
             if (_vode.qSync) _vode.renderSync();
@@ -260,7 +258,7 @@ export function app<S extends PatchableState = PatchableState>(
             if (_vode.isAnimating || !_vode.qAsync || document.hidden) return;
 
             _vode.isAnimating = true;
-            const sw = Date.now();
+            const sw = performance.now();
             try {
                 _vode.state = mergeState(_vode.state, _vode.qAsync, true);
                 _vode.qAsync = null;
@@ -269,7 +267,7 @@ export function app<S extends PatchableState = PatchableState>(
 
                 await globals.currentViewTransition?.updateCallbackDone;
             } finally {
-                _vode.stats.lastAsyncRenderTime = Date.now() - sw;
+                _vode.stats.lastAsyncRenderTime = performance.now() - sw;
                 _vode.stats.asyncRenderCount++;
                 _vode.isAnimating = false;
             }
@@ -282,6 +280,7 @@ export function app<S extends PatchableState = PatchableState>(
     const root = container as ContainerNode<S>;
     root._vode = _vode;
     const indexInParent = Array.from(container.parentElement.children).indexOf(container);
+
     _vode.isRendering = true;
     _vode.vode = render(
         <S>state,
@@ -289,10 +288,7 @@ export function app<S extends PatchableState = PatchableState>(
         indexInParent,
         indexInParent,
         hydrate<S>(container, true) as AttachedVode<S>,
-        dom(<S>state),
-        null,
-        _vode.unmounts,
-        0
+        dom(<S>state)
     )!;
     _vode.isRendering = false;
     if (_vode.qSync) _vode.renderSync();
@@ -388,13 +384,20 @@ export function hydrate<S = PatchableState>(element: Element | Text, prepareForR
 }
 
 /** 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 = PatchableState>(compare: any[], componentOrProps: Component<S> | ((s: S) => Props<S>)): typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S> {
+ * `compare` of the previous render. otherwise skips the render step (not calling `componentOrProps`)
+ */
+export function memo<S = PatchableState>(compare: any[], component: Component<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");
+    if (typeof component !== "function") throw new Error("second argument to memo() must be a function that returns a child vode");
+
+    if ((<any>component).__memo) { // wrap to prevent double memoization
+        const comp = component;
+        component = (s: S) => comp(s);
+    }
+
+    (<any>component).__memo = compare;
 
-    (<any>componentOrProps).__memo = compare;
-    return componentOrProps as typeof componentOrProps extends ((s: S) => Props<S>) ? ((s: S) => Props<S>) : Component<S>;
+    return component;
 }
 
 /** 
@@ -511,20 +514,14 @@ function mergeState(target: any, source: any, allowDeletion: boolean) {
     return target;
 };
 
-function render<S extends PatchableState>(
-    state: S, parent: Element,
-    childIndex: number, indexInParent: number,
-    oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>,
-    xmlns: string | null,
-    unmounts: (MountFunction<S> | null)[], unmountStart: number
-): AttachedVode<S> | undefined {
+function render<S extends PatchableState>(state: S, parent: Element, childIndex: number, indexInParent: number, oldVode: AttachedVode<S> | undefined, newVode: ChildVode<S>, xmlns?: string | null): AttachedVode<S> | undefined {
     try {
         // unwrap component if it is memoized
         newVode = remember(state, newVode, oldVode) as ChildVode<S>;
 
         const isNoVode = !newVode || typeof newVode === "number" || typeof newVode === "boolean";
         if (newVode === oldVode || (!oldVode && isNoVode)) {
-            return oldVode as AttachedVode<S>;
+            return oldVode;
         }
 
         const oldIsText = (oldVode as Text)?.nodeType === Node.TEXT_NODE;
@@ -532,17 +529,7 @@ function render<S extends PatchableState>(
 
         // falsy|text|element(A) -> undefined 
         if (isNoVode) {
-            if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
-                const start = (<any>oldVode).unmountStart;
-                const count = (<any>oldVode).unmountCount;
-                for (let i = count - 1; i >= 0; i--) {
-                    const fn = unmounts[start + i];
-                    if (fn) {
-                        state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
-                        unmounts[start + i] = null;
-                    }
-                }
-            }
+            unmountTree(state, oldVode as AttachedVode<S>);
             oldNode?.remove();
             return undefined;
         }
@@ -566,30 +553,20 @@ function render<S extends PatchableState>(
             if ((<Text>oldNode).nodeValue !== <string>newVode) {
                 (<Text>oldNode).nodeValue = <string>newVode;
             }
-            return oldVode as AttachedVode<S>;
+            return oldVode;
         }
         // falsy|element -> text
         if (isText && (!oldNode || !oldIsText)) {
             const text = document.createTextNode(newVode as string)
             if (oldNode) {
-                if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
-                    const start = (<any>oldVode).unmountStart;
-                    const count = (<any>oldVode).unmountCount;
-                    for (let i = count - 1; i >= 0; i--) {
-                        const fn = unmounts[start + i];
-                        if (fn) {
-                            state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
-                            unmounts[start + i] = null;
-                        }
-                    }
-                }
+                unmountTree(state, oldVode as AttachedVode<S>);
                 oldNode.replaceWith(text);
             } else {
                 let inserted = false;
                 for (let i = indexInParent; i < parent.childNodes.length; i++) {
                     const nextSibling = parent.childNodes[i];
                     if (nextSibling) {
-                        nextSibling.before(text, nextSibling);
+                        nextSibling.before(text);
                         inserted = true;
                         break;
                     }
@@ -628,26 +605,14 @@ function render<S extends PatchableState>(
             }
 
             if (oldNode) {
-                if (!oldIsText && typeof (<any>oldVode)?.unmountCount === "number") {
-                    const start = (<any>oldVode).unmountStart;
-                    const count = (<any>oldVode).unmountCount;
-                    for (let i = count - 1; i >= 0; i--) {
-                        const fn = unmounts[start + i];
-                        if (fn) {
-                            state.patch(fn(state, oldNode as HTMLElement & SVGSVGElement & MathMLElement));
-                            unmounts[start + i] = null;
-                        }
-                    }
-                }
-                unmounts[unmountStart] = properties?.onUnmount ?? null;
+                unmountTree(state, oldVode as AttachedVode<S>);
                 oldNode.replaceWith(newNode);
             } else {
-                unmounts[unmountStart] = properties?.onUnmount ?? null;
                 let inserted = false;
                 for (let i = indexInParent; i < parent.childNodes.length; i++) {
                     const nextSibling = parent.childNodes[i];
                     if (nextSibling) {
-                        nextSibling.before(newNode, nextSibling);
+                        nextSibling.before(newNode);
                         inserted = true;
                         break;
                     }
@@ -657,28 +622,23 @@ function render<S extends PatchableState>(
                 }
             }
 
-            let totalChildUnmounts = 0;
-            let childUnmountStart = unmountStart + 1;
-            const newKids = children(newVode);
-            if (newKids) {
+            const newStart = childrenStart(newVode);
+            if (newStart > 0) {
                 const childOffset = !!properties ? 2 : 1;
                 let indexP = 0;
-                for (let i = 0; i < newKids.length; i++) {
-                    const child = newKids[i];
-                    const attached = render(state, newNode as Element, i, indexP, undefined, child, xmlns ?? null, unmounts, childUnmountStart);
-                    (<Vode<S>>newVode!)[i + childOffset] = <Vode<S> | undefined>attached;
-                    if (attached) {
-                        indexP++;
-                        const childUnmounts = (<any>attached).unmountCount || 0;
-                        totalChildUnmounts += childUnmounts;
-                        childUnmountStart += childUnmounts;
-                    }
+                for (let i = 0; i < (<Vode<S>>newVode).length - newStart; i++) {
+                    const child = (<Vode<S>>newVode)[i + newStart] as ChildVode<S>;
+                    // render child in xml mode to prevent using the dom properties
+                    const attached = render(state, newNode as Element, i, indexP, undefined, child, xmlns ?? null);
+                    (<Vode<S>>newVode!)[i + childOffset] = <Vode<S>>attached;
+                    if (attached) indexP++;
                 }
             }
 
-            (<any>newNode).onMount && state.patch((<any>newNode).onMount(newNode));
-            (<any>newVode).unmountCount = 1 + totalChildUnmounts;
-            (<any>newVode).unmountStart = unmountStart;
+            (<any>newVode)._unmountCount = (properties?.onUnmount ? 1 : 0) + sumChildUnmountCounts(newVode as Vode<S>);
+            if (typeof properties?.onMount === "function") {
+                state.patch(properties.onMount(state, newNode as HTMLElement & SVGSVGElement & MathMLElement));
+            }
             return <AttachedVode<S>>newVode;
         }
 
@@ -686,63 +646,41 @@ function render<S extends PatchableState>(
         if (!oldIsText && isNode && (<Vode<S>>oldVode)[0] === (<Vode<S>>newVode)[0]) {
             (<AttachedVode<S>>newVode).node = oldNode;
 
-            const newvode = <Vode<S>>newVode;
-            const oldvode = <Vode<S>>oldVode;
-
             const properties = props(newVode);
             const oldProps = props(oldVode);
 
-            if (properties?.xmlns !== undefined) xmlns = properties.xmlns;
+            if (properties?.xmlns !== undefined)
+                xmlns = properties.xmlns;
 
-            if ((<any>newvode[1])?.__memo) {
-                const prev = newvode[1] as any;
-                newvode[1] = remember(state, newvode[1], oldvode[1]) as Vode<S>;
-                if (prev !== newvode[1]) {
-                    patchProperties(state, oldNode!, oldProps, properties, xmlns);
-                }
-            }
-            else {
-                patchProperties(state, oldNode!, oldProps, properties, xmlns);
-            }
+            patchProperties(state, oldNode!, oldProps, properties, xmlns);
 
             if (!!properties?.catch && oldProps?.catch !== properties.catch) {
                 (<any>newVode).node['catch'] = null;
                 (<any>newVode).node.removeAttribute('catch');
             }
 
-            // own unmount slot (always reserved per element)
-            unmounts[unmountStart] = properties?.onUnmount ?? null;
-
-            let totalChildUnmounts = 0;
-            let childUnmountStart = unmountStart + 1;
-            const newKids = children(newVode);
-            const oldKids = children(oldVode) as AttachedVode<S>[];
-            if (newKids) {
-                const childOffset = !!properties ? 2 : 1;
+            const newStart = childrenStart(newVode);
+            const oldStart = childrenStart(oldVode);
+            if (newStart > 0) {
                 let indexP = 0;
-                for (let i = 0; i < newKids.length; i++) {
-                    const child = newKids[i];
-                    const oldChild = oldKids && oldKids[i];
-                    const attached = render(state, oldNode as Element, i, indexP, oldChild, child, xmlns, unmounts, childUnmountStart);
-                    (<Vode<S>>newVode)[i + childOffset] = <Vode<S>>attached;
-                    if (attached) {
-                        indexP++;
-                        const childUnmounts = (<any>attached).unmountCount || 0;
-                        totalChildUnmounts += childUnmounts;
-                        childUnmountStart += childUnmounts;
-                    }
+                for (let i = 0; i < (<Vode<S>>newVode).length - newStart; i++) {
+                    const child = (<Vode<S>>newVode)[i + newStart] as ChildVode<S>;
+                    const oldChild = oldStart > 0 ? (<Vode<S>>oldVode)[i + oldStart] as AttachedVode<S> : undefined;
+
+                    const attached = render(state, oldNode as Element, i, indexP, oldChild, child, xmlns);
+                    (<any>newVode)[i + newStart] = attached;
+                    if (attached) indexP++;
                 }
             }
 
-            if (oldKids) {
-                const newKidsCount = newKids ? newKids.length : 0;
-                for (let i = oldKids.length - 1; i >= newKidsCount; i--) {
-                    render(state, oldNode as Element, i, i, oldKids[i], undefined, xmlns, unmounts, (<any>oldKids[i]).unmountStart);
+            if (oldStart > 0) {
+                const newKidsCount = newStart > 0 ? (<Vode<S>>newVode).length - newStart : 0;
+                for (let i = (<Vode<S>>oldVode).length - 1 - oldStart; i >= newKidsCount; i--) {
+                    render(state, oldNode as Element, i, i, (<any>oldVode)[i + oldStart], undefined, xmlns);
                 }
             }
 
-            (<any>newVode).unmountCount = 1 + totalChildUnmounts;
-            (<any>newVode).unmountStart = unmountStart;
+            (<any>newVode)._unmountCount = (properties?.onUnmount ? 1 : 0) + sumChildUnmountCounts(newVode as Vode<S>);
             return <AttachedVode<S>>newVode;
         }
     } catch (error) {
@@ -755,7 +693,7 @@ function render<S extends PatchableState>(
             return render(state, parent, childIndex, indexInParent,
                 hydrate(((<AttachedVode<S>>newVode)?.node || oldVode?.node) as Element, true) as AttachedVode<S>,
                 handledVode,
-                xmlns, unmounts, unmountStart);
+                xmlns);
         } else {
             throw error;
         }
@@ -764,6 +702,35 @@ function render<S extends PatchableState>(
     return undefined;
 }
 
+function unmountTree<S extends PatchableState>(state: S, v: AttachedVode<S> | ChildVode<S> | undefined): void {
+    if (!v || !Array.isArray(v)) return;
+    if (((<any>v)._unmountCount | 0) === 0) return;
+
+    const kids = children(v as Vode<S>) as AttachedVode<S>[] | null;
+    if (kids) {
+        for (let i = kids.length - 1; i >= 0; i--) {
+            unmountTree(state, kids[i]);
+        }
+    }
+
+    const p = props(v);
+    if (typeof p?.onUnmount === "function") {
+        state.patch(p.onUnmount(state, (v as AttachedVode<S>).node as HTMLElement & SVGSVGElement & MathMLElement));
+    }
+}
+
+function sumChildUnmountCounts<S>(v: Vode<S>): number {
+    const kids = children(v) as AttachedVode<S>[] | null;
+    if (!kids) return 0;
+    let n = 0;
+    for (const k of kids) {
+        if (k && Array.isArray(k)) {
+            n += ((<any>k)._unmountCount | 0);
+        }
+    }
+    return n;
+}
+
 function isNaturalVode<S>(x: ChildVode<S>): x is Vode<S> {
     return Array.isArray(x) && x.length > 0 && typeof x[0] === "string";
 }
@@ -773,14 +740,19 @@ function isTextVode<S>(x: ChildVode<S>): x is TextVode {
 }
 
 function remember<S>(state: S, present: any, past: any): ChildVode<S> | AttachedVode<S> {
+    while (typeof present === "function" && !present.__memo) {
+        present = present(state);
+    }
+
     if (typeof present !== "function")
         return present;
 
-    const presentMemo = present?.__memo;
-    const pastMemo = past?.__memo;
 
-    if (Array.isArray(presentMemo)
-        && Array.isArray(pastMemo)
+    const presentMemo: unknown[] = present?.__memo;
+    const pastMemo: unknown[] = past?.__memo;
+
+    if (
+        Array.isArray(presentMemo) && Array.isArray(pastMemo)
         && presentMemo.length === pastMemo.length
     ) {
         let same = true;
@@ -793,40 +765,17 @@ function remember<S>(state: S, present: any, past: any): ChildVode<S> | Attached
         if (same) return past;
     }
 
-    const result = present(state);
-
-    if (typeof result === "function" && result?.__memo) {
-        const resultMemo = result.__memo;
-        if (Array.isArray(resultMemo) && Array.isArray(pastMemo) && resultMemo.length === pastMemo.length) {
-            let same = true;
-            for (let i = 0; i < resultMemo.length; i++) {
-                if (resultMemo[i] !== pastMemo[i]) {
-                    same = false;
-                    break;
-                }
-            }
-            if (same) return past;
-        }
-        const innerRender = result(state);
-        if (typeof innerRender === "object") {
-            innerRender.__memo = resultMemo;
-        }
-        return innerRender;
+    // memos are not equal so we unwrap the present
+    while (typeof present === "function") {
+        present = present(state);
     }
 
-    const newRender = typeof result === "function" ? unwrap(result, state) : result;
-    if (typeof newRender === "object") {
-        (<any>newRender).__memo = result?.__memo || present?.__memo;
+    // attach memo to the unwrapped present for future comparisons
+    if (typeof present === "object") {
+        (<any>present).__memo = presentMemo;
     }
-    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;
-    }
+    return present;
 }
 
 function patchProperties<S extends PatchableState>(

package/test/helper.ts

@@ -1,16 +1,18 @@
-import { children, ChildVode, PatchableState, tag, Vode } from "../src/vode";
-import { MockElement, MockText } from "./mocks";
+import { children, ChildVode, PatchableState, props, tag, Vode } from "../src/vode";
+import { FakeElement, FakeTextNode } from "./mocks";
 
 export class Expectation {
     constructor(public readonly what: any) { }
 
-    toBeA(type: "undefined" | "object" | "function" | "bigint" | "boolean" | "number" | "string" | "symbol") {
+    toBeA(type: "undefined" | "object" | "function" | "bigint" | "boolean" | "number" | "string" | "symbol", failMessage?: string) {
         if (typeof this.what !== type) {
-            throw new ExpectationError(this, `expected \n\ntypeof ${this.what}\n\nto be \n\n${type}`);
+            throw new ExpectationError(this, `expected \n\ntypeof ${this.what}\n\nto be \n\n${type}${failMessage ? `\n\n${failMessage}` : ""}`);
         }
     }
 
-    toEqual(other: any) {
+    toEqual(other: any, failMessage?: string) {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
+
         function deepCompare(a: any, b: any, path: string[]): string[] | null {
             if (typeof a !== typeof b) {
                 if (path.length === 0) path.push(``);
@@ -46,12 +48,12 @@ export class Expectation {
         if (typeof this.what === "object" && typeof other === "object" && this.what !== null && other !== null) {
             const unequal = deepCompare(this.what, other, []);
             if (unequal) {
-                throw new ExpectationError(this, `expected \n\n${JSON.stringify(this.what, null, 2)}\n\n to equal \n\n${JSON.stringify(other, null, 2)}\n\nThey differ in: ${unequal.join(".")}`);
+                throw new ExpectationError(this, `expected \n\n${JSON.stringify(this.what, null, 2)}\n\n to equal \n\n${JSON.stringify(other, null, 2)}\n\nThey differ in: ${unequal.join(".")}${failSuffix}`);
             }
         }
         else {
             if (this.what !== other) {
-                throw new ExpectationError(this, `expected (${typeof this.what})\n\n${this.what}\n\nto equal (${typeof other})\n\n${other}`);
+                throw new ExpectationError(this, `expected (${typeof this.what})\n\n${this.what}\n\nto equal (${typeof other})\n\n${other}${failSuffix}`);
             }
         }
     }
@@ -77,82 +79,126 @@ export class Expectation {
         throw new ExpectationError(this, `expected function to fail\n\nbut it succeeded with a result of type ${typeof r}\n\n${r}`);
     }
 
-    toMatch(v: ChildVode, state?: PatchableState) {
-        if (this.what instanceof MockElement || this.what instanceof MockText || typeof this.what === "string" || Array.isArray(this.what) || typeof this.what === "function") {
+    toMatch(v: ChildVode, state?: PatchableState | null, failMessage?: string) {
+        const failSuffix = failMessage ? `\n\n${failMessage}` : "";
+
+        if (this.what instanceof FakeElement || this.what instanceof FakeTextNode || typeof this.what === "string" || Array.isArray(this.what) || typeof this.what === "function") {
             const that = this;
-            function deepCompare(e: MockElement | MockText | ChildVode, cv: ChildVode, path: string[]): string[] | null {
+
+            function deepCompare(e: FakeElement | FakeTextNode | ChildVode, cv: ChildVode, path: string[]): string[] | null {
 
                 // unwrap component
                 while (typeof cv === "function") {
                     if (!state) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]${failSuffix}`);
                     }
                     cv = cv(state);
                 }
                 while (typeof e === "function") {
                     if (!state) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na Component\n\nbut got no state passed in [toMatch]${failSuffix}`);
                     }
                     e = e(state);
                 }
 
-                if (typeof cv === "string" && e instanceof MockText) {
+                // string matches TextNode
+                if (typeof cv === "string" && e instanceof FakeTextNode) {
                     if (cv !== e.wholeText) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e.wholeText}`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e.wholeText}${failSuffix}`);
                     }
                 }
+                // string matches string
                 else if (typeof cv === "string" && typeof e === "string") {
                     if (cv !== e) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e}`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node with\n${cv}\n\nbut text was\n${e}${failSuffix}`);
                     }
                 }
 
-                else if (Array.isArray(cv) && e instanceof MockElement) {
-                    if (tag(cv)?.toLocaleUpperCase() !== e.tagName.toUpperCase()) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got <${e.tagName}>`);
+                // vode matches element
+                else if (Array.isArray(cv) && e instanceof FakeElement) {
+                    if (tag(cv)?.toUpperCase() !== e.tagName.toUpperCase()) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nbut got <${e.tagName.toUpperCase()}>${failSuffix}`);
+                    }
+
+                    // compare attributes/props
+                    const properties = props(cv);
+                    if (properties) {
+                        for (const [k, v] of Object.entries(properties)) {
+                            const attributeValue = e.fakeAttributes[k];
+                            if (!attributeValue) {
+                                throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nwith attribute [${k}="${v}"]\n\nbut it was not found${failSuffix}`);
+                            }
+                            if (attributeValue !== v) {
+                                throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nwith attribute [${k}="${v}"]\n\nbut it was [${k}="${attributeValue}"]${failSuffix}`);
+                            }
+                        }
                     }
+
+                    // compare children
                     const kids = children(cv) || [];
                     for (let i = 0; i < kids.length; i++) {
-                        deepCompare(e.children[i], kids[i], [...path, `${tag(kids[i] as Vode) || "#text"}`]);
+                        deepCompare(e.children.item(i) as any, kids[i], [...path, `[${i}]${tag(kids[i] as Vode)?.toUpperCase() || "#text"}`]);
                     }
                     if (kids.length !== e.children.length) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut <${e.tagName}> has ${e.children.length} children`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut <${e.tagName.toUpperCase()}> has ${e.children.length} children${failSuffix}`);
                     }
                 }
+                // vode matches vode
                 else if (Array.isArray(cv) && Array.isArray(e)) {
-                    if (tag(cv)?.toLocaleUpperCase() !== tag(e)?.toUpperCase()) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element [${tag(cv)}]\n\nbut got [${tag(e)}]`);
+                    if (tag(cv)?.toUpperCase() !== tag(e)?.toUpperCase()) {
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na vode [${tag(cv)?.toUpperCase()}]\n\nbut got [${tag(e)?.toUpperCase()}]${failSuffix}`);
+                    }
+
+                    // compare attributes/props
+                    const properties = props(cv);
+                    const otherProperties = props(e) || {};
+                    if (properties) {
+                        for (const [k, v] of Object.entries(properties)) {
+                            const attributeValue = otherProperties[k];
+                            if (!attributeValue) {
+                                throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na vode [${tag(cv)?.toUpperCase()}]\n\nwith attribute [${k}="${v}"]\n\nbut it was not found${failSuffix}`);
+                            }
+                            if (attributeValue !== v) {
+                                throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na vode [${tag(cv)?.toUpperCase()}]\n\nwith attribute [${k}="${v}"]\n\nbut its value was [${k}="${attributeValue}"]${failSuffix}`);
+                            }
+                        }
                     }
+
+                    // compare children
                     const kids = children(cv) || [];
                     const otherKids = children(e) || [];
                     for (let i = 0; i < kids.length; i++) {
-                        deepCompare(otherKids[i], kids[i], [...path, `${tag(kids[i] as Vode) || "#text"}`]);
+                        deepCompare(otherKids[i], kids[i], [...path, `[${i}]${tag(kids[i] as Vode)?.toUpperCase() || "#text"}`]);
                     }
                     if (kids.length !== otherKids.length) {
-                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut [${tag(e)}] has ${otherKids.length} children`);
+                        throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\n${kids.length} children\n\nbut [${tag(e)?.toUpperCase()}] has ${otherKids.length} children${failSuffix}`);
                     }
                 }
 
-                else if (typeof cv === "string" && e instanceof MockElement) {
-                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got <${e.tagName}>`);
+                // mismatch between text and element
+                else if (typeof cv === "string" && e instanceof FakeElement) {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got <${e.tagName.toUpperCase()}>${failSuffix}`);
                 }
+                // mismatch between text and vode
                 else if (typeof cv === "string" && Array.isArray(e)) {
-                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got [${tag(e)}]`);
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\na text node\n\nbut got [${tag(e)?.toUpperCase()}]${failSuffix}`);
                 }
 
-                else if (Array.isArray(cv) && e instanceof MockText) {
-                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got #text (${e.wholeText})`);
+                // mismatch between vode and text node
+                else if (Array.isArray(cv) && e instanceof FakeTextNode) {
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nbut got #text (${e.wholeText})${failSuffix}`);
                 }
+                // mismatch between vode and text
                 else if (Array.isArray(cv) && typeof e === "string") {
-                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)}>\n\nbut got #text (${e})`);
+                    throw new ExpectationError(that, `expected at\n${path.join(" > ")}\n\nan element <${tag(cv)?.toUpperCase()}>\n\nbut got #text (${e})${failSuffix}`);
                 }
 
                 return null;
             }
 
-            deepCompare(this.what, v, [tag(v as Vode) || "#text"]);
+            deepCompare(this.what, v, [`${tag(v as Vode)?.toUpperCase() || "#text"}`]);
         } else {
-            throw new ExpectationError(this, `expected an element or text node\n\nbut it is a ${typeof this.what}\n${this.what}`);
+            throw new ExpectationError(this, `expected an element or text node\n\nbut it is a ${typeof this.what}\n${this.what}${failSuffix}`);
         }
     }
 };