test: add js sourcemap tests (#7494)

packages/playground/css-sourcemap/__tests__/serve.spec.ts

@@ -1,11 +1,11 @@
-import { fromComment } from 'convert-source-map'
 import { URL } from 'url'
-import { normalizePath } from 'vite'
-import { isBuild, testDir } from 'testUtils'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
 
 if (!isBuild) {
-  const root = normalizePath(testDir)
-
   const getStyleTagContentIncluding = async (content: string) => {
     const styles = await page.$$('style')
     for (const style of styles) {
@@ -17,19 +17,6 @@ if (!isBuild) {
     throw new Error('Not found')
   }
 
-  const extractSourcemap = (content: string) => {
-    const lines = content.trim().split('\n')
-    return fromComment(lines[lines.length - 1]).toObject()
-  }
-
-  const formatSourcemapForSnapshot = (map: any) => {
-    const m = { ...map }
-    delete m.file
-    delete m.names
-    m.sources = m.sources.map((source) => source.replace(root, '/root'))
-    return m
-  }
-
   test('inline css', async () => {
     const css = await getStyleTagContentIncluding('.inline ')
     const map = extractSourcemap(css)

packages/playground/css-sourcemap/package.json

@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "convert-source-map": "^1.8.0",
     "less": "^4.1.2",
     "magic-string": "^0.25.7",
     "sass": "^1.43.4",

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

@@ -0,0 +1,13 @@
+import { isBuild } from 'testUtils'
+
+if (isBuild) {
+  test('should not output sourcemap warning (#4939)', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch('Sourcemap is likely to be incorrect')
+    })
+  })
+} else {
+  test('this file only includes test for build', () => {
+    expect(true).toBe(true)
+  })
+}

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

@@ -0,0 +1,44 @@
+import { URL } from 'url'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
+
+if (!isBuild) {
+  test('js', async () => {
+    const res = await page.request.get(new URL('./foo.js', page.url()).href)
+    const js = await res.text()
+    const lines = js.split('\n')
+    expect(lines[lines.length - 1].includes('//')).toBe(false) // expect no sourcemap
+  })
+
+  test('ts', async () => {
+    const res = await page.request.get(new URL('./bar.ts', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": "AAAO,aAAM,MAAM;",
+        "sources": Array [
+          "/root/bar.ts",
+        ],
+        "sourcesContent": Array [
+          "export const bar = 'bar'
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
+  test('should not output missing source file warning', () => {
+    serverLogs.forEach((log) => {
+      expect(log).not.toMatch(/Sourcemap for .+ points to missing source files/)
+    })
+  })
+} else {
+  test('this file only includes test for serve', () => {
+    expect(true).toBe(true)
+  })
+}

packages/playground/js-sourcemap/bar.ts

@@ -0,0 +1 @@
+export const bar = 'bar'

packages/playground/js-sourcemap/foo.js

@@ -0,0 +1 @@
+export const foo = 'foo'

packages/playground/js-sourcemap/index.html

@@ -0,0 +1,6 @@
+<div class="wrapper">
+  <h1>JS Sourcemap</h1>
+</div>
+
+<script type="module" src="./foo.js"></script>
+<script type="module" src="./bar.ts"></script>

packages/playground/js-sourcemap/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "test-js-sourcemap",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "preview": "vite preview"
+  }
+}

packages/playground/js-sourcemap/vite.config.js

@@ -0,0 +1,8 @@
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  build: {
+    sourcemap: true
+  }
+}

packages/playground/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "devDependencies": {
+    "convert-source-map": "^1.8.0",
     "css-color-names": "^1.0.1"
   }
 }

packages/playground/testUtils.ts

@@ -6,7 +6,8 @@ import fs from 'fs'
 import path from 'path'
 import colors from 'css-color-names'
 import type { ElementHandle } from 'playwright-chromium'
-import type { Manifest } from 'vite'
+import { Manifest, normalizePath } from 'vite'
+import { fromComment } from 'convert-source-map'
 
 export function slash(p: string): string {
   return p.replace(/\\/g, '/')
@@ -138,3 +139,17 @@ export async function untilUpdated(
  * Send the rebuild complete message in build watch
  */
 export { notifyRebuildComplete } from '../../scripts/jestPerTestSetup'
+
+export const extractSourcemap = (content: string) => {
+  const lines = content.trim().split('\n')
+  return fromComment(lines[lines.length - 1]).toObject()
+}
+
+export const formatSourcemapForSnapshot = (map: any) => {
+  const root = normalizePath(testDir)
+  const m = { ...map }
+  delete m.file
+  delete m.names
+  m.sources = m.sources.map((source) => source.replace(root, '/root'))
+  return m
+}

packages/playground/vue-sourcemap/Js.vue

@@ -0,0 +1,11 @@
+<template>
+  <p>&lt;js&gt;</p>
+</template>
+
+<script>
+console.log('script')
+</script>
+
+<script setup>
+console.log('setup')
+</script>

packages/playground/vue-sourcemap/Main.vue

@@ -1,5 +1,7 @@
 <template>
   <h1>Vue SFC Sourcemap</h1>
+  <Js />
+  <Ts />
   <Css />
   <Sass />
   <SassWithImport />
@@ -8,6 +10,8 @@
 </template>
 
 <script setup lang="ts">
+import Js from './Js.vue'
+import Ts from './Ts.vue'
 import Css from './Css.vue'
 import Sass from './Sass.vue'
 import SassWithImport from './SassWithImport.vue'

packages/playground/vue-sourcemap/Ts.vue

@@ -0,0 +1,11 @@
+<template>
+  <p>&lt;ts&gt;</p>
+</template>
+
+<script lang="ts">
+console.log('ts script')
+</script>
+
+<script lang="ts" setup>
+console.log('ts setup')
+</script>

packages/playground/vue-sourcemap/__tests__/serve.spec.ts

@@ -1,10 +1,11 @@
-import { fromComment } from 'convert-source-map'
-import { normalizePath } from 'vite'
-import { isBuild, testDir } from 'testUtils'
+import {
+  extractSourcemap,
+  formatSourcemapForSnapshot,
+  isBuild
+} from 'testUtils'
+import { URL } from 'url'
 
 if (!isBuild) {
-  const root = normalizePath(testDir)
-
   const getStyleTagContentIncluding = async (content: string) => {
     const styles = await page.$$('style')
     for (const style of styles) {
@@ -16,18 +17,63 @@ if (!isBuild) {
     throw new Error('Not found')
   }
 
-  const extractSourcemap = (content: string) => {
-    const lines = content.trim().split('\n')
-    return fromComment(lines[lines.length - 1]).toObject()
-  }
+  test('js', async () => {
+    const res = await page.request.get(new URL('./Js.vue', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": "AAKA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;wBARlB,oBAAiB,WAAd,MAAU",
+        "sources": Array [
+          "/root/Js.vue",
+        ],
+        "sourcesContent": Array [
+          "<template>
+        <p>&lt;js&gt;</p>
+      </template>
 
-  const formatSourcemapForSnapshot = (map: any) => {
-    const m = { ...map }
-    delete m.file
-    delete m.names
-    m.sources = m.sources.map((source) => source.replace(root, '/root'))
-    return m
-  }
+      <script>
+      console.log('script')
+      </script>
+
+      <script setup>
+      console.log('setup')
+      </script>
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
+
+  test('ts', async () => {
+    const res = await page.request.get(new URL('./Ts.vue', page.url()).href)
+    const js = await res.text()
+    const map = extractSourcemap(js)
+    expect(formatSourcemapForSnapshot(map)).toMatchInlineSnapshot(`
+      Object {
+        "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
+        "sources": Array [
+          "/root/Ts.vue",
+        ],
+        "sourcesContent": Array [
+          "<template>
+        <p>&lt;ts&gt;</p>
+      </template>
+
+      <script lang=\\"ts\\">
+      console.log('ts script')
+      </script>
+
+      <script lang=\\"ts\\" setup>
+      console.log('ts setup')
+      </script>
+      ",
+        ],
+        "version": 3,
+      }
+    `)
+  })
 
   test('css', async () => {
     const css = await getStyleTagContentIncluding('.css ')

packages/playground/vue-sourcemap/package.json

@@ -10,7 +10,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",
-    "convert-source-map": "^1.8.0",
     "less": "^4.1.2",
     "sass": "^1.43.4"
   },