chore: allow custom Rollup and Vite plugins

examples/vue-router/src/claims-sw.ts

@@ -1,9 +1,12 @@
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { message } from 'virtual:message'
 
 declare let self: ServiceWorkerGlobalScope
 
+console.log(message)
+
 // self.__WB_MANIFEST is default injection point
 precacheAndRoute(self.__WB_MANIFEST)
 

examples/vue-router/src/prompt-sw.ts

@@ -1,8 +1,11 @@
 import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
 import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { message } from 'virtual:message'
 
 declare let self: ServiceWorkerGlobalScope
 
+console.log(message)
+
 self.addEventListener('message', (event) => {
   if (event.data && event.data.type === 'SKIP_WAITING')
     self.skipWaiting()

examples/vue-router/src/shims-vue.d.ts

@@ -4,3 +4,8 @@ declare module '*.vue' {
   const Component: ReturnType<typeof defineComponent>
   export default Component
 }
+
+declare module 'virtual:message' {
+  const message: string
+  export { message }
+}

examples/vue-router/test/build.test.ts

@@ -23,7 +23,10 @@ describe('vue 3: test-build', () => {
     expect(existsSync(webManifest), `${webManifest} doesn't exist`).toBeTruthy()
     const swContent = readFileSync(swPath, 'utf-8')
     let match: RegExpMatchArray | null
-    if (!injectManifest) {
+    if (injectManifest) {
+      expect(swContent.includes('Message from Virtual Module Plugin'), 'missing virtual module message').toBeTruthy()
+    }
+    else {
       match = swContent.match(/define\(\['\.\/(workbox-\w+)'/)
       // vite 5 beta 8 change rollup from v3 to v4: sw deps now inlined
       if (match) {

examples/vue-router/vite.config.ts

@@ -50,9 +50,23 @@ if (process.env.SW === 'true') {
   pwaOptions.strategies = 'injectManifest'
   ;(pwaOptions.manifest as Partial<ManifestOptions>).name = 'PWA Inject Manifest'
   ;(pwaOptions.manifest as Partial<ManifestOptions>).short_name = 'PWA Inject'
+  const virtual = 'virtual:message'
+  const resolvedVirtual = `\0${virtual}`
   pwaOptions.injectManifest = {
     minify: false,
     enableWorkboxModulesLogs: true,
+    buildPlugins: {
+      vite: [{
+        name: 'vite-plugin-test',
+        resolveId(id) {
+          return id === virtual ? resolvedVirtual : null
+        },
+        load(id) {
+          if (id === resolvedVirtual)
+            return `export const message = 'Message from Virtual Module Plugin'`
+        },
+      }],
+    },
   }
 }
 

src/options.ts

@@ -114,13 +114,14 @@ export async function resolveOptions(options: Partial<VitePWAOptions>, viteConfi
     : Object.assign({}, defaultManifest, options.manifest || {})
   const {
     vitePlugins = defaultInjectManifestVitePlugins,
-    plugins = [],
+    plugins,
     rollupOptions = {},
     rollupFormat = 'es',
     target = viteConfig.build.target,
     minify: minifySW = viteConfig.build.minify,
     sourcemap = viteConfig.build.sourcemap,
     enableWorkboxModulesLogs,
+    buildPlugins,
     ...userInjectManifest
   } = options.injectManifest || {}
   const injectManifest = Object.assign({}, defaultInjectManifest, userInjectManifest)
@@ -195,6 +196,7 @@ export async function resolveOptions(options: Partial<VitePWAOptions>, viteConfi
     devOptions,
     rollupFormat,
     vitePlugins,
+    buildPlugins,
     selfDestroying,
     buildBase: buildBase ?? basePath,
     injectManifestRollupOptions: {

src/types.ts

@@ -1,4 +1,4 @@
-import type { BuildOptions, Plugin, ResolvedConfig } from 'vite'
+import type { BuildOptions, Plugin, ResolvedConfig, UserConfig } from 'vite'
 import type { GenerateSWOptions, InjectManifestOptions, ManifestEntry } from 'workbox-build'
 import type { OutputBundle, RollupOptions } from 'rollup'
 
@@ -59,8 +59,25 @@ export type CustomInjectManifestOptions = InjectManifestOptions & {
    * Both configurations cannot be shared, and so you'll need to duplicate the configuration, with the exception of `define`.
    *
    * **WARN**: this option is for advanced usage, beware, you can break your application build.
+   *
+   * This option will be ignored if `buildPlugins.rollup` is configured.
+   *
+   * @deprecated use `buildPlugins` instead
    */
   plugins?: Plugin[]
+  /**
+   * Since `v0.18.0` you can add custom Rollup and/or Vite plugins to build your service worker.
+   *
+   * **WARN**: don't share plugins between the application and the service worker build, you need to include new plugins for each configuration.
+   *
+   * If you are using `plugins` option, use this option to configure the Rollup plugins or move them to `vite` option.
+   *
+   * **WARN**: this option is for advanced usage, beware, you can break your application build.
+   */
+  buildPlugins?: {
+    rollup?: RollupOptions['plugins']
+    vite?: UserConfig['plugins']
+  }
   /**
    * Since `v0.15.0` you can add custom Rollup options to build your service worker: we expose the same configuration to build a worker using Vite.
    */
@@ -234,7 +251,7 @@ export interface VitePWAOptions {
 
 export interface ResolvedServiceWorkerOptions {
   format: 'es' | 'iife'
-  plugins: Plugin[]
+  plugins?: Plugin[]
   rollupOptions: RollupOptions
 }
 
@@ -245,6 +262,7 @@ export interface ResolvedVitePWAOptions extends Required<VitePWAOptions> {
   injectManifest: InjectManifestOptions
   rollupFormat: 'es' | 'iife'
   vitePlugins: InjectManifestVitePlugins
+  buildPlugins?: CustomInjectManifestOptions['buildPlugins']
   injectManifestRollupOptions: ResolvedServiceWorkerOptions
   injectManifestBuildOptions: {
     target?: BuildOptions['target']

src/vite-build.ts

@@ -84,6 +84,7 @@ function prepareViteBuild(
 
   define['process.env.NODE_ENV'] = JSON.stringify(nodeEnv)
 
+  const buildPlugins = options.buildPlugins
   const { format, plugins, rollupOptions } = options.injectManifestRollupOptions
 
   const inlineConfig = {
@@ -102,6 +103,7 @@ function prepareViteBuild(
     },
     configFile: false,
     define,
+    plugins: buildPlugins?.vite,
   } satisfies InlineConfig
 
   const swName = basename(options.swDest)
@@ -122,7 +124,7 @@ function prepareViteBuild(
       modulePreload: false,
       rollupOptions: {
         ...rollupOptions,
-        plugins,
+        plugins: buildPlugins?.rollup ?? plugins,
         input: options.swSrc,
         output: {
           entryFileNames: swMjsName,
@@ -141,7 +143,7 @@ function prepareViteBuild(
       },
       rollupOptions: {
         ...rollupOptions,
-        plugins,
+        plugins: buildPlugins?.rollup ?? plugins,
         output: {
           entryFileNames: swName,
         },