nickmessing / babel-plugin-jsx-event-modifiers Goto Github PK

View Code? Open in Web Editor NEW

44.0 3.0 8.0 164 KB

Event modifiers syntactic sugar for JSX

License: MIT License

JavaScript 100.00%

babel-plugin-jsx-event-modifiers's Introduction

Event Modifiers for JSX

DEPRECATED: Check https://github.com/vuejs/jsx instead

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

babel-plugin-jsx-event-modifiers's People

Stargazers

Watchers

Forkers

egoist-bot ks3dev blake-newman jmtoball foolishchow ishitatsuyuki

babel-plugin-jsx-event-modifiers's Issues

Doesn't work with Babel 7

I'm getting this error.

Module build failed: Error: This API has been removed. If you're looking for this functionality in Babel 7, you should import the '@babel/helper-module-imports' module and use the functions exposed from that module, such as 'addNamed' or 'addDefault'.

I'm not sure where to look at to get this fixed

Add polyfill for Object.entries

to support node 6

Listener arguments behavior breaks

Using the plugin breaks the Vue argument behavior for event listeners, that is you should be able to pass as many argument as you want (even when not using event modifiers).

For example:

function handleSort(field, sorting) {
  console.log(field, sorting)
}

return <Column onSort={handleSort}/>

For Column:

render (h, { props, listeners }) {
  function handleSortClick () {
    // ...
    listeners.sort(props.field, newSorting)
  }
  // ...
}

Currently, only the first argument is passed (all listeners are wrapped in a single-argument function).

sort($event) {
  handleSort($event);
}

It should at last be:

sort(...args) {
  handleSort(...args);
}

package on pnm

babel-plugin-jsx-syntactic-sugar is removed from npm
You should republish it again, and don't forget to bump the version to 2.0.0

Cannot read property 'type' of undefined

I get an error while using this plugin that is included in babel-preset-vue (I'm using webpack 3):

Module build failed: TypeError: src/components/Link.vue: Cannot read property 'type' of undefined
    at JSXOpeningElement.path.node.attributes.forEach.attribute (node_modules\babel-plugin-jsx-event-modifiers\index.js:112:33)
    at Array.forEach (native)
    at JSXOpeningElement (node_modules\babel-plugin-jsx-event-modifiers\index.js:111:34)
    at NodePath._call (node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (node_modules\babel-traverse\lib\path\context.js:48:17)
    at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
    at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
    at TraversalContext.visitQueue (node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (node_modules\babel-traverse\lib\index.js:114:17)
    at NodePath.visit (node_modules\babel-traverse\lib\path\context.js:115:19)
 @ ./src/components/Link.vue 4:0-117

Here is the component render function:

return <a {...data} class={{ 'link-disabled': !props.enabled }} onClick={handleClick}>{children}</a>

My .babelrc:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0",
    "vue"
  ]
}

App still doesn't run after installing package.

Hello I'm new to rendering in VueJS. I have a piece of code that renders a custom component. I couldn't attach event handlers as it threw error v-on:click is xml and JSX allows only onClick. After searching in JSX forum I found a link to this page. Here is the code I'm using

return (
        <div id='hideColumnsMarker' class='relative'>
          <v-btn icon small class='grey lighten-4' id='hideColumnsButton'  @click='this.hideColumns(true)'>
            <v-icon>{ this.hideColumnsFlag ? 'chevron_left' : 'chevron_right' }</v-icon>
          </v-btn>
          <span>{column.label}</span>
        </div>
      )

I still get the error 'Unexpected token @'. I have added 'transform-runtime' in babelrc. Am I missing something?

nickmessing / babel-plugin-jsx-event-modifiers Goto Github PK

babel-plugin-jsx-event-modifiers's Introduction

Event Modifiers for JSX

DEPRECATED: Check https://github.com/vuejs/jsx instead

Usage:

Event Modifiers

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:

Notable differences:

babel-plugin-jsx-event-modifiers's People

Stargazers

Watchers

Forkers

babel-plugin-jsx-event-modifiers's Issues

Recommend Projects

Recommend Topics

Recommend Org