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.
{
this.isActive = v;
}
}
}}
>
">
<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) } />; } });
When using the SSR solution recently, I found that the following code is not well supported
tsx.modifiers.stop((e) => /** Necessary code /)
or
async onClick(e: MouseEvent) {
/* Necessary code */
}
tsx.modifiers.stop(this.onClick)
1.5k Jan 3, 2023
10 Dec 2, 2022
501 Mar 9, 2023
73 Aug 24, 2022
66 May 26, 2022
2 Mar 20, 2021
89 Aug 11, 2022
260 Nov 29, 2022
23 Nov 15, 2022
1k Jan 9, 2023
663 Jan 7, 2023
9.5k Dec 30, 2022
136 Jan 5, 2023
44 Nov 23, 2022