From 938f8d3ffb87dbc0fed2f14160437d6de881c421 Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 10 Feb 2024 14:04:02 +0100 Subject: [PATCH] chore: allow custom Rollup and Vite plugins --- examples/vue-router/src/claims-sw.ts | 3 +++ examples/vue-router/src/prompt-sw.ts | 3 +++ examples/vue-router/src/shims-vue.d.ts | 5 +++++ examples/vue-router/test/build.test.ts | 5 ++++- examples/vue-router/vite.config.ts | 14 ++++++++++++++ src/options.ts | 4 +++- src/types.ts | 22 ++++++++++++++++++++-- src/vite-build.ts | 6 ++++-- 8 files changed, 56 insertions(+), 6 deletions(-) diff --git a/examples/vue-router/src/claims-sw.ts b/examples/vue-router/src/claims-sw.ts index 32a2f72f..81b8900a 100644 --- a/examples/vue-router/src/claims-sw.ts +++ b/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) diff --git a/examples/vue-router/src/prompt-sw.ts b/examples/vue-router/src/prompt-sw.ts index 24325a1c..fbf47674 100644 --- a/examples/vue-router/src/prompt-sw.ts +++ b/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() diff --git a/examples/vue-router/src/shims-vue.d.ts b/examples/vue-router/src/shims-vue.d.ts index b8724aa1..10c30055 100644 --- a/examples/vue-router/src/shims-vue.d.ts +++ b/examples/vue-router/src/shims-vue.d.ts @@ -4,3 +4,8 @@ declare module '*.vue' { const Component: ReturnType export default Component } + +declare module 'virtual:message' { + const message: string + export { message } +} diff --git a/examples/vue-router/test/build.test.ts b/examples/vue-router/test/build.test.ts index 25d8c23a..c1d240e4 100644 --- a/examples/vue-router/test/build.test.ts +++ b/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) { diff --git a/examples/vue-router/vite.config.ts b/examples/vue-router/vite.config.ts index 269acf3a..4b8e4ea7 100644 --- a/examples/vue-router/vite.config.ts +++ b/examples/vue-router/vite.config.ts @@ -50,9 +50,23 @@ if (process.env.SW === 'true') { pwaOptions.strategies = 'injectManifest' ;(pwaOptions.manifest as Partial).name = 'PWA Inject Manifest' ;(pwaOptions.manifest as Partial).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'` + }, + }], + }, } } diff --git a/src/options.ts b/src/options.ts index 818da1e0..3ebe6fcd 100644 --- a/src/options.ts +++ b/src/options.ts @@ -114,13 +114,14 @@ export async function resolveOptions(options: Partial, 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, viteConfi devOptions, rollupFormat, vitePlugins, + buildPlugins, selfDestroying, buildBase: buildBase ?? basePath, injectManifestRollupOptions: { diff --git a/src/types.ts b/src/types.ts index ef95e7b7..2817bdc3 100644 --- a/src/types.ts +++ b/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 { injectManifest: InjectManifestOptions rollupFormat: 'es' | 'iife' vitePlugins: InjectManifestVitePlugins + buildPlugins?: CustomInjectManifestOptions['buildPlugins'] injectManifestRollupOptions: ResolvedServiceWorkerOptions injectManifestBuildOptions: { target?: BuildOptions['target'] diff --git a/src/vite-build.ts b/src/vite-build.ts index c4351025..f4f57eba 100644 --- a/src/vite-build.ts +++ b/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, },