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

[Procrustes5]

Issue

close https://github.com/vuejs/core/issues/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[bot]]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	15a52697ca8383bc55dab3002efdfa3282e68d7f
🔍 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[bot]]

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

[pkg-pr-new[bot]]

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