Listen for events that happened before the listener is created. about mitt HOT 9 CLOSED

Okay, if this is working, awesome. 👍 Thank you for the help, that solves it for me.

from mitt.

@lukasoppermann I'm looking at cleaning up a few of these issues, could you describe a little bit further what you're looking to do? Perhaps with some code examples?

from mitt.

Hey @wulfmann,
sure, so as I said, what I would like is to emit an event and when I add a listener to this event afterwards, it should fire immediatly if the event was already fired.

Maybe this could be done via a parameter on the listener (not included in the example).

import mitt from 'mitt'

const emitter = mitt()

const fetchAnimatinLib = new Promise((resolve, reject) => {
  const script = document.createElement('script')
  document.head.appendChild(script)
  script.onload = resolve
  script.onerror = reject
  script.async = true
  script.src = './animationLib.js'
})

fetchAnimatinLib.then(() => {
  emitter.emit('AnimationLibraryLoaded')
})


… some more code
… animation library is fully loaded


// this should fire immediatly
emitter.on('AnimationLibraryLoaded', e => {
  animationLib.animate(…)
})

from mitt.

@lukasoppermann Hey, just out of curiosity, why don't you just put emitter.on('AnimationLibraryLoaded', ...) at the top, so it's going to be called before fetchAnimatinLib? Is there some real use case in the app?

from mitt.

Because I can not use the animation library before it is loaded, this will produce an error. This is why I need to know when the library is loaded. Does that make sense? Or am I misunderstanding the question?

from mitt.

Agree with @vitkarpov. The listener should just be declared at the top—you wouldn't get an error because it wouldn't be executed until the library is loaded anyway.

from mitt.

Okay, wait, so what you are saying is:

import mitt from 'mitt'

const emitter = mitt()

// this should fire immediatly
emitter.on('AnimationLibraryLoaded', e => {
  animationLib.animate(…)
})

const fetchAnimatinLib = new Promise((resolve, reject) => {
  const script = document.createElement('script')
  document.head.appendChild(script)
  script.onload = resolve
  script.onerror = reject
  script.async = true
  script.src = './animationLib.js'
})

fetchAnimatinLib.then(() => {
  emitter.emit('AnimationLibraryLoaded')
})


… some more code
… animation library is fully loaded

And this should work? Now that I put it in code it seems rather logical. 😓

from mitt.

@lukasoppermann example you provided above makes perfect sense to me, I believe it should work. Except for one thing - the comment should say "this should NOT fire immediately" now, it will when you emit the event hence when the library is loaded.

Because I can not use the animation library before it is loaded

That's also understandable, I mean using an event emitter here is perfectly fine.

from mitt.

Hi everyone!

Getting back to the topic, here is my case:
Using Vue.js I run an authentication script that works synchronically.
In the Vue component, I need to start some actions when a user is authenticated, but I can not know for sure what will happen first: authentication completion or a rendering of a component.
So, currently, I use setInterval() and check for a state.
But I wonder if a could check something like "Was this auth-event already emitted?".
Not even to "check", but to run "on" callback immediately. As my "on" logic resides inside a Vue component I don't see the way to put "on" before "emit"

from mitt.