Add v-on:keyup.enter to JSX

[nickmessing]

We could do something like:

render (h) {
  return <div onKeyup.enter={this.something} />
}

render (h) {
  return h('div', {
    on: {
      keyup: {
        enter: this.something
      }
    }
  }
}

to support the event modifiers, what do you think @yyx990803, @QingWei-Li, does it make any sense to you ?

[nickmessing]

@LinusBorg, I've seen that you respond to questions like "How to use @event.modifier in JSX?" pretty often, do you think this idea is legit?

P.S. we can do transforms without affecting other vue repos like:

render (h) {
  return <div onKeyup.enter={this.something} onKeyup.delete={this.somethingElse} />
}

render (h) {
  return h('div', {
    on: {
      keyup (event) {
        if (/* check for enter */) this.something(event)
        if (/* check for delete */) this.somethingElse(event)
      }
    }
  }
}

This would be a change in this repo only and it would allow people to use event modifiers directly in jsx.

[nickmessing]

@QingWei-Li, @yyx990803, @LinusBorg.

Hey, unfortunately babylon doesn't allow . in attributes, does this syntax look readable for you?

class A {
  render () {
    return (
      <div some_thing="somethingelse">
      	<input type="text"
      		onKeypress__enter={this.someMethod}
      		onKeypress__backspace={this.someOtherMethod}
      		onClick__prevent={this.smth} />
      </div>
    )
  }
}

I mad a POC and it works.

[nickmessing]

You can see POC and play with it here: https://astexplorer.net/#/gist/78dff39789a6abaa879cea1d29f75e16/3806404f6e9ced30a99ef9d3e248acccde27af55

[yyx990803]

I like the POC! It kinda sucks that we can't get the syntax to align with the template version, but I can't seem to come up with a better alternative... (the only other char that can be used inside a JSX identifier is $, but it's not visually distinct enough)

[nickmessing]

@yyx990803, maybe we can convince the babylon team to accept dot as a part of JSX identifier?

I'll try to do a PR for them.

[nickmessing]

@yyx990803 I have made a POC with XML's namespaces, using dot is a bad idea because it will result in invalid XML. Chaining doesn't work but I think about supporting things like <input onKeypress:enter-prevent />, what do you think about the dash-based chaining?

P.S. I know it is totally opposite from what is colon and dot used in vue's template syntax but I guess JSX should be different.

P.P.S. I think it should not be a part of this plugin, it should be a separate one because it is valid for any JSX and is not limited to Vue.

[yyx990803]

@nickmessing I like the namespaced version - and yeah I agree it should probably be a separate plugin.

[nickmessing]

@yyx990803, done in babel-plugin-jsx-syntactic-sugar

[eakarpov]

@nickmessing semicolons are not valid in JSX..

[nickmessing]

@eakarpov, yes, semicolons (;) are note, but colons (:) are according to the spec.

As you can see in the spec: https://facebook.github.io/jsx/
JSXAttributeName can be either JSXIdentifier or JSXNamespacedName
and JSXNamespacedName is just JSXIdentifier : JSXIdentifier
so colon (I assume you mean that since we discussed colons) are a valid part of JSXAttributeName as long as it's a single colon separating two JSXIdentifier.

P.S. this project and all sugars now live here: https://github.com/vuejs/jsx
P.P.S. However, they are not allowed in TSX at the moment because TSX does not fully support JSX spec.

[panksi]

This doesn't work as expected,

It triggers event even when modifier is added
example:
1.

outputs nothing

outputs:

so Either gets ignoreed with __ or ignores the modifier with :