diff --git a/.changeset/brave-files-grin.md b/.changeset/brave-files-grin.md new file mode 100644 index 000000000000..7b1e6c2bb05c --- /dev/null +++ b/.changeset/brave-files-grin.md @@ -0,0 +1,5 @@ +--- +'@qwik.dev/core': patch +--- + +fix: reduced number of errors "Cannot serialize function" during serialization diff --git a/packages/qwik/src/core/shared/component-execution.ts b/packages/qwik/src/core/shared/component-execution.ts index 18597ab28518..ca53bf3a1ece 100644 --- a/packages/qwik/src/core/shared/component-execution.ts +++ b/packages/qwik/src/core/shared/component-execution.ts @@ -57,6 +57,7 @@ export const executeComponent = ( iCtx.$container$ = container; let componentFn: (props: unknown) => ValueOrPromise; container.ensureProjectionResolved(renderHost); + let isInlineComponent = false; if (componentQRL === null) { componentQRL = componentQRL || container.getHostProp(renderHost, OnRenderProp)!; assertDefined(componentQRL, 'No Component found at this location'); @@ -75,6 +76,7 @@ export const executeComponent = ( ) => JSXNodeInternal; componentFn = () => invokeApply(iCtx, qComponentFn, [props || EMPTY_OBJ, null, 0]); } else { + isInlineComponent = true; const inlineComponent = componentQRL as (props: Props) => JSXOutput; componentFn = () => invokeApply(iCtx, inlineComponent, [props || EMPTY_OBJ]); } @@ -82,9 +84,13 @@ export const executeComponent = ( const executeComponentWithPromiseExceptionRetry = (retryCount = 0): ValueOrPromise => safeCall( () => { - container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null); - container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null); - container.setHostProp(renderHost, ELEMENT_PROPS, props); + if (!isInlineComponent) { + container.setHostProp(renderHost, ELEMENT_SEQ_IDX, null); + container.setHostProp(renderHost, USE_ON_LOCAL_SEQ_IDX, null); + if (container.getHostProp(renderHost, ELEMENT_PROPS) !== props) { + container.setHostProp(renderHost, ELEMENT_PROPS, props); + } + } if (vnode_isVNode(renderHost)) { clearVNodeEffectDependencies(renderHost); diff --git a/packages/qwik/src/core/tests/component.spec.tsx b/packages/qwik/src/core/tests/component.spec.tsx index 04b66646eade..d7415111cdfd 100644 --- a/packages/qwik/src/core/tests/component.spec.tsx +++ b/packages/qwik/src/core/tests/component.spec.tsx @@ -1605,6 +1605,94 @@ describe.each([ expect((document.querySelector('input#input5') as HTMLInputElement).value).toBe('test5'); }); + it('should rerender with new props', async () => { + const TestA = component$((props) => { + return ( + + ); + }); + + const TestB = component$((props) => { + return ( + + + + ); + }); + + const Cmp = component$(() => { + const $toggled = useSignal(false); + + return ( + { + $toggled.value = !$toggled.value; + }} + > + Hello, World! + + ); + }); + + const { vNode, document } = await render(, { debug }); + + expect(vNode).toMatchVDOM( + + + + + + + + ); + + await trigger(document.body, 'button', 'click'); + + expect(vNode).toMatchVDOM( + + + + + + + + ); + + await trigger(document.body, 'button', 'click'); + + expect(vNode).toMatchVDOM( + + + + + + + + ); + }); + describe('regression', () => { it('#3643', async () => { const Issue3643 = component$(() => {