perf: use replace children for truncating nodes

Author: Varixo

packages/qwik/src/core/client/vnode-diff.ts

@@ -32,7 +32,7 @@ import {
   dangerouslySetInnerHTML,
 } from '../shared/utils/markers';
 import { isPromise } from '../shared/utils/promises';
-import { type ValueOrPromise } from '../shared/utils/types';
+import { isArray, type ValueOrPromise } from '../shared/utils/types';
 import {
   getEventNameFromJsxEvent,
   getEventNameScopeFromJsxEvent,
@@ -308,7 +308,7 @@ export const vnode_diff = (
    *   is an array produced by the `map` function.
    */
   function descend(children: JSXChildren, descendVNode: boolean) {
-    if (children == null) {
+    if (children == null || (descendVNode && isArray(children) && children.length === 0)) {
       expectNoChildren();
       return;
     }

packages/qwik/src/core/client/vnode.ts

@@ -183,8 +183,9 @@ export const enum VNodeJournalOpCode {
   SetText = 1, // ------ [SetAttribute, target, text]
   SetAttribute = 2, // - [SetAttribute, target, ...(key, values)]]
   HoistStyles = 3, // -- [HoistStyles, document]
-  Remove = 4, // ------- [Insert, target(parent), ...nodes]
-  Insert = 5, // ------- [Insert, target(parent), reference, ...nodes]
+  Remove = 4, // ------- [Remove, target(parent), ...nodes]
+  RemoveAll = 5, // ------- [RemoveAll, target(parent)]
+  Insert = 6, // ------- [Insert, target(parent), reference, ...nodes]
 }
 
 export type VNodeJournal = Array<
@@ -968,6 +969,15 @@ export const vnode_applyJournal = (journal: VNodeJournal) => {
           idx++;
         }
         break;
+      case VNodeJournalOpCode.RemoveAll:
+        const removeAllParent = journal[idx++] as Element;
+        if (removeAllParent.replaceChildren) {
+          removeAllParent.replaceChildren();
+        } else {
+          // fallback if replaceChildren is not supported
+          removeAllParent.textContent = '';
+        }
+        break;
       case VNodeJournalOpCode.Insert:
         const insertParent = journal[idx++] as Element;
         const insertBefore = journal[idx++] as Element | Text | null;
@@ -1220,8 +1230,7 @@ export const vnode_truncate = (
 ) => {
   assertDefined(vDelete, 'Missing vDelete.');
   const parent = vnode_getDomParent(vParent);
-  const children = vnode_getDOMChildNodes(journal, vDelete);
-  parent && children.length && journal.push(VNodeJournalOpCode.Remove, parent, ...children);
+  parent && journal.push(VNodeJournalOpCode.RemoveAll, parent);
   const vPrevious = vDelete.previousSibling;
   if (vPrevious) {
     vPrevious.nextSibling = null;

packages/qwik/src/core/tests/component.spec.tsx

@@ -2410,6 +2410,88 @@ describe.each([
     await expect(document.querySelector('div')).toMatchDOM(<div />);
   });
 
+  it('should correctly remove all children for empty array', async () => {
+    const Cmp = component$(() => {
+      const list = useSignal([1, 2, 3]);
+      return (
+        <main>
+          <button onClick$={() => (list.value = [])}>Remove</button>
+          {list.value.map((item) => (
+            <div>{item}</div>
+          ))}
+        </main>
+      );
+    });
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <main>
+          <button>Remove</button>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+        </main>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <main>
+          <button>Remove</button>
+        </main>
+      </Component>
+    );
+    expect(document.querySelector('main')).toMatchDOM(
+      <main>
+        <button>Remove</button>
+      </main>
+    );
+  });
+
+  it('should correctly remove all children for empty array - case 2', async () => {
+    const Cmp = component$(() => {
+      const list = useSignal([1, 2, 3]);
+      return (
+        <main>
+          <button onClick$={() => (list.value = [])}>Remove</button>
+          <div>
+            {list.value.map((item) => (
+              <div>{item}</div>
+            ))}
+          </div>
+        </main>
+      );
+    });
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <main>
+          <button>Remove</button>
+          <div>
+            <div>1</div>
+            <div>2</div>
+            <div>3</div>
+          </div>
+        </main>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <main>
+          <button>Remove</button>
+          <div></div>
+        </main>
+      </Component>
+    );
+    expect(document.querySelector('main')).toMatchDOM(
+      <main>
+        <button>Remove</button>
+        <div></div>
+      </main>
+    );
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {