fix function serialization

QwikDev · Nov 16, 2024 · b2ddac4 · b2ddac4
1 parent dd93926
commit b2ddac4
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 3 deletions.
diff --git a/.changeset/brave-files-grin.md 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
@@ -57,6 +57,7 @@ export const executeComponent = (
   iCtx.$container$ = container;
   let componentFn: (props: unknown) => ValueOrPromise<JSXOutput>;
   container.ensureProjectionResolved(renderHost);
+  let isInlineComponent = false;
   if (componentQRL === null) {
     componentQRL = componentQRL || container.getHostProp(renderHost, OnRenderProp)!;
     assertDefined(componentQRL, 'No Component found at this location');
@@ -75,16 +76,21 @@ 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]);
   }
 
   const executeComponentWithPromiseExceptionRetry = (retryCount = 0): ValueOrPromise<JSXOutput> =>
     safeCall<JSXOutput, JSXOutput, JSXOutput>(
       () => {
-        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
@@ -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$<any>((props) => {
+      return (
+        <button type="button" {...props}>
+          <Slot />
+        </button>
+      );
+    });
+
+    const TestB = component$<any>((props) => {
+      return (
+        <TestA {...props}>
+          <Slot />
+        </TestA>
+      );
+    });
+
+    const Cmp = component$(() => {
+      const $toggled = useSignal<boolean>(false);
+
+      return (
+        <TestB
+          aria-label={$toggled.value ? 'a' : 'a1'}
+          title={$toggled.value ? 'a' : 'a1'}
+          onClick$={() => {
+            $toggled.value = !$toggled.value;
+          }}
+        >
+          <span>Hello, World!</span>
+        </TestB>
+      );
+    });
+
+    const { vNode, document } = await render(<Cmp />, { debug });
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <Component ssr-required>
+            <button type="button" aria-label="a1" title="a1">
+              <Projection ssr-required>
+                <Projection ssr-required>
+                  <span>Hello, World!</span>
+                </Projection>
+              </Projection>
+            </button>
+          </Component>
+        </Component>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <Component ssr-required>
+            <button type="button" aria-label="a" title="a">
+              <Projection ssr-required>
+                <Projection ssr-required>
+                  <span>Hello, World!</span>
+                </Projection>
+              </Projection>
+            </button>
+          </Component>
+        </Component>
+      </Component>
+    );
+
+    await trigger(document.body, 'button', 'click');
+
+    expect(vNode).toMatchVDOM(
+      <Component>
+        <Component>
+          <Component ssr-required>
+            <button type="button" aria-label="a1" title="a1">
+              <Projection ssr-required>
+                <Projection ssr-required>
+                  <span>Hello, World!</span>
+                </Projection>
+              </Projection>
+            </button>
+          </Component>
+        </Component>
+      </Component>
+    );
+  });
+
   describe('regression', () => {
     it('#3643', async () => {
       const Issue3643 = component$(() => {