fix: component always get a key

packages/qwik/src/core/api.md

@@ -398,6 +398,8 @@ export interface QRL<TYPE = any> {
     invokeFn(el?: Element, context?: InvokeContext, beforeFn?: () => void): TYPE extends (...args: infer ARGS) => infer RETURN ? (...args: ARGS) => ValueOrPromise<RETURN> : never;
     // (undocumented)
     resolve(container?: Element): Promise<TYPE>;
+    // (undocumented)
+    symbol: string;
 }
 
 // @alpha

packages/qwik/src/core/component/component.public.ts

@@ -490,7 +490,8 @@ export function componentQrl<PROPS extends {}>(
 
   // Return a QComponent Factory function.
   return function QSimpleComponent(props, key): JSXNode<PROPS> {
-    return jsx(tagName, { [OnRenderProp]: onRenderQrl, ...props }, key) as any;
+    const finalKey = onRenderQrl.symbol + ':' + (key ? key : '');
+    return jsx(tagName, { [OnRenderProp]: onRenderQrl, ...props }, finalKey) as any;
   };
 }
 

packages/qwik/src/core/import/qrl.public.ts

@@ -129,6 +129,7 @@ import { runtimeQrl } from './qrl';
 // </docs>
 export interface QRL<TYPE = any> {
   __brand__QRL__: TYPE;
+  symbol: string;
   resolve(container?: Element): Promise<TYPE>;
   invoke(
     ...args: TYPE extends (...args: infer ARGS) => any ? ARGS : never

packages/qwik/src/core/render/cursor.ts

@@ -933,9 +933,13 @@ function setKey(el: Element, key: string | null) {
 
 function sameVnode(vnode1: Node, vnode2: JSXNode): boolean {
   const isSameSel = vnode1.nodeName.toLowerCase() === vnode2.type;
-  const isSameKey =
-    vnode1.nodeType === NodeType.ELEMENT_NODE ? getKey(vnode1 as Element) === vnode2.key : true;
-  return isSameSel && isSameKey;
+  if (!isSameSel) {
+    return false;
+  }
+  if (vnode1.nodeType !== NodeType.ELEMENT_NODE) {
+    return true;
+  }
+  return getKey(vnode1 as Element) === vnode2.key;
 }
 
 function checkInnerHTML(props: Record<string, any> | undefined | null) {

packages/qwik/src/core/render/render.unit.tsx

@@ -183,7 +183,7 @@ describe('render', () => {
           q:obj=""
           q:host=""
           q:slot="start"
-          q:key="special"
+          q:key="s1:special"
           class="foo"
           id="123"
           aria-hidden="true"
@@ -219,6 +219,25 @@ describe('render', () => {
       );
     });
 
+    it('should render a div then a component', async () => {
+      await render(fixture.host, <ToggleRootComponent />);
+      expectRendered(
+        <div q:host="" aria-hidden="false">
+          <div class="normal">Normal div</div>
+          <button>toggle</button>
+        </div>
+      );
+      await trigger(fixture.host, 'button', 'click');
+      expectRendered(
+        <div q:host="" aria-hidden="true">
+          <div q:host="">
+            <div>this is ToggleChild</div>
+          </div>
+          <button>toggle</button>
+        </div>
+      );
+    });
+
     describe('handlers', () => {
       it('should process clicks', async () => {
         await render(fixture.host, <Counter step={5} />);
@@ -831,6 +850,28 @@ export const InnerHTMLComponent = component$(async () => {
   );
 });
 
+//////////////////////////////////////////////////////////////////////////////////////////
+
+export const ToggleRootComponent = component$(() => {
+  const state = useStore({
+    cond: false,
+  });
+  return (
+    <Host aria-hidden={state.cond ? 'true' : 'false'}>
+      {state.cond ? <ToggleChild /> : <div class="normal">Normal div</div>}
+      <button onClick$={() => (state.cond = !state.cond)}>toggle</button>
+    </Host>
+  );
+});
+
+export const ToggleChild = component$(() => {
+  return (
+    <Host>
+      <div>this is ToggleChild</div>
+    </Host>
+  );
+});
+
 //////////////////////////////////////////////////////////////////////////////////////////
 export const Hooks = component$(() => {
   const watchDestroyDiv = useRef();