fix(optimizer): preserve sourcemaps for transformed optimized deps with follow-up transforms (#22428)

Author: Andarist

packages/vite/src/node/optimizer/index.ts

@@ -868,7 +868,7 @@ async function prepareRolldownOptimizerRun(
       return await bundle.write({
         ...rolldownOptions.output,
         format: 'esm',
-        sourcemap: true,
+        sourcemap: 'hidden',
         dir: processingCacheDir,
         entryFileNames: '[name].js',
       })

packages/vite/src/node/plugins/optimizedDeps.ts

@@ -85,7 +85,20 @@ export function optimizedDepsPlugin(): Plugin {
         // load hooks to avoid race conditions, once processing is resolved,
         // we are sure that the file has been properly save to disk
         try {
-          return await fsp.readFile(file, 'utf-8')
+          const [code, map] = await Promise.all([
+            fsp.readFile(file, 'utf-8'),
+            fsp
+              .readFile(`${file}.map`, 'utf-8')
+              .then((map) => JSON.parse(map))
+              .catch(() => null),
+          ])
+          if (map) {
+            return {
+              code,
+              map,
+            }
+          }
+          return code
         } catch {
           if (
             browserHash &&

playground/js-sourcemap/__tests__/js-sourcemap.spec.ts

@@ -2,6 +2,7 @@ import { URL, fileURLToPath } from 'node:url'
 import { promisify } from 'node:util'
 import { execFile } from 'node:child_process'
 import { existsSync } from 'node:fs'
+import { TraceMap, originalPositionFor } from '@jridgewell/trace-mapping'
 import { describe, expect, test } from 'vitest'
 import { mapFileCommentRegex } from 'convert-source-map'
 import { commentSourceMap } from '../foo-with-sourcemap-plugin'
@@ -16,12 +17,55 @@ import {
   serverLogs,
 } from '~utils'
 
-function createMapFileReader(moduleUrl: string) {
-  return async (filename: string): Promise<string> => {
-    const base = new URL(moduleUrl, page.url())
-    const res = await page.request.get(new URL(filename, base).href)
-    return res.text()
-  }
+const escapeRegexRE = /[-/\\^$*+?.()|[\]{}]/g
+function escapeRegex(str: string): string {
+  return str.replace(escapeRegexRE, '\\$&')
+}
+
+async function getDepJs(entry: string, depIdFragment: string) {
+  const res = await page.request.get(new URL(entry, page.url()).href)
+  const js = await res.text()
+  const depUrlMatch = js.match(
+    new RegExp(`from\\s+"([^"]*${depIdFragment}[^"]*)"`),
+  )
+  expect(depUrlMatch).toBeTruthy()
+
+  const depUrl = depUrlMatch![1]
+  expect(depUrl).toContain('/deps/')
+
+  const depRes = await page.request.get(new URL(depUrl, page.url()).href)
+  return depRes.text()
+}
+
+function expectConsoleLogArgumentMapsToOriginalX(
+  depJs: string,
+  generatedName: string,
+) {
+  const map = extractSourcemap(depJs)
+  const depLines = depJs.split('\n')
+  const consoleLogCallRE = new RegExp(
+    `console[\\w$]*\\.\\s*log[\\w$]*\\(${escapeRegex(generatedName)}\\)`,
+  )
+  const generatedLine =
+    depLines.findIndex((line) => consoleLogCallRE.test(line)) + 1
+  expect(generatedLine).toBeGreaterThan(0)
+
+  const generatedColumn = depLines[generatedLine - 1].indexOf(generatedName)
+  expect(generatedColumn).toBeGreaterThanOrEqual(0)
+
+  const position = originalPositionFor(new TraceMap(map), {
+    line: generatedLine,
+    column: generatedColumn,
+  })
+
+  expect(depJs).toMatch(
+    /^\/\/# sourceMappingURL=data:application\/json;base64,/m,
+  )
+  expect(position).toMatchObject({
+    line: 6,
+    column: 16,
+    name: 'x',
+  })
 }
 
 if (!isBuild) {
@@ -184,12 +228,39 @@ if (!isBuild) {
     expect(depUrl).toContain('.vite/deps')
     const depRes = await page.request.get(new URL(depUrl, page.url()).href)
     const depJs = await depRes.text()
-    const map = await extractSourcemap(depJs, createMapFileReader(depUrl))
+    expect(depJs).toMatch(
+      /^\/\/# sourceMappingURL=data:application\/json;base64,/m,
+    )
+    const map = extractSourcemap(depJs)
     expect(map.sourcesContent).toBeDefined()
     expect(map.sourcesContent).not.toContainEqual(
       expect.stringContaining('defineConfig'),
     )
   })
+
+  test('babel-transformed downleveled optimized dep maps to the correct original name', async () => {
+    const depJs = await getDepJs(
+      './optimized-class-field-import-babel.js',
+      'test-dep-class-field-sourcemap-babel',
+    )
+
+    expect(depJs).toContain('x = () => 1')
+    expect(depJs).toContain('constructor(_x)')
+    expect(depJs).toContain('console.log(_x)')
+    expectConsoleLogArgumentMapsToOriginalX(depJs, '_x')
+  })
+
+  test('oxc-transformed downleveled optimized dep maps to the correct original name', async () => {
+    const depJs = await getDepJs(
+      './optimized-class-field-import-oxc.js',
+      'test-dep-class-field-sourcemap-oxc',
+    )
+
+    expect(depJs).toContain('x$$$ = () => 1')
+    expect(depJs).toContain('constructor$$$(_x$$$)')
+    expect(depJs).toContain('console$$$.log$$$(_x$$$)')
+    expectConsoleLogArgumentMapsToOriginalX(depJs, '_x$$$')
+  })
 }
 
 describe.runIf(isBuild)('build tests', () => {

playground/js-sourcemap/dep-class-field-sourcemap-babel/index.js

@@ -0,0 +1,10 @@
+const x = () => 1
+
+class C {
+  prop = x()
+  constructor(x) {
+    console.log(x)
+  }
+}
+
+export { C }

playground/js-sourcemap/dep-class-field-sourcemap-babel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/test-dep-class-field-sourcemap-babel",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "index.js"
+}

playground/js-sourcemap/dep-class-field-sourcemap-oxc/index.js

@@ -0,0 +1,10 @@
+const x = () => 1
+
+class C {
+  prop = x()
+  constructor(x) {
+    console.log(x)
+  }
+}
+
+export { C }

playground/js-sourcemap/dep-class-field-sourcemap-oxc/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/test-dep-class-field-sourcemap-oxc",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "index.js"
+}

playground/js-sourcemap/index.html

@@ -13,3 +13,5 @@ <h1>JS Sourcemap</h1>
 <script type="module" src="./with-define-object.ts"></script>
 <script type="module" src="./malicious-import.js"></script>
 <script type="module" src="./optimized-malicious-import.js"></script>
+<script type="module" src="./optimized-class-field-import-babel.js"></script>
+<script type="module" src="./optimized-class-field-import-oxc.js"></script>

playground/js-sourcemap/optimized-class-field-import-babel.js

@@ -0,0 +1,3 @@
+import { C } from '@vitejs/test-dep-class-field-sourcemap-babel'
+
+console.log('optimized-class-field-import-babel', C)

playground/js-sourcemap/optimized-class-field-import-oxc.js

@@ -0,0 +1,3 @@
+import { C } from '@vitejs/test-dep-class-field-sourcemap-oxc'
+
+console.log('optimized-class-field-import-oxc', C)