[fix] Same VNode shouldn't share DOM nodes (fix #4)

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dom-renderer",
-    "version": "2.4.3",
+    "version": "2.4.4",
     "license": "LGPL-3.0-or-later",
     "author": "[email protected]",
     "description": "A light-weight DOM Renderer supports Web components standard & TypeScript language",

source/dist/DOMRenderer.ts

@@ -122,7 +122,7 @@ export class DOMRenderer {
         for (const { ref, node } of newList) ref?.(node);
     }
 
-    handleCustomEvent(node: EventTarget, event: string) {
+    protected handleCustomEvent(node: EventTarget, event: string) {
         var handler: EventListener;
 
         Object.defineProperty(node, `on${event}`, {
@@ -176,7 +176,7 @@ export class DOMRenderer {
         this.updateChildren(
             oldVNode.node as ParentNode,
             oldVNode.children || [],
-            newVNode.children || []
+            (newVNode.children = newVNode.children?.map(vNode => new VNode(vNode)) || [])
         );
         newVNode.node = oldVNode.node;
 

test/jsx-runtime.spec.tsx

@@ -144,15 +144,25 @@ describe('JSX runtime', () => {
     });
 
     it('should not share a real DOM with the same VDOM', () => {
-        const sameVDOM = <a />;
+        const oldVDOM = <a>old</a>;
 
         renderer.render(
             <>
-                <nav>{sameVDOM}</nav>
-                <nav>{sameVDOM}</nav>
+                <nav>{oldVDOM}</nav>
+                <nav>{oldVDOM}</nav>
             </>
         );
-        expect(document.body.innerHTML).toBe('<nav><a></a></nav><nav><a></a></nav>');
+        expect(document.body.innerHTML).toBe('<nav><a>old</a></nav><nav><a>old</a></nav>');
+
+        const newVDOM = <a>new</a>;
+
+        renderer.render(
+            <>
+                <nav>{newVDOM}</nav>
+                <nav>{newVDOM}</nav>
+            </>
+        );
+        expect(document.body.innerHTML).toBe('<nav><a>new</a></nav><nav><a>new</a></nav>');
     });
 
     it('should handle Nested children arrays', () => {