`on` doesn't work for Lifecycle Hooks

[ArmorDarks]

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.

[nickmessing]

@ArmorDarks, can you provide an example on the alternative in vue template?

[ArmorDarks]

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

[nickmessing]

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

[ArmorDarks]

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

[nickmessing]

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} />

[ArmorDarks]

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.

[nickmessing]

@ArmorDarks, how does transpiler know if it's supposed to be hookCreated or hook:created? And JSX supports namespaced arguments

[ArmorDarks]

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:...

[nickmessing]

@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.

[ArmorDarks]

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} />?

[baby2011]

Have you solved your problem? I meet the same problem