feature: @waku/react

[weboko]

This is a **feature request** ## Problem

It is a moderately challenging task to use js-waku tools as they are right now in a project which is based on a web framework. Even considering js-waku-examples it is cognitively hard to keep track of edge cases while trying to integrate any of features into, let's say, React app.

Developers doing so will have to answer various questions and implement things such as:

• context for waku instance + making sure extra re-renderings are not happening;
• where to put a decoder/encoder: component scope vs file scope vs project scope; These are the things that I can name now by only looking into js-waku-examples/web-chat.

Proposed Solutions

As an example I'll be talking about React but it applies to any other popular-enough web framework.

In order to ease things I think we should spend some time to provide:

• set of hooks;
• Contexts;
• other abstractions that are native to React;

By doing so we will:

• save time for developers;
• penetrate massive ecosystem of the framework;
• prevent some bugs that could occur because of plain JS - React integration;

For initial effort I would focus on the most common building block of js-waku and maybe proxy other things through @waku/react to avoid cases when consumer have version of UI lib that is not compatible with any of js-waku packages.

nb: I might be missing something and there is already a request for it or an effort going, in that case, please, share info about it.

@danisharora099 @fryorcraken

[fryorcraken]

Some more context: https://github.com/waku-org/js-waku-examples/pull/168/files#r1052762221

[fryorcraken]

IMO the biggest challenge I do not have the skills to tackle is how to handle the Waku node instance so it's started once and usable by several components.

[fryorcraken]

Note that having a Sender and Receiver interfaces for Relay, lightpush and filter might help creating generic component that works with relay or light nodes.

[weboko]

Next steps

web-chat example:

• [x] https://github.com/waku-org/js-waku-examples/pull/214#discussion_r1116463738
• [ ] https://github.com/waku-org/js-waku-examples/pull/214#discussion_r1116458553
• [ ] https://github.com/waku-org/js-waku-examples/pull/214#discussion_r1116459432

@waku/react:

• [ ] address TODOs
• [ ] add reliable tests
• [ ] add release pipeline (similar to js-waku)
• [ ] add test pipeline
• [ ] add public pipeline
• [ ] add README
• [ ] improve pre commit lint
• [ ] decouple Encoder / Decoder