unplugin-jsx-short-bind

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

export default () => {
  const [value, setValue] = useState()
  const onInput = (e) => {
    setValue(e.currentTarget.value)
  }
  return (
    <input
      {onInput}
      {value}
    />
  )
}

Installation

npm i -D unplugin-jsx-short-bind

Note: While registering the plugin in your config files, always have the plugin before the framework's main plugin. Otherwise, you'll get parse errors; For example:

// vite.config.js
import { react } from '@vite/plugin-react';
import JsxShortBind from "unplugin-jsx-short-bind/vite";

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

Vite

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

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

Rollup

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

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

esbuild

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

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

Webpack

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

Vue CLI

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

Typescript

TS Macro

// tsm.config.ts
import jsxShortBind from "unplugin-jsx-short-bind/volar";
export default {
  plugins: [jsxShortBind()],
};

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