Merge pull request #7038 from QwikDev/fix-jsx-keys

fix(core): add keys to jsxnodes when needed
QwikDev · Nov 12, 2024 · e00df61 · e00df61
2 parents a261e1b + c363ca3
commit e00df61
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/packages/qwik/src/core/tests/use-styles.spec.tsx b/packages/qwik/src/core/tests/use-styles.spec.tsx
@@ -72,7 +72,7 @@ describe.each([
     );
     const style = container.document.querySelector(QStyleSelector);
     const attrs = { 'q:style': (globalThis as any).rawStyleId };
-    expect(style).toMatchDOM(<style {...attrs}>{STYLE_RED}</style>);
+    await expect(style).toMatchDOM(<style {...attrs}>{STYLE_RED}</style>);
   });
 
   it('should save styles when JSX deleted', async () => {
@@ -101,7 +101,7 @@ describe.each([
     );
     const style = container.document.querySelector(QStyleSelector);
     const attrs = { 'q:style': (globalThis as any).rawStyleId };
-    expect(style).toMatchDOM(<style {...attrs}>{STYLE_RED}</style>);
+    await expect(style).toMatchDOM(<style {...attrs}>{STYLE_RED}</style>);
   });
 
   it('style node should contain q:style attribute', async () => {

diff --git a/...ages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_mutable_children.snap b/...ages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_mutable_children.snap
@@ -155,11 +155,11 @@ const AppStatic_component_gYRXqF3G5nE = (props)=>{
             "Static ",
             f ? 1 : 3
         ], 1, null),
-        /*#__PURE__*/ _jsxSorted("div", null, null, prop < 2 ? /*#__PURE__*/ _jsxSorted("p", null, null, "1", 3, "u6_21") : /*#__PURE__*/ _jsxSorted("p", null, null, "2", 3, null), 1, null),
-        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted("div", null, null, null, 3, "u6_22"), 1, null),
-        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(Fragment, null, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "u6_23"), 1, "u6_24"), 1, null),
-        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(_Fragment, null, null, /*#__PURE__*/ _jsxSorted("div", null, null, null, 3, null), 3, "u6_25"), 1, null),
-        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(Image, null, null, null, 3, "u6_26"), 1, null),
+        /*#__PURE__*/ _jsxSorted("div", null, null, prop < 2 ? /*#__PURE__*/ _jsxSorted("p", null, null, "1", 3, "u6_21") : /*#__PURE__*/ _jsxSorted("p", null, null, "2", 3, "u6_22"), 1, null),
+        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted("div", null, null, null, 3, "u6_23"), 1, null),
+        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(Fragment, null, null, /*#__PURE__*/ _jsxSorted(Slot, null, null, null, 3, "u6_24"), 1, "u6_25"), 1, null),
+        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(_Fragment, null, null, /*#__PURE__*/ _jsxSorted("div", null, null, null, 3, null), 3, "u6_26"), 1, null),
+        /*#__PURE__*/ _jsxSorted("div", null, null, prop.value && /*#__PURE__*/ _jsxSorted(Image, null, null, null, 3, "u6_27"), 1, null),
         /*#__PURE__*/ _jsxSorted("div", null, null, [
             "Static ",
             f ? 1 : 3
@@ -177,7 +177,7 @@ const AppStatic_component_gYRXqF3G5nE = (props)=>{
             "Static ",
             stuff()
         ], 1, null)
-    ], 1, "u6_27");
+    ], 1, "u6_28");
 };
 export const AppStatic = /*#__PURE__*/ componentQrl(/*#__PURE__*/ inlinedQrl(AppStatic_component_gYRXqF3G5nE, "AppStatic_component_gYRXqF3G5nE"));
 

diff --git a/packages/qwik/src/optimizer/core/src/transform.rs b/packages/qwik/src/optimizer/core/src/transform.rs
@@ -827,6 +827,7 @@ impl<'a> QwikTransform<'a> {
 			}
 		};
 		let should_emit_key = is_fn || self.root_jsx_mode;
+		let prev = self.root_jsx_mode;
 		self.root_jsx_mode = false;
 
 		let (should_sort, var_props, const_props, children, flags) =
@@ -868,6 +869,7 @@ impl<'a> QwikTransform<'a> {
 		if name_token {
 			self.stack_ctxt.pop();
 		}
+		self.root_jsx_mode = prev;
 		ast::CallExpr {
 			callee: ast::Callee::Expr(Box::new(ast::Expr::Ident(new_ident_from_id(&jsx_func)))),
 			args,

diff --git a/packages/qwik/src/testing/vdom-diff.unit-util.ts b/packages/qwik/src/testing/vdom-diff.unit-util.ts
@@ -110,8 +110,7 @@ function diffJsxVNode(received: _VNode, expected: JSXNode | string, path: string
         vnode_getAttr(received, propLowerCased) ||
         receivedElement?.getAttribute(prop) ||
         receivedElement?.getAttribute(propLowerCased);
-      let expectedValue =
-        prop === 'key' || prop === 'q:key' ? (expected.key ?? receivedValue) : expected.props[prop];
+      let expectedValue = prop === 'key' || prop === 'q:key' ? receivedValue : expected.props[prop];
       if (typeof receivedValue === 'boolean' || typeof receivedValue === 'number') {
         receivedValue = serializeBooleanOrNumberAttribute(receivedValue);
       }
@@ -362,9 +361,6 @@ async function diffNode(received: HTMLElement, expected: JSXOutput): Promise<str
       if (jsx.constProps) {
         entries.push(...Object.entries(jsx.constProps));
       }
-      if (jsx.key) {
-        entries.push(['q:key', jsx.key]);
-      }
       entries.forEach(([expectedKey, expectedValue]) => {
         // we need this, because Domino lowercases all attributes for `element.attributes`
         const expectedKeyLowerCased = expectedKey.toLowerCase();