feat(types): support inferring attrs

[rudyxu1102]

Related

• [QUESTION] How to allow HTML attributes as props while using Typescript JSX? #3452
• Expose the native attributes of elements such as button and P in the component #5423
• How to determine that a component can accept native html attributes of a specific element? #6528
• How to set a props type with InputHTMLAttributes? #7546
• Is it possible to support the type-based autocomplettion for those fallthrough attributes? #7981
• How to access props in "extended" component #8264
• How to write a passthrough wrapper component? #8508
• 建议新增为 typescript 服务 defineAttrs #8620
• How to extend props types for a wrapper component with fallthrough attributes? #8902
• [Docs] Add guide for building HOCs in TypeScript #9272

RFC

• Infer attrs for implementing HOCs rfcs#477

Specific scenes

1. Wrapping an html element

import { defineComponent, type ImgHTMLAttributes, type AttrsType } from 'vue';

const MyImg = defineComponent({
    props: {
        foo: String
    },
    attrs: Object as AttrsType<ImgHTMLAttributes>,
    created() {
        this.$attrs.class // any
        this.$attrs.style // StyleValue | undefined
        this.$attrs.onError // ((payload: Event) => void) | undefined
        this.$attrs.src // string | undefined
    },
    render() {
        return <img {...this.$attrs} />
    }
});

<MyImg class={'str'} style={'str'} src={'https://xxx.com/aaa.jpg'} onError={(e) => {
  e; // Event
}}/>;

2. Wrapping a Vue component

import { defineComponent, type AttrsType } from 'vue';

const Comp = defineComponent({
    props: {
        foo: String
    },
    emits: {
        baz: (val: number) => true
    },
    render() {
        return <div>{this.foo}</div>
    }
});

const MyComp = defineComponent({
    props: {
        bar: Number
    },
    attrs: Object as AttrsType<typeof Comp>,
    created() {
        this.$attrs.class // unknown
        this.$attrs.style // unknown
        this.$attrs.onBaz; // ((val: number) => any) | undefined
        this.$attrs.foo; // string | undefined
    },
    render() {
        return <Comp {...this.$attrs} />
    }
});

<MyComp class={'str'} style={'str'} bar={1} foo={'str'} onBaz={(val) => { 
    val; // number
}} />;

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	cc506ce
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/63b5a24c5e5c910008a149fe

[netlify]

❌ Deploy Preview for vue-sfc-playground failed.

Name	Link
🔨 Latest commit	cc506ce
🔍 Latest deploy log	https://app.netlify.com/sites/vue-sfc-playground/deploys/63b5a24c075f5b0007a104a6

[productdevbook]

@yyx990803 we need this in oku-ui, for example we need to go back the

element types so that volar can suggest user auto-suggestion with both props and attrs types.

can you review and include this?

[sxzz]

Looks great. Could you please rebase your branch to resolve conflicts?

I guess this feature will more be like defineSlots. Without adding runtime code, but adding only TS types.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	85.8 kB	32.6 kB	29.5 kB
vue.global.prod.js	132 kB	49.3 kB	44.3 kB

Usages

Name	Size	Gzip	Brotli
createApp	47.9 kB	18.8 kB	17.2 kB
createSSRApp	50.6 kB	19.9 kB	18.2 kB
defineCustomElement	50.3 kB	19.6 kB	17.9 kB
overall	61.2 kB	23.7 kB	21.6 kB

[sxzz]

Could you please REBASE your branch due the minor branch has been also rebased.

[rudyxu1102]

Could you please REBASE your branch due the minor branch has been also rebased.

@sxzz done

[amritk]

This is much needed, thanks!