fix: diffing virtual fragment with null key

Author: Varixo

Diff for: .changeset/heavy-kids-wave.md

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

Diff for: 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) {

Diff for: 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;
@@ -2040,6 +2042,56 @@ describe.each([
     );
   });
 
+  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$(() => {