Skip to content

Commit deb98b7

Browse files
sxzzsxzz
committed
refactor: separate defineProp and defineEmit 
1 parent 9199ad7 commit deb98b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1298
-653
lines changed

‎.changeset/shiny-eagles-exercise.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@vue-macros/define-emit': minor
3+
'@vue-macros/define-prop': minor
4+
'unplugin-vue-macros': minor
5+
'@vue-macros/nuxt': minor
6+
'@vue-macros/api': minor
7+
'@vue-macros/better-define': patch
8+
'@vue-macros/test-utils': patch
9+
'@vue-macros/common': patch
10+
---
11+
12+
separate `defineProp` and `defineEmit`

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"unocss.root": ["./docs", "./packages/devtools/src/client"],
1414
"explorer.fileNesting.patterns": {
1515
"index.ts": "rollup.ts, vite.ts, webpack.ts, esbuild.ts",
16-
"macros.d.ts": "macros-global.d.ts, vue2-macros.d.ts, vue2-macros-global.d.ts"
16+
"macros.d.ts": "macros*.d.ts, vue2-macros*.d.ts"
1717
},
1818
"files.exclude": {
1919
"**/.turbo": true

‎docs/.vitepress/locales/common.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,12 @@ export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
110110
text: 'Experimental',
111111
items: [
112112
{
113-
text: 'singleDefine',
114-
link: `${urlPrefix}/macros/single-define`,
113+
text: 'defineProp',
114+
link: `${urlPrefix}/macros/define-prop`,
115+
},
116+
{
117+
text: 'defineEmit',
118+
link: `${urlPrefix}/macros/define-emit`,
115119
},
116120
{
117121
text: 'setupComponent',

‎docs/macros/define-emit.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# defineEmit
2+
3+
<StabilityLevel level="experimental" />
4+
5+
Declare single emit one by one using `defineEmit`.
6+
7+
| Features | Supported |
8+
| :----------: | :----------------: |
9+
| Vue 3 | :white_check_mark: |
10+
| Nuxt 3 | :white_check_mark: |
11+
| Vue 2 | :white_check_mark: |
12+
| TypeScript | :white_check_mark: |
13+
| Volar Plugin | :x: |
14+
15+
::: warning
16+
17+
`defineEmit` can not be used with `defineEmits` at same time
18+
19+
:::
20+
21+
## API Reference
22+
23+
```ts
24+
defineEmit<T>(emitName)
25+
defineEmit<T>(emitName, validator)
26+
27+
// emitName parameter can be optional,
28+
// and will be inferred from variable name
29+
const emitName = defineEmit<T>()
30+
```
31+
32+
## Basic Usage
33+
34+
```vue
35+
<script setup>
36+
// Declare emit
37+
const increment = defineEmit('increment')
38+
// Infer emit name from variable name
39+
const change = defineEmit()
40+
// emit event
41+
increment()
42+
</script>
43+
```
44+
45+
## With Validation
46+
47+
```vue
48+
<script setup>
49+
// Declare event with validation
50+
const increment = defineEmit('increment', (value) => value < 20)
51+
</script>
52+
```
53+
54+
## TypeScript
55+
56+
```vue
57+
<script setup lang="ts">
58+
const increment = defineEmit('increment', (value: number) => value < 20)
59+
const decrement = defineEmit<[value: number]>()
60+
61+
increment(2) // pass
62+
increment('2') // TS type error
63+
</script>
64+
```

‎docs/macros/define-prop.md

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# defineProp
2+
3+
<StabilityLevel level="experimental" />
4+
5+
Declare single prop one by one using `defineProp`.
6+
7+
| Features | Supported |
8+
| :----------------: | :----------------: |
9+
| Vue 3 | :white_check_mark: |
10+
| Nuxt 3 | :white_check_mark: |
11+
| Vue 2 | :white_check_mark: |
12+
| TypeScript / Volar | :white_check_mark: |
13+
14+
::: warning
15+
16+
`defineProp` can not be used in the same file as `defineProps`.
17+
18+
:::
19+
20+
## Kevin's Edition
21+
22+
### API Reference
23+
24+
```ts
25+
defineProp<T>(propName)
26+
defineProp<T>(propName, options)
27+
28+
// propName parameter can be optional,
29+
// and will be inferred from variable name
30+
const propName = defineProp<T>()
31+
```
32+
33+
### Basic Usage
34+
35+
```vue
36+
<script setup>
37+
// Declare prop
38+
const count = defineProp('count')
39+
// Infer prop name from variable name
40+
const value = defineProp()
41+
// access prop value
42+
console.log(count.value)
43+
</script>
44+
```
45+
46+
### With Options
47+
48+
```vue
49+
<script setup>
50+
// Declare prop with options
51+
const count = defineProp('count', {
52+
type: Number,
53+
required: true,
54+
default: 0,
55+
validator: (value) => value < 20,
56+
})
57+
</script>
58+
```
59+
60+
### TypeScript
61+
62+
```vue
63+
<script setup lang="ts">
64+
// Declare prop of type number and infer prop name from variable name
65+
const count = defineProp<number>()
66+
count.value
67+
// ^? type: number | undefined
68+
69+
// Declare prop of TS type boolean with default value
70+
const disabled = defineProp<boolean>('disabled', { default: true })
71+
// ^? type: boolean
72+
</script>
73+
```
74+
75+
## Johnson's Proposal
76+
77+
### API Reference
78+
79+
```ts
80+
// the prop name will be inferred from variable name
81+
const propName = defineProp<T>()
82+
const propName = defineProp<T>(defaultValue)
83+
const propName = defineProp<T>(defaultValue, required)
84+
const propName = defineProp<T>(defaultValue, required, rest)
85+
```
86+
87+
### Basic Usage
88+
89+
```vue
90+
<script setup>
91+
// declare prop `count` with default value `0`
92+
const count = defineProp(0)
93+
94+
// declare required prop `disabled`
95+
const disabled = defineProp(undefined, true)
96+
97+
// access prop value
98+
console.log(count.value, disabled.value)
99+
</script>
100+
```
101+
102+
### With Options
103+
104+
```vue
105+
<script setup>
106+
// Declare prop with options
107+
const count = defineProp(0, false, {
108+
type: Number,
109+
validator: (value) => value < 20,
110+
})
111+
</script>
112+
```
113+
114+
### TypeScript
115+
116+
```vue
117+
<script setup lang="ts">
118+
const count = defineProp<number>()
119+
count.value
120+
// ^? type: number | undefined
121+
122+
// Declare prop of TS type boolean with default value
123+
const disabled = defineProp<boolean>(true)
124+
// ^? type: boolean
125+
</script>
126+
```
127+
128+
## Volar Configuration
129+
130+
**Require Volar >= `1.3.12`**
131+
132+
```jsonc
133+
// tsconfig.json
134+
{
135+
// ...
136+
"vueCompilerOptions": {
137+
// "kevinEdition" | "johnsonEdition" | false
138+
"experimentalDefinePropProposal": "kevinEdition"
139+
}
140+
}
141+
```

‎docs/macros/index.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Please make sure `unplugin-vue-macros` is set up correctly. If you haven't yet,
2020

2121
## Experimental Features
2222

23-
- [singleDefine](/macros/single-define)
23+
- [defineProp](/macros/define-prop)
24+
- [defineEmit](/macros/define-emit)
2425
- [setupComponent](/macros/setup-component)
2526
- [setupSFC](/macros/setup-sfc)

‎docs/macros/single-define.md

Lines changed: 0 additions & 103 deletions
This file was deleted.

0 commit comments

Comments
 (0)