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) (6261075, 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: js-temporal/temporal-polyfill@4a6348b. 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

vscode/src/vs/workbench/contrib/debug/common/debugContentProvider.ts

Line 134 in acb9348

const mime = response.body.mimeType || getMimeTypes(resource)[0];

[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.