fix: handle deepEqual edge case of DOM elements

src/core/nodeOps.ts

@@ -192,8 +192,14 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         const prevArgs = _prevValue ?? []
         const args = nextValue ?? []
         const instanceName = node.userData.tres__name || node.type
-
+        console.log('replacing', {
+          instanceName,
+          args,
+          prevArgs,
+          diff: !deepArrayEqual(prevArgs, args)
+        })
         if (instanceName && !deepArrayEqual(prevArgs, args)) {
+
           root = Object.assign(prevNode, new catalogue.value[instanceName](...nextValue))
         }
         return

src/utils/index.ts

@@ -26,6 +26,10 @@ const HTML_TAGS =
 
 export const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS)
 
+export function isDOMElement(obj: any): obj is HTMLElement {
+  return obj && obj.nodeType === 1;
+}
+
 export function kebabToCamel(str: string) {
   return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
 }
@@ -77,6 +81,21 @@ export const set = (obj: any, path: string | string[], value: any): void => {
 
 
 export function deepEqual(a: any, b: any): boolean {
+
+  if (isDOMElement(a) && isDOMElement(b)) {
+    const attrsA = a.attributes;
+    const attrsB = b.attributes;
+
+    if (attrsA.length !== attrsB.length) return false;
+
+    for (let i = 0; i < attrsA.length; i++) {
+      const { name, value } = attrsA[i];
+      if (b.getAttribute(name) !== value) return false;
+    }
+
+    return true;
+  }
+
   // If both are primitives, return true if they are equal
   if (a === b) return true;