Prepare for vitest in shared-components (#31820)

* Use typescript for vite config

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

* Switch shared-components to ESM

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

* Remove stale aliases

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

* Remove reference to element-web files from shared-components

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

* Remove spurious node polyfill

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

---------

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

.github/workflows/shared-component-visual-tests.yaml

@@ -31,9 +31,6 @@ jobs:
                   cache: "yarn"
                   node-version: "lts/*"
 
-            - name: Install element web dependencies
-              run: yarn install --frozen-lockfile
-
             - name: Install dependencies
               working-directory: packages/shared-components
               run: yarn install --frozen-lockfile
@@ -56,7 +53,8 @@ jobs:
               run: "yarn playwright install --with-deps --only-shell"
 
             - name: Run Visual tests
-              run: "yarn --cwd packages/shared-components test:storybook:ci"
+              working-directory: packages/shared-components
+              run: "yarn test:storybook:ci"
 
             - name: Upload received images & diffs
               if: always()

.github/workflows/tests.yml

@@ -128,9 +128,6 @@ jobs:
                   node-version: "lts/*"
                   cache: "yarn"
 
-            - name: Install EW Deps
-              run: "yarn install"
-
             - name: Install Shared Component Deps
               working-directory: "packages/shared-components"
               run: "yarn install"

.gitignore

@@ -38,3 +38,6 @@ storybook-static
 /packages/shared-components/node_modules
 /packages/shared-components/dist
 /packages/shared-components/src/i18nKeys.d.ts
+
+# TSC incremental compilation information
+*.tsbuildinfo

jest.config.ts

@@ -40,6 +40,7 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "counterpart": "<rootDir>/node_modules/counterpart",
+        "@vector-im/compound-web": "<rootDir>/node_modules/@vector-im/compound-web",
     },
     transformIgnorePatterns: [
         "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock)).+$",

packages/shared-components/.storybook/compound.pcss

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 New Vector 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.
+ */
+
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+@import url("@vector-im/compound-web/dist/style.css");

packages/shared-components/.storybook/main.ts

@@ -26,15 +26,9 @@ const config: StorybookConfig = {
     },
     async viteFinal(config) {
         return mergeConfig(config, {
-            resolve: {
-                alias: {
-                    // Alias used by i18n.tsx
-                    $webapp: path.resolve("../../webapp"),
-                },
-            },
             plugins: [
                 // Needed for counterpart to work
-                nodePolyfills({ include: ["process", "util"] }),
+                nodePolyfills({ include: ["util"] }),
                 {
                     name: "language-middleware",
                     configureServer(server) {

packages/shared-components/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";
 
-import "../../../res/css/shared.pcss";
+import "./compound.pcss";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
 import { setLanguage } from "../src/utils/i18n";

packages/shared-components/jest.config.ts

@@ -22,7 +22,6 @@ const config: Config = {
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
-        "\\$webapp/i18n/languages.json": "<rootDir>/../../__mocks__/languages.json",
         "^react$": "<rootDir>/node_modules/react",
         "^react-dom$": "<rootDir>/node_modules/react-dom",
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",

packages/shared-components/package.json

@@ -7,17 +7,18 @@
         "type": "git",
         "url": "https://github.com/element-hq/element-web"
     },
+    "type": "module",
     "exports": {
         ".": {
             "require": {
                 "style": "./dist/element-web-shared-components.css",
                 "types": "./dist/element-web-shared-components.d.ts",
-                "default": "./dist/element-web-shared-components.umd.js"
+                "default": "./dist/element-web-shared-components.umd.cjs"
             },
             "import": {
                 "style": "./dist/element-web-shared-components.css",
                 "types": "./dist/element-web-shared-components.d.ts",
-                "default": "./dist/element-web-shared-components.mjs"
+                "default": "./dist/element-web-shared-components.js"
             }
         },
         "./dist/element-web-shared-components.css": {
@@ -43,7 +44,7 @@
         "build-storybook": "storybook build",
         "lint": "yarn lint:types && yarn lint:js",
         "lint:js": "eslint --max-warnings 0 src && prettier --check .",
-        "lint:types": "tsc --noEmit --jsx react",
+        "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json",
         "test:storybook": "test-storybook --url http://localhost:6007/",
         "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
         "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules"
@@ -63,7 +64,21 @@
         "temporal-polyfill": "^0.3.0"
     },
     "devDependencies": {
+        "@babel/eslint-parser": "^7.28.6",
+        "@babel/eslint-plugin": "^7.27.1",
+        "@babel/plugin-proposal-export-default-from": "^7.27.1",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
+        "@babel/plugin-transform-numeric-separator": "^7.28.6",
+        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
+        "@babel/plugin-transform-optional-chaining": "^7.28.6",
+        "@babel/plugin-transform-runtime": "^7.28.5",
+        "@babel/preset-env": "^7.28.6",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@casualbot/jest-sonar-reporter": "^2.5.0",
         "@element-hq/element-web-playwright-common": "2.2.4",
+        "@fetch-mock/jest": "^0.2.20",
+        "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@playwright/test": "1.57.0",
         "@storybook/addon-a11y": "^10.0.7",
         "@storybook/addon-designs": "^11.0.1",
@@ -71,17 +86,34 @@
         "@storybook/icons": "^2.0.0",
         "@storybook/react-vite": "^10.0.7",
         "@storybook/test-runner": "^0.24.1",
+        "@stylistic/eslint-plugin": "^5.7.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.0",
         "@types/counterpart": "^0.18.4",
         "@types/jest-image-snapshot": "^6.4.0",
         "@types/lodash": "^4.17.20",
         "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.3",
+        "@typescript-eslint/eslint-plugin": "^8.53.1",
+        "@typescript-eslint/parser": "^8.53.1",
+        "@vector-im/compound-web": "^8.3.5",
         "concurrently": "^9.2.1",
         "eslint": "8",
+        "eslint-config-google": "^0.14.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-deprecate": "^0.8.7",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.2",
         "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-compiler": "^19.1.0-rc.2",
+        "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-storybook": "^10.0.7",
+        "eslint-plugin-unicorn": "^56.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
+        "jest-fixed-jsdom": "^0.0.11",
         "jest-image-snapshot": "^6.5.1",
         "patch-package": "^8.0.1",
         "prettier": "^3.6.2",

packages/shared-components/tsconfig.json

@@ -11,15 +11,14 @@
         "target": "es2022",
         "noUnusedLocals": true,
         "sourceMap": false,
-        "outDir": "./lib",
         "declaration": true,
         "jsx": "react",
         "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
         "strict": true,
         "paths": {
-            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"],
-            "rollup/parseAst": ["./node_modules/rollup/dist/parseAst"]
+            "jest-matrix-react": ["./src/test/utils/jest-matrix-react"]
         }
     },
-    "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+    "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/shared-components/tsconfig.node.json

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

packages/shared-components/vite.config.ts

@@ -1,10 +1,9 @@
 /*
- *
  * Copyright 2025 New Vector 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.
- * /
+ *
  */
 
 import { dirname, resolve } from "node:path";
@@ -37,12 +36,6 @@ export default defineConfig({
             },
         },
     },
-    resolve: {
-        alias: {
-            // Alias used by i18n.tsx
-            $webapp: resolve(__dirname, "..", "..", "webapp"),
-        },
-    },
     plugins: [
         dts({
             rollupTypes: true,

webpack.config.js

@@ -221,8 +221,9 @@ module.exports = (env, argv) => {
                 // Define a variable so the i18n stuff can load
                 "$webapp": path.resolve(__dirname, "webapp"),
 
-                // Make shared-components imports resolve to EW counterpart
+                // 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"),
             },
             fallback: {
                 // Mock out the NodeFS module: The opus decoder imports this wrongly.