Comments (11)
@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.
from babel-plugin-transform-vue-jsx.
@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.
from babel-plugin-transform-vue-jsx.
You can see POC and play with it here: https://astexplorer.net/#/gist/78dff39789a6abaa879cea1d29f75e16/3806404f6e9ced30a99ef9d3e248acccde27af55
from babel-plugin-transform-vue-jsx.
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)
from babel-plugin-transform-vue-jsx.
@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.
from babel-plugin-transform-vue-jsx.
@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.
from babel-plugin-transform-vue-jsx.
@nickmessing I like the namespaced version - and yeah I agree it should probably be a separate plugin.
from babel-plugin-transform-vue-jsx.
@yyx990803, done in babel-plugin-jsx-syntactic-sugar
from babel-plugin-transform-vue-jsx.
@nickmessing semicolons are not valid in JSX..
from babel-plugin-transform-vue-jsx.
@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.
from babel-plugin-transform-vue-jsx.
This doesn't work as expected,
It triggers event even when modifier is added
example:
1.
outputs nothing
so Either gets ignoreed with __ or ignores the modifier with :
from babel-plugin-transform-vue-jsx.
Related Issues (20)
- how to pass a prop named "model" to the custom component like el-form
- `h` is not auto-injected with Laravel-Mix and Vue using @vue/babel-plugin-transform-vue-jsx v1.0.0-beta.3 HOT 1
- sass content in .vue file not compiled HOT 1
- Concrete preset instead on env HOT 1
- Vuetify modifiers behave differently
- Vue 3 and TSX HOT 6
- rollup+babel+babel-plugin-transform-vue-jsx package size so big
- delete this
- delete this
- delete this
- delete this
- JSX fragment syntax (<> ... </>) HOT 4
- How to add JSX Support to Existing MVC .NET Application
- How to add 'comments' in vue jsx HOT 2
- JSX compilation fails when nested under another node_modules directory
- Support for xmlns:xlink attribute
- how to write the arguments of the custom directives? HOT 2
- String turn into jsx code HOT 1
- [Question] How to use emits in component ?
- Convert JSX to string in template
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-transform-vue-jsx.