Vue Language Tools v3.3.0
Full release notes
Features
Refined Autocomplete for Component Props
Previously, we inferred props used for autocomplete from the component itself's type, which did not work well with components whose props need to be inferred dynamically, such as generics or discriminated unions.
Now, we have improved this feature to better align with TS behavior. See the following example:
<script lang="ts" setup>
defineProps<
| { type: "foo"; foo: string }
| { type: "bar"; bar: string }
>();
</script>
<template>
<Self type="foo" :| />
<!-- ^ [foo, ...] -->
<Self type="bar" :| />
<!-- ^ [bar, ...] -->
</template>
When triggering completions at the two positions above, we will now get the props that are actually available in each corresponding case.
(PR: #5709)
Check Required Fallthrough Attributes
Consider the following structure:
<!-- basic.vue -->
<script lang="ts" setup>
defineProps<{
foo: string;
bar: string;
}>();
</script>
<!-- comp.vue -->
<script lang="ts" setup>
import Basic from "./basic.vue";
</script>
<template>
<Basic />
</template>
When the fallthroughAttributes option is enabled on Comp, Comp inherits all props from Basic, allowing us to get prop completions for Basic when using Comp.
By default, however, the props inherited from Basic are all optional. This means we cannot enforce passing those required props when using Comp. At the same time, even if the required props from Basic are passed to Comp, Basic will still report missing prop errors.
After enabling the new checkRequiredFallthroughAttributes option on Comp, Comp will inherit Basic's props exactly as they are, and the missing prop errors on Basic inside Comp will disappear. This is because doing so is equivalent to promising that these required props should be passed when using Comp. Additionally, if some of the props required by Basic have already been passed directly to Basic, those props will be excluded from the inherited props.
(PR: #6049)
Bug Fixes
- In subprojects using project references, importing Vue files from another project will no longer trigger TS6307 errors (PR: #6048)
- When the
js/ts.tsserver.experimental.enableProjectDiagnosticsoption is enabled, Vue files in large projects will no longer trigger diagnostics in an infinite loop (PR: #6051)
Changelog
Please refer to CHANGELOG.md for details.
