[Idea] overlay-kit devtools

[jgjgill]

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.

• overlay-kit-devtools
• overlay-kit test/devtools branch

Example

https://github.com/user-attachments/assets/88b368ca-7633-4d80-84bd-17b9eadb862c

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. 🙇‍♂️

[jungpaeng]

Hello, as you mentioned, if there are dev tools, it would be very helpful to track the currently open overlays. I think it would also be effective for tracking cases where an overlay needs to be unmounted but isn’t, which causes memory leaks.

Currently, I can’t think of any major features to add to the overlay-kit, so I think making dev tools could be our next goal.

[jgjgill]

Oh, Thank you for leaving a comment.

Currently, I can’t think of any major features to add to the overlay-kit, so I think making dev tools could be our next goal.

Oh I see, I was thinking that I could contribute more if there was an extensible interface 🤔 I'll come back when devtools or other major features are added, thanks. 🙇‍♂️