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

[rudyxu1102]

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

@sxzz done

[amritk]

This is much needed, thanks!

[jd-solanki]

@edison1105 Is this accidental?

[edison1105]

@edison1105 Is this accidental?

It will be reopen soon.

[yang131323]

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
}} />;

@rudyxu1102 The scenario you mentioned seems to pertain to within the component, and it appears that there are also issues with how the parent component is using it. As follows:

Assume that the ComText component is provided by another library, let's say:

<template>
  <div>{{ name }} - {{ age }}</div>
</template>

<script setup lang="ts">
    defineOptions({
        name: 'ComText',
    })
  
  const props = defineProps({
    name: {
      type: String,
      default: '',
    },
    age: {
      type: Number,
      default: 0,
    }
  })

</script>

Wrap our component based on ComText.

<template>
  <ComText :name="name" v-bind="$attrs" />
</template>

<script setup lang="ts">
import ComText from './ComText.vue';

const props = defineProps<{
  name: string;
}>();
</script>

Actual usage

import { defineComponent } from 'vue'
import { ComWrap } from './ComWrap'

const BusinessCard = defineComponent({
  name: 'BusinessCard',
  setup(props) {
    return () => {
      return <ComWrap name={props.name} age={10} />
    }
  }
})

The age property here will have a type error. Is there a way to resolve this type issue now?