feat: introduce shortBind (#493)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

.changeset/smart-toys-pay.md

@@ -0,0 +1,9 @@
+---
+'@vue-macros/short-bind': minor
+'@vue-macros/volar': minor
+'@vue-macros/eslint-config': minor
+'unplugin-vue-macros': minor
+'@vue-macros/nuxt': minor
+---
+
+Introduce `shortBind`

docs/.vitepress/locales/common.ts

@@ -133,6 +133,10 @@ export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
               text: 'chainCall',
               link: `${urlPrefix}/macros/chain-call`,
             },
+            {
+              text: 'shortBind',
+              link: `${urlPrefix}/macros/short-bind`,
+            },
           ],
         },
       ],

docs/macros/short-bind.md

@@ -0,0 +1,67 @@
+# shortBind
+
+<StabilityLevel level="experimental" />
+
+A shorthand for binding prop with the same data name.
+
+`:value` -> `:value="value"`
+
+If you have any questions about this feature, you can comment on [RFC Discussion](https://github.com/vuejs/rfcs/discussions/405).
+
+|   Features   |     Supported      |
+| :----------: | :----------------: |
+|    Vue 3     | :white_check_mark: |
+|    Nuxt 3    | :white_check_mark: |
+|    Vue 2     |        :x:         |
+| Volar Plugin | :white_check_mark: |
+
+## Usage
+
+### Basic Usage
+
+```vue
+<template>
+  <input :msg />
+  <!-- => <input :msg="msg" /> -->
+  <demo $msg />
+  <!-- => <input $msg="msg" /> -->
+</template>
+```
+
+### With `shortVmodel`
+
+```vue
+<template>
+  <input ::msg />
+  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
+  <demo $msg />
+  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
+  <demo *msg />
+  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
+</template>
+```
+
+## Volar Configuration
+
+```jsonc {5}
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/short-bind"
+      // ...
+    ]
+  }
+}
+```
+
+## ESLint Configuration
+
+```jsonc {4}
+// .eslintrc
+{
+  "rules": {
+    "vue/valid-v-bind": "off"
+  }
+}
+```

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

@@ -0,0 +1,67 @@
+# shortBind
+
+<StabilityLevel level="experimental" />
+
+绑定相同数据名称的 `prop` 的语法糖。
+
+`:value` -> `:value="value"`
+
+如果你对此功能有任何疑问，欢迎在 [RFC](https://github.com/vuejs/rfcs/discussions/405) 中发表评论。
+
+|   Features   |     Supported      |
+| :----------: | :----------------: |
+|    Vue 3     | :white_check_mark: |
+|    Nuxt 3    | :white_check_mark: |
+|    Vue 2     |        :x:         |
+| Volar Plugin | :white_check_mark: |
+
+## 用法
+
+### 基本用法
+
+```vue
+<template>
+  <input :msg />
+  <!-- => <input :msg="msg" /> -->
+  <demo $msg />
+  <!-- => <input $msg="msg" /> -->
+</template>
+```
+
+### 和 `shortVmodel` 一起使用
+
+```vue
+<template>
+  <input ::msg />
+  <!-- => <input ::msg="msg" /> => <input v-model:msg="msg" /> -->
+  <demo $msg />
+  <!-- => <input $msg="msg" /> => <input v-model:msg="msg" /> -->
+  <demo *msg />
+  <!-- => <input *msg="msg" /> => <input v-model:msg="msg" /> -->
+</template>
+```
+
+## Volar 配置
+
+```jsonc {5}
+// tsconfig.json
+{
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/short-bind"
+      // ...
+    ]
+  }
+}
+```
+
+## ESLint 配置
+
+```jsonc {4}
+// .eslintrc
+{
+  "rules": {
+    "vue/valid-v-bind": "off"
+  }
+}
+```

eslint.config.js

@@ -17,6 +17,7 @@ export default sxzz([
     files: ['**/*.md/*.{js,ts,vue}'],
     rules: {
       'no-var': 'off',
+      'vue/valid-v-bind': 'off',
       'import/no-mutable-exports': 'off',
       '@typescript-eslint/no-inferrable-types': 'off',
       '@typescript-eslint/no-empty-function': 'off',
@@ -27,6 +28,7 @@ export default sxzz([
     rules: {
       'no-debugger': 'off',
       'no-console': 'off',
+      'vue/valid-v-bind': 'off',
       'vue/require-prop-types': 'off',
       'vue/valid-define-props': 'off',
       'vue/valid-attribute-name': 'off',

packages/eslint-config/index.js

@@ -24,6 +24,7 @@ const config = {
   },
   rules: {
     'vue/no-setup-props-destructure': 'off',
+    'vue/valid-v-bind': 'off',
   },
 }
 

packages/macros/package.json

@@ -100,6 +100,7 @@
     "@vue-macros/setup-block": "workspace:*",
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",
+    "@vue-macros/short-bind": "workspace:*",
     "@vue-macros/short-emits": "workspace:*",
     "@vue-macros/short-vmodel": "workspace:*",
     "unplugin": "^1.5.0",

packages/macros/src/index.ts

@@ -72,6 +72,9 @@ import VueSetupComponent, {
 import VueSetupSFC, {
   type Options as OptionsSetupSFC,
 } from '@vue-macros/setup-sfc'
+import VueShortBind, {
+  type Options as OptionsShortBind,
+} from '@vue-macros/short-bind'
 import VueShortEmits, {
   type Options as OptionsShortEmits,
 } from '@vue-macros/short-emits'
@@ -104,6 +107,7 @@ export interface FeatureOptionsMap {
   setupBlock: OptionsSetupBlock
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
+  shortBind: OptionsShortBind
   shortEmits: OptionsShortEmits
   shortVmodel: OptionsShortVmodel
 }
@@ -162,6 +166,7 @@ export function resolveOptions({
   setupBlock,
   setupComponent,
   setupSFC,
+  shortBind,
   shortEmits,
   shortVmodel,
 }: Options): OptionsResolved {
@@ -254,6 +259,7 @@ export function resolveOptions({
       root,
     }),
     setupSFC: resolveSubOptions<'setupSFC'>(setupSFC, { version }, false),
+    shortBind: resolveSubOptions<'shortBind'>(shortBind, { version }, false),
     shortEmits: resolveSubOptions<'shortEmits'>(
       shortEmits,
       { version },
@@ -346,6 +352,12 @@ export default createCombinePlugin<Options | undefined>(
               framework,
               options.booleanProp
             ),
+            resolvePlugin(
+              // VueShortBind is not an unplugin, by now
+              VueShortBind as any,
+              framework,
+              options.shortBind
+            ),
             resolvePlugin(
               // VueShortVmodel is not an unplugin, by now
               VueShortVmodel as any,

packages/nuxt/src/index.ts

@@ -96,6 +96,9 @@ export default defineNuxtModule<VueMacrosOptions>({
       vueCompilerOptions.experimentalDefinePropProposal =
         resolvedOptions.defineProp.edition || 'kevinEdition'
 
+    if (resolvedOptions.shortBind)
+      volarPlugins.push('@vue-macros/volar/short-bind')
+
     if (resolvedOptions.shortVmodel) {
       volarPlugins.push('@vue-macros/volar/short-vmodel')
       volarOptions.shortVmodel = {

packages/short-bind/README.md

@@ -0,0 +1,3 @@
+# @vue-macros/short-bind [![npm](https://img.shields.io/npm/v/@vue-macros/short-bind.svg)](https://npmjs.com/package/@vue-macros/short-bind)
+
+Please refer to [README.md](https://github.com/vue-macros/vue-macros#readme)

packages/short-bind/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@vue-macros/short-bind",
+  "version": "0.0.0",
+  "packageManager": "pnpm@8.7.6",
+  "description": "short-bind feature from Vue Macros.",
+  "keywords": [
+    "vue-macros",
+    "macros",
+    "vue",
+    "sfc",
+    "setup",
+    "script-setup",
+    "short-bind"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/vue-macros/vue-macros#readme",
+  "bugs": {
+    "url": "https://github.com/vue-macros/vue-macros/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vue-macros/vue-macros.git",
+    "directory": "packages/short-bind"
+  },
+  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "dev": "./src/index.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./api": {
+      "dev": "./src/api.ts",
+      "require": "./dist/api.js",
+      "import": "./dist/api.mjs"
+    },
+    "./rollup": {
+      "dev": "./src/rollup.ts",
+      "require": "./dist/rollup.js",
+      "import": "./dist/rollup.mjs"
+    },
+    "./vite": {
+      "dev": "./src/vite.ts",
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
+    "./*": [
+      "./*",
+      "./*.d.ts"
+    ]
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "DEV=true tsup"
+  },
+  "dependencies": {
+    "@vue-macros/common": "workspace:*",
+    "@vue/compiler-core": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.3.4",
+    "rollup": "^3.29.2"
+  },
+  "engines": {
+    "node": ">=16.14.0"
+  }
+}

packages/short-bind/src/api.ts

@@ -0,0 +1 @@
+export * from './core'

packages/short-bind/src/core/index.ts

@@ -0,0 +1 @@
+export * from './transformer'