Merge pull request #7456 from QwikDev/v2-null-key-component

fix: reexecute component with null key

Author: Varixo

.changeset/dirty-lemons-shop.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: reexecute component with null key

.changeset/heavy-kids-wave.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: rendering markdown file with Qwik component

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

@@ -984,7 +984,7 @@ export const vnode_diff = (
   }
 
   function expectVirtual(type: VirtualType, jsxKey: string | null) {
-    if (vCurrent && vnode_isVirtualVNode(vCurrent) && getKey(vCurrent) === jsxKey) {
+    if (vCurrent && vnode_isVirtualVNode(vCurrent) && getKey(vCurrent) === jsxKey && !!jsxKey) {
       // All is good.
       return;
     } else if (jsxKey !== null) {
@@ -1043,7 +1043,7 @@ export const vnode_diff = (
         }
         host = vNewNode as VirtualVNode;
         shouldRender = true;
-      } else if (!hashesAreEqual) {
+      } else if (!hashesAreEqual || !jsxNode.key) {
         insertNewComponent(host, componentQRL, jsxProps);
         host = vNewNode as VirtualVNode;
         shouldRender = true;

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

@@ -8,6 +8,7 @@ import {
   Fragment as Signal,
   SkipRender,
   Slot,
+  _jsxSorted,
   component$,
   h,
   jsx,
@@ -28,7 +29,8 @@ import { QError } from '../shared/error/error';
 import { ErrorProvider } from '../../testing/rendering.unit-util';
 import * as qError from '../shared/error/error';
 import { QContainerValue } from '../shared/types';
-import { QContainerAttr } from '../shared/utils/markers';
+import { OnRenderProp, QContainerAttr } from '../shared/utils/markers';
+import { vnode_getParent, vnode_getProp, vnode_locate } from '../client/vnode';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;
@@ -1991,6 +1993,105 @@ describe.each([
     );
   });
 
+  it('should reexecute entire component without key', async () => {
+    const Child = component$((props: { text: string }) => {
+      const text = useSignal('');
+      useTask$(() => {
+        text.value = props.text;
+      });
+      return <div>{text.value}</div>;
+    });
+
+    const Cmp = component$(() => {
+      const toggle = useSignal(true);
+
+      return (
+        <>
+          <button onClick$={() => (toggle.value = !toggle.value)}></button>
+          {/* no key for both components */}
+          {toggle.value ? jsx(Child, { text: 'Hello' }, null) : jsx(Child, { text: 'World' }, null)}
+        </>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <div>
+              <Signal ssr-required>Hello</Signal>
+            </div>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <div>
+              <Signal ssr-required>World</Signal>
+            </div>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+  });
+
+  it('should remove component with null key when it is compared with fragment with null key', async () => {
+    const InnerCmp = component$(() => {
+      return <div>InnerCmp</div>;
+    });
+
+    const Cmp = component$(() => {
+      const toggle = useSignal(true);
+
+      return (
+        <>
+          <button onClick$={() => (toggle.value = !toggle.value)}></button>
+          {toggle.value ? (
+            <InnerCmp key={null} />
+          ) : (
+            <Fragment key={null}>
+              <h1>Test</h1>
+            </Fragment>
+          )}
+        </>
+      );
+    });
+
+    const { vNode, document, container } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Component ssr-required>
+            <div>InnerCmp</div>
+          </Component>
+        </Fragment>
+      </Component>
+    );
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <Fragment ssr-required>
+          <button></button>
+          <Fragment ssr-required>
+            <h1>Test</h1>
+          </Fragment>
+        </Fragment>
+      </Component>
+    );
+    const h1Element = vnode_locate(container.rootVNode, document.querySelector('h1')!);
+
+    expect(vnode_getProp(vnode_getParent(h1Element)!, OnRenderProp, null)).toBeNull();
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {

packages/qwik/src/core/tests/use-on.spec.tsx

@@ -14,9 +14,8 @@ import {
   useTask$,
   useVisibleTask$,
 } from '@qwik.dev/core';
-import { domRender, ssrRenderToDom } from '@qwik.dev/core/testing';
+import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
 import { describe, expect, it } from 'vitest';
-import { trigger } from '../../testing/element-fixture';
 
 const debug = false; //true;
 Error.stackTraceLimit = 100;