From be843c4baad5dd87f5a6b3db3f5913c088bc6fa6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 16 Feb 2026 10:10:24 +0000 Subject: [PATCH] Use typescript for webpack config (#32507) * 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> --- declaration.d.ts => @types/declaration.d.ts | 0 @types/postcss-easings.d.ts | 10 ++ @types/postcss-hexrgba.d.ts | 10 ++ @types/postcss-mixins.d.ts | 10 ++ @types/webpack-version-file-plugin.d.ts | 19 +++ package.json | 4 +- patches/rollup.patch | 14 ++ pnpm-lock.yaml | 84 +++++---- pnpm-workspace.yaml | 5 + project.json | 4 +- tsconfig.json | 5 +- webpack.config.cjs => webpack.config.ts | 179 +++++++++++--------- 12 files changed, 231 insertions(+), 113 deletions(-) rename declaration.d.ts => @types/declaration.d.ts (100%) create mode 100644 @types/postcss-easings.d.ts create mode 100644 @types/postcss-hexrgba.d.ts create mode 100644 @types/postcss-mixins.d.ts create mode 100644 @types/webpack-version-file-plugin.d.ts create mode 100644 patches/rollup.patch rename webpack.config.cjs => webpack.config.ts (86%) diff --git a/declaration.d.ts b/@types/declaration.d.ts similarity index 100% rename from declaration.d.ts rename to @types/declaration.d.ts diff --git a/@types/postcss-easings.d.ts b/@types/postcss-easings.d.ts new file mode 100644 index 0000000000..95a59e1a4b --- /dev/null +++ b/@types/postcss-easings.d.ts @@ -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; +} diff --git a/@types/postcss-hexrgba.d.ts b/@types/postcss-hexrgba.d.ts new file mode 100644 index 0000000000..9e748e8937 --- /dev/null +++ b/@types/postcss-hexrgba.d.ts @@ -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; +} diff --git a/@types/postcss-mixins.d.ts b/@types/postcss-mixins.d.ts new file mode 100644 index 0000000000..6b272b4ed8 --- /dev/null +++ b/@types/postcss-mixins.d.ts @@ -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; +} diff --git a/@types/webpack-version-file-plugin.d.ts b/@types/webpack-version-file-plugin.d.ts new file mode 100644 index 0000000000..7869805f83 --- /dev/null +++ b/@types/webpack-version-file-plugin.d.ts @@ -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; + } + + export default class VersionFilePlugin { + public constructor(opts: Opts); + } +} diff --git a/package.json b/package.json index 1bd4b558ff..f4c01f62a0 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/patches/rollup.patch b/patches/rollup.patch new file mode 100644 index 0000000000..0690a6ab9b --- /dev/null +++ b/patches/rollup.patch @@ -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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43c284e2f4..74878c99d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 3367e59b90..ba9482d91d 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -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 diff --git a/project.json b/project.json index 3f20758f0a..b6a4ac89f0 100644 --- a/project.json +++ b/project.json @@ -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 }, diff --git a/tsconfig.json b/tsconfig.json index 28fbb701bf..b313ad09fb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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" ] } diff --git a/webpack.config.cjs b/webpack.config.ts similarity index 86% rename from webpack.config.cjs rename to webpack.config.ts index 65204556ad..6a1abfc8cf 100644 --- a/webpack.config.cjs +++ b/webpack.config.ts @@ -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 `` 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): 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): 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 = {}; 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, "/"); }