fix(browser): preserve custom properties when cloning nodes

Author: smtdfc

packages/browser/src/index.ts

@@ -17,10 +17,10 @@ function createMarkedFragment() {
   const end = document.createComment('r:end');
   const fragment = document.createDocumentFragment();
   fragment.append(start, end);
-
+  
   return {
     fragment,
-
+    
     insertAt(el: Node, index: number) {
       let ref = start.nextSibling;
       let i = 0;
@@ -31,7 +31,7 @@ function createMarkedFragment() {
       }
       end.parentNode!.insertBefore(el, ref ?? end);
     },
-
+    
     insertRange(els: Node[], index: number) {
       let node = start.nextSibling;
       let i = 0;
@@ -45,7 +45,7 @@ function createMarkedFragment() {
       for (const el of els) frag.appendChild(el);
       ref.parentNode!.insertBefore(frag, ref);
     },
-
+    
     replace(...nodes: Node[]) {
       const parent = start.parentNode!;
       let node = start.nextSibling;
@@ -54,7 +54,7 @@ function createMarkedFragment() {
         parent.removeChild(node);
         node = next;
       }
-
+      
       if (nodes.length === 0) return;
       const frag = document.createDocumentFragment();
       for (const n of nodes) frag.appendChild(n);
@@ -69,9 +69,10 @@ export function eventDelegate(events: string[]) {
       EVENT_DELEGATION.push(name);
       window.addEventListener(name, (event: Event) => {
         const target = event.target as HTMLElement & {
-          [EVENT_DELEGATE_SYMBOL]?: Record<string, (e: Event) => unknown>;
+          [EVENT_DELEGATE_SYMBOL] ? : Record < string,
+          (e: Event) => unknown > ;
         };
-
+        
         if (
           target &&
           target[EVENT_DELEGATE_SYMBOL] &&
@@ -88,16 +89,16 @@ export function element(
   parent: HTMLElement,
   context: RenderContext,
   tagName: string,
-  attrs?: Record<string, string>,
+  attrs ? : Record < string, string > ,
 ): HTMLElement {
   const el = document.createElement(tagName);
-
+  
   if (attrs) {
     for (const key in attrs) {
       el.setAttribute(key, attrs[key]);
     }
   }
-
+  
   parent.appendChild(el);
   return el;
 }
@@ -115,9 +116,10 @@ export function createEvent(
   callback: (e: Event) => unknown,
 ) {
   target = target as HTMLElement & {
-    [EVENT_DELEGATE_SYMBOL]?: Record<string, (e: Event) => unknown>;
+    [EVENT_DELEGATE_SYMBOL] ? : Record < string,
+    (e: Event) => unknown > ;
   };
-
+  
   if (!target[EVENT_DELEGATE_SYMBOL]) target[EVENT_DELEGATE_SYMBOL] = {};
   target[EVENT_DELEGATE_SYMBOL][name] = callback;
 }
@@ -146,43 +148,37 @@ export function appendDynamicValue(
   const end = document.createComment('_');
   parent.appendChild(start);
   parent.appendChild(end);
-
+  
   let prev: unknown = null;
   let currentNodes: Node[] = [];
-
+  
   const replaceRange = (nodes: Node[]) => {
     //if (end.parentNode !== parent) return;
-
+    
     const range = document.createRange();
     range.setStartAfter(start);
     range.setEndBefore(end);
     range.deleteContents();
-
-    const frag = document.createDocumentFragment();
+    
     for (let node of nodes) {
-      if (node.parentNode && node.parentNode !== parent) {
-        node = node.cloneNode(true);
-      }
-      frag.appendChild(node);
+      range.insertNode(node);
     }
-
-    range.insertNode(frag);
     currentNodes = nodes;
   };
-
+  
   const normalize = (val: unknown): Node[] => {
     if (Array.isArray(val)) {
       const flat: Node[] = [];
       for (const v of val) flat.push(...normalize(v));
       return flat;
     }
-
+    
     if (isRenderContent(val)) {
       return [val(context)];
     }
-
+    
     if (val == null || typeof val === 'boolean') return [];
-
+    
     if (typeof val === 'string' || typeof val === 'number') {
       if (
         currentNodes.length === 1 &&
@@ -194,26 +190,26 @@ export function appendDynamicValue(
         return [document.createTextNode(String(val))];
       }
     }
-
+    
     if (val instanceof Node) return [val];
-
+    
     return [document.createTextNode(String(val))];
   };
-
+  
   const update = (val: unknown) => {
     if (val === prev) return;
     prev = val;
-
+    
     const normalized = normalize(val);
-
+    
     if (
       normalized.length !== currentNodes.length ||
       normalized.some((n, i) => n !== currentNodes[i])
     ) {
       replaceRange(normalized);
     }
   };
-
+  
   if (value instanceof State) {
     context.onRenderFinish.push(() => {
       value.reactor.addInternalBinding(() => update(value.get()));
@@ -223,10 +219,10 @@ export function appendDynamicValue(
     update(value);
   }
 }
-export function createComponent<T extends object>(
+export function createComponent < T extends object > (
   parent: HTMLElement,
   context: RenderContext,
-  component: ComponentConstructor<T>,
+  component: ComponentConstructor < T > ,
   props: T,
 ): HTMLElement {
   const element = createComponentElement(component, context, props);
@@ -250,29 +246,29 @@ export function view(
   if (value instanceof ViewControl) value.setTarget(element);
 }
 
-export function createIfComponent<T>(
+export function createIfComponent < T > (
   parent: HTMLElement,
   context: RenderContext,
-  props: IfProps<T>,
+  props: IfProps < T > ,
 ) {
   const onTrue = props.onTrue;
   const onFalse = props.onFalse;
   const render = () => {
     const condition =
-      props.condition instanceof State
-        ? props.condition.get()
-        : props.condition;
+      props.condition instanceof State ?
+      props.condition.get() :
+      props.condition;
     let templ: DocumentFragment = document.createDocumentFragment();
-
+    
     if (condition && onTrue) {
       templ = onTrue(context);
     } else if (onFalse && !condition) {
       templ = onFalse(context);
     }
-
+    
     marker.replace(...templ.childNodes);
   };
-
+  
   const marker = createMarkedFragment();
   render();
   if (props.condition instanceof State) {
@@ -281,26 +277,26 @@ export function createIfComponent<T>(
       state.reactor.addInternalBinding(() => render());
     });
   }
-
+  
   parent.appendChild(marker.fragment);
 }
 
-export function createForComponent<T>(
+export function createForComponent < T > (
   parent: HTMLElement,
   context: RenderContext,
-  props: ForProps<T>,
+  props: ForProps < T > ,
 ) {
   const tmpl = props.template;
   const marker = createMarkedFragment();
   const items: HTMLElement[] = [];
-
+  
   // Initial render
   const initialList = props.list.get();
   for (let i = 0; i < initialList.length; i++) {
     const el = tmpl(initialList[i])(context).children[0] as HTMLElement;
     items.push(el);
   }
-
+  
   parent.appendChild(marker.fragment);
   marker.insertRange(items, 0);
   context.onRenderFinish.push(() => {
@@ -314,13 +310,13 @@ export function createForComponent<T>(
           marker.insertAt(el, key as number);
           break;
         }
-
+        
         case 'remove': {
           const removed = items.splice(key as number, 1)[0];
           removed?.remove?.();
           break;
         }
-
+        
         case 'update': {
           const newEl = tmpl(value as T)(context).children[0] as HTMLElement;
           const oldEl = items[key as number];
@@ -330,21 +326,21 @@ export function createForComponent<T>(
           }
           break;
         }
-
+        
         case 'set': {
           for (const item of items) item.remove?.();
           items.length = 0;
-
+          
           const fresh = (value as T[]).map((val) => {
             const el = tmpl(val)(context).children[0] as HTMLElement;
             items.push(el);
             return el;
           });
-
+          
           marker.insertRange(fresh, 0);
           break;
         }
       }
     });
   });
-}
+}