From c96c2a47625e866b74d45b1b7fc8f96bc6eea655 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Mon, 28 Mar 2022 20:55:38 +0900 Subject: [PATCH 1/3] test: add js sourcemap test --- .../js-sourcemap/__tests__/build.spec.ts | 13 +++++ .../js-sourcemap/__tests__/serve.spec.ts | 57 +++++++++++++++++++ packages/playground/js-sourcemap/bar.ts | 1 + packages/playground/js-sourcemap/foo.js | 1 + packages/playground/js-sourcemap/index.html | 6 ++ packages/playground/js-sourcemap/package.json | 14 +++++ .../playground/js-sourcemap/vite.config.js | 8 +++ pnpm-lock.yaml | 6 ++ 8 files changed, 106 insertions(+) create mode 100644 packages/playground/js-sourcemap/__tests__/build.spec.ts create mode 100644 packages/playground/js-sourcemap/__tests__/serve.spec.ts create mode 100644 packages/playground/js-sourcemap/bar.ts create mode 100644 packages/playground/js-sourcemap/foo.js create mode 100644 packages/playground/js-sourcemap/index.html create mode 100644 packages/playground/js-sourcemap/package.json create mode 100644 packages/playground/js-sourcemap/vite.config.js diff --git a/packages/playground/js-sourcemap/__tests__/build.spec.ts b/packages/playground/js-sourcemap/__tests__/build.spec.ts new file mode 100644 index 00000000000000..e36c1f52d2c1f8 --- /dev/null +++ b/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) + }) +} diff --git a/packages/playground/js-sourcemap/__tests__/serve.spec.ts b/packages/playground/js-sourcemap/__tests__/serve.spec.ts new file mode 100644 index 00000000000000..72e077ac8efd83 --- /dev/null +++ b/packages/playground/js-sourcemap/__tests__/serve.spec.ts @@ -0,0 +1,57 @@ +import { fromComment } from 'convert-source-map' +import { URL } from 'url' +import { normalizePath } from 'vite' +import { isBuild, testDir } from 'testUtils' + +if (!isBuild) { + const root = normalizePath(testDir) + + 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('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) + }) +} diff --git a/packages/playground/js-sourcemap/bar.ts b/packages/playground/js-sourcemap/bar.ts new file mode 100644 index 00000000000000..1fc11814f22e80 --- /dev/null +++ b/packages/playground/js-sourcemap/bar.ts @@ -0,0 +1 @@ +export const bar = 'bar' diff --git a/packages/playground/js-sourcemap/foo.js b/packages/playground/js-sourcemap/foo.js new file mode 100644 index 00000000000000..cb356468240d50 --- /dev/null +++ b/packages/playground/js-sourcemap/foo.js @@ -0,0 +1 @@ +export const foo = 'foo' diff --git a/packages/playground/js-sourcemap/index.html b/packages/playground/js-sourcemap/index.html new file mode 100644 index 00000000000000..025b161011a3fa --- /dev/null +++ b/packages/playground/js-sourcemap/index.html @@ -0,0 +1,6 @@ +
+

JS Sourcemap

+
+ + + diff --git a/packages/playground/js-sourcemap/package.json b/packages/playground/js-sourcemap/package.json new file mode 100644 index 00000000000000..4bca70887a56a0 --- /dev/null +++ b/packages/playground/js-sourcemap/package.json @@ -0,0 +1,14 @@ +{ + "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" + }, + "devDependencies": { + "convert-source-map": "^1.8.0" + } +} diff --git a/packages/playground/js-sourcemap/vite.config.js b/packages/playground/js-sourcemap/vite.config.js new file mode 100644 index 00000000000000..bc9d1748cab964 --- /dev/null +++ b/packages/playground/js-sourcemap/vite.config.js @@ -0,0 +1,8 @@ +/** + * @type {import('vite').UserConfig} + */ +module.exports = { + build: { + sourcemap: true + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a09304a6c8f50d..e022230334c358 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -223,6 +223,12 @@ importers: packages/playground/html: specifiers: {} + packages/playground/js-sourcemap: + specifiers: + convert-source-map: ^1.8.0 + devDependencies: + convert-source-map: 1.8.0 + packages/playground/json: specifiers: json-module: file:./json-module From b855ed419f8dbbfbbc7fa5c73a9366c79a6fa5f4 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Mon, 28 Mar 2022 21:03:40 +0900 Subject: [PATCH 2/3] test: add vue script sourcemap test --- packages/playground/vue-sourcemap/Js.vue | 11 ++++ packages/playground/vue-sourcemap/Main.vue | 4 ++ packages/playground/vue-sourcemap/Ts.vue | 11 ++++ .../vue-sourcemap/__tests__/serve.spec.ts | 59 +++++++++++++++++++ 4 files changed, 85 insertions(+) create mode 100644 packages/playground/vue-sourcemap/Js.vue create mode 100644 packages/playground/vue-sourcemap/Ts.vue diff --git a/packages/playground/vue-sourcemap/Js.vue b/packages/playground/vue-sourcemap/Js.vue new file mode 100644 index 00000000000000..3a5577099f67d3 --- /dev/null +++ b/packages/playground/vue-sourcemap/Js.vue @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/playground/vue-sourcemap/Main.vue b/packages/playground/vue-sourcemap/Main.vue index 04ddf50071ccb3..b9b03596f5aea5 100644 --- a/packages/playground/vue-sourcemap/Main.vue +++ b/packages/playground/vue-sourcemap/Main.vue @@ -1,5 +1,7 @@ + + diff --git a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts index 193b0afb9ba73f..43962718ba3a16 100644 --- a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts @@ -1,6 +1,7 @@ import { fromComment } from 'convert-source-map' import { normalizePath } from 'vite' import { isBuild, testDir } from 'testUtils' +import { URL } from 'url' if (!isBuild) { const root = normalizePath(testDir) @@ -29,6 +30,64 @@ if (!isBuild) { return m } + 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 [ + " + + + + + ", + ], + "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 [ + " + + + + + ", + ], + "version": 3, + } + `) + }) + test('css', async () => { const css = await getStyleTagContentIncluding('.css ') const map = extractSourcemap(css) From c1a62b557b8223060097be1a5b82291583349b58 Mon Sep 17 00:00:00 2001 From: sapphi-red Date: Mon, 28 Mar 2022 21:11:43 +0900 Subject: [PATCH 3/3] refactor(test): move sourcemap util functions to testUtil --- .../css-sourcemap/__tests__/serve.spec.ts | 23 ++++--------------- .../playground/css-sourcemap/package.json | 1 - .../js-sourcemap/__tests__/serve.spec.ts | 23 ++++--------------- packages/playground/js-sourcemap/package.json | 3 --- packages/playground/package.json | 1 + packages/playground/testUtils.ts | 17 +++++++++++++- .../vue-sourcemap/__tests__/serve.spec.ts | 23 ++++--------------- .../playground/vue-sourcemap/package.json | 1 - pnpm-lock.yaml | 11 +++------ 9 files changed, 35 insertions(+), 68 deletions(-) diff --git a/packages/playground/css-sourcemap/__tests__/serve.spec.ts b/packages/playground/css-sourcemap/__tests__/serve.spec.ts index 0c6696b0dff7a2..11e33a78af8424 100644 --- a/packages/playground/css-sourcemap/__tests__/serve.spec.ts +++ b/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) diff --git a/packages/playground/css-sourcemap/package.json b/packages/playground/css-sourcemap/package.json index c29f18d4dee0d7..c7e9e61372cefa 100644 --- a/packages/playground/css-sourcemap/package.json +++ b/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", diff --git a/packages/playground/js-sourcemap/__tests__/serve.spec.ts b/packages/playground/js-sourcemap/__tests__/serve.spec.ts index 72e077ac8efd83..a1ffdddc37ecd5 100644 --- a/packages/playground/js-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/js-sourcemap/__tests__/serve.spec.ts @@ -1,24 +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 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('js', async () => { const res = await page.request.get(new URL('./foo.js', page.url()).href) const js = await res.text() diff --git a/packages/playground/js-sourcemap/package.json b/packages/playground/js-sourcemap/package.json index 4bca70887a56a0..e5a97aea80830f 100644 --- a/packages/playground/js-sourcemap/package.json +++ b/packages/playground/js-sourcemap/package.json @@ -7,8 +7,5 @@ "build": "vite build", "debug": "node --inspect-brk ../../vite/bin/vite", "preview": "vite preview" - }, - "devDependencies": { - "convert-source-map": "^1.8.0" } } diff --git a/packages/playground/package.json b/packages/playground/package.json index 58ef368099e82f..75b1d15d299319 100644 --- a/packages/playground/package.json +++ b/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" } } diff --git a/packages/playground/testUtils.ts b/packages/playground/testUtils.ts index 0c8186d4ed121d..7d21625dacf874 100644 --- a/packages/playground/testUtils.ts +++ b/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 +} diff --git a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts index 43962718ba3a16..08b4c04face111 100644 --- a/packages/playground/vue-sourcemap/__tests__/serve.spec.ts +++ b/packages/playground/vue-sourcemap/__tests__/serve.spec.ts @@ -1,11 +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) { @@ -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('js', async () => { const res = await page.request.get(new URL('./Js.vue', page.url()).href) const js = await res.text() diff --git a/packages/playground/vue-sourcemap/package.json b/packages/playground/vue-sourcemap/package.json index 5672b5e3d9d57d..286940b01efa58 100644 --- a/packages/playground/vue-sourcemap/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e022230334c358..def6f1a526907f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,8 +92,10 @@ importers: packages/playground: specifiers: + convert-source-map: ^1.8.0 css-color-names: ^1.0.1 devDependencies: + convert-source-map: 1.8.0 css-color-names: 1.0.1 packages/playground/alias: @@ -152,13 +154,11 @@ importers: packages/playground/css-sourcemap: specifiers: - convert-source-map: ^1.8.0 less: ^4.1.2 magic-string: ^0.25.7 sass: ^1.43.4 stylus: ^0.55.0 devDependencies: - convert-source-map: 1.8.0 less: 4.1.2 magic-string: 0.25.7 sass: 1.45.1 @@ -224,10 +224,7 @@ importers: specifiers: {} packages/playground/js-sourcemap: - specifiers: - convert-source-map: ^1.8.0 - devDependencies: - convert-source-map: 1.8.0 + specifiers: {} packages/playground/json: specifiers: @@ -717,7 +714,6 @@ importers: packages/playground/vue-sourcemap: specifiers: '@vitejs/plugin-vue': workspace:* - convert-source-map: ^1.8.0 less: ^4.1.2 sass: ^1.43.4 vue: ^3.2.31 @@ -725,7 +721,6 @@ importers: vue: 3.2.31 devDependencies: '@vitejs/plugin-vue': link:../../plugin-vue - convert-source-map: 1.8.0 less: 4.1.2 sass: 1.45.1