connect: addEventListener on components

[DavideCarvalho]

I wanted to know if there is a way of adding a eventListener to the component that listen do "document". I've tried doing something that looked like redux connect function but I wasn't able to make it work.
Could you provide some example? Or at least put it on the docs,

[smalluban]

There are two options with event listeners. For example, render factory uses globally attached event listener to trigger re-render all of the elements. For you it could look like this:

const set = new Set();

// In this case your event listener is attach once, but it is always there
// It is proper pattern if you factory do something in sync between instances
document.addEventListener('event-name', () => {
  set.forEach(...);
});

export function myFactory() {
  return {
    get: ...
    connect: (host) => {
      set.add(host);
      return () => set.remove(host);
    },
  };
}

The second option is to attach event listener in connect and then remove it in disconnect method directly:

export function myFactory() {
  return {
    get: ...
    connect: (host) => {
      // holding reference to the callback is most important here,
      // as it has to be removed in disconnect 
      const cb = () => { ... };

      document.addEventListener('event-name', cb);
      return () => document.removeEventListener('event-name', cb);
    },
  };
}

Also, you might want to look at the built-in factories source code. You can find there examples of how to add event listeners.

About docs - I am working on it right now (you can sneak peek on docs branch). I want also add some patterns, that was asked in issues.

[DavideCarvalho]

It worked! TY for the help.
I also created a codesandbox to share. If you want, you can use it as an example
https://codesandbox.io/embed/r5nkxjo4ln

[smalluban]

You can use dispatch from the library for simpler syntax:

import { dispatch } from 'hybrids';

dispatch(document, 'event-name', { detail: { value: 0 } });

It creates CustomEvent for you, passes options and dispatches it.

[DavideCarvalho]

It gave me an error (0 , _hybrids.dispatchEvent) is not a function
I commented the line so it's easier if you want to test

[DavideCarvalho]

The name isn't dispatchEvent, but dispatch

[smalluban]

Yes, you are right. I was writing it on my phone, fixed comment with the proper name.