Merge pull request #8188 from QwikDev/v2-jsx-split-children

fix: removing children from var props

Author: wmertens

.changeset/nasty-views-study.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: removing children from var props

packages/qwik/src/core/shared/jsx/jsx-internal.ts

@@ -66,12 +66,12 @@ export const _jsxSplit = <T extends string | FunctionComponent<any>>(
       for (const k in varProps) {
         if (k === 'children') {
           children ||= varProps.children as JSXChildren;
-          varProps.children = undefined;
+          delete varProps.children;
         } else if (k === 'key') {
           key ||= varProps.key as string;
-          varProps.key = undefined;
+          delete varProps.key;
         } else if (constProps && k in constProps) {
-          varProps[k] = undefined;
+          delete varProps[k];
         }
       }
     }

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

@@ -6,6 +6,7 @@ import {
   Fragment as Signal,
   Slot,
   component$,
+  jsx,
   useSignal,
   useStore,
   useVisibleTask$,
@@ -41,6 +42,16 @@ const ChildInline = () => {
   return <div>Child inline</div>;
 };
 
+const OwnKeys = {
+  HAccordionRoot: (props: any) => {
+    return jsx('div', props);
+  },
+  Root: (props: any) => <OwnKeys.HAccordionRoot {...props} accordionItemComponent={OwnKeys.Item} />,
+  Item: component$(() => {
+    return <></>;
+  }),
+};
+
 describe.each([
   { render: ssrRenderToDom }, //
   { render: domRender }, //
@@ -732,4 +743,16 @@ describe.each([
       </InlineComponent>
     );
   });
+
+  it('should remove children from varProps and not throw', async () => {
+    const Cmp = component$(() => {
+      return (
+        <OwnKeys.Root class="w-96">
+          <OwnKeys.Item />
+        </OwnKeys.Root>
+      );
+    });
+
+    await expect(render(<Cmp />, { debug })).resolves.not.toThrow();
+  });
 });