sveltejs/language-tools

Add a code action to create undefined components (.svelte files)

Opened this issue · 1 comments

Description

I like to write out my HTML in a top-down direction. I start with a Parent component (say BarGraph.svelte) and then write out something like this:

<div id="bargraph">
     <Bar height="1"/>
     <Bar height="0.5"/>
     <Bar height="0.75"/>
</div>

(Let's ignore the fact that in this case it might make more sense to use <slot/> to include the Bar components, this is just an illustrative example.)

At this point, Bar.svelte does not exist, so I rightfully encounter the errors 'Bar' is not defined and Cannot find name 'Bar'.

Now, I am used to language servers giving me the option to generate the undefined file. But I don't seem to get the same option when trying to add new Svelte components using this workflow. Instead, I have to manually create the Child component (Bar), then get back to the Parent (Chart.svelte) to add the imports through a code action.

Proposed solution

Input:

I perform a code action while my cursor is on the <Bar \> tag, I would like to be able to be offered an option that says something along the lines of Create Bar.svelte in ...

Output:

This is what I expect to happen when I select that code action:

  1. For my editor, neovim, a floating window could pop up that asks me where I want to store the file. The default location could be the same directory as the Parent component. This is a path relative to the pwd.
  2. You could alter the file creation location by adjusting the prompt. The prompt also allows for absolute paths, and supports path aliases like $lib.
  3. When I then press Return/Enter I would
    i. create the file in the given directory,
    ii. add <script></script> tags to the Parent component (Chart.svelte) if not present already.
    iii. add an import statement using the exact path specified in the prompt to my Chart.svelte file.

(optional: prefferably the import statement would autocorrect to the $lib/ format if the file is in an aliased directory, but for now it would make most sense to just enter exactly what you entered in the prompt.)

Alternatives

No response

Additional Information, eg. Screenshots

No response

I looked into it and the "ask where to create file" part requires custom code in the language server client. The language server protocol currently doesn't have a way for the server to ask user input either as part of code action or a standalone request. If we were to do this, it'll probably default to the same directory and the client can intercept it to replace the target file path/module specifier in CodeAction.data.