Skip create panel when no Web Components on page

[heybran]

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]

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]

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]

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

[heybran]

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.