microsoft / microsoft/TypeScript
Support automatically updating URL import references when using `new URL(<file>, import.meta.url)`
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 132
Description
Bug Report
🔎 Search Terms
import.meta.url
🕗 Version & Regression Information
- This is the behavior in every version I tried, and I reviewed the FAQ for entries about 4.3.0
⏯ Playground Link
💻 Code
Given the following files:
folder/file1.ts
console.log('file1');
export const foo = 42;
different-folder/file2.ts
new URL('../folder/file1.js', import.meta.url);
import('../folder/file1.js');
export const bar = 5;
- Create a new directory
sub-folder/in root - Move
different-folder/intosub-folder/so that the layout becomessub-folder/different-folder/file2.ts - When prompted for "Update imports for 'different-folder'?" click "Yes"
🙁 Actual behavior
sub-folder/different-folder/file2.ts
new URL('../folder/file1.js', import.meta.url);
import('../../folder/file1.js');
export const bar = 5;
The same is true if folder/file1.js is moved to a different location.
🙂 Expected behavior
Similar to the dynamic import, a file reference based on import.meta.url that points to a different TypeScript file should correctly be renamed accordingly.
sub-folder/different-folder/file2.ts
new URL('../../folder/file1.js', import.meta.url);
import('../../folder/file1.js');
export const bar = 5;
VS Code supports the standard dynamic import to handle file renaming. Since import.meta.url and URL are a standard way of resolving files, I would expect VS Code to natively support it as well. For example, Parcel compatibility is implemented in https://github.com/parcel-bundler/parcel/issues/5473, is implemented in Webpack 5 https://github.com/webpack/webpack/pull/11075 and is scheduled for implementation in ESBuild https://github.com/evanw/esbuild/issues/312#issuecomment-800730525
This issue was originally filed at https://github.com/microsoft/vscode/issues/121391
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Workbench reproduction using new URL(<file>, import.meta.url) and compare it with the existing dynamic-import update behavior described in the report. Trace the VS Code import-renaming path that handles the move operation. Done means moving either referenced file updates the relative URL reference to the same target, matching dynamic imports.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vscode
- Domain
- developer-experience, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100