Skip to content

feat: upgrade volar support to v2.2.4 #924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zhiyuanzmj merged 8 commits into from
Mar 1, 2025
Merged

feat: upgrade volar support to v2.2.4 #924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dd93ce6
chore(deps): update @vue/language-core to 2.2.4
zhiyuanzmj Feb 28, 2025
35492e7
fix: typo
zhiyuanzmj Feb 28, 2025
af9eb05
fix: docs
zhiyuanzmj Mar 1, 2025
5bb5580
Update pnpm-workspace.yaml
zhiyuanzmj Mar 1, 2025
1e517d3
chore: pin volar
sxzz Mar 1, 2025
c92f927
chore: remove overrides
sxzz Mar 1, 2025
37d471b
chore: style
zhiyuanzmj Mar 1, 2025
4a1e952
fix: typo
zhiyuanzmj Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions docs/macros/define-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ const propName = defineProp<T>()
### Basic Usage

```vue twoslash
<script setup>
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// Declare prop
const count = defineProp('count')

Expand All @@ -64,9 +64,9 @@ console.log(count.value)
### With Options

```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
// Declare prop with options
const count = defineProp('count', {
type: Number,
Expand All @@ -80,9 +80,9 @@ const count = defineProp('count', {
### TypeScript

```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
// Declare prop of type number and infer prop name from variable name
const count = defineProp<number>()
count.value
Expand All @@ -95,12 +95,14 @@ disabled.value

### With Reactivity Transform

```ts
```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
const foo = $defineProp<string>('foo')
// ^? type: string | undefined

const bar = $(defineProp('bar', { default: 'bar' }))
// ^? type: string
</script>
```

## Johnson's Edition
Expand All @@ -118,9 +120,9 @@ const propName = defineProp<T>(defaultValue, required, rest)
### Basic Usage

```vue twoslash
<script setup>
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// declare prop `count` with default value `0`
const count = defineProp(0)

Expand All @@ -135,9 +137,9 @@ console.log(count.value, disabled.value)
### With Options

```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
// Declare prop with options
const count = defineProp(0, false, {
type: Number,
Expand All @@ -149,9 +151,9 @@ const count = defineProp(0, false, {
### TypeScript

```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
const count = defineProp<number>()
count.value

Expand All @@ -163,13 +165,13 @@ disabled.value

### With Reactivity Transform

```vue
```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
const foo = $defineProp<number>()
// ^? type: number | undefined

const bar = $(defineProp(0, true))
// ^? type: number
</script>
```

Expand Down
43 changes: 23 additions & 20 deletions docs/zh-CN/macros/define-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ const propName = defineProp<T>()
### 基本用法

```vue twoslash
<script setup>
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// 声明 prop
const count = defineProp('count')

Expand All @@ -50,9 +50,9 @@ console.log(count.value)
### 选项

```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
// 使用选项声明 prop
const count = defineProp('count', {
type: Number,
Expand All @@ -66,9 +66,9 @@ const count = defineProp('count', {
### TypeScript

```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=kevinEdition
// ---cut---
// 使用类型为 number 的 prop 声明，并从变量名中推断 prop 的名称
const count = defineProp<number>()
count.value
Expand All @@ -81,11 +81,14 @@ disabled.value

### 响应性语法糖

```ts
```vue twoslash
<!-- @experimentalDefinePropProposal "kevinEdition" -->

<script setup lang="ts">
const foo = $defineProp<string>('foo')
// ^? type: string | undefined

const bar = $(defineProp('bar', { default: 'bar' }))
// ^? type: string
</script>
```

## Johnson 的版本
Expand All @@ -103,9 +106,9 @@ const propName = defineProp<T>(defaultValue, required, rest)
### 基本用法

```vue twoslash
<script setup>
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// 声明带有默认值 `0` 的 prop `count`
const count = defineProp(0)

Expand All @@ -120,9 +123,9 @@ console.log(count.value, disabled.value)
### 选项

```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
// 使用选项声明属性
const count = defineProp(0, false, {
type: Number,
Expand All @@ -134,9 +137,9 @@ const count = defineProp(0, false, {
### TypeScript

```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
// @experimentalDefinePropProposal=johnsonEdition
// ---cut---
const count = defineProp<number>()
count.value

Expand All @@ -148,13 +151,13 @@ disabled.value

### 响应性语法糖

```vue
```vue twoslash
<!-- @experimentalDefinePropProposal "johnsonEdition" -->

<script setup lang="ts">
const foo = $defineProp<number>()
// ^? type: number | undefined

const bar = $(defineProp(0, true))
// ^? type: number
</script>
```

Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,6 @@
"@shikijs/core": "catalog:",
"@shikijs/transformers": "catalog:",
"@shikijs/types": "catalog:",
"@vue/language-core": "catalog:",
"is-core-module": "npm:@no-shims/is-core-module",
"shiki": "catalog:",
"smartwrap": "npm:@no-shims/smartwrap"
Expand Down
16 changes: 8 additions & 8 deletions packages/volar/src/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ export function addProps(
decl: Code[],
vueLibName: string,
): true | undefined {
if (
!decl.length ||
codes.toString().includes('{} as __VLS_TypePropsToOption<')
)
const codeString = codes.toString()
if (!decl.length || codeString.includes('{} as __VLS_TypePropsToOption<'))
return

replace(
Expand All @@ -34,10 +32,12 @@ export function addProps(
REGEX_DEFINE_COMPONENT,
'props: {} as __VLS_TypePropsToOption<__VLS_PublicProps>,\n',
)
codes.push(
`type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\n`,
`type __VLS_TypePropsToOption<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('${vueLibName}').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('${vueLibName}').PropType<T[K]>, required: true } };\n`,
)
if (!codeString.includes('type __VLS_NonUndefinedable')) {
codes.push(
`type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;\n`,
`type __VLS_TypePropsToOption<T> = { [K in keyof T]-?: {} extends Pick<T, K> ? { type: import('${vueLibName}').PropType<__VLS_NonUndefinedable<T[K]>> } : { type: import('${vueLibName}').PropType<T[K]>, required: true } };\n`,
)
}
return true
}

Expand Down
Loading