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) {
+        test: {
-        const tests = testModules
+            coverage: {
-            .flatMap((m) => Array.from(m.children.allTests()))
+                // The coverage report currently chokes on this file as it doesn't process it as TypeScript
-            .filter((test) => test.diagnostic()?.slow);
+                exclude: ["src/preload.cts"],
-        tests.sort((x, y) => x.diagnostic()!.duration! - y.diagnostic()!.duration!);
+            },
-        tests.reverse();
+            include: ["src/**/*.test.ts"],
-
-        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}`,
         },
-    ]);
+    }),
-
+    true,
-    // 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"],
-    },
-});

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,57 +7,43 @@ 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(
-    build: {
+    baseConfig,
-        lib: {
+    defineConfig({
-            entry: resolve(__dirname, "src/index.ts"),
+        build: {
-            name: "element-web-plugin-engine",
+            lib: {
-            fileName: "element-web-plugin-engine",
+                entry: resolve(__dirname, "src/index.ts"),
+                name: "element-web-plugin-engine",
+                fileName: "element-web-plugin-engine",
+            },
+            outDir: "lib",
+            target: "esnext",
+            sourcemap: true,
         },
-        outDir: "lib",
+        plugins: [
-        target: "esnext",
+            dts(),
-        sourcemap: true,
+            externalGlobals({
-    },
+                // Reuse React from the host app
-    plugins: [
+                react: "window.React",
-        dts(),
+            }),
-        externalGlobals({
-            // Reuse React from the host app
-            react: "window.React",
-        }),
-    ],
-    define: {
-        // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
-        // this would contain the version of element-web rather than that of the module-api.
-        __VERSION__: JSON.stringify(packageJson.version),
-        // Use production mode for the build as it is tested against production builds of Element Web,
-        // this is required for React JSX versions to be compatible.
-        process: { env: { NODE_ENV: "production" } },
-    },
-    test: {
-        coverage: {
-            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}`;
-                    },
-                },
-            ],
         ],
-    },
+        define: {
-});
+            // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
+            // this would contain the version of element-web rather than that of the module-api.
+            __VERSION__: JSON.stringify(packageJson.version),
+            // Use production mode for the build as it is tested against production builds of Element Web,
+            // this is required for React JSX versions to be compatible.
+            process: { env: { NODE_ENV: "production" } },
+        },
+    }),
+    true,
+);

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,95 +30,93 @@ const commonLaunchOptions = {
     args: ["--font-render-hinting=none", "--disable-font-subpixel-positioning", "--disable-lcd-text"],
 };
 
-export default defineConfig({
+export default mergeConfig(
-    test: {
+    baseConfig,
-        coverage: {
+    defineConfig({
-            provider: "v8",
+        test: {
-            include: ["src/**/*.{ts,tsx}"],
+            coverage: {
-            exclude: ["src/**/*.stories.tsx"],
+                exclude: ["src/**/*.stories.tsx"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
+            },
-        },
+            projects: [
-        reporters,
+                {
-        globals: false,
+                    extends: true,
-        pool: "threads",
+                    plugins: [
-        projects: [
+                        // The plugin will run tests for the stories defined in your Storybook config
-            {
+                        // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-                extends: true,
+                        storybookTest({
-                plugins: [
+                            configDir: path.join(dirname, ".storybook"),
-                    // The plugin will run tests for the stories defined in your Storybook config
+                            storybookScript: "storybook --ci",
-                    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                            tags: {
-                    storybookTest({
+                                exclude: ["skip-test"],
-                        configDir: path.join(dirname, ".storybook"),
+                            },
-                        storybookScript: "storybook --ci",
+                        }),
-                        tags: {
+                        storybookVis({
-                            exclude: ["skip-test"],
+                            // 3px of difference allowed before marking as failed
+                            failureThreshold: 3,
+                            // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
+                            snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
+                        }),
+                    ],
+                    test: {
+                        name: "storybook",
+                        browser: {
+                            enabled: true,
+                            headless: true,
+                            provider: playwright({
+                                contextOptions: commonContextOptions,
+                                launchOptions: commonLaunchOptions,
+                                connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+                                    ? {
+                                          wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+                                          exposeNetwork: "<loopback>",
+                                      }
+                                    : undefined,
+                            }),
+                            instances: [{ browser: "chromium" }],
                         },
-                    }),
+                        setupFiles: [".storybook/vitest.setup.ts"],
-                    storybookVis({
-                        // 3px of difference allowed before marking as failed
-                        failureThreshold: 3,
-                        // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
-                        snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
-                    }),
-                ],
-                test: {
-                    name: "storybook",
-                    browser: {
-                        enabled: true,
-                        headless: true,
-                        provider: playwright({
-                            contextOptions: commonContextOptions,
-                            launchOptions: commonLaunchOptions,
-                            connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
-                                ? {
-                                      wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
-                                      exposeNetwork: "<loopback>",
-                                  }
-                                : undefined,
-                        }),
-                        instances: [{ browser: "chromium" }],
-                    },
-                    setupFiles: [".storybook/vitest.setup.ts"],
-                },
-            },
-            {
-                extends: true,
-                // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
-                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
-                test: {
-                    name: "unit",
-                    browser: {
-                        enabled: true,
-                        headless: true,
-                        provider: playwright({
-                            // These tests don't actually take screenshots (at least at time of writing)
-                            // but let's pass these options everywhere for consistency
-                            contextOptions: commonContextOptions,
-                            launchOptions: commonLaunchOptions,
-                        }),
-                        instances: [{ browser: "chromium" }],
-                    },
-                    setupFiles: ["src/test/setupTests.ts"],
-                },
-                css: {
-                    modules: {
-                        // Stabilise snapshots while keeping names distinct across CSS modules.
-                        generateScopedName: "[name]_[local]",
                     },
                 },
-            },
+                {
-        ],
+                    extends: true,
-    },
+                    // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
-    optimizeDeps: {
+                    plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
-        include: [
+                    test: {
-            "vite-plugin-node-polyfills/shims/buffer",
+                        name: "unit",
-            "vite-plugin-node-polyfills/shims/process",
+                        browser: {
-            "@vector-im/compound-design-tokens/assets/web/icons",
+                            enabled: true,
-        ],
+                            headless: true,
-    },
+                            provider: playwright({
-    resolve: {
+                                // These tests don't actually take screenshots (at least at time of writing)
-        alias: {
+                                // but let's pass these options everywhere for consistency
-            "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
+                                contextOptions: commonContextOptions,
+                                launchOptions: commonLaunchOptions,
+                            }),
+                            instances: [{ browser: "chromium" }],
+                        },
+                        setupFiles: ["src/test/setupTests.ts"],
+                    },
+                    css: {
+                        modules: {
+                            // Stabilise snapshots while keeping names distinct across CSS modules.
+                            generateScopedName: "[name]_[local]",
+                        },
+                    },
+                },
+            ],
         },
-    },
+        optimizeDeps: {
-});
+            include: [
+                "vite-plugin-node-polyfills/shims/buffer",
+                "vite-plugin-node-polyfills/shims/process",
+                "@vector-im/compound-design-tokens/assets/web/icons",
+            ],
+        },
+        resolve: {
+            alias: {
+                "@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: