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

Bắt đầu bằng cách xác định phần triển khai JS/TS Quick Fix đề xuất các static import và mọi cách xử lý hiện có cho dynamic import. Xác định các ngữ cảnh được hỗ trợ, hành vi của hàm async, việc hợp nhất các import trùng lặp và liệu có cần một flag hay không. Công việc được xem là hoàn tất khi hành vi đã thống nhất được triển khai và có coverage cho các biến thể Quick Fix được đề xuất.

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 } = ....