fix: calling component as a function

[Varixo]

This PR fixes calling a component as a function by returning a jsxSplit with correct props inside component

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3c441f6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@7057

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@7057

npm i https://pkg.pr.new/QwikDev/qwik/eslint-plugin-qwik@7057

npm i https://pkg.pr.new/QwikDev/qwik/create-qwik@7057

commit: 3c441f6

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
qwik-docs	✅ Ready (View Log)	Visit Preview	3c441f6

[shairez]

@ianlet thank you for reviewing
we'll merge this but if you find any other cases where this is not working, please let us know and link to the issue, thanks!

[ianlet]

oh this shouldn't be here 😮 that's why this test is passing

with this rendered content, the expected vNode should be:

      <InlineComponent>
        <Component>
          <div>
            bar: 
            <div>
              bar: <div id="1">Test</div>
            </div>
          </div>
        </Component>
      </InlineComponent>

and not the one below.

Here, try with this test instead:

  it('should render component$ inside inlined wrapper', async () => {
    interface ComplexWrapperProps {
      foo: string;
    }

    const ComplexWrapper = (
      props: PublicProps<ComplexWrapperProps>,
      key: string | null,
      flags: number
    ) => {
      const cmpFn = component$<ComplexWrapperProps>(({ foo }) => {
        return (
          <div>
            {foo}: <Slot />
          </div>
        );
      });
      return cmpFn(props, key, flags);
    };

    const { vNode } = await render(<ComplexWrapper foo="bar">Test</ComplexWrapper>, { debug });

    expect(vNode).toMatchVDOM(
      <InlineComponent>
        <Component>
          <div>bar: Test</div>
        </Component>
      </InlineComponent>
    );
  });

This should fail.

[shairez]

Thanks @ianlet

@Varixo do you know how to fix this?

[Varixo]

not yet :D