Description
hello. Since I first came across overlay-kit, I've been playing around with the code and finding it very useful.
During this process, I realized the need for a convenient debugging environment along with the desire to make the library even better.
Personally, the initial process of adapting to the library was a bit of a learning curve.
- You can't create overlays with duplicate IDs.
- Unlike unmount, close doesn't remove from the DOM.
And even when I was actually using the library, I still needed to debug the data in the overlay.
I could have used the useOverlayData hook provided by the library, but I found it cumbersome to call and remove it whenever I needed to.
I was thinking about how to improve this and came up with overlay-kit-devtools, inspired by usefunnel - Funnel Debugger.
I think that since overlay-kit organizes the flow of overlays based on an id, it would be handy to be able to explicitly control this id.
I want to share a little more of the direction I think, so I created unofficial devtools, although it's very incomplete.
Example
361804988-d7158967-b50b-414c-93af-514de0c211f7.mov
Currently, I arbitrarily configured useEffect to communicate with devtools based on events.
If I could improve the structure, I could add the code for devtools in dispatchOverlay instead of calling events from useEffect.
store.tsx
export function dispatchOverlay(action: OverlayReducerAction) {
overlays = overlayReducer(overlays, action);
const event = new CustomEvent('sendToExtension', { detail: { overlayList: overlays.overlayOrderList, currentId: overlays.current } });
window.dispatchEvent(event);
emitChangeListener();
}What do you think of this idea? I want to hear what you think of it, whether you think it could be improved, or if you think it's a negative.
please feel free to comment. Thank. 🙇♂️