fix: remove missing sourcemap vue-router warnings (#172)

Author: userquin

package.json

@@ -49,7 +49,7 @@
     "dev:preview:generate": "nr dev:generate && serve playground/dist",
     "release": "bumpp && npm publish",
     "lint": "eslint .",
-    "lint-fix": "nr lint --fix",
+    "lint:fix": "nr lint --fix",
     "test:build:serve": "PORT=4173 node playground/.output/server/index.mjs",
     "test:generate:serve": "PORT=4173 serve playground/dist",
     "test:build": "nr dev:build && NUXT_ECOSYSTEM_CI=true TEST_BUILD=true vitest run && TEST_BUILD=true playwright test",
@@ -60,6 +60,14 @@
     "test": "nr test:build && nr test:generate",
     "test:with-build": "nr dev:prepare && nr prepack && nr test"
   },
+  "peerDependencies": {
+    "@vite-pwa/assets-generator": "^0.2.6"
+  },
+  "peerDependenciesMeta": {
+    "@vite-pwa/assets-generator": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@nuxt/kit": "^3.9.0",
     "pathe": "^1.1.1",
@@ -88,20 +96,13 @@
   "resolutions": {
     "@nuxt/kit": "^3.10.1"
   },
-  "peerDependencies": {
-    "@vite-pwa/assets-generator": "^0.2.6"
-  },
-  "peerDependenciesMeta": {
-    "@vite-pwa/assets-generator": {
-      "optional": true
-    }
-  },
   "build": {
     "externals": [
       "node:child_process",
       "node:fs",
       "consola",
       "esbuild",
+      "h3",
       "pathe",
       "rollup",
       "ufo",

playground-assets/nuxt.config.ts

@@ -1,7 +1,3 @@
-import process from 'node:process'
-
-const sw = process.env.SW === 'true'
-
 export default defineNuxtConfig({
   /* ssr: false, */
   // typescript,

src/utils/dev.ts

@@ -0,0 +1,52 @@
+import { join } from 'node:path'
+import fs from 'node:fs'
+import { eventHandler } from 'h3'
+
+export function dev(
+  swMap: string,
+  resolvedSwMapFile: string,
+  worboxMap: string,
+  buildDir: string,
+  baseURL: string,
+) {
+  return eventHandler(async (event) => {
+    const url = event.path
+    if (!url)
+      return
+
+    const file = url === swMap
+      ? resolvedSwMapFile
+      : url.startsWith(worboxMap) && url.endsWith('.js.map')
+        ? join(
+          buildDir,
+          'dev-sw-dist',
+          url.slice(baseURL.length),
+        )
+        : undefined
+
+    if (file) {
+      try {
+        await waitFor(() => fs.existsSync(file))
+        const map = fs.readFileSync(file, 'utf-8')
+        event.headers.set('Content-Type', 'application/json')
+        event.headers.set('Cache-Control', 'public, max-age=0, must-revalidate')
+        event.headers.set('Content-Length', `${map.length}`)
+        event.node.res.end(map)
+      }
+      catch {
+      }
+    }
+  })
+}
+
+async function waitFor(method: () => boolean, retries = 5): Promise<void> {
+  if (method())
+    return
+
+  if (retries === 0)
+    throw new Error('Timeout in waitFor')
+
+  await new Promise(resolve => setTimeout(resolve, 300))
+
+  return waitFor(method, retries - 1)
+}

src/utils/module.ts

@@ -1,6 +1,13 @@
 import { join } from 'node:path'
 import { mkdir } from 'node:fs/promises'
-import { addComponent, addPlugin, createResolver, extendWebpackConfig, getNuxtVersion } from '@nuxt/kit'
+import {
+  addComponent,
+  addDevServerHandler,
+  addPlugin,
+  createResolver,
+  extendWebpackConfig,
+  getNuxtVersion,
+} from '@nuxt/kit'
 import type { Plugin } from 'vite'
 import type { Nuxt } from '@nuxt/schema'
 import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
@@ -254,6 +261,25 @@ export const periodicSyncForUpdates = ${typeof client.periodicSyncForUpdates ===
           viteServer.middlewares.stack.push({ route: suppressWarnings, handle: emptyHandle })
         })
       }
+      const { sourcemap = nuxt.options.sourcemap.client === true } = options.workbox ?? {}
+      if (sourcemap) {
+        const swMap = `${nuxt.options.app.baseURL}${options.filename ?? 'sw.js'}.map`
+        const resolvedSwMapFile = join(nuxt.options.buildDir, 'dev-sw-dist', swMap)
+        const worboxMap = `${nuxt.options.app.baseURL}workbox-`
+        addDevServerHandler({
+          route: '',
+          handler: await import('h3').then(({ defineLazyEventHandler }) => defineLazyEventHandler(async () => {
+            const { dev } = await import('./dev')
+            return dev(
+              swMap,
+              resolvedSwMapFile,
+              worboxMap,
+              nuxt.options.buildDir,
+              nuxt.options.app.baseURL,
+            )
+          })),
+        })
+      }
     }
   }
   else {