stepping back

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()
-      }
-    },
-  }
-}

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 = '<projectRoot>/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(),
+      ...(mode === 'test' ? [mswPlugin()] : []),
-      devSwPlugin({ swSrc, swDest }),
     ],
     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)) {