unplugin-jsx-short-bind

A shorthand for binding prop with the same data name for JSX. Powered by ast-grep.

<script setup lang="tsx">
let value = $ref('foo')
function onInput(e: any) {
  value = e.target.value
}

export default () => (
  <input
    {value}
    {onInput}
  />
)
</script>

Installation

npm i -D unplugin-jsx-short-bind

// vite.config.ts
import JsxShortBind from "unplugin-jsx-short-bind/vite";

export default defineConfig({
  plugins: [JsxShortBind()],
});

// rollup.config.js
import JsxShortBind from "unplugin-jsx-short-bind/rollup";

export default {
  plugins: [JsxShortBind()],
};

// esbuild.config.js
import { build } from "esbuild";

build({
  plugins: [require("unplugin-jsx-short-bind/esbuild")()],
});

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [require("unplugin-jsx-short-bind/webpack")()],
};

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require("unplugin-jsx-short-bind/webpack")()],
  },
};

Volar

// tsconfig.json
{
  // ...
  "vueCompilerOptions": {
    "plugins": ["unplugin-jsx-short-bind/volar"]
  }
}

Eslint

// eslint.config.js
import antfu from "@antfu/eslint-config";
import jsxShortBind from "unplugin-jsx-short-bind/eslint";

export default antfu({}, jsxShortBind);

License

MIT License © 2023-PRESENT zhiyuanzmj