Network tab

[shuding]

Closes #28.

This PR adds an initial implementation of a Network tab (waterfall chart) similar to Chrome DevTools' Network Tab. Basic design behind this:

• I added some logic to the middleware to collect events of fetch start, success, error, discarded. Besides the SWR key, each request is also attached with a random ID to distinguish from others.
  • These events are broadcasted via window.postMessage to the extension window.
  • The event emitter is also passed to the current React tree via context, this is for demo usage.
• SWRDevToolPanel receives the events and gives them to NetworkPanel.
• NetworkPanel cleans up the data, grouping them by hook keys, and give it to the timeline scroller.
• timeline/index.tsx is a headless virtual timeline scroller and handles the UI.

I tested the virtual scroller with 500 useSWR hooks and 1000+ requests and it's still pretty smooth on my laptop. Also, I added some random delay to the API and enabled the failing hook.

I noticed a couple of bugs, such as ongoing request that never ends, but should be good at the moment. Another thing to be done is supporting useSWRInfinite.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
swr-devtools	✅ Ready (Inspect)	Visit Preview	Jun 2, 2022 at 11:32AM (UTC)

[koba04]

Great work!!! 👏 👏 This is a great starting point 🚀 so I think It's ok to get merged this even if this still has bugs. I'll merge this after passing CI.

(We should support the Dark theme as well)

[shuding]

I'll fix the lint error as well as dark mode support :)

[shuding]

It should look better under dark mode now!