Listen for events that happened before the listener is created.

[lukasoppermann]

Hey @developit,

this is a really neat library. I was wondering if it is possible to have a listener fire immediatly if it is attached to an event that already happened? It did not work for me, so is it no supported, or did I do it wrong?

For example I would like to fire an event once the animation library is loaded, so that I can start all animations afterwards, no matter where they are defined.

Thanks for your help.

[wulfmann]

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

[lukasoppermann]

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(…)
})

[vitkarpov]

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

[lukasoppermann]

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?

[emilio-martinez]

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.

[lukasoppermann]

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

[vitkarpov]

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

[lukasoppermann]

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

[zablik]

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"