File auto-detection doesn't work for inline sourcemaps

[justingrant]

Type: Bug

When the VS Code JS debugger loads a source-mapped file, language auto-detection only works if the source file shown in the IDE debugger is loaded from a source file in node_modules. However, if the source file shown in the IDE is loaded via code in an inline sourcemap, then the file will be detected as JS, even if the filename in the sourcemap has a .ts extension and would be detected as TS code if pasted into an empty file.

Repro:

• npx create-react-app sourcemap-debug --template typescript
• cd sourcemap-debug
• File... Open Folder... and choose the new repo's folder
• Add the following code to App.tsx: (this library was written in TS and has its TS source inside its NPM package)

  import { decode } from '@jridgewell/sourcemap-codec';
  const ignore = decode('');

• Set a breakpoint on the second line of code above
• npm start
• Debug using the Web App (Chrome) debugger
• When the breakpoint stops, Step Into the library source. You'll see the library's source file correctly be auto-detected as TypeScript.
• Now stop the debugger
• Rename node_modules/@jridgewell/sourcemap-codec/src/sourcemap-codec.ts to something else, e.g. node_modules/@jridgewell/sourcemap-codec/src/sourcemap-codec.ts.hide. This will force VSCode to load the source from this package's inline sourcemap instead.
• Now start debugging again
• When the debugger stops at the breakpoint, Step In again.

Expected: Library's source file, like it was before, is detected as TS

Actual: Library's source file sourcemap_codec.ts is detected as JS, and there's a lot of errors shown in the Problems pane because TS code isn't valid JS.

You can easily validate that this isn't a language auto-detector problem alone, because when you Select All on the source file and copy that code into a blank file, then it's correctly detected as TypeScript.

VS Code version: Code 1.73.1 (Universal) (6261075646f055b99068d3688932416f2346dd3b, 2022-11-09T02:08:38.961Z) OS version: Darwin arm64 22.1.0 Modes: Sandboxed: No

System Info

|Item|Value| |---|---| |CPUs|Apple M1 Max (10 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: disabled_off| |Load (avg)|12, 18, 15| |Memory (System)|32.00GB (0.44GB free)| |Process Argv|--crash-reporter-id e32d4ffb-1630-4ccd-aaee-eaa6b19322ef| |Screen Reader|no| |VM|0%|

Extensions (23)

Extension|Author (truncated)|Version ---|---|--- vscode-color|ans|0.4.5 gitstash|art|5.1.0 vscode-tailwindcss|bra|0.9.1 vscode-eslint|dba|2.2.6 prettier-vscode|esb|9.10.3 vscode-rpc-server|hed|0.13.3 node-module-intellisense|lei|1.5.0 template-string-converter|meg|0.6.0 csharp|ms-|1.25.2 hexeditor|ms-|1.9.9 js-debug-nightly|ms-|2022.12.217 sqltools|mtx|0.26.0 sqltools-driver-pg|mtx|0.4.0 convert-css-in-js|pau|1.1.3 vscode-react-refactor|pla|1.1.3 ecmarkup-vscode|rbu|0.0.1 grammarkdown-language|rbu|0.3.3 tsserver-live-reload|rbu|1.0.1 html-to-jsx|ria|0.0.1 rewrap|stk|1.16.3 code-spell-checker|str|2.11.1 vscode-status-bar-format-toggle|tom|3.1.1 html-css-class-completion|Zig|1.20.0

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vswsl492cf:30256860 vstes627:30244334 vslsvsres303:30308271 pythonvspyl392:30443607 vserr242:30382549 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263cf:30335440 vscorecescf:30445987 pythondataviewer:30285071 vscod805cf:30301675 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 cmake_vspar411:30581797 vsaa593cf:30376535 pythonvs932:30410667 cppdebug:30492333 vsclangdf:30486550 c4g48928:30535728 dsvsc012cf:30540253 azure-dev_surveyone:30548225 pyindex848:30577860 nodejswelcome1cf:30587006 282f8724:30602487 gswce1:30612156 iaj6b796:30613358 dbltrim-noruby:30604474 f6dab269:30613381 ```

[connor4312]

I think this is just language detection kicking in. The DA doesn't transmit any information about the language of a source, and there's no field in DAP to do so.

[TylerLeonhardt]

You can easily validate that this isn't a language auto-detector problem alone, because when you Select All on the source file and copy that code into a blank file, then it's correctly detected as TypeScript.

@connor4312 did you see this? Also, since there's a .ts that shouldn't trigger ML auto-detection... though that, plus the first line in the file may trigger our regular ol' heuristic language detection.

Maybe we need @bpasero. @connor4312 how do you open this file?

[justingrant]

If it matters, here's the file itself: https://github.com/jridgewell/sourcemap-codec/blob/main/src/sourcemap-codec.ts

The first few lines are obviously TS (or, I guess, Flow):

export type SourceMapSegment =
  | [number]
  | [number, number, number, number]
  | [number, number, number, number, number];
export type SourceMapLine = SourceMapSegment[];
export type SourceMapMappings = SourceMapLine[];

One thing that's interesting: in this case, the sourcemap of @jridgewell/sourcemap-codec doesn't actually contain inline sources. Instead, inline sources when I debug my repro app seem to be loaded from a babel cache file in node_modules/.cache/babel-loader/f5c33fcf22e4d574d33ab842ee358fbac9d9eada3313c74bced334cb92e865d4.json.

I don't think this changes the behavior though. I've seen the same behavior in other packages that do include sources content inside the sourcemap file but don't include source files in the package. For example, I reproed the problem while testing a PR in the @js-temporal/polyfill repo that I help to maintain. The specific commit which exhibited the problem was this one: https://github.com/js-temporal/temporal-polyfill/pull/194/commits/4a6348bf39204c4064826573fb08451153b08874. Later commits in this PR won't repro the problem, because we added the source files to files in package.json.

Let me know if I can be helpful to repro this for you.

[connor4312]

ah, missed that. I don't see where we set the mode for debug resources. @roblourens do you know?

[roblourens]

Here https://github.com/microsoft/vscode/blob/acb9348ee9a3fc72f504055f49222d0711164b6b/src/vs/workbench/contrib/debug/common/debugContentProvider.ts#L134

[connor4312]

js-debug has just been hardcoding text/javascript 🤦 But we don't really know, we should let the editor makes its best guess instead of reimplementing that logic ourselves.

[roblourens]

I'm getting "plain text" for node internal files now. "Auto detect" picks javascript if I run it manually but I think it only runs automatically on untitled files?

[TylerLeonhardt]

What happened to the file extension?

[connor4312]

Ah, right. We do need to have the mimtype for those.

What happened to the file extension?

Those just come in as a source with a URL like node:internal/fs without an extension.