Fix loading MSW in Storybook in the documentation

Author: sandhose

biome.json

@@ -18,8 +18,8 @@
       "frontend/src/gql/**",
       "frontend/src/routeTree.gen.ts",
       "frontend/.storybook/locales.ts",
+      "frontend/.storybook/mockServiceWorker.js",
       "frontend/locales/*.json",
-      "frontend/stories/static/**",
       "**/coverage/**",
       "**/dist/**"
     ]

frontend/.storybook/main.ts

@@ -9,8 +9,6 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../{src,stories}/**/*.stories.@(js|jsx|ts|tsx)"],
 
-  staticDirs: ["../stories/static"],
-
   addons: [
     // Automatic docs pages
     "@storybook/addon-docs",
@@ -57,6 +55,13 @@ const config: StorybookConfig = {
   env: {
     STORYBOOK: "true",
   },
+
+  viteFinal: async (config) => {
+    // Host all the assets in the root directory,
+    // so that the service worker is correctly scoped to the root
+    config.build.assetsDir = "";
+    return config;
+  },
 };
 
 export default config;

frontend/stories/static/mockServiceWorker.js renamed to frontend/.storybook/mockServiceWorker.js

@@ -13,17 +13,19 @@ import type {
 import { TooltipProvider } from "@vector-im/compound-web";
 import { initialize, mswLoader } from "msw-storybook-addon";
 import { useLayoutEffect } from "react";
-
 import "../src/shared.css";
 import i18n, { setupI18n } from "../src/i18n";
-
 import { DummyRouter } from "../src/test-utils/router";
 import { handlers } from "../tests/mocks/handlers";
 import localazyMetadata from "./locales";
+import swUrl from "./mockServiceWorker.js?url";
 
 initialize(
   {
     onUnhandledRequest: "bypass",
+    serviceWorker: {
+      url: swUrl,
+    },
   },
   handlers,
 );

frontend/.storybook/preview.tsx

@@ -92,6 +92,6 @@
     "vitest": "^2.1.2"
   },
   "msw": {
-    "workerDirectory": ["stories/static"]
+    "workerDirectory": [".storybook"]
   }
 }

frontend/package.json

@@ -50,6 +50,4 @@ mv target/doc target/book/rustdoc
 cd frontend
 npm ci
 npx storybook build -o ../target/book/storybook
-# Copy the mock service worker to the root of the domain, else it won't load
-cp ../target/book/storybook/mockServiceWorker.js ../target/book/mockServiceWorker.js
 cd ..