mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-04 11:51:36 +02:00
Code Issues Projects Releases Wiki Activity

DRY vite configs using a shared config (#33334)

Browse Source 
* 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
This commit is contained in:
Michael Telatynski 2026-04-30 08:44:29 +01:00 committed by GitHub
parent 98b56a3d2f
commit 30484ef126
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 434 additions and 543 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/desktop/package.json
View File

@ -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": "^4.1.5",
"vitest-sonar-reporter": "^3.0.0"
"vitest": "catalog:",
"vitest-sonar-reporter": "catalog:"
},
"hakDependencies": {
"matrix-seshat": "4.2.0"

69
apps/desktop/vitest.config.ts
View File

@ -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 { type UserConfig } from "vite";
import { type Reporter } from "vitest/reporters";
import { env } from "node:process";
import { defineConfig, mergeConfig } from "vitest/config";
import baseConfig from "@element-hq/vite-common/vite.config.js";
const reporters: NonNullable<UserConfig["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 => `apps/desktop/${path}`,
export default mergeConfig(
baseConfig,
defineConfig({
test: {
coverage: {
// The coverage report currently chokes on this file as it doesn't process it as TypeScript
exclude: ["src/preload.cts"],
},
include: ["src/**/*.test.ts"],
},
]);
// 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,
);

9
packages/module-api/package.json
View File

@ -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",
"vitest": "^4.0.0",
"vitest-sonar-reporter": "^3.0.0"
"vite": "catalog:",
"vitest": "catalog:",
"vitest-sonar-reporter": "catalog:"
},
"peerDependencies": {
"@matrix-org/react-sdk-module-api": "*",

76
packages/module-api/vite.config.ts
View File

@ -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({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "element-web-plugin-engine",
fileName: "element-web-plugin-engine",
export default mergeConfig(
baseConfig,
defineConfig({
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "element-web-plugin-engine",
fileName: "element-web-plugin-engine",
},
outDir: "lib",
target: "esnext",
sourcemap: true,
},
outDir: "lib",
target: "esnext",
sourcemap: true,
},
plugins: [
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}`;
},
},
],
plugins: [
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" } },
},
}),
true,
);

11
packages/shared-components/package.json
View File

@ -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-sonar-reporter": "^3.0.0"
"vitest": "catalog:",
"vitest-sonar-reporter": "catalog:"
},
"engines": {
"node": ">=20.0.0"

8
packages/shared-components/project.json
View File

@ -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"]
}
}
}

220
packages/shared-components/vitest.config.ts
View File

@ -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({
test: {
coverage: {
provider: "v8",
include: ["src/**/*.{ts,tsx}"],
exclude: ["src/**/*.stories.tsx"],
reporter: [["lcov", { projectRoot: "../../" }]],
},
reporters,
globals: false,
pool: "threads",
projects: [
{
extends: true,
plugins: [
// 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
storybookTest({
configDir: path.join(dirname, ".storybook"),
storybookScript: "storybook --ci",
tags: {
exclude: ["skip-test"],
export default mergeConfig(
baseConfig,
defineConfig({
test: {
coverage: {
exclude: ["src/**/*.stories.tsx"],
},
projects: [
{
extends: true,
plugins: [
// 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
storybookTest({
configDir: path.join(dirname, ".storybook"),
storybookScript: "storybook --ci",
tags: {
exclude: ["skip-test"],
},
}),
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" }],
},
}),
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]",
setupFiles: [".storybook/vitest.setup.ts"],
},
},
},
],
},
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"),
{
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]",
},
},
},
],
},
},
});
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,
);

19
packages/vite-common/package.json Normal file
View File

@ -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:"
}
}

9
packages/vite-common/tsconfig.json Normal file
View File

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

61
packages/vite-common/vite.config.ts Normal file
View File

@ -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"],
},
});

482
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

5
pnpm-workspace.yaml
View File

@ -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: