From 3e662515c4851ce1331db191e5f78b15f2724043 Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Tue, 24 May 2022 20:42:54 -0700
Subject: [PATCH 1/2] fix: component always get a key

---
 .../src/core/component/component.public.ts    |  3 +-
 packages/qwik/src/core/import/qrl.public.ts   |  1 +
 packages/qwik/src/core/render/cursor.ts       | 10 +++--
 packages/qwik/src/core/render/render.unit.tsx | 43 ++++++++++++++++++-
 4 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/packages/qwik/src/core/component/component.public.ts b/packages/qwik/src/core/component/component.public.ts
index 3f93b991983..2709f69bbe4 100644
--- a/packages/qwik/src/core/component/component.public.ts
+++ b/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;
   };
 }
 
diff --git a/packages/qwik/src/core/import/qrl.public.ts b/packages/qwik/src/core/import/qrl.public.ts
index c78f129535a..a873fb49fcf 100644
--- a/packages/qwik/src/core/import/qrl.public.ts
+++ b/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
diff --git a/packages/qwik/src/core/render/cursor.ts b/packages/qwik/src/core/render/cursor.ts
index 88b215cb18b..87e50b6c232 100644
--- a/packages/qwik/src/core/render/cursor.ts
+++ b/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) {
diff --git a/packages/qwik/src/core/render/render.unit.tsx b/packages/qwik/src/core/render/render.unit.tsx
index 3b4c6676c0c..34a8468bc25 100644
--- a/packages/qwik/src/core/render/render.unit.tsx
+++ b/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();

From 92c127fc68962bf5e5ee84e84f3158cdc46e46ac Mon Sep 17 00:00:00 2001
From: Manu MA <manu.mtza@gmail.com>
Date: Tue, 24 May 2022 20:48:21 -0700
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=9B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/qwik/src/core/api.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/qwik/src/core/api.md b/packages/qwik/src/core/api.md
index 5277a9275b3..88173ed5544 100644
--- a/packages/qwik/src/core/api.md
+++ b/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