1.4.4 Update Breaks Intrinsic Attributes Definition on Input Components

[dmarafon]

After the latest update from Volar (1.4.4): I get this typescript errors on regards the Intrinsic Attributes definition of my Input Components:

The issue lies the type definition, where now suddenly any intrinsic attribute shows as invalid: https://t.ly/c1L9

[johnsoncodehk]

What is the component type? Please provide a repro case so we can investigate it.

[dmarafon]

Hello @johnsoncodehk , thank you for the reply. I can't provide the actual repo since it's a corporate private repro.

This component and all the other components that I'm suddently getting this error are all wrapper components of a Dynamic Component of Vue that can be defined as 'input' or a 'textarea', and all of them uses a v-bind of attributes that were perfectly working without any error messages.

Also it could be related to the issue #2704 , since it seems very similar the problem as well.

Some more details with:

Parent Custom Component (where the Error lays):

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

const { options, ...props } = defineProps<{
  id: string
  options: { name: string; value: string }[]
  modelValue: unknown
  modelModifiers?: unknown
  hideLabel?: boolean
  small?: boolean
}>()

defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

const list = $computed(() => `${props.id}_list`)
</script>

<template>
  <slot :list="list">
    <MtInput
      v-bind="{ ...$attrs, ...props }"
      :id="id"
      :list="list"
      @update:model-value="$emit('update:modelValue', $event)"
    />
  </slot>
  <datalist v-if="options.length" :id="list">
    <option v-for="opt in options" :key="opt.value" :value="opt.value"></option>
  </datalist>
</template>

Error Message:

It's on the 'id' attribute in this case, here an screenshot of it:

Type '{ id: string; list: ComputedVariable<string>; modelValue: unknown; modelModifiers?: unknown; small: boolean; hideLabel: boolean; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & { ...; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'. Property 'id' does not exist on type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & { ...; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.ts(2322)

Children (the that is in the image above and what every component has in common):

<script lang="ts" setup>
type Props = {
  modelValue: unknown
  label?: string
  hideLabel?: boolean
  modelModifiers?: unknown
  small?: boolean
  xsmall?: boolean
  multiline?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'update:modelValue', v: string): void
}>()

const onInput = (e: Event) => {
  emit('update:modelValue', (e.target as HTMLInputElement).value)
}

const classes = $computed(() => ({
  'input-small': props.small,
  'input-xsmall': props.xsmall,
}))
</script>

<template>
  <label v-if="!hideLabel" :for="($attrs['id'] as string)" :class="classes">{{ label }}</label>
  <Component
    :is="multiline ? 'textarea' : 'input'"
    v-bind="$attrs"
    :value="modelValue"
    :model-modifiers="modelModifiers"
    class="input"
    :class="classes"
    @input="onInput"
  />
</template>

More Details:
Vue 3.2.47
Vite 4.1.4
Typescript: 4.9.5

[dmarafon]

Note: I also edited the Volar version, my bad, we're using 1.4.4

[dmarafon]

Also issue #2708 seems to be related as well to this

[dmarafon]

Corrected in v1.6.0