From ec05b20b06dfc25e939b989ceb577a5a9b0b7f04 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 2 Jun 2026 23:16:03 +0300 Subject: [PATCH] stepping back --- build/sw_plugin.js | 193 +++++++++++++++++++++++++++++++++++++++------ vite.config.js | 12 +-- 2 files changed, 176 insertions(+), 29 deletions(-) diff --git a/build/sw_plugin.js b/build/sw_plugin.js index ee952d229..39cc31405 100644 --- a/build/sw_plugin.js +++ b/build/sw_plugin.js @@ -3,7 +3,6 @@ import { dirname, resolve } from 'node:path' import { fileURLToPath } from 'node:url' import * as esbuild from 'esbuild' import { build } from 'vite' -import { exactRegex } from '@rolldown/pluginutils' import { generateServiceWorkerMessages, @@ -16,15 +15,22 @@ const getSWMessagesAsText = async () => { } const projectRoot = dirname(dirname(fileURLToPath(import.meta.url))) +const swEnvName = 'virtual:pleroma-fe/service_worker_env' +const swEnvNameResolved = '\0' + swEnvName const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };` const getProdSwEnv = ({ assets }) => `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };` -export const devSwPlugin = ({ swSrc, swDest }) => { +export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => { const swFullSrc = resolve(projectRoot, swSrc) + const esbuildAlias = {} + Object.entries(alias).forEach(([source, dest]) => { + esbuildAlias[source] = dest.startsWith('/') ? projectRoot + dest : dest + }) return { - name: 'dev-sw-plugin', apply: 'serve', + name: 'dev-sw-plugin', + apply: 'serve', configResolved() { /* no-op */ }, @@ -32,35 +38,174 @@ export const devSwPlugin = ({ swSrc, swDest }) => { const name = id.startsWith('/') ? id.slice(1) : id if (name === swDest) { return swFullSrc + } else if (name === swEnvName) { + return swEnvNameResolved } return null }, async load(id) { if (id === swFullSrc) { return readFile(swFullSrc, 'utf-8') + } else if (id === swEnvNameResolved) { + return getDevSwEnv() + } + return null + }, + /** + * vite does not bundle the service worker + * during dev, and firefox does not support ESM as service worker + * https://bugzilla.mozilla.org/show_bug.cgi?id=1360870 + */ + async transform(code, id) { + if (id === swFullSrc && transformSW) { + const res = await esbuild.build({ + entryPoints: [swSrc], + bundle: true, + write: false, + outfile: 'sw-pleroma.js', + alias: esbuildAlias, + plugins: [ + { + name: 'vite-like-root-resolve', + setup(b) { + b.onResolve({ filter: new RegExp(/^\//) }, (args) => ({ + path: resolve(projectRoot, args.path.slice(1)), + })) + }, + }, + { + name: 'sw-messages', + setup(b) { + b.onResolve( + { filter: new RegExp('^' + swMessagesName + '$') }, + (args) => ({ + path: args.path, + namespace: 'sw-messages', + }), + ) + b.onLoad( + { filter: /.*/, namespace: 'sw-messages' }, + async () => ({ + contents: await getSWMessagesAsText(), + }), + ) + }, + }, + { + name: 'sw-env', + setup(b) { + b.onResolve( + { filter: new RegExp('^' + swEnvName + '$') }, + (args) => ({ + path: args.path, + namespace: 'sw-env', + }), + ) + b.onLoad({ filter: /.*/, namespace: 'sw-env' }, () => ({ + contents: getDevSwEnv(), + })) + }, + }, + ], + }) + const text = res.outputFiles[0].text + return text + } + }, + } +} + +// Idea taken from +// https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts +// rollup does not support compiling to iife if we want to code-split; +// however, we must compile the service worker to iife because of browser support. +// Run another vite build just for the service worker targeting iife at +// the end of the build. +export const buildSwPlugin = ({ swSrc, swDest }) => { + let config + return { + name: 'build-sw-plugin', + enforce: 'post', + apply: 'build', + configResolved(resolvedConfig) { + config = { + define: resolvedConfig.define, + resolve: resolvedConfig.resolve, + plugins: [swMessagesPlugin()], + publicDir: false, + build: { + ...resolvedConfig.build, + lib: { + entry: swSrc, + formats: ['iife'], + name: 'sw_pleroma', + }, + emptyOutDir: false, + rolldownOptions: { + output: { + entryFileNames: swDest, + }, + }, + }, + configFile: false, + } + }, + generateBundle: { + order: 'post', + sequential: true, + async handler(_, bundle) { + const assets = Object.keys(bundle) + .filter((name) => !/\.map$/.test(name)) + .map((name) => '/' + name) + config.plugins.push({ + name: 'build-sw-env-plugin', + resolveId(id) { + if (id === swEnvName) { + return swEnvNameResolved + } + return null + }, + load(id) { + if (id === swEnvNameResolved) { + return getProdSwEnv({ assets }) + } + return null + }, + }) + }, + }, + closeBundle: { + order: 'post', + sequential: true, + async handler() { + console.info('Building service worker for production') + await build(config) + }, + }, + } +} + +const swMessagesName = 'virtual:pleroma-fe/service_worker_messages' +const swMessagesNameResolved = '\0' + swMessagesName + +export const swMessagesPlugin = () => { + return { + name: 'sw-messages-plugin', + resolveId(id) { + if (id === swMessagesName) { + Object.values(i18nFiles).forEach((f) => { + this.addWatchFile(f) + }) + return swMessagesNameResolved + } else { + return null + } + }, + async load(id) { + if (id === swMessagesNameResolved) { + return await getSWMessagesAsText() } return null }, } } - -export const swMessagesPlugin = () => { - const swMessagesName = 'virtual:pleroma-fe/service_worker_messages' - const swMessagesNameResolved = '\0' + swMessagesName - - return { - name: 'sw-messages-plugin', - resolveId: { - filter: { id: exactRegex(swMessagesName) }, - handler() { - return swMessagesNameResolved - } - }, - load: { - filter: { id: exactRegex(swMessagesNameResolved) }, - async handler () { - return await getSWMessagesAsText() - } - }, - } -} diff --git a/vite.config.js b/vite.config.js index f79f2327a..49a014abb 100644 --- a/vite.config.js +++ b/vite.config.js @@ -11,12 +11,12 @@ import { configDefaults } from 'vitest/config' import { getCommitHash } from './build/commit_hash.js' import copyPlugin from './build/copy_plugin.js' import emojisPlugin from './build/emojis_plugin.js' +import mswPlugin from './build/msw_plugin.js' import { + buildSwPlugin, devSwPlugin, swMessagesPlugin, } from './build/sw_plugin.js' -import { VitePWA } from 'vite-plugin-pwa' - const localConfigPath = '/config/local.json' const normalizeTarget = (target) => { @@ -142,6 +142,9 @@ export default defineConfig(async ({ mode, command }) => { // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir }, }), + devSwPlugin({ swSrc, swDest, transformSW, alias }), + buildSwPlugin({ swSrc, swDest }), + swMessagesPlugin(), emojisPlugin(), copyPlugin({ inUrl: '/static/ruffle', @@ -160,8 +163,7 @@ export default defineConfig(async ({ mode, command }) => { 'node_modules/.cache/stylelintcache', ), }), - swMessagesPlugin(), - devSwPlugin({ swSrc, swDest }), + ...(mode === 'test' ? [mswPlugin()] : []), ], optimizeDeps: { // For unknown reasons, during vitest, vite will re-optimize the following @@ -206,9 +208,9 @@ export default defineConfig(async ({ mode, command }) => { devtools: {}, // enable devtools mode input: { main: 'index.html', - sw: 'src/sw.js', }, output: { + inlineDynamicImports: false, entryFileNames(chunkInfo) { const id = chunkInfo.facadeModuleId if (id.endsWith(swSrc)) {