[js/ts] Feature request: In Quick Fix menu, show also a dynamic import variant

Context

In JS/TS file, when using an identifier which is not found in the file, but is found somewhere else in the repo (e.g. another open file, or somewhere else), VSCode will show a Quick Fix (cmd-.) suggestion to import the file.

When followed, this will add a top-level static import

import { FOO_BAR } from 'web-ui/foobar';

Feature request

It would be useful for Quick Fix menu to also have a variant of a suggestion which would add a local, dynamic import(), which would be inserted just above the line where the identifier is first used:

So the menu would be like:

• Quick Fix
  • Add import from "web-ui/foobar"
  • Add dynamic import from "web-ui/foobar"

And the code would look like:

        if (doSomething) {
            const { FOO_BAR } = await import('web-ui/foobar'); 
            // or, depending on how the export is defined:
            // const { FOO_BAR } = (await import('web-ui/foobar')).default;
            const value = FOO_BAR;

Potential drawbacks

• If for every static import suggested, there's an equivalent dynamic import, the Quick Fix list may grow substantially, especially if FOO_BAR identifier is present in many files.

Open questions

• To be decided if the dynamic import suggestion would show up:

  • everywhere
  • or only in functions?
  • or only in functions and if blocks? etc.

• If a dynamic import is added in a function, should the function be converted to async function automatically?

• Perhaps the dynamic import variant could be behind a flag (enabled by default for discoverability; easy to disable if someone doesn't like it, and prefers to only have static imports in the quick fix)

Extra considerations

There might be already existing dynamic imports that could be amended. For example, say the code is:

        if (doSomething) {
            const { QUUX } = await import('web-ui/foobar'); 
            const value = FOO_BAR;

In that case, all dynamic imports in scope should be analyzed, and the editor should suggest to update the existing

const { QUUX } = await import('web-ui/foobar');

with const { FOO_BAR, QUUX } = ....

Beginne damit, die JS/TS Quick Fix-Implementierung zu finden, die statische Importe vorschlägt, sowie eine eventuell vorhandene Behandlung dynamischer Importe. Ermittle die unterstützten Kontexte, das Verhalten bei async-Funktionen, das Zusammenführen doppelter Importe und ob ein Flag erforderlich ist. Als erledigt gilt die Aufgabe, wenn das vereinbarte Verhalten implementiert ist und die vorgeschlagenen Quick Fix-Varianten abgedeckt sind.