babel-plugin-transform-vue-jsx
babel-plugin-transform-vue-jsx copied to clipboard
vuejs
`on` doesn't work for Lifecycle Hooks
Example
<MyComponent onCreatedHook={() => console.log('MyComponent created')} />
Expected
On creation to log
MyComponent created
Actual
Nothing happens
Looks like Lifecycle Hooks not available through jsx. I've tried onCreated, onHookCreated, onCreatedHook, hookCreate and so on — nothing works.
@ArmorDarks, can you provide an example on the alternative in vue template?
In regular Vue templates it would be
<template>
<HelloWorld @hook:created="log" />
</template>
<script>
import MyComponent from "./components/MyComponent.vue";
export default {
name: "App",
components: { MyComponent },
methods: {
log () { console.log('hi from created') }
}
};
</script>
https://codesandbox.io/s/p7v4zz36yx
hmm.. here's a way to do that, I will think about some syntax for it.
For now you can use spread to achieve the same result as shown here
onCreatedHook seems the most legit, but confusing that it's reversed hook:created. Though, hook: here looks like a namespace.
Another one: hookOnCreated to namespace hook-events
I see a problem bigger, there's no reason for people not to use namespaced events in the first place, so we should probably support the full namespaced version like <HelloWorld onHook:created={this.log} />
Not sure it worth it. onHookCreated sounds not bad too and follows the generic idea of making all standard Vue events into just on versions.
@ArmorDarks, how does transpiler know if it's supposed to be hookCreated or hook:created?
And JSX supports namespaced arguments
Same way as it knows that onSomething should be @something and not v-bind:onSomething (which, by the way, has same not that fun implications when you're accidentally naming prop for accepting a callback as onSomething and wonder why it doesn't work).
It just assumes that when you say onHook... you want hook:...
@ArmorDarks, yeah, that's done by parsing the on prefix. But nobody stops user from registering event called alpha:beta, how could transform know that onAlphaBeta it should listen for alpha:beta and not alphaBeta?
TLDR; JSX allows onAlpha:beta and that's what I will go forward with.
alpha:beta
I thought hook: is the only namespace. Then it might make sense.
But following the logic of other JSX events, should it be <Comp hook:onCreated={this.log} />?
