babel-plugin-jsx-event-modifiers

Event Modifiers for JSX

This babel plugin adds some syntactic sugar to JSX.

$3

``bash
npm i babel-plugin-jsx-event-modifiers -D
`
or
`bash
yarn add babel-plugin-jsx-event-modifiers -D
`

Then add jsx-event-modifiers to your .babelrc file under plugins

example .babelrc:
`json
{
"presets": ["es2015"],
"plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
}
`

#### Event Modifiers

Example:
`js
export default {
render () {
return (
onKeyup:up={this.methodForPressingUp}
onKeyup:down={this.methodForPressingDown}
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
/>
)
}
}
`
will be transpiled into:
`js
export default {
render() {
return (
{...{
on: {
keyup: [
$event => {
if (!('button' in $event) && this._k($event.keyCode, 'up', 38)) return null

this.methodForPressingUp($event)
},
$event => {
if (!('button' in $event) && this._k($event.keyCode, 'down', 40)) return null

this.methodForPressingDown($event)
},
$event => {
if (
($event.ctrlKey && $event.altKey && $event.metaKey) ||
!$event.shiftKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null

this.methodOnlyOnShiftEnter($event)
},
$event => {
if (
($event.ctrlKey && $event.shiftKey && $event.metaKey) ||
!$event.altKey ||
(!('button' in $event) && this._k($event.keyCode, 'enter', 13))
)
return null

this.methodOnlyOnAltEnter($event)
},
],
},
}}
/>
)
},
}


`

#### We try to keep API and behaviour as close to Vue Event Modifiers as we can. The only difference today is support for bare modifier and syntax.

##### Example:

Vue template:
`html
@keyup.up="methodForPressingUp"
@keyup.down="methodForPressingDown"
@keyup.bare.shift.enter="methodOnlyOnShiftEnter"
@keyup.bare.alt.enter="methodOnlyOnAltEnter"
@keyup.120="onPressKey120('some', 'arguments')"
>
`
JSX:
`js
onKeyup:up={this.methodForPressingUp}
onKeyup:down={this.methodForPressingDown}
onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
onKeyup:k120={() => this.onPressKey120('some', 'arguments')}
/>
`

##### Notable differences:

* Modifiers are prefixed by : and separated by - (in vue: prefixed by . and separated by .)
* Key codes are prefixed by k`
* Call expression should be wrapped in arrow functions