sveltejs / vite-plugin-svelte

Svelte plugin for http://vitejs.dev/
MIT License
843 stars 103 forks source link

Provide configuration option to exclude NodeModules / Libraries #889

Closed treethingy closed 4 months ago

treethingy commented 5 months ago

Describe the problem

The Inspector is awesome when designing "the live thing" together with a client. Since I switched to the sveltestraps library it's almost unusable for me because the inspector always references to the code within the sveltrestraps library, not my code where I wanted to get to make changes. Even navigating to the parent component doesn't work as eypected (I always end up in my +layout.svelte)

Describe the proposed solution

I'd really like some configuration property for ignoring any component that is located within "NodeModules".

Alternatives considered

Not using libraries like svletestraps would be a shame. Perhaps an option to show (and enable selection) of the full hierarchy when an component is selected, but this could get quite messy.

Importance

would make my life easier

treethingy commented 5 months ago

Maybe my understanding of the inspector might be wrong. Perhaps some part of my issue is related to #545 (not being able reach "my" file that contains the sveltestrap component. By adding a surrounding

I do indeed now get to the correct file and the div, but I'd rather be able to get into the actual content. e.g:

<script>
import {Button, Column, Table} from "@sveltestrap/sveltestrap";
let rows = [{name: "Hugo"},{name: "Steve"}]
</script>

<Table rows={rows} let:row>
  <Column header="Name">
     {row.name}
  </Column>
</Table>
<Button>Click Me</Button>

When pointing the inspector to the value of "row.name" it currently enters "Column.svlete" of sveltestraps, not it's slot (the {row.name}). So perhaps the solution might not be "filtering" (and therby flattening the hierarchy) but rather not going deep enough?

dominikg commented 5 months ago

files in node_modules should already be excluded. https://github.com/sveltejs/vite-plugin-svelte/blob/6c59572951e2f67293b7677ce86176b0c4bce13f/packages/vite-plugin-svelte-inspector/src/runtime/Inspector.svelte#L88

could you check what the filename in svelte_meta is for components that should not show up?

For the second issue, unfortunately svelte inspector can only use data provided by svelte in svelte_meta of elements, this means that individual text nodes like the slot content in your example won't be resolved to the file they are defined in, the closest parent elements file is what you'll get. This is a technical limitation right now.

dominikg commented 4 months ago

as explained above this feature already exists. If it doesn't work for you, please file an issue, including a link to a repository with a minimal reproduction.