JSPM – babel-plugin-jsx-event-modifiers@2.0.5

Package Exports

babel-plugin-jsx-event-modifiers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-jsx-event-modifiers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Event Modifiers for JSX

This babel plugin adds some syntactic sugar to JSX.

Usage:

npm i babel-plugin-jsx-event-modifiers -D

yarn add babel-plugin-jsx-event-modifiers -D

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

example .babelrc:

{
  "presets": ["es2015"],
  "plugins": ["jsx-event-modifiers", "transform-vue-jsx"]
}

Event Modifiers

Example:

export default {
  render () {
    return (
      <input
        onKeyup:up={this.methodForPressingUp}
        onKeyup:down={this.methodForPressingDown}
        onKeyup:bare-shift-enter={this.methodOnlyOnShiftEnter}
        onKeyup:bare-alt-enter={this.methodOnlyOnAltEnter}
      />
    )
  }
}

will be transpiled into:

export default {
  render() {
    return (
      <input
        {...{
          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:

<input
  @keyup.up="methodForPressingUp"
  @keyup.down="methodForPressingDown"
  @keyup.bare.shift.enter="methodOnlyOnShiftEnter"
  @keyup.bare.alt.enter="methodOnlyOnAltEnter"
  @keyup.120="onPressKey120('some', 'arguments')"
>

JSX:

<input
  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