Improve component references experience

[brunnerh]

Description

There currently is no intuitive way to find references to a component from within the component.

• One has to know about the special command Svelte: Find Component References
• The regular commands do not work:
  • Go to References (would be equivalent to above command)
  • References: Find All References (has no equivalent, shows references in the side bar)

Proposed solution

• Add a lens at the top of the component file that behaves like that in JS/TS files
  
  • If the count cannot easily be determined dynamically it could just say "Go to references"
  • Essentially already implemented as Svelte: Find Component References
• If there is a way to make the standard commands work, integrate them.
  Since those can be used on other symbols, I was thinking that maybe with the cursor on the <script> tag it could search for component references. Of course still not ideal, as components can just omit that entirely as well...
• If standard commands can not be integrated, maybe add a separate Svelte: ... command that shows references in the side bar, not sure if that is possible either, though.

Alternatives

Stick with Svelte: Find Component References and global search, if a more persistent list is required (e.g. for checking every single usage site).

Additional Information, eg. Screenshots

No response

[jasonlyu123]

We didn't use the normal command but created a "Svelte: Find Component References" because find-reference is triggered from a symbol. But there isn't a symbol to trigger. Using the script tag as the trigger could work; we already do that in "show call hierarchy". Does that feel more intuitive to you? Or do you want References: Find All References to work? If you always prefer a sidebar reference. You could use the "references.preferredLocation": "view" config to make "Svelte: Find Component References" shows up in the sidebar. We didn't make it always does that because of #1516.

And about code len, the typescript reference code len is disabled by default, probably due to performance concerns. If we add the support, we would probably disable it by default. That might not help with feature discovery.

[brunnerh]

Ideally both types of reference view should work, I specifically did not set references.preferredLocation because depending on use case there are advantages to both. If I just want to go to one specific usage the "peek" view is more straightforward, if I need to check or adjust all usages, the view is better, as it persists after navigation.

If the two commands Go to References & References: Find All References would work on <script> that would be great, but having separate commands that can be triggered anywhere in the component would be nice too, especially since they would always work and you do not need to know that you have to put the cursor on <script>.