Merge pull request #8141 from QwikDev/v2-fix-component-prop-set

fix: allow to modify inline component's children component props

Author: wmertens

.changeset/eager-coats-retire.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: allow to modify inline component's children component props

packages/qwik/src/core/shared/jsx/props-proxy.ts

@@ -54,22 +54,17 @@ class PropsProxyHandler implements ProxyHandler<any> {
           prop = attr;
         }
       }
+
       if (this.owner.constProps && prop in this.owner.constProps) {
-        this.owner.constProps[prop as string] = undefined;
-        if (!(prop in this.owner.varProps)) {
-          this.owner.toSort = true;
-        }
-        this.owner.varProps[prop as string] = value;
-      } else {
-        if (this.owner.varProps === EMPTY_OBJ) {
-          this.owner.varProps = {};
-        } else {
-          if (!(prop in this.owner.varProps)) {
-            this.owner.toSort = true;
-          }
-        }
-        this.owner.varProps[prop as string] = value;
+        // delete the prop from the const props first
+        delete this.owner.constProps[prop as string];
+      }
+      if (this.owner.varProps === EMPTY_OBJ) {
+        this.owner.varProps = {};
+      } else if (!(prop in this.owner.varProps)) {
+        this.owner.toSort = true;
       }
+      this.owner.varProps[prop as string] = value;
     }
     return true;
   }

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

@@ -8,6 +8,7 @@ import {
   useSignal,
   useStore,
   useVisibleTask$,
+  type FunctionComponent,
   type PublicProps,
 } from '@qwik.dev/core';
 import { domRender, ssrRenderToDom, trigger } from '@qwik.dev/core/testing';
@@ -691,4 +692,29 @@ describe.each([
       </Component>
     );
   });
+
+  it('should allow to modify children component props', async () => {
+    const Child = component$((props: { name: string }) => {
+      return <>{props.name}</>;
+    });
+
+    const Parent: FunctionComponent = (props) => {
+      (props as any).children.props.name = 'World';
+      return (props as any).children;
+    };
+
+    const { vNode } = await render(
+      <Parent>
+        <Child name="Hello" />
+      </Parent>,
+      { debug }
+    );
+    expect(vNode).toMatchVDOM(
+      <InlineComponent>
+        <Component>
+          <Fragment>World</Fragment>
+        </Component>
+      </InlineComponent>
+    );
+  });
 });