Skip to content

Commit 6193a84

Browse files
zhiyuanzmjsxzz
zhiyuanzmj
and
sxzz
authored
feat: introduce shortBind (#493)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
1 parent c1351c9 commit 6193a84

File tree

39 files changed

+1026
-8
lines changed

39 files changed

+1026
-8
lines changed

‎.changeset/smart-toys-pay.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@vue-macros/short-bind': minor
3+
'@vue-macros/volar': minor
4+
'@vue-macros/eslint-config': minor
5+
'unplugin-vue-macros': minor
6+
'@vue-macros/nuxt': minor
7+
---
8+
9+
Introduce `shortBind`

‎docs/.vitepress/locales/common.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@ export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
133133
text: 'chainCall',
134134
link: `${urlPrefix}/macros/chain-call`,
135135
},
136+
{
137+
text: 'shortBind',
138+
link: `${urlPrefix}/macros/short-bind`,
139+
},
136140
],
137141
},
138142
],

‎docs/macros/short-bind.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# shortBind
2+
3+
<StabilityLevel level="experimental" />
4+
5+
A shorthand for binding prop with the same data name.
6+
7+
`:value` -> `:value="value"`
8+
9+
If you have any questions about this feature, you can comment on [RFC Discussion](https://github.com/vuejs/rfcs/discussions/405).
10+
11+
| Features | Supported |
12+
| :----------: | :----------------: |
13+
| Vue 3 | :white_check_mark: |
14+
| Nuxt 3 | :white_check_mark: |
15+
| Vue 2 | :x: |
16+
| Volar Plugin | :white_check_mark: |
17+
18+
## Usage
19+
20+
### Basic Usage
21+
22+
```vue
23+
<template>
24+
<input :msg />
25+
<!-- => <input :msg="msg" /> -->
26+
<demo $msg />
27+
<!-- => <input $msg="msg" /> -->
28+
</template>
29+
```
30+
31+
### With `shortVmodel`
32+
33+
```vue
34+
<template>
35+
<input ::msg />
36+
<!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
37+
<demo $msg />
38+
<!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
39+
<demo *msg />
40+
<!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
41+
</template>
42+
```
43+
44+
## Volar Configuration
45+
46+
```jsonc {5}
47+
// tsconfig.json
48+
{
49+
"vueCompilerOptions": {
50+
"plugins": [
51+
"@vue-macros/volar/short-bind"
52+
// ...
53+
]
54+
}
55+
}
56+
```
57+
58+
## ESLint Configuration
59+
60+
```jsonc {4}
61+
// .eslintrc
62+
{
63+
"rules": {
64+
"vue/valid-v-bind": "off"
65+
}
66+
}
67+
```

‎docs/zh-CN/macros/short-bind.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# shortBind
2+
3+
<StabilityLevel level="experimental" />
4+
5+
绑定相同数据名称的 `prop` 的语法糖。
6+
7+
`:value` -> `:value="value"`
8+
9+
如果你对此功能有任何疑问，欢迎在 [RFC](https://github.com/vuejs/rfcs/discussions/405) 中发表评论。
10+
11+
| Features | Supported |
12+
| :----------: | :----------------: |
13+
| Vue 3 | :white_check_mark: |
14+
| Nuxt 3 | :white_check_mark: |
15+
| Vue 2 | :x: |
16+
| Volar Plugin | :white_check_mark: |
17+
18+
## 用法
19+
20+
### 基本用法
21+
22+
```vue
23+
<template>
24+
<input :msg />
25+
<!-- => <input :msg="msg" /> -->
26+
<demo $msg />
27+
<!-- => <input $msg="msg" /> -->
28+
</template>
29+
```
30+
31+
### 和 `shortVmodel` 一起使用
32+
33+
```vue
34+
<template>
35+
<input ::msg />
36+
<!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
37+
<demo $msg />
38+
<!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
39+
<demo *msg />
40+
<!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
41+
</template>
42+
```
43+
44+
## Volar 配置
45+
46+
```jsonc {5}
47+
// tsconfig.json
48+
{
49+
"vueCompilerOptions": {
50+
"plugins": [
51+
"@vue-macros/volar/short-bind"
52+
// ...
53+
]
54+
}
55+
}
56+
```
57+
58+
## ESLint 配置
59+
60+
```jsonc {4}
61+
// .eslintrc
62+
{
63+
"rules": {
64+
"vue/valid-v-bind": "off"
65+
}
66+
}
67+
```

‎eslint.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export default sxzz([
1717
files: ['**/*.md/*.{js,ts,vue}'],
1818
rules: {
1919
'no-var': 'off',
20+
'vue/valid-v-bind': 'off',
2021
'import/no-mutable-exports': 'off',
2122
'@typescript-eslint/no-inferrable-types': 'off',
2223
'@typescript-eslint/no-empty-function': 'off',
@@ -27,6 +28,7 @@ export default sxzz([
2728
rules: {
2829
'no-debugger': 'off',
2930
'no-console': 'off',
31+
'vue/valid-v-bind': 'off',
3032
'vue/require-prop-types': 'off',
3133
'vue/valid-define-props': 'off',
3234
'vue/valid-attribute-name': 'off',

‎packages/eslint-config/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const config = {
2424
},
2525
rules: {
2626
'vue/no-setup-props-destructure': 'off',
27+
'vue/valid-v-bind': 'off',
2728
},
2829
}
2930

‎packages/macros/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@
100100
"@vue-macros/setup-block": "workspace:*",
101101
"@vue-macros/setup-component": "workspace:*",
102102
"@vue-macros/setup-sfc": "workspace:*",
103+
"@vue-macros/short-bind": "workspace:*",
103104
"@vue-macros/short-emits": "workspace:*",
104105
"@vue-macros/short-vmodel": "workspace:*",
105106
"unplugin": "^1.5.0",

‎packages/macros/src/index.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@ import VueSetupComponent, {
7272
import VueSetupSFC, {
7373
type Options as OptionsSetupSFC,
7474
} from '@vue-macros/setup-sfc'
75+
import VueShortBind, {
76+
type Options as OptionsShortBind,
77+
} from '@vue-macros/short-bind'
7578
import VueShortEmits, {
7679
type Options as OptionsShortEmits,
7780
} from '@vue-macros/short-emits'
@@ -104,6 +107,7 @@ export interface FeatureOptionsMap {
104107
setupBlock: OptionsSetupBlock
105108
setupComponent: OptionsSetupComponent
106109
setupSFC: OptionsSetupSFC
110+
shortBind: OptionsShortBind
107111
shortEmits: OptionsShortEmits
108112
shortVmodel: OptionsShortVmodel
109113
}
@@ -162,6 +166,7 @@ export function resolveOptions({
162166
setupBlock,
163167
setupComponent,
164168
setupSFC,
169+
shortBind,
165170
shortEmits,
166171
shortVmodel,
167172
}: Options): OptionsResolved {
@@ -254,6 +259,7 @@ export function resolveOptions({
254259
root,
255260
}),
256261
setupSFC: resolveSubOptions<'setupSFC'>(setupSFC, { version }, false),
262+
shortBind: resolveSubOptions<'shortBind'>(shortBind, { version }, false),
257263
shortEmits: resolveSubOptions<'shortEmits'>(
258264
shortEmits,
259265
{ version },
@@ -346,6 +352,12 @@ export default createCombinePlugin<Options | undefined>(
346352
framework,
347353
options.booleanProp
348354
),
355+
resolvePlugin(
356+
// VueShortBind is not an unplugin, by now
357+
VueShortBind as any,
358+
framework,
359+
options.shortBind
360+
),
349361
resolvePlugin(
350362
// VueShortVmodel is not an unplugin, by now
351363
VueShortVmodel as any,

‎packages/nuxt/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ export default defineNuxtModule<VueMacrosOptions>({
9696
vueCompilerOptions.experimentalDefinePropProposal =
9797
resolvedOptions.defineProp.edition || 'kevinEdition'
9898

99+
if (resolvedOptions.shortBind)
100+
volarPlugins.push('@vue-macros/volar/short-bind')
101+
99102
if (resolvedOptions.shortVmodel) {
100103
volarPlugins.push('@vue-macros/volar/short-vmodel')
101104
volarOptions.shortVmodel = {

‎packages/short-bind/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# @vue-macros/short-bind [![npm](https://img.shields.io/npm/v/@vue-macros/short-bind.svg)](https://npmjs.com/package/@vue-macros/short-bind)
2+
3+
Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)

0 commit comments

Comments
 (0)