not well motivated by IDE support

[michaelficarra]

The claimed motivation for this proposal is IDE support, but IDEs already have solutions for exactly this stated problem. @jridgewell has explained it very well over on TC39 Discourse.

[bmeck]

That still causes left to right typing issues and collides with tab completion on RHS of that position which now is looking to be populated by module attributes. I agree things can be configured in various ways, but quick searches of social media do show programmers having problems with this. We shouldn't disregard all those who have issues, nor should we disregard the collision with future syntax possibilities. If a solution can be well propagated I think it would have done so by now. Even popular editors don't support this syntax in the way mentioned above out of the box.

[bmeck]

@michaelficarra to clarify, if people are consistently requesting this and tooling does not support this consistently/by default due to various reasons would gathering a listing reasons tools do not do the proposed workaround workflow be enough to provide evidence of motivation for you?

[michaelficarra]

If tools are opting to not do the workflow described by @jridgewell, hearing the reasons they don't could make me understand the motivation better, yes.

[bmeck]

@michaelficarra I've opened up #2 to see if any tool does do that workflow and #3 to gather comments about issues people are having. I will try and figure out how to directly sort responses from editors, but that is likely a difficult communication channel to establish.

[michaelficarra]

Apparently VS Code has the ability to define snippets in the way @jridgewell describes.

From @rauschma: https://twitter.com/rauschma/status/1221131422641070081

[bmeck]

@michaelficarra they autocomplete only after you populate the RHS, which is somewhat the issue at hand.

// -> ltr typing
import {} from 'lib'|
// <- rewind to useful position
import {|} from 'lib'
// -> forward to useful position
import {} from 'lib'|

and

// no useful completions
// there is a builtin snippet for vscode here but not by default completion
// snippet replays workflow and rewind/forward as above
import |

vs

// -> continuous ltr typing
from 'lib' import |

[jridgewell]

(note, I don't currently use an IDE so I'm not getting auto-completion anyways…)

When using snippets, I've never been bothered by the backwards jumping with tab completion. I just hit tab and it goes directly to where I wanted.

[jasonwilliams]

There has been some discussion in the typescript team about using your package.json to see all the exports available, then filtering them down inside the {}, then auto completing the rest of the line based on what you pick.

microsoft/TypeScript#31658

[andrewbranch]

The TL;DR of the TypeScript discussion @jasonwilliams just linked is that we would like to be able to offer useful completions for a whole import statement at import |, but doing so with reasonable performance can be difficult. We can quickly gather every possible export you might want to import, but complexities arising from symlinks (e.g. from lerna), node-style module resolution, and some TypeScript project-related things (project references and path mapping aliases) mean there may be many different possible module specifiers for each potential import, and discovering them all and choosing the best one can be expensive. (Normally, when we offer auto imports, we do all this work as lazily as possible, waiting until a specific import completion is focused within the list. That’s not an option here, because in this case the insertion is happening at the text insertion cursor, not somewhere else in the document.)

It’s still a feature we’re looking at, but it has proven more difficult than we initially thought it would be, and I’m not yet confident we can always provide a great UX here.

[bmeck]

@andrewbranch can we summarize that to the current syntax being problematic? It seems like this would be an issue with this proposal too if someone wrote from import |. and left the specifier out.

[andrewbranch]

I guess that would be problematic, but I think the idea is that users generally wouldn’t write that. I’m assuming the syntax order will have some positive correlation with the order that most users incrementally write out an import statement, and it is much easier for us to give useful completions for exported identifiers when we already know the module specifier. I think in a hypothetical world where from "..." import ... exists, we would probably not give any completions at from import |, but I would be surprised if users found themselves in that situation frequently. After all, if a user wants to import something by a known name but doesn’t know the module specifier at all, they can use our existing auto-import functionality (just start typing an identifier reference and we’ll try to figure out the right import statement). If a user starts typing an import statement by hand, we think they likely have some idea how they’re going to finish it.

[bmeck]

@jridgewell ^

[hsablonniere]

Hey everyone,

I've been doing what @jridgewell describes for a few years now.
Because of this, I was thinking "we don't really need this in the language" as it can be solved/done in IDEs right now.

Following a discussion with @bmeck on Twitter, I realized that while this is possible with an my IDE and some config, most people struggle with this and most IDEs don't provide a default and simple way to do this. So I agree this proposal would benefit most users in a standard way.

In the mean time, and because I think a video demo is better than a description, here's what I have with WebStorm and a custom "live template" (it's how they call snippets).

2021-05-14.17-39-05.mp4

Details

• I trigger the live template with ii and then tab (I use i for simple imports).
• I have the same for const {} = require(); with rr.
• I can validate a choice with tab or enter.
• I can go back to the import specifier with shift+tab.

I had to create this live template in the settings like this:

And I had to reorder the parts like this so it focuses in the right order:

Cheers 😉

[andrewbranch]

As an update, TypeScript 4.3 is shipping with the feature mentioned earlier by @jasonwilliams.

https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/#import-statement-completions

Screen capture 📽