Jika/element-web
1
0
Fork 0
Code Issues Pull Requests Projects Wiki Activity

Use typescript for webpack config (#32507)

Browse Source 
* Move declaration.d.ts to @types

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Load customisations.json without `require`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove webpack rule from when we were consuming shared-components ts vs js

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Avoid hardcoding paths to modules in webpack config

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Convert webpack config to typescript

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Stub js webpack/postcss plugins

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Patch broken rollup types until https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/870 is released

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Install @types/postcss-import

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix fdir relying on @types/picomatch

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update pnpm-lock.yaml

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2026-02-16 10:10:24 +00:00
committed by GitHub
parent d0b53a6a6c
commit be843c4baa
12 changed files with 231 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
declaration.d.ts → @types/declaration.d.ts vendored
View File

10
@types/postcss-easings.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
declare module "postcss-easings" {
export default function (): void;
}

10
@types/postcss-hexrgba.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
declare module "postcss-hexrgba" {
export default function (): void;
}

10
@types/postcss-mixins.d.ts vendored Normal file
View File

@@ -0,0 +1,10 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
declare module "postcss-mixins" {
export default function (): void;
}

19
@types/webpack-version-file-plugin.d.ts vendored Normal file
View File

@@ -0,0 +1,19 @@
/*
Copyright 2026 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
declare module "webpack-version-file-plugin" {
interface Opts {
outputFile: string;
template?: string;
templateString?: string;
extras?: Record<string, string>;
}
export default class VersionFilePlugin {
public constructor(opts: Opts);
}
}

4
package.json
View File

@@ -181,6 +181,7 @@
"@types/modernizr": "^3.5.3",
"@types/node": "22",
"@types/pako": "^2.0.0",
"@types/postcss-import": "^14.0.3",
"@types/qrcode": "^1.3.5",
"@types/react": "catalog:",
"@types/react-beautiful-dnd": "^13.0.0",
@@ -284,7 +285,8 @@
"@types/mdx": "patches/@types__mdx.patch",
"await-lock": "patches/await-lock.patch",
"jest-fixed-jsdom": "patches/jest-fixed-jsdom.patch",
"jsdom": "patches/jsdom.patch"
"jsdom": "patches/jsdom.patch",
"rollup": "patches/rollup.patch"
},
"peerDependencyRules": {
"allowedVersions": {

14
patches/rollup.patch Normal file
View File

@@ -0,0 +1,14 @@
diff --git a/dist/rollup.d.ts b/dist/rollup.d.ts
index 799df4a69cc0d7ac26c3357c8c2bd3f68365d609..67a6e48c65324f62a6724732f90ad0a776fa7ef5 100644
--- a/dist/rollup.d.ts
+++ b/dist/rollup.d.ts
@@ -160,6 +160,9 @@ export interface MinimalPluginContext {
warn: LoggingFunction;
}
+// Temporary until https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/870 is released
+export type AcornNode = unknown;
+
export interface EmittedAsset {
fileName?: string | undefined;
name?: string | undefined;

84
pnpm-lock.yaml generated
View File

@@ -46,6 +46,8 @@ overrides:
wrap-ansi: npm:wrap-ansi@^7.0.0
matrix-widget-api: ^1.16.1
packageExtensionsChecksum: sha256-OFePh8Fn8A1ZEWgJF51vTMPT/HEVyXQyj6YGIztPb0w=
patchedDependencies:
'@matrix-org/react-sdk-module-api':
hash: 016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96
@@ -71,6 +73,9 @@ patchedDependencies:
react-blurhash:
hash: 58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505
path: patches/react-blurhash.patch
rollup:
hash: 603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8
path: patches/rollup.patch
importers:
@@ -222,7 +227,7 @@ importers:
version: 1.0.3
matrix-js-sdk:
specifier: github:matrix-org/matrix-js-sdk#develop
version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/327d2fa7c8dca5c881969ca0a4ce279c36389750
version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e74eb4928e748194165b7200afe48e582bdc1fd7
matrix-widget-api:
specifier: ^1.16.1
version: 1.17.0
@@ -455,6 +460,9 @@ importers:
'@types/pako':
specifier: ^2.0.0
version: 2.0.4
'@types/postcss-import':
specifier: ^14.0.3
version: 14.0.3
'@types/qrcode':
specifier: ^1.3.5
version: 1.5.6
@@ -770,10 +778,10 @@ importers:
version: 10.2.5(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
'@storybook/addon-designs':
specifier: ^11.0.1
version: 11.1.1(@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0))))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
version: 11.1.1(@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0))))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
'@storybook/addon-docs':
specifier: ^10.0.7
version: 10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
version: 10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/addon-vitest':
specifier: ^10.1.11
version: 10.2.5(@vitest/browser-playwright@4.0.18)(@vitest/browser@4.0.18(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(vitest@4.0.18))(@vitest/runner@4.0.18)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vitest@4.0.18)
@@ -782,7 +790,7 @@ importers:
version: 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@storybook/react-vite':
specifier: ^10.0.7
version: 10.2.5(esbuild@0.27.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
version: 10.2.5(esbuild@0.27.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@stylistic/eslint-plugin':
specifier: ^5.7.0
version: 5.7.1(eslint@8.57.1)
@@ -896,10 +904,10 @@ importers:
version: 7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
vite-plugin-dts:
specifier: ^4.5.4
version: 4.5.4(@types/node@24.10.13)(rollup@4.57.1)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
version: 4.5.4(@types/node@24.10.13)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
vite-plugin-node-polyfills:
specifier: ^0.25.0
version: 0.25.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
version: 0.25.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
vitest:
specifier: ^4.0.18
version: 4.0.18(@opentelemetry/api@1.9.0)(@types/node@24.10.13)(@vitest/browser-playwright@4.0.18)(@vitest/ui@4.0.18)(jiti@2.6.1)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -4146,9 +4154,15 @@ packages:
'@types/parse-json@4.0.2':
resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
'@types/picomatch@4.0.2':
resolution: {integrity: sha512-qHHxQ+P9PysNEGbALT8f8YOSHW0KJu6l2xU8DYY0fu/EmGxXdVnuTLvFUvBgPJMSqXq29SYHveejeAha+4AYgA==}
'@types/png-chunks-extract@1.0.2':
resolution: {integrity: sha512-z6djfFIbrrddtunoMJBOPlyZrnmeuG1kkvHUNi2QfpOb+JMMLuLliHHTmMyRi7k7LiTAut0HbdGCF6ibDtQAHQ==}
'@types/postcss-import@14.0.3':
resolution: {integrity: sha512-raZhRVTf6Vw5+QbmQ7LOHSDML71A5rj4+EqDzAbrZPfxfoGzFxMHRCq16VlddGIZpHELw0BG4G0YE2ANkdZiIQ==}
'@types/qrcode@1.5.6':
resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
@@ -7712,8 +7726,8 @@ packages:
matrix-events-sdk@0.0.1:
resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/327d2fa7c8dca5c881969ca0a4ce279c36389750:
resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/327d2fa7c8dca5c881969ca0a4ce279c36389750}
matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e74eb4928e748194165b7200afe48e582bdc1fd7:
resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e74eb4928e748194165b7200afe48e582bdc1fd7}
version: 40.2.0
engines: {node: '>=22.0.0'}
@@ -13437,21 +13451,21 @@ snapshots:
'@rolldown/pluginutils@1.0.0-rc.2': {}
'@rollup/plugin-inject@5.0.5(rollup@4.57.1)':
'@rollup/plugin-inject@5.0.5(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))':
dependencies:
'@rollup/pluginutils': 5.3.0(rollup@4.57.1)
'@rollup/pluginutils': 5.3.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
estree-walker: 2.0.2
magic-string: 0.30.21
optionalDependencies:
rollup: 4.57.1
rollup: 4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
'@rollup/pluginutils@5.3.0(rollup@4.57.1)':
'@rollup/pluginutils@5.3.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))':
dependencies:
'@types/estree': 1.0.8
estree-walker: 2.0.2
picomatch: 4.0.3
optionalDependencies:
rollup: 4.57.1
rollup: 4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
'@rollup/rollup-android-arm-eabi@4.57.1':
optional: true
@@ -13707,21 +13721,21 @@ snapshots:
axe-core: 4.11.1
storybook: 10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@storybook/addon-designs@11.1.1(@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0))))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
'@storybook/addon-designs@11.1.1(@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0))))(@types/react@19.2.10)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))':
dependencies:
'@figspec/react': 2.0.1(@types/react@19.2.10)(react@19.2.4)
storybook: 10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
optionalDependencies:
'@storybook/addon-docs': 10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/addon-docs': 10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
react: 19.2.4
react-dom: 19.2.4(react@19.2.4)
transitivePeerDependencies:
- '@types/react'
'@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
'@storybook/addon-docs@10.2.5(@types/react@19.2.10)(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
dependencies:
'@mdx-js/react': 3.1.1(@types/react@19.2.10)(react@19.2.4)
'@storybook/csf-plugin': 10.2.5(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/csf-plugin': 10.2.5(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/icons': 2.0.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@storybook/react-dom-shim': 10.2.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))
react: 19.2.4
@@ -13749,9 +13763,9 @@ snapshots:
- react
- react-dom
'@storybook/builder-vite@10.2.5(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
'@storybook/builder-vite@10.2.5(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
dependencies:
'@storybook/csf-plugin': 10.2.5(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/csf-plugin': 10.2.5(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
storybook: 10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
ts-dedent: 2.2.0
vite: 7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
@@ -13760,13 +13774,13 @@ snapshots:
- rollup
- webpack
'@storybook/csf-plugin@10.2.5(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
'@storybook/csf-plugin@10.2.5(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
dependencies:
storybook: 10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
unplugin: 2.3.11
optionalDependencies:
esbuild: 0.27.2
rollup: 4.57.1
rollup: 4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
vite: 7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
webpack: 5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0))
@@ -13783,11 +13797,11 @@ snapshots:
react-dom: 19.2.4(react@19.2.4)
storybook: 10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
'@storybook/react-vite@10.2.5(esbuild@0.27.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
'@storybook/react-vite@10.2.5(esbuild@0.27.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))':
dependencies:
'@joshwooding/vite-plugin-react-docgen-typescript': 0.6.3(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
'@rollup/pluginutils': 5.3.0(rollup@4.57.1)
'@storybook/builder-vite': 10.2.5(esbuild@0.27.2)(rollup@4.57.1)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@rollup/pluginutils': 5.3.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
'@storybook/builder-vite': 10.2.5(esbuild@0.27.2)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(webpack@5.105.0(esbuild@0.27.2)(webpack-cli@6.0.1(webpack-bundle-analyzer@5.2.0)(webpack-dev-server@5.2.3)(webpack@5.105.0)))
'@storybook/react': 10.2.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(storybook@10.2.5(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
empathic: 2.0.0
magic-string: 0.30.21
@@ -14176,8 +14190,14 @@ snapshots:
'@types/parse-json@4.0.2': {}
'@types/picomatch@4.0.2': {}
'@types/png-chunks-extract@1.0.2': {}
'@types/postcss-import@14.0.3':
dependencies:
postcss: 8.5.6
'@types/qrcode@1.5.6':
dependencies:
'@types/node': 22.19.8
@@ -16879,6 +16899,8 @@ snapshots:
walk-up-path: 4.0.0
fdir@6.5.0(picomatch@4.0.3):
dependencies:
'@types/picomatch': 4.0.2
optionalDependencies:
picomatch: 4.0.3
@@ -18512,7 +18534,7 @@ snapshots:
matrix-events-sdk@0.0.1: {}
matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/327d2fa7c8dca5c881969ca0a4ce279c36389750:
matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/e74eb4928e748194165b7200afe48e582bdc1fd7:
dependencies:
'@babel/runtime': 7.28.6
'@matrix-org/matrix-sdk-crypto-wasm': 17.1.0
@@ -20168,7 +20190,7 @@ snapshots:
hash-base: 3.1.2
inherits: 2.0.4
rollup@4.57.1:
rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8):
dependencies:
'@types/estree': 1.0.8
optionalDependencies:
@@ -21393,10 +21415,10 @@ snapshots:
- '@types/react'
- '@types/react-dom'
vite-plugin-dts@4.5.4(@types/node@24.10.13)(rollup@4.57.1)(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
vite-plugin-dts@4.5.4(@types/node@24.10.13)(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@5.9.3)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
dependencies:
'@microsoft/api-extractor': 7.56.0(@types/node@24.10.13)
'@rollup/pluginutils': 5.3.0(rollup@4.57.1)
'@rollup/pluginutils': 5.3.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
'@volar/typescript': 2.4.28
'@vue/language-core': 2.2.0(typescript@5.9.3)
compare-versions: 6.1.1
@@ -21412,9 +21434,9 @@ snapshots:
- rollup
- supports-color
vite-plugin-node-polyfills@0.25.0(rollup@4.57.1)(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
vite-plugin-node-polyfills@0.25.0(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)):
dependencies:
'@rollup/plugin-inject': 5.0.5(rollup@4.57.1)
'@rollup/plugin-inject': 5.0.5(rollup@4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
node-stdlib-browser: 1.3.1
vite: 7.3.1(@types/node@24.10.13)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
transitivePeerDependencies:
@@ -21426,7 +21448,7 @@ snapshots:
fdir: 6.5.0(picomatch@4.0.3)
picomatch: 4.0.3
postcss: 8.5.6
rollup: 4.57.1
rollup: 4.57.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
tinyglobby: 0.2.15
optionalDependencies:
'@types/node': 24.10.13

5
pnpm-workspace.yaml
View File

@@ -22,3 +22,8 @@ catalog:
"@vector-im/compound-web": 8.3.6
# i18n
matrix-web-i18n: 3.6.0
packageExtensions:
fdir:
dependencies:
# Fix missing type dependency
"@types/picomatch": 4.0.2

4
project.json
View File

@@ -30,7 +30,7 @@
"outputs": ["{projectRoot}/res/css/_components.pcss"]
},
"build": {
"command": "webpack-cli --progress --mode production",
"command": "webpack-cli --disable-interpret --progress --mode production",
"outputs": ["{projectRoot}/webapp"]
},
"start:i18n": {
@@ -39,7 +39,7 @@
"continuous": true
},
"start": {
"command": "webpack-dev-server --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
"command": "webpack-dev-server --disable-interpret --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
"dependsOn": ["prebuild:*", "start:i18n", "^start"],
"continuous": true
},

5
tsconfig.json
View File

@@ -6,7 +6,7 @@
"resolveJsonModule": true,
"esModuleInterop": true,
"useDefineForClassFields": true,
"module": "es2022",
"module": "preserve",
"moduleResolution": "bundler",
"target": "es2022",
"noUnusedLocals": true,
@@ -28,6 +28,7 @@
"./test/**/*.ts",
"./test/**/*.tsx",
"./scripts/*.ts",
"./declaration.d.ts"
"./@types/*.d.ts",
"./webpack.config.ts"
]
}

179
webpack.config.cjs → webpack.config.ts
View File

@@ -5,25 +5,50 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
/* eslint-disable quote-props */
import dotenv from "dotenv";
import path from "node:path";
import fs from "node:fs";
import { fileURLToPath } from "node:url";
import webpack from "webpack";
import "webpack-dev-server"; // for types
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import TerserPlugin from "terser-webpack-plugin";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import HtmlWebpackInjectPreload from "@principalstudio/html-webpack-inject-preload";
import CopyWebpackPlugin from "copy-webpack-plugin";
import VersionFilePlugin from "webpack-version-file-plugin";
import { RetryChunkLoadPlugin } from "webpack-retry-chunk-load-plugin";
import postcssSimpleVars from "postcss-simple-vars";
import postcssHexrgba from "postcss-hexrgba";
import postcssPresetEnv from "postcss-preset-env";
import postcssImport from "postcss-import";
import postcssMixins from "postcss-mixins";
import postcssNested from "postcss-nested";
import postcssEasings from "postcss-easings";
const dotenv = require("dotenv");
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackInjectPreload = require("@principalstudio/html-webpack-inject-preload");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VersionFilePlugin = require("webpack-version-file-plugin");
const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin");
import pkgJson from "./package.json" with { type: "json" };
import componentsJson from "./components.json" with { type: "json" };
import type { sentryWebpackPlugin as sentryWebpackPluginType } from "@sentry/webpack-plugin/webpack5";
// Environment variables
// RIOT_OG_IMAGE_URL: specifies the URL to the image which should be used for the opengraph logo.
// CSP_EXTRA_SOURCE: specifies a URL which should be appended to each CSP directive which uses 'self',
// this can be helpful if your deployment has redirects for old bundles, such as develop.element.io.
let sentryWebpackPlugin: typeof sentryWebpackPluginType | undefined;
// This plugin throws an error on import on some platforms like ppc64le & s390x even if the plugin isn't called,
// so we import it conditionally.
if (process.env.SENTRY_DSN) {
try {
({ sentryWebpackPlugin } = await import("@sentry/webpack-plugin/webpack5"));
} catch (e) {
console.warn("Failed to load sentry plugin", e);
}
}
const __dirname = path.dirname(fileURLToPath(import.meta.url));
dotenv.config();
let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
if (!ogImageUrl) ogImageUrl = "https://app.element.io/themes/element/img/logos/opengraph.png";
@@ -44,7 +69,8 @@ let fileOverrides = {
/* {[file: string]: string} */
};
try {
fileOverrides = require("./customisations.json");
const customisationsFile = fs.readFileSync("./customisations.json", "utf-8");
fileOverrides = JSON.parse(customisationsFile);
// stringify the output so it appears in logs correctly, as large files can sometimes get
// represented as `<Object>` which is less than helpful.
@@ -58,11 +84,17 @@ try {
console.warn("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
console.log(""); // blank line
});
} catch (e) {
} catch {
// ignore - not important
}
function parseOverridesToReplacements(overrides) {
// Get the root of a node_modules dependency the name of its import
function getPackageRoot(dep: string, target = "package.json"): string {
const targetPath = import.meta.resolve(`${dep}${target ? "/" + target : ""}`);
return path.dirname(targetPath.startsWith("file://") ? targetPath.slice(7) : targetPath);
}
function parseOverridesToReplacements(overrides: Record<string, string>): webpack.NormalModuleReplacementPlugin[] {
return Object.entries(overrides).map(([oldPath, newPath]) => {
return new webpack.NormalModuleReplacementPlugin(
// because the input is effectively defined by the person running the build, we don't
@@ -82,13 +114,13 @@ function parseOverridesToReplacements(overrides) {
}
const moduleReplacementPlugins = [
...parseOverridesToReplacements(require("./components.json")),
...parseOverridesToReplacements(componentsJson),
// Allow customisations to override the default components too
...parseOverridesToReplacements(fileOverrides),
];
module.exports = (env, argv) => {
export default (env: string, argv: Record<string, any>): webpack.Configuration => {
// Establish settings based on the environment and args.
//
// argv.mode is always set to "production" by pnpm build
@@ -103,13 +135,13 @@ module.exports = (env, argv) => {
let VERSION = process.env.VERSION;
if (!VERSION) {
VERSION = require("./package.json").version;
VERSION = pkgJson.version;
if (devMode) {
VERSION += "-dev";
}
}
const development = {};
const development: Pick<webpack.Configuration, "devtool"> = {};
if (devMode) {
// Embedded source maps for dev builds, can't use eval-source-map due to CSP
development["devtool"] = "inline-source-map";
@@ -123,7 +155,7 @@ module.exports = (env, argv) => {
// Resolve the directories for the js-sdk for later use. We resolve these early, so we
// don't have to call them over and over. We also resolve to the package.json instead of the src
// directory, so we don't have to rely on an index.js or similar file existing.
const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), "..", "src");
const jsSdkSrcDir = path.join(getPackageRoot("matrix-js-sdk"), "src");
return {
...development,
@@ -205,25 +237,22 @@ module.exports = (env, argv) => {
// alias any requires to the react module to the one in our path,
// otherwise we tend to get the react source included twice when
// using linked dependencies.
"react": path.resolve(__dirname, "node_modules/react"),
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
"react": getPackageRoot("react"),
"react-dom": getPackageRoot("react-dom"),
// Same goes for js/react-sdk - we don't need two copies.
"matrix-js-sdk": path.resolve(__dirname, "node_modules/matrix-js-sdk"),
"@matrix-org/react-sdk-module-api": path.resolve(
__dirname,
"node_modules/@matrix-org/react-sdk-module-api",
),
"matrix-js-sdk": getPackageRoot("matrix-js-sdk"),
"@matrix-org/react-sdk-module-api": getPackageRoot("@matrix-org/react-sdk-module-api"),
// and matrix-widget-api
"matrix-widget-api": path.resolve(__dirname, "node_modules/matrix-widget-api"),
"oidc-client-ts": path.resolve(__dirname, "node_modules/oidc-client-ts"),
"matrix-widget-api": getPackageRoot("matrix-widget-api"),
"oidc-client-ts": getPackageRoot("oidc-client-ts"),
// Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, "webapp"),
// Make shared-components imports resolve to EW deps
"counterpart": path.resolve(__dirname, "node_modules/counterpart"),
"@vector-im/compound-web": path.resolve(__dirname, "node_modules/@vector-im/compound-web"),
"counterpart": getPackageRoot("counterpart"),
"@vector-im/compound-web": getPackageRoot("@vector-im/compound-web", ""),
},
fallback: {
// Mock out the NodeFS module: The opus decoder imports this wrongly.
@@ -233,9 +262,9 @@ module.exports = (env, argv) => {
"crypto": false,
// Polyfill needed by counterpart
"util": require.resolve("util/"),
"util": import.meta.resolve("util/"),
// Polyfill needed by sentry
"process/browser": require.resolve("process/browser"),
"process/browser": import.meta.resolve("process/browser"),
},
// Enable the custom "wasm-esm" export condition [1] to indicate to
@@ -266,19 +295,15 @@ module.exports = (env, argv) => {
rules: [
{
test: /\.js$/,
enforce: "pre",
enforce: "pre" as const,
use: ["source-map-loader"],
},
{
test: /\.(ts|js)x?$/,
include: (f) => {
include: (f: string) => {
// our own source needs babel-ing
if (f.startsWith(path.resolve(__dirname, "src"))) return true;
// We import the typescript source directly from shared-components
// to avoid having to build as we dev, so include them too.
if (f.startsWith(path.resolve(__dirname, "packages", "shared-components"))) return true;
// we use the original source files of js-sdk, so we need to
// run them through babel. Because the path tested is the resolved, absolute
// path, these could be anywhere thanks to linking. We must also not
@@ -340,12 +365,12 @@ module.exports = (env, argv) => {
// at the top of this webpack config help group the SCSS and
// plain CSS together for the bundler.
require("postcss-simple-vars")(),
require("postcss-hexrgba")(),
postcssSimpleVars(),
postcssHexrgba(),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
postcssPresetEnv({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
"local-plugins": true,
@@ -374,16 +399,16 @@ module.exports = (env, argv) => {
postcssOptions: () => ({
"plugins": [
// Note that we use slightly different plugins for PostCSS.
require("postcss-import")(),
require("postcss-mixins")(),
require("postcss-simple-vars")(),
require("postcss-nested")(),
require("postcss-easings")(),
require("postcss-hexrgba")(),
postcssImport(),
postcssMixins(),
postcssSimpleVars(),
postcssNested(),
postcssEasings(),
postcssHexrgba(),
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
postcssPresetEnv({ stage: 3, browsers: "last 2 versions" }),
],
"parser": "postcss-scss",
"local-plugins": true,
@@ -509,7 +534,7 @@ module.exports = (env, argv) => {
esModule: false,
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function (url, resourcePath) {
publicPath: function (url: string, resourcePath: string) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
@@ -521,7 +546,7 @@ module.exports = (env, argv) => {
esModule: false,
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function (url, resourcePath) {
publicPath: function (url: string, resourcePath: string) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
@@ -539,7 +564,7 @@ module.exports = (env, argv) => {
esModule: false,
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function (url, resourcePath) {
publicPath: function (url: string, resourcePath: string) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
@@ -563,7 +588,7 @@ module.exports = (env, argv) => {
esModule: false,
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function (url, resourcePath) {
publicPath: function (url: string, resourcePath: string) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
@@ -579,7 +604,7 @@ module.exports = (env, argv) => {
esModule: false,
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function (url, resourcePath) {
publicPath: function (url: string, resourcePath: string) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
@@ -655,23 +680,23 @@ module.exports = (env, argv) => {
}),
new HtmlWebpackInjectPreload({
files: [{ match: /.*Inter.*\.woff2$/ }],
files: [{ match: /.*Inter.*\.woff2$/, attributes: {} }],
}),
// Upload to sentry if sentry env is present
// This plugin throws an error on import on some platforms like ppc64le & s390x even if the plugin isn't called,
// so we require it conditionally.
process.env.SENTRY_DSN &&
require("@sentry/webpack-plugin").sentryWebpackPlugin({
release: process.env.VERSION,
sourcemaps: {
paths: "./webapp/bundles/**",
},
errorHandler: (err) => {
console.warn("Sentry CLI Plugin: " + err.message);
console.log(`::warning title=Sentry error::${err.message}`);
},
}),
sentryWebpackPlugin?.({
release: {
name: VERSION,
inject: false,
},
sourcemaps: {
assets: "./webapp/bundles/**",
},
errorHandler: (err) => {
console.warn("Sentry CLI Plugin: " + err.message);
console.log(`::warning title=Sentry error::${err.message}`);
},
}),
new CopyWebpackPlugin({
patterns: [
@@ -690,7 +715,7 @@ module.exports = (env, argv) => {
// Element Call embedded widget
{
from: "**",
context: path.resolve(__dirname, "node_modules/@element-hq/element-call-embedded/dist"),
context: path.join(getPackageRoot("@element-hq/element-call-embedded"), "dist"),
to: path.join(__dirname, "webapp", "widgets", "element-call"),
},
// Mobile guide assets
@@ -784,11 +809,11 @@ module.exports = (env, argv) => {
* Merge assets found via CSS and imports into a single tree, while also preserving
* directories under e.g. `res` or similar.
*
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
* @param {string} resourcePath The absolute path to the source file with unmodified name.
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
* @param url The adjusted name of the file, such as `warning.1234567.svg`.
* @param resourcePath The absolute path to the source file with unmodified name.
* @return The returned paths will look like `img/warning.1234567.svg`.
*/
function getAssetOutputPath(url, resourcePath) {
function getAssetOutputPath(url: string, resourcePath: string): string {
const isKaTeX = resourcePath.includes("KaTeX");
const isFontSource = resourcePath.includes("@fontsource");
const mobileGuideAssetsPath = path.join("mobile_guide", "assets");
@@ -818,7 +843,7 @@ function getAssetOutputPath(url, resourcePath) {
*/
const compoundImportsPrefix = /@vector-im(?:\\|\/)compound-(.*?)(?:\\|\/)/;
const compoundMatch = outputDir.match(compoundImportsPrefix);
if (compoundMatch) {
if (compoundMatch?.index !== undefined) {
outputDir = outputDir.substring(compoundMatch.index + compoundMatch[0].length);
}
@@ -843,9 +868,9 @@ function getAssetOutputPath(url, resourcePath) {
* Convert path to public path format, which always uses forward slashes, since it will
* be placed directly into things like CSS files.
*
* @param {string} path Some path to a file.
* @returns {string} converted path
* @param path Some path to a file.
* @returns converted path
*/
function toPublicPath(path) {
function toPublicPath(path: string): string {
return path.replace(/\\/g, "/");
}