babel-plugin-vue-jsx-modifier
Support template modifiers (.sync, .capture, etc) in JSX
Overview
In Vue template, we can use some modifiers. See:
<my-component :is-active.sync="isActive">
<div @scroll.passive="onScroll">
div>
my-component>
But they are not supported in JSX. We must write messy JSX-spread instead.
<MyComponent
isActive={this.isActive}
{...{
on: {
"update:isActive": v => {
this.isActive = v;
}
}
}}
>
<div
{...{
on: { "&click": this.onScroll }
}}
/>
</MyComponent>
By this plugin, we can write equivalent JSX as below:
<MyComponent isActive={__sync(this.isActive)}>
<div onClick={__passive(this.onScroll)} />
</MyComponent>
Install
First, setup Vue environment and enable JSX transpilation (see https://github.com/vuejs/jsx).
And install this
npm install babel-plugin-vue-jsx-modifier -D
Usage
add "vue-jsx-modifier"
to "plugins" in your .babelrc
.
{
"presets": ["@vue/babel-preset-jsx"],
"plugins": ["vue-jsx-modifier"]
}
Example code for TypeScript:
; } });">// modifier functions can be imported from "lib/modifiers" import { __sync } from "babel-plugin-vue-jsx-modifier/lib/modifiers"; import Vue, { VNode } from "vue"; import MyComponent from "./MyComponent.vue"; export default Vue.extend({ data() { return { value: "default"; } }, render(): VNode { // Wrap member expression by `__sync` where you want use .sync return <MyComponent myProp={ __sync(this.value) } />; } });