feat(tsx): add support for passing generics to child components

[Procrustes5]

Issue

close #11374

Description

Based on the above issue, changed it to be able to use generics on defineComponent.

const Comp = defineComponent(
  <T extends Record<string, any>>(props: { msg: string; list: T[] }) => {

    console.log(`list`, props.list)
    return () => {
      return <div>
      <h2>{props.msg}</h2>
      {
        props.list.map(t => <p>{t.name}</p>)
      }
      </div>
    }
  },
  {
    props: ['msg', 'list']
  }
)

const Demo = defineComponent(() => {
    const list = ref([
      { name: 'Tom' },
      { name: 'Jack' },
    ])

    return () => {
      
      return <div>
        <Comp<{ name: string }> msg="hello" list={list.value} /> // Enable to use Generics on defineComponent
      </div>
    }
})

I'm not sure if this direction is right in the first place because a bigger change has been made than I thought.
This is my first time writing a PR here, so there can be a lot of mistakes. I want to continue contributing in the future, please advise me.

[Pentadome]

Oh nice job 👍

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	15a5269
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/66be9c2914baa600083692d8

[Procrustes5]

CI fails with updating branch. How can I fix it?

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	98.8 kB (+38 B)	37.4 kB (+18 B)	33.7 kB (-15 B)
vue.global.prod.js	156 kB (+38 B)	57.2 kB (+15 B)	50.9 kB (-29 B)

Usages

Name	Size	Gzip	Brotli
createApp	54.2 kB	21 kB	19.1 kB
createSSRApp	58.1 kB	22.6 kB	20.6 kB
defineCustomElement	58.8 kB (+42 B)	22.5 kB (+15 B)	20.5 kB (+6 B)
overall	67.8 kB	26 kB	23.7 kB

[edison1105]

I think the tests are related to types should be placed in packages/dts-test/defineComponent.test-d.tsx

[Procrustes5]

@edison1105
thank you!
I moved it to defineComponent.test-d.tsx!

[edison1105]

It's still not quite right, you need to refer to the exist test cases in the defineComponent.test-d.tsx file to add new test cases. Check the type only, do not test the render result

[Procrustes5]

@edison1105
Modified! It's my insufficient understanding. Would you review the changes once more?

[edison1105]

those test cases seem not to be related generics. you should refer to this test case

core/packages-private/dts-test/defineComponent.test-d.tsx

Line 1273 in d7d0371

describe('function syntax w/ generics', () => {

[Procrustes5]

@edison1105
My understanding of the tests was completely lacking. What do you think of this revision?
I'd appreciate your review.

[pkg-pr-new]

commit: e46dfdd

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@11478

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@11478

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@11478

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@11478

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@11478

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@11478

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@11478

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@11478

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@11478

vue

pnpm add https://pkg.pr.new/vue@11478

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@11478

Open in Stackblitz

[edison1105]

What is the reason for this change? It doesn't seem to be related to types.

[Procrustes5]

@edison1105
The original code had logic to convert function components into objects, but I changed the runtime behavior using Proxy. This was intended to handle props when using Generic Components in TSX.

As you pointed out, this isn't related to types. I realized that by removing extraOptions in this modification, I might have eliminated the ability to extend types.

I'm planning to revert these changes, but is my thought process correct?

Thank you for reviewing multiple times.

[edison1105]

This was intended to handle props when using Generic Components in TSX.

• I am not sure about this, keep this, waiting for other team members' review

• It looks like the test case is incorrect because it still passes without the changes in this PR.

[Procrustes5]

Thank you for review!

It looks like the test case is incorrect because it still passes without the changes in this PR.

Does the fact that the test passes without this change mean that the following writing style already exists?

core/packages-private/dts-test/defineComponent.test-d.tsx

Lines 2058 to 2061 in e46dfdd

	// Test GenericComp directly with correct props
	expectType<JSX.Element>(
	<GenericComp<{ name: string }> msg="hello" list={[{ name: 'Alice' }]} />,
	)

Or is there a possibility that the original type checking was loose and designed not to throw errors regardless of the writing style?