Merge pull request #7061 from QwikDev/fix-component-as-func-case-2

fix: component as function call
QwikDev · Nov 15, 2024 · d533e19 · d533e19
2 parents ddd293b + c9e6b71
commit d533e19
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 4 deletions.
diff --git a/packages/qwik/src/core/shared/component.public.ts b/packages/qwik/src/core/shared/component.public.ts
@@ -12,7 +12,6 @@ import type { QwikIntrinsicElements } from './jsx/types/jsx-qwik-elements';
 import { assertQrl } from './qrl/qrl-class';
 import { assertNumber } from './error/assert';
 import { qTest } from './utils/qdev';
-import { Virtual } from './jsx/jsx-runtime';
 
 // TS way to check for any
 type IsAny<T> = 0 extends T & 1 ? true : false;
@@ -139,7 +138,9 @@ export const componentQrl = <PROPS extends Record<any, any>>(
     assertNumber(flags, 'The Qwik Component was not invoked correctly');
     const hash = qTest ? 'sX' : componentQrl.$hash$.slice(0, 4);
     const finalKey = hash + ':' + (key ? key : '');
-    return _jsxSplit(Virtual, props, null, props.children, flags, finalKey);
+    const InnerCmp = () => {};
+    (InnerCmp as any)[SERIALIZABLE_STATE] = [componentQrl];
+    return _jsxSplit(InnerCmp as any, props, null, props.children, flags, finalKey);
   }
   (QwikComponent as any)[SERIALIZABLE_STATE] = [componentQrl];
   return QwikComponent as any;

diff --git a/packages/qwik/src/core/tests/inline-component.spec.tsx b/packages/qwik/src/core/tests/inline-component.spec.tsx
@@ -2,6 +2,8 @@ import {
   Fragment as Component,
   Fragment,
   Fragment as InlineComponent,
+  Fragment as Projection,
+  Fragment as Signal,
   Slot,
   component$,
   useSignal,
@@ -537,7 +539,7 @@ describe.each([
     };
 
     const { vNode } = await render(
-      <ComplexWrapper foo="bar">
+      <ComplexWrapper foo="aaa">
         <div>
           bar: <div id="1">Test</div>
         </div>
@@ -548,7 +550,70 @@ describe.each([
       <InlineComponent>
         <Component>
           <div>
-            bar: <div id="1">Test</div>
+            <Signal>aaa</Signal>
+            {': '}
+            <Projection>
+              <div>
+                {'bar: '}
+                <div id="1">Test</div>
+              </div>
+            </Projection>
+          </div>
+        </Component>
+      </InlineComponent>
+    );
+  });
+
+  it('should render component$ inside inlined wrapper - case 2', async () => {
+    interface ComplexWrapperProps {
+      foo: string;
+      aaa: string;
+    }
+
+    const ComplexWrapper = (
+      props: PublicProps<ComplexWrapperProps>,
+      key: string | null,
+      flags: number
+    ) => {
+      const cmpFn = component$<ComplexWrapperProps>(({ foo }) => {
+        const cmpFn2 = component$<ComplexWrapperProps>(({ aaa }) => {
+          return (
+            <div>
+              {aaa}: <Slot />
+            </div>
+          );
+        });
+        return (
+          <div>
+            {foo}: <Slot />
+            {cmpFn2({ ...props, children: 'Test2' }, key, flags)}
+          </div>
+        );
+      });
+      return cmpFn(props, key, flags);
+    };
+
+    const { vNode } = await render(
+      <ComplexWrapper foo="bar" aaa="bbb">
+        Test
+      </ComplexWrapper>,
+      { debug }
+    );
+
+    expect(vNode).toMatchVDOM(
+      <InlineComponent>
+        <Component>
+          <div>
+            <Signal>{'bar'}</Signal>
+            {': '}
+            <Projection>Test</Projection>
+            <Component>
+              <div>
+                <Signal>{'bbb'}</Signal>
+                {': '}
+                <Projection>Test2</Projection>
+              </div>
+            </Component>
           </div>
         </Component>
       </InlineComponent>