DRY vite configs using a shared config (#33334)

* Fix OIDC login callback handling on Element Desktop

* Add unit tests

* Iterate

* Fix lcov reporter

* DRY vite configs using a shared config

* Iterate

* Revert change to electron-builder.ts

* Iterate

apps/desktop/package.json

@@ -72,6 +72,7 @@
         "@babel/preset-typescript": "^7.18.6",
         "@electron/asar": "4.2.0",
         "@electron/fuses": "^2.1.1",
+        "@element-hq/vite-common": "workspace:*",
         "@playwright/test": "catalog:",
         "@stylistic/eslint-plugin": "^5.0.0",
         "@types/auto-launch": "^5.0.1",
@@ -81,7 +82,7 @@
         "@types/pacote": "^11.1.1",
         "@typescript-eslint/eslint-plugin": "^8.0.0",
         "@typescript-eslint/parser": "^8.0.0",
-        "@vitest/coverage-v8": "^4.1.5",
+        "@vitest/coverage-v8": "catalog:",
         "app-builder-lib": "26.9.0",
         "chokidar": "^5.0.0",
         "detect-libc": "^2.0.0",
@@ -105,9 +106,8 @@
         "rimraf": "^6.0.0",
         "tar": "^7.5.8",
         "typescript": "6.0.3",
-        "vite": "^8.0.9",
+        "vitest": "catalog:",
-        "vitest": "^4.1.5",
+        "vitest-sonar-reporter": "catalog:"
-        "vitest-sonar-reporter": "^3.0.0"
     },
     "hakDependencies": {
         "matrix-seshat": "4.2.0"

apps/desktop/vitest.config.ts

@@ -5,60 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig } from "vitest/config";
+import { defineConfig, mergeConfig } from "vitest/config";
-import { type UserConfig } from "vite";
+import baseConfig from "@element-hq/vite-common/vite.config.js";
-import { type Reporter } from "vitest/reporters";
-import { env } from "node:process";
 
-const reporters: NonNullable<UserConfig["test"]>["reporters"] = [["default"]];
+export default mergeConfig(
-
+    baseConfig,
-const slowTestReporter: Reporter = {
+    defineConfig({
-    onTestRunEnd(testModules, unhandledErrors, reason) {
-        const tests = testModules
-            .flatMap((m) => Array.from(m.children.allTests()))
-            .filter((test) => test.diagnostic()?.slow);
-        tests.sort((x, y) => x.diagnostic()!.duration! - y.diagnostic()!.duration!);
-        tests.reverse();
-
-        if (tests.length > 0) {
-            console.warn("Slowest 10 tests:");
-        }
-        for (const t of tests.slice(0, 10)) {
-            console.warn(`${t.module.moduleId} > ${t.fullName}: ${t.diagnostic()?.duration.toFixed(0)}ms`);
-        }
-    },
-};
-
-// if we're running under GHA, enable the GHA & Sonar reporters
-if (env["GITHUB_ACTIONS"] !== undefined) {
-    reporters.push(["github-actions", { silent: false }]);
-    reporters.push([
-        "vitest-sonar-reporter",
-        {
-            outputFile: "coverage/sonar-report.xml",
-            onWritePath: (path): string => `apps/desktop/${path}`,
-        },
-    ]);
-
-    // if we're running against the develop branch, also enable the slow test reporter
-    if (env["GITHUB_REF"] == "refs/heads/develop") {
-        reporters.push(slowTestReporter);
-    }
-}
-
-export default defineConfig({
         test: {
             coverage: {
-            provider: "v8",
-            include: ["src/**/*"],
                 // The coverage report currently chokes on this file as it doesn't process it as TypeScript
                 exclude: ["src/preload.cts"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
             },
-        environment: "node",
-        reporters,
-        globals: true,
-        pool: "threads",
             include: ["src/**/*.test.ts"],
         },
-});
+    }),
+    true,
+);

packages/module-api/package.json

@@ -30,21 +30,22 @@
         "test:unit": "vitest"
     },
     "devDependencies": {
+        "@element-hq/vite-common": "workspace:*",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@microsoft/api-extractor": "^7.49.1",
         "@types/node": "^22.10.7",
         "@types/react": "^19",
         "@types/react-dom": "^19.0.4",
         "@types/semver": "^7.5.8",
-        "@vitest/coverage-v8": "^4.0.0",
+        "@vitest/coverage-v8": "catalog:",
         "matrix-widget-api": "^1.17.0",
         "rollup-plugin-external-globals": "^0.13.0",
         "semver": "^7.6.3",
         "typescript": "^6.0.0",
         "unplugin-dts": "1.0.0-beta.6",
-        "vite": "^8.0.0",
+        "vite": "catalog:",
-        "vitest": "^4.0.0",
+        "vitest": "catalog:",
-        "vitest-sonar-reporter": "^3.0.0"
+        "vitest-sonar-reporter": "catalog:"
     },
     "peerDependencies": {
         "@matrix-org/react-sdk-module-api": "*",

packages/module-api/vite.config.ts

@@ -7,15 +7,18 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, mergeConfig } from "vitest/config";
 import dts from "unplugin-dts/vite";
 import externalGlobals from "rollup-plugin-external-globals";
+import baseConfig from "@element-hq/vite-common/vite.config";
 
 import packageJson from "./package.json" with { type: "json" };
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
+export default mergeConfig(
+    baseConfig,
+    defineConfig({
         build: {
             lib: {
                 entry: resolve(__dirname, "src/index.ts"),
@@ -41,23 +44,6 @@ export default defineConfig({
             // this is required for React JSX versions to be compatible.
             process: { env: { NODE_ENV: "production" } },
         },
-    test: {
+    }),
-        coverage: {
+    true,
-            provider: "v8",
+);
-            include: ["src/**/*"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
-        },
-        reporters: [
-            ["default", { summary: false }],
-            [
-                "vitest-sonar-reporter",
-                {
-                    outputFile: "coverage/sonar-report.xml",
-                    onWritePath(path: string): string {
-                        return `packages/element-web-module-api/${path}`;
-                    },
-                },
-            ],
-        ],
-    },
-});

packages/shared-components/package.json

@@ -48,7 +48,7 @@
         "build:doc": "nx typedoc",
         "lint": "pnpm lint:types && pnpm lint:js",
         "lint:js": "eslint --max-warnings 0 src",
-        "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json"
+        "lint:types": "nx lint:types"
     },
     "dependencies": {
         "@element-hq/element-web-module-api": "workspace:*",
@@ -71,6 +71,7 @@
     },
     "devDependencies": {
         "@element-hq/element-web-playwright-common": "workspace:*",
+        "@element-hq/vite-common": "workspace:*",
         "@fetch-mock/vitest": "^0.2.18",
         "@fontsource/inter": "catalog:",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
@@ -94,7 +95,7 @@
         "@typescript-eslint/parser": "^8.53.1",
         "@vector-im/compound-web": "catalog:",
         "@vitest/browser-playwright": "^4.0.17",
-        "@vitest/coverage-v8": "^4.0.17",
+        "@vitest/coverage-v8": "catalog:",
         "eslint": "8",
         "eslint-config-google": "^0.14.0",
         "eslint-config-prettier": "^10.1.8",
@@ -115,10 +116,10 @@
         "typedoc-plugin-missing-exports": "^4.1.2",
         "typescript": "catalog:",
         "unplugin-dts": "1.0.0-beta.6",
-        "vite": "^8.0.0",
+        "vite": "catalog:",
         "vite-plugin-node-polyfills": "^0.26.0",
-        "vitest": "^4.0.18",
+        "vitest": "catalog:",
-        "vitest-sonar-reporter": "^3.0.0"
+        "vitest-sonar-reporter": "catalog:"
     },
     "engines": {
         "node": ">=20.0.0"

packages/shared-components/project.json

@@ -54,6 +54,14 @@
                 "cwd": "packages/shared-components"
             },
             "dependsOn": ["typedoc", "^build:playwright"]
+        },
+        "lint:types": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": ["tsc --noEmit", "tsc --noEmit -p tsconfig.node.json"],
+                "cwd": "packages/shared-components"
+            },
+            "dependsOn": ["^build"]
         }
     }
 }

packages/shared-components/vitest.config.ts

@@ -5,58 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig, ViteUserConfig } from "vitest/config";
+import { defineConfig, mergeConfig } from "vitest/config";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { storybookVis } from "storybook-addon-vis/vitest-plugin";
 import { playwright, PlaywrightProviderOptions } from "@vitest/browser-playwright";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import { Reporter } from "vitest/reporters";
+
-import { env } from "process";
+import baseConfig from "@element-hq/vite-common/vite.config";
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
-const reporters: NonNullable<ViteUserConfig["test"]>["reporters"] = [["default"]];
-const slowTestReporter: Reporter = {
-    onTestRunEnd(testModules, unhandledErrors, reason) {
-        const tests = testModules
-            .flatMap((m) => Array.from(m.children.allTests()))
-            .filter((test) => test.diagnostic()?.slow);
-        tests.sort((x, y) => x.diagnostic()?.duration! - y.diagnostic()?.duration!);
-        tests.reverse();
-        if (tests.length > 0) {
-            console.warn("Slowest 10 tests:");
-        }
-        for (const t of tests.slice(0, 10)) {
-            console.warn(`${t.module.moduleId} > ${t.fullName}: ${t.diagnostic()?.duration.toFixed(0)}ms`);
-        }
-    },
-};
-
-// if we're running under GHA, enable the GHA & Sonar reporters
-if (env["GITHUB_ACTIONS"] !== undefined) {
-    reporters.push([
-        "github-actions",
-        {
-            silent: false,
-        },
-    ]);
-
-    reporters.push([
-        "vitest-sonar-reporter",
-        {
-            outputFile: "coverage/sonar-report.xml",
-            onWritePath: (path) => `packages/shared-components/${path}`,
-        },
-    ]);
-
-    // if we're running against the develop branch, also enable the slow test reporter
-    if (env["GITHUB_REF"] == "refs/heads/develop") {
-        reporters.push(slowTestReporter);
-    }
-}
-
 const commonContextOptions: PlaywrightProviderOptions["contextOptions"] = {
     reducedMotion: "reduce",
     // Force consistent font rendering
@@ -70,17 +30,13 @@ const commonLaunchOptions = {
     args: ["--font-render-hinting=none", "--disable-font-subpixel-positioning", "--disable-lcd-text"],
 };
 
-export default defineConfig({
+export default mergeConfig(
+    baseConfig,
+    defineConfig({
         test: {
             coverage: {
-            provider: "v8",
-            include: ["src/**/*.{ts,tsx}"],
                 exclude: ["src/**/*.stories.tsx"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
             },
-        reporters,
-        globals: false,
-        pool: "threads",
             projects: [
                 {
                     extends: true,
@@ -161,4 +117,6 @@ export default defineConfig({
                 "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
             },
         },
-});
+    }),
+    true,
+);

packages/vite-common/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "@element-hq/vite-common",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "lint:types": "tsc --noEmit"
+    },
+    "dependencies": {
+        "vitest": "catalog:"
+    },
+    "devDependencies": {
+        "typescript": "catalog:"
+    },
+    "peerDependencies": {
+        "@vitest/coverage-v8": "catalog:",
+        "vitest-sonar-reporter": "catalog:"
+    }
+}

packages/vite-common/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "target": "ESNext",
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
+}

packages/vite-common/vite.config.ts

@@ -0,0 +1,61 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineConfig, type ViteUserConfig } from "vitest/config";
+import { type Reporter } from "vitest/reporters";
+import { env } from "node:process";
+
+const reporters: NonNullable<ViteUserConfig["test"]>["reporters"] = [["default"]];
+
+const slowTestReporter: Reporter = {
+    onTestRunEnd(testModules, unhandledErrors, reason) {
+        const tests = testModules
+            .flatMap((m) => Array.from(m.children.allTests()))
+            .filter((test) => test.diagnostic()?.slow);
+        tests.sort((x, y) => x.diagnostic()!.duration! - y.diagnostic()!.duration!);
+        tests.reverse();
+
+        if (tests.length > 0) {
+            console.warn("Slowest 10 tests:");
+        }
+        for (const t of tests.slice(0, 10)) {
+            console.warn(`${t.module.moduleId} > ${t.fullName}: ${t.diagnostic()?.duration.toFixed(0)}ms`);
+        }
+    },
+};
+
+// if we're running under GHA, enable the GHA & Sonar reporters
+if (env["GITHUB_ACTIONS"] !== undefined) {
+    reporters.push(["github-actions", { silent: false }]);
+    reporters.push([
+        "vitest-sonar-reporter",
+        {
+            outputFile: "coverage/sonar-report.xml",
+            onWritePath: (path): string => `${process.cwd()}/${path}`,
+        },
+    ]);
+
+    // if we're running against the develop branch, also enable the slow test reporter
+    if (env["GITHUB_REF"] == "refs/heads/develop") {
+        reporters.push(slowTestReporter);
+    }
+}
+
+export default defineConfig({
+    test: {
+        coverage: {
+            provider: "v8",
+            include: ["src/**/*.{ts,tsx}"],
+            reporter: [["lcov", { projectRoot: "../../" }]],
+        },
+        environment: "node",
+        reporters,
+        pool: "threads",
+        globals: false,
+        include: ["src/**/*.test.ts"],
+    },
+});

pnpm-workspace.yaml

@@ -22,6 +22,11 @@ catalog:
     matrix-web-i18n: 3.6.0
     # fonts
     "@fontsource/inter": 5.2.8
+    # vite
+    vite: 8.0.10
+    vitest: 4.1.5
+    vitest-sonar-reporter: 3.0.0
+    "@vitest/coverage-v8": 4.1.5
 packageExtensions:
     fdir:
         dependencies: