Go to References - Where Imports Used

[Jojoshua]

Description

I'm always frustrated when I always have to do a global file search in VSCode (ctrl + shift +F) in order to find out where a particular svelte component is used throughout the codebase. I do not assume it is imported with the same name so I will search by its path that I would expect to be in the import from

For example, given the example repo when I do a "Where Used" on Button.svelte, I would expect to see the following references

• App.svelte
  • import Button from "./Button.svelte";
• main.ts
  • import Button from "./Button.svelte";

Proposed solution

1. A new menu item when you right click a .svelte file in the Explorer view named something like "Go To References" , "Find Imports", "Where Used"
   

Running the command would then provide you a similar window as below and drilling inside the folder structure would show you the import statement for the component (blue line)

2. Right clicking inside the white area of a .svelte file to provide the same menu option

Alternatives

Global VScode search in all files

Additional Information, eg. Screenshots

Sample repo https://github.com/Jojoshua/sveltejs-where-imports-used

• Similar to Go to References - to where the component is used #1210 but I am not expecting to see where the Components themselves are used in the HTML sections, only the imports sections so I can get an idea of my overall architecture

Reference #1484

[jasonlyu123]

Looks similar to the typescript find file references feature. We could probably port the feature. Some pointers if you're interested in implementing it.

We can reference the core feature in https://github.com/microsoft/vscode/blob/main/extensions/typescript-language-features/src/languageFeatures/fileReferences.ts

This is not an LSP standard feature. So we need to do something similar to https://github.com/sveltejs/language-tools/blob/1a84dc3118658aabe7136f49997a4ea4253cc09e/packages/svelte-vscode/src/extension.ts#L344 to send a custom request to the language server. This should replace the client.execute call in the typescript extension.

And on the language-server side. Add a class in the packages/language-server/src/plugins/typescript/features like the FindReferencesProvider. The API for this is lang.getFileReferences. And we can convert results to Location[] like FindReferencesProvider.

[Jojoshua]

So we need to do something similar to https://github.com/sveltejs/language-tools/blob/1a84dc3118658aabe7136f49997a4ea4253cc09e/packages/svelte-vscode/src/extension.ts#L344 to send a custom request to the language server.

@jasonlyu123 could you post that url again, github is returning a 404 for me. I want to be helpful and try to implement this but definitely a little apprehensive about knowing nothing about the terminology, the codebase, and its history. Nevertheless, I'll see what I can do to help.

[jasonlyu123]

language-tools/packages/svelte-vscode/src/extension.ts

Line 343 in abac29d

const editsForFileRename = await getLS().sendRequest<LSWorkspaceEdit | null>(

Sorry, I probably copied a local branch lol.

I can try to explain it more. LSP is short for language-server-protocal is a protocol for an editor to communicate with a language server in another thread/process for the language features. It's kind of like the API server and browser client in the web world.

The vscode typescript extension doesn't use LSP. They use tsserver which is a custom language server that uses a similar concept. We don't use tsserver for typescript features but use typescript-language-service which is a lower-level API that the tsserver also runs on.

Because the find file reference feature is a custom feature by the typescript extension. It's not in the LSP. We need to copy some of the code that runs on the VSCode side. To listen for the context menu command and invoke the UI. And port this calculation code to the language-server-side.

https://github.com/microsoft/vscode/blob/5f3e9c120a4407de3e55465588ce788618526eb0/extensions/typescript-language-features/src/languageFeatures/fileReferences.ts#L59-L68

To achieve that we need to add a custom endpoint in the language server to receive the custom request and wire it to the feature class. And that is what the link I misplaced is for.

[Jojoshua]

language-tools/packages/svelte-vscode/src/extension.ts

Line 343 in abac29d

const editsForFileRename = await getLS().sendRequest<LSWorkspaceEdit | null>(

Sorry, I probably copied a local branch lol.

I can try to explain it more. LSP is short for language-server-protocal is a protocol for an editor to communicate with a language server in another thread/process for the language features. It's kind of like the API server and browser client in the web world.

The vscode typescript extension doesn't use LSP. They use tsserver which is a custom language server that uses a similar concept. We don't use tsserver for typescript features but use typescript-language-service which is a lower-level API that the tsserver also runs on.

Because the find file reference feature is a custom feature by the typescript extension. It's not in the LSP. We need to copy some of the code that runs on the VSCode side. To listen for the context menu command and invoke the UI. And port this calculation code to the language-server-side.

https://github.com/microsoft/vscode/blob/5f3e9c120a4407de3e55465588ce788618526eb0/extensions/typescript-language-features/src/languageFeatures/fileReferences.ts#L59-L68

To achieve that we need to add a custom endpoint in the language server to receive the custom request and wire it to the feature class. And that is what the link I misplaced is for.

@jasonlyu123 I tried to understand what you said and begin with #1491 Is this sortof what you had in mind? There is still missing code and may need help proceeding.