feat(worker): Add sourcemap support for worker bundles

packages/playground/worker/__tests__/es-sourcemap/es-worker.spec.ts

@@ -0,0 +1,60 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import type { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  // assert correct files
+  test('sourcemap generation for web workers', async () => {
+    const assetsDir = path.resolve(testDir, 'dist/es-sourcemap/assets')
+    const files = fs.readdirSync(assetsDir)
+    const index = files.find((f) => /^main-module\.\w+\.js$/.test(f))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+
+    expect(files).toContainEqual(
+      expect.stringMatching(/^main-module\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-shared-worker\.\w+\.js\.map$/)
+    )
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toMatch(/^main-module\.\w+\.js\.map$/)
+    expect(workerSourcemap).toMatch(/^my-worker\.\w+\.js\.map$/)
+    expect(sharedWorkerSourcemap).toMatch(/^my-shared-worker\.\w+\.js\.map$/)
+  })
+}
+
+test('true', () => {
+  expect(true).toBe(true)
+})
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}

packages/playground/worker/__tests__/es-sourcemap/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/vite.config.es.sourcemap')

packages/playground/worker/__tests__/es/vite.config.js

@@ -1 +1 @@
-module.exports = require('../../vite.config-es')
+module.exports = require('../../config/vite.config.es')

packages/playground/worker/__tests__/iife/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/vite.config.iife')

packages/playground/worker/__tests__/worker.spec.ts → packages/playground/worker/__tests__/iife/worker.spec.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import { untilUpdated, isBuild, testDir } from '../../testUtils'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
 import type { Page } from 'playwright-chromium'
 
 test('normal', async () => {

packages/playground/worker/__tests__/sourcemap-hidden/sourcemap-hidden.spec.ts

@@ -0,0 +1,65 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+// Workaround so that testing serve does not emit
+// "Your test suite must contain at least one test"
+test('true', () => {
+  expect(true).toBe(true)
+})
+
+if (isBuild) {
+  // assert correct files
+  test('hidden sourcemap generation for web workers', async () => {
+    const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap-hidden/assets')
+    const files = fs.readdirSync(assetsDir)
+
+    const index = files.find((f) => /^main-classic\.\w+\.js$/.test(f))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+
+    expect(files).toContainEqual(expect.stringMatching(/^index\.\w+\.js\.map$/))
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-shared-worker\.\w+\.js\.map$/)
+    )
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toBe(null)
+    expect(workerSourcemap).toBe(null)
+    expect(sharedWorkerSourcemap).toBe(null)
+  })
+}
+
+test('true', () => {
+  expect(true).toBe(true)
+})
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}

packages/playground/worker/__tests__/sourcemap-hidden/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/vite.config.iife.sourcemap-hidden')

packages/playground/worker/__tests__/sourcemap-inline/sourcemap-inline.spec.ts

@@ -0,0 +1,47 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  // assert correct files
+  test('inlined sourcemap generation for web workers', async () => {
+    const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap-inline/assets')
+    const files = fs.readdirSync(assetsDir)
+    const index = files.find((f) => f.includes('main-classic'))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+
+    const worker = files.find((f) => f.includes('my-worker'))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+    const sharedWorker = files.find((f) => f.includes('my-shared-worker'))
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toMatch(/^data:application\/json;/)
+    expect(workerSourcemap).toMatch(/^data:application\/json;/)
+    expect(sharedWorkerSourcemap).toMatch(/^data:application\/json;/)
+  })
+}
+
+test('true', () => {
+  expect(true).toBe(true)
+})
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}

packages/playground/worker/__tests__/sourcemap-inline/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/vite.config.iife.sourcemap-inline')

packages/playground/worker/__tests__/sourcemap/sourcemap.spec.ts

@@ -0,0 +1,60 @@
+import fs from 'fs'
+import path from 'path'
+import { untilUpdated, isBuild, testDir } from '../../../testUtils'
+import { Page } from 'playwright-chromium'
+
+if (isBuild) {
+  // assert correct files
+  test('sourcemap generation for web workers', async () => {
+    const assetsDir = path.resolve(testDir, 'dist/iife-sourcemap/assets')
+    const files = fs.readdirSync(assetsDir)
+    const index = files.find((f) => /^main-classic\.\w+\.js$/.test(f))
+    const content = fs.readFileSync(path.resolve(assetsDir, index), 'utf-8')
+    const indexSourcemap = getSourceMapUrl(content)
+
+    const worker = files.find((f) => /^my-worker\.\w+\.js$/.test(f))
+    const workerContent = fs.readFileSync(
+      path.resolve(assetsDir, worker),
+      'utf-8'
+    )
+    const workerSourcemap = getSourceMapUrl(workerContent)
+
+    const sharedWorker = files.find((f) =>
+      /^my-shared-worker\.\w+\.js$/.test(f)
+    )
+    const sharedWorkerContent = fs.readFileSync(
+      path.resolve(assetsDir, sharedWorker),
+      'utf-8'
+    )
+    const sharedWorkerSourcemap = getSourceMapUrl(sharedWorkerContent)
+
+    expect(files).toContainEqual(
+      expect.stringMatching(/^main-classic\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-worker\.\w+\.js\.map$/)
+    )
+    expect(files).toContainEqual(
+      expect.stringMatching(/^my-shared-worker\.\w+\.js\.map$/)
+    )
+
+    // sourcemap should exist and have a data URL
+    expect(indexSourcemap).toMatch(/^main-classic\.\w+\.js\.map$/)
+    expect(workerSourcemap).toMatch(/^my-worker\.\w+\.js\.map$/)
+    expect(sharedWorkerSourcemap).toMatch(/^my-shared-worker\.\w+\.js\.map$/)
+  })
+}
+
+test('true', () => {
+  expect(true).toBe(true)
+})
+
+function getSourceMapUrl(code: string): string {
+  const regex = /\/\/[#@]\s(?:source(?:Mapping)?URL)=\s*(\S+)/g
+  const results = regex.exec(code)
+
+  if (results && results.length >= 2) {
+    return results[1]
+  }
+  return null
+}

packages/playground/worker/__tests__/sourcemap/vite.config.js

@@ -0,0 +1 @@
+module.exports = require('../../config/vite.config.iife.sourcemap')

packages/playground/worker/config/vite.config.es.sourcemap.js

@@ -0,0 +1,14 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+
+module.exports = vite.defineConfig({
+  base: '/es-sourcemap/',
+  worker: {
+    format: 'es',
+    plugins: [vueJsx()]
+  },
+  build: {
+    outDir: 'dist/es-sourcemap/',
+    sourcemap: true
+  }
+})

packages/playground/worker/config/vite.config.iife.sourcemap-hidden.js

@@ -0,0 +1,14 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+
+module.exports = vite.defineConfig({
+  base: '/iife-sourcemap-hidden/',
+  worker: {
+    format: 'iife',
+    plugins: [vueJsx()]
+  },
+  build: {
+    outDir: 'dist/iife-sourcemap-hidden',
+    sourcemap: 'hidden'
+  }
+})

packages/playground/worker/config/vite.config.iife.sourcemap-inline.js

@@ -0,0 +1,14 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+
+module.exports = vite.defineConfig({
+  base: '/iife-sourcemap-inline/',
+  worker: {
+    format: 'iife',
+    plugins: [vueJsx()]
+  },
+  build: {
+    outDir: 'dist/iife-sourcemap-inline',
+    sourcemap: 'inline'
+  }
+})

packages/playground/worker/config/vite.config.iife.sourcemap.js

@@ -0,0 +1,14 @@
+const vueJsx = require('@vitejs/plugin-vue-jsx')
+const vite = require('vite')
+
+module.exports = vite.defineConfig({
+  base: '/iife-sourcemap/',
+  worker: {
+    format: 'iife',
+    plugins: [vueJsx()]
+  },
+  build: {
+    outDir: 'dist/iife-sourcemap/',
+    sourcemap: true
+  }
+})

packages/playground/worker/my-shared-worker.ts

@@ -14,3 +14,5 @@ onconnect = (event) => {
     }
   }
 }
+
+console.log('my-shared-worker')

packages/playground/worker/my-worker.ts

@@ -6,3 +6,5 @@ self.onmessage = (e) => {
     self.postMessage({ msg, mode, bundleWithPlugin })
   }
 }
+
+console.log('my-worker: inline-worker')

packages/playground/worker/package.json

@@ -3,13 +3,25 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "dev:es": "vite --config ./vite.config-es.js dev",
-    "build:es": "vite --config ./vite.config-es.js build",
-    "preview:es": "vite --config ./vite.config-es.js preview",
-    "debug": "node --inspect-brk ../../vite/bin/vite"
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "dev": "vite --config ./config/vite.config.iife.js dev",
+    "build": "vite --config ./config/vite.config.iife.js build",
+    "preview": "vite --config ./config/vite.config.iife.js preview",
+    "dev:sourcemap": "vite --config ./config/vite.config.iife.sourcemap.js dev",
+    "build:sourcemap": "vite --config ./config/vite.config.iife.sourcemap.js build",
+    "preview:sourcemap": "vite --config ./config/vite.config.iife.sourcemap.js preview",
+    "dev:sourcemap-inline": "vite --config ./config/vite.config.iife.sourcemap-inline.js dev",
+    "build:sourcemap-inline": "vite --config ./config/vite.config.iife.sourcemap-inline.js build",
+    "preview:sourcemap-inline": "vite --config ./config/vite.config.iife.sourcemap-inline.js preview",
+    "dev:sourcemap-hidden": "vite --config ./config/vite.config.iife.sourcemap-hidden.js dev",
+    "build:sourcemap-hidden": "vite --config ./config/vite.config.iife.sourcemap-hidden.js build",
+    "preview:sourcemap-hidden": "vite --config ./config/vite.config.iife.sourcemap-hidden.js preview",
+    "dev:es": "vite --config ./config/vite.config.es.js dev",
+    "build:es": "vite --config ./config/vite.config.es.js build",
+    "preview:es": "vite --config ./config/vite.config.es.js preview",
+    "dev:es-sourcemap": "vite --config ./config/vite.config.es.sourcemap.js dev",
+    "build:es-sourcemap": "vite --config ./config/vite.config.es.sourcemap.js build",
+    "preview:es-sourcemap": "vite --config ./config/vite.config.es.sourcemap.js preview"
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "workspace:*"

packages/playground/worker/worker/main-classic.js

@@ -26,3 +26,5 @@ classicSharedWorker.port.addEventListener('message', (ev) => {
   text('.classic-shared-worker', JSON.stringify(ev.data))
 })
 classicSharedWorker.port.start()
+
+console.log('main-classic')

packages/playground/worker/worker/main-module.js

@@ -51,6 +51,8 @@ document.querySelector('.ping-ts-output').addEventListener('click', () => {
   tsOutputWorker.postMessage('ping')
 })
 
+console.log('main-module')
+
 const nestedWorker = new NestedWorker()
 nestedWorker.addEventListener('message', (ev) => {
   if (typeof ev.data === 'string') {