Language-tools: Support importing Svelte components without extension

Created on 23 Sep 2020  ·  5Comments  ·  Source: sveltejs/language-tools

Is your feature request related to a problem? Please describe.

I have some complex components with many subcomponents. The subcomponents are private and come together to make one large component.

Here's an example:

form/
  input.svelte
  textarea.svelte
  index.svelte
  radio.svelte
  checkbox.svelte

Describe the solution you'd like

I'd like to be able to resolve form/ to form/index.svelte rather than explicitly writing form/index.svelte.

I think this plugin by default should follow node.js-style resolution for files that have the .svelte extension.

form/             => form/index.svelte
form/input        => form/input.svelte (or form/input/index.svelte)
form/input.svelte => form/input.svelte
enhancement

Most helpful comment

In case you want to know Rich's feelings on this: https://twitter.com/Rich_Harris/status/1002959357250801664 - and those are also the same as Ryan Dahl, creator of Node.

I too agree. Just because you can resolve files without an extension, doesn't mean you should.

All 5 comments

I'm against this, because you then have no distinction anymore which file is a Svelte file and which file is a normal file. What happens if you have index.js and index.svelte in the same folder? What should be imported? This would be a breaking change. Also it is not supported by the bundlers either as far as I know.

For your specific case, I suggest to add a index.js with the following contents:

export { default as Index } from './index.svelte';
// ... you can add your other Svelte files here as well

And then import it like

<script>
   import { Index } from './form';
</script>

Thanks for your response. I'd like to double-check that we're on the same page because I didn't consider this issue to be very controversial.

I'm asking for the ability to resolve Svelte files the same way you resolve any Javascript, Typescript, JSX, or TSX file.

In the same way you don't need to add the extension in Typescript or React projects:

import A from "./a.ts"
// you can just do
import A from "./a"

The VSCode typescript resolver follows the Node.js resolution rules. Your point is super valid when we're talking about designing Node's Resolution rules. I agree with you on being more restrictive.

But given that ship has sailed, what makes the .svelte extension any different than the .ts, .tsx, .jsx extensions?

Skipping extensions is historically an idiosyncrasy of Node's resolution mechanism. Npm's Isaac Z. Schlueter who, I guess, had been involved in the discussion at the time, has since expressed regret about it. And he was met with incomprehension in the comments to his post. Rest assured this is surely a very controversial topic.

Standard ESM imports have nothing in the sense of skipping extensions, and that's the direction Svelte (and Rollup) tend to align with, by default.

That being said, that's purely a concern of the bundler you use. If I remember correctly, with Webpack .svelte extension is optional by default. And in Rollup, it's an option of the node-resolve plugin.

That being said, that's purely a concern of the bundler you use. If I remember correctly, with Webpack .svelte extension is optional by default. And in Rollup, it's an option of the node-resolve plugin.

Interesting, I did not know that the extension is optional by default in the webpack plugin.

Supporting this would mean changing the way module resolution is done in the language-server, and possibly other things. Also, it would need to be a setting so that people can declare whether or not they want this behavior - after all, they might need to change their build config as well if they want Svelte imports written without .svelte.

I'll reopen so others can weigh in on this.

In case you want to know Rich's feelings on this: https://twitter.com/Rich_Harris/status/1002959357250801664 - and those are also the same as Ryan Dahl, creator of Node.

I too agree. Just because you can resolve files without an extension, doesn't mean you should.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

baileyherbert picture baileyherbert  ·  3Comments

johanbissemattsson picture johanbissemattsson  ·  4Comments

PatrickG picture PatrickG  ·  3Comments

koddr picture koddr  ·  6Comments

matthewmueller picture matthewmueller  ·  3Comments