vuejs / language-tools

⚡ High-performance Vue language tooling based-on Volar.js
https://marketplace.visualstudio.com/items?itemName=Vue.volar
MIT License
5.87k stars 402 forks source link

fix(language-core): make model modifiers optional #4978

Closed stafyniaksacha closed 2 weeks ago

stafyniaksacha commented 2 weeks ago

This pull request includes changes to improve the handling of component property modifiers in the generateComponentProps function and its associated tests.

It aims to better reflect modelModifiers type marking keys as optional:

<!-- MyComp.vue -->
<script setup lang="ts">
const [modelValue, modelModifiers] = defineModel<string, 'foo' | 'bar'>()

// modelModifiers.foo?: true
// modelModifiers.bar?: true
</script>

With this update, we can omit keys when manually defining model-modifiers prop

<template>
  <!-- Type '{ foo: true; }' is missing the following properties from type 'Record<"foo" | "bar", true>': bar -->
  <MyComp :model-modifiers="{ foo: true }" />
</template>

Note that it will also fix type when using vitest and @vue/test-utils:

import { MyComp } from './MyComp.vue'
import { mount } from '@vue/test-utils'
import { it } from 'vitest'

it('should foo modifier', async () => {
  const component = mount(MyComp, {
    props: {
      // Type '{ foo: true; }' is missing the following properties from type 'Record<"foo" | "bar", true>': bar
      'modelModifiers': { foo: true },
    },
  })
})
pkg-pr-new[bot] commented 2 weeks ago

Open in Stackblitz

vue-component-meta

``` pnpm add https://pkg.pr.new/vuejs/language-tools/vue-component-meta@4978 ```

vue-component-type-helpers

``` pnpm add https://pkg.pr.new/vuejs/language-tools/vue-component-type-helpers@4978 ```

@vue/language-plugin-pug

``` pnpm add https://pkg.pr.new/vuejs/language-tools/@vue/language-plugin-pug@4978 ```

@vue/language-core

``` pnpm add https://pkg.pr.new/vuejs/language-tools/@vue/language-core@4978 ```

@vue/language-server

``` pnpm add https://pkg.pr.new/vuejs/language-tools/@vue/language-server@4978 ```

@vue/language-service

``` pnpm add https://pkg.pr.new/vuejs/language-tools/@vue/language-service@4978 ```

vue-tsc

``` pnpm add https://pkg.pr.new/vuejs/language-tools/vue-tsc@4978 ```

@vue/typescript-plugin

``` pnpm add https://pkg.pr.new/vuejs/language-tools/@vue/typescript-plugin@4978 ```

commit: debf21b

KazariEX commented 2 weeks ago

Could you please add a test case?

stafyniaksacha commented 2 weeks ago

Could you please add a test case?

Yes sure, where should I put them ? I only contributed to components-meta env (time ago https://github.com/vuejs/language-tools/pull/4175)

KazariEX commented 2 weeks ago

Added.