Ignore specific components

[KevinBatdorf]

Sometimes I have many sort of "throw away" components that don't really need to show in DevTools. If you're not opposed to adding more optional attributes, we could add an x-ignore and have DevTools ignore those components all together.

[HugoDF]

🤔 I don't think making users/developers add more code/attributes to their apps solves this issue.

As far as I understand you're saying "if I've got a bunch of components on the page, I want to ignore some of them when working on a specific one", which is an issue we can solve with a search UI of some sort, or maybe a "ignore/hide this component" context menu/button?

[HugoDF]

For reference

React devtools

React Devtools has a search bar (don't know it's worth implementing)

But also has a way to hide components that match some criteria (to access the menu you need to go to "Components" and the settings icon next to the search bar)

Vue devtools

Vue devtools has a "filter" search bar.

[stephenoldham]

I guess the other side of the x-ignore chat would be to allow devs to exclude components for inspection in production? Although having that set via env is probably better. I like the simplicity of just adding markup, but I take your point that not everyone is going to agree that it's a solution.

[HugoDF]

@KevinBatdorf what did we end up with for this?

My latest feel is that it's fine to add a hardcoded attribute to ignore the component as long as we make mention of it in the "settings" modal

[KevinBatdorf]

I was thinking to add it as an option so users could create a custom selector that we run though document.querySelectorAll() then ignore whatever the user enters.

The blocker being it's kind of clunky to have only one setting. But probably not a big deal.

Thoughts? I can probably work on it tomorrow or maybe Friday.

If you prefer to hard code it too, that's fine.

[HugoDF]

I was thinking to add it as an option so users could create a custom selector that we run though document.querySelectorAll() then ignore whatever the user enters.

The blocker being it's kind of clunky to have only one setting. But probably not a big deal.

Thoughts? I can probably work on it tomorrow or maybe Friday.

If you prefer to hard code it too, that's fine.

custom selector with a default to x-devtools-ignore or data-devtools-ignore sounds good 👍, document.querySelectorAll('[x-data]:not([x-devtools-ignore])') (will be interpolated probably) or we can look at the rootEls when we loop through in backend.js

No rush on this, trying to make sure there's a path forward for it.

[HugoDF]

Should we revive this for v3?

There's first-class x-ignore

[KevinBatdorf]

Depends how we plan on getting detecting components. Wouldn't it just be automatic?

We'd need to use another directive to hide it specifically from devtools