Skip create panel when no Web Components on page

Matsuuu / web-component-devtools

Web Component DevTools is a Browser Extension enhancing the development experience of Web Component developers

https://matsuuu.github.io/web-component-devtools/

MIT License

131 stars 3 forks source link

Skip create panel when no Web Components on page #61

Open heybran opened 1 year ago

heybran commented 1 year ago

Hi @Matsuuu,

Thank you for creating this amazing tool.

I have folked and cloned the repo, and as I was walking thru the codes to get a better understanding how it works under the hood. I see this this TODO comment you left.

https://github.com/Matsuuu/web-component-devtools/blob/main/lib/devtools-init.js#L2

If I may work on that?

My thoughts process:

Upon document idle, check if there's any Web Components on page, it none, skip create panel
Though there is another scenario where no initial Web Components to start with, but the web page might render Web Components dynamically when user interacts with the page, so I think we should handle this as well by using MutationObserver?

Brandon

Matsuuu commented 1 year ago

There are a few cases around this that would need some looking into:

Currently the devtool loads quite a lot of javascript even though the panel is not open. This is something we would want to prevent.
- To prevent this, we would need to add some more code splitting, and have a really really minimal setup that runs in the background and only loads more code when the panel itself is opened.

The TODO comment is deprecated as I feel that the panel should load, even if there are no items on the page as they might appear dynamically.

I think some kind of an overhaul of the panel UI itself and therefore, code loading would be in place, and could be considered for the next major version of WCDT.

heybran commented 1 year ago

Cool. I will keep absorbing the codes and see if I can have any feedbacks for you.

Another note: I was testing WCDT using this tiny web components project of mine: https://guitar-metronome.netlify.app/, and some properties are not showing inside the panel, I will check this as well once I have a good grasp of the codes :)

Matsuuu commented 1 year ago

Could you report the props not showing up with a clear re-production in a separate issue?

heybran commented 1 year ago

Sure thing, I will create a separate issue once I check and confirm that it's not caused by the codes of that web components project.