DRY

modules/.eslintrc.cjs

@@ -2,7 +2,7 @@ module.exports = {
     plugins: ["matrix-org", "eslint-plugin-react-compiler"],
     extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
     parserOptions: {
-        project: ["./tsconfig.json"],
+        project: true,
     },
     env: {
         browser: true,

modules/banner/package.json

@@ -7,12 +7,7 @@
     "license": "SEE LICENSE IN README.md",
     "scripts": {
         "build": "vite build",
-        "lint": "pnpm lint:types && pnpm lint:js",
-        "lint:types": "tsc --noEmit",
-        "lint:js": "eslint --max-warnings 0 src -c ../.eslintrc.cjs",
-        "test:playwright": "playwright test -c ../playwright.config.ts",
-        "test:playwright:open": "yarn test:playwright -c ../playwright.config.ts --ui",
-        "test:playwright:screenshots": "playwright-screenshots yarn test:playwright --update-snapshots --grep @screenshot"
+        "lint:types": "tsc --noEmit"
     },
     "devDependencies": {
         "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
@@ -24,7 +19,6 @@
         "matrix-web-i18n": "^3.6.0",
         "matrix-widget-api": "^1.17.0",
         "react": "catalog:",
-        "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "catalog:",
         "vite": "catalog:",
         "vite-plugin-node-polyfills": "catalog:",

modules/banner/vite.config.ts

@@ -7,16 +7,16 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig, esmExternalRequirePlugin } from "vite";
+import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import externalGlobals from "rollup-plugin-external-globals";
 import svgr from "vite-plugin-svgr";
 import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
+export default mergeConfig(baseConfig, {
     build: {
         lib: {
             entry: resolve(__dirname, "src/index.tsx"),
@@ -24,22 +24,6 @@ export default defineConfig({
             fileName: "index",
             formats: ["es"],
         },
-        outDir: "lib",
-        target: "esnext",
-        sourcemap: true,
-        rolldownOptions: {
-            plugins: [
-                esmExternalRequirePlugin({
-                    external: ["react"],
-                }),
-            ],
-            output: {
-                globals: {
-                    // Reuse React from the host app
-                    react: "window.React",
-                },
-            },
-        },
     },
     plugins: [
         importCSSSheet(),
@@ -48,15 +32,5 @@ export default defineConfig({
         nodePolyfills({
             include: ["events"],
         }),
-        externalGlobals({
-            // Reuse React from the host app
-            react: "window.React",
-        }),
     ],
-    define: {
-        // Use production mode for the build as it is tested against production builds of Element Web,
-        // this is required for React JSX versions to be compatible.
-        "process.env.NODE_ENV": "'production'",
-        "process": { env: { NODE_ENV: "production" } },
-    },
 });

modules/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "element-web-modules",
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "lint:js": "eslint --max-warnings 0 */src -c ./.eslintrc.cjs",
+        "lint:ts": "tsc --noEmit",
+        "test:playwright": "playwright test -c ./playwright.config.ts",
+        "test:playwright:open": "yarn test:playwright -c ./playwright.config.ts --ui",
+        "test:playwright:screenshots": "playwright-screenshots yarn test:playwright --update-snapshots --grep @screenshot"
+    },
+    "devDependencies": {
+        "@element-hq/element-web-playwright-common": "workspace:*",
+        "eslint": "8",
+        "eslint-config-google": "^0.14.0",
+        "eslint-config-prettier": "^10.1.8",
+        "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-unicorn": "^56.0.0"
+    },
+    "private": true
+}

modules/restricted-guests/package.json

@@ -7,12 +7,7 @@
     "license": "SEE LICENSE IN README.md",
     "scripts": {
         "build": "vite build",
-        "lint": "pnpm lint:types && pnpm lint:js",
-        "lint:types": "tsc --noEmit",
-        "lint:js": "eslint --max-warnings 0 src -c ../.eslintrc.cjs",
-        "test:playwright": "playwright test -c ../playwright.config.ts",
-        "test:playwright:open": "yarn test:playwright -c ../playwright.config.ts --ui",
-        "test:playwright:screenshots": "playwright-screenshots yarn test:playwright --update-snapshots --grep @screenshot"
+        "lint:types": "tsc --noEmit"
     },
     "devDependencies": {
         "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
@@ -21,7 +16,6 @@
         "@types/react": "catalog:",
         "@vitejs/plugin-react": "catalog:",
         "react": "catalog:",
-        "rollup-plugin-external-globals": "^0.13.0",
         "typescript": "catalog:",
         "vite": "catalog:",
         "vite-plugin-node-polyfills": "catalog:"

modules/restricted-guests/vite.config.ts

@@ -7,15 +7,15 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig, esmExternalRequirePlugin } from "vite";
+import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import externalGlobals from "rollup-plugin-external-globals";
 import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
+export default mergeConfig(baseConfig, {
     build: {
         lib: {
             entry: resolve(__dirname, "src/index.tsx"),
@@ -23,22 +23,6 @@ export default defineConfig({
             fileName: "index",
             formats: ["es"],
         },
-        outDir: "lib",
-        target: "esnext",
-        sourcemap: true,
-        rolldownOptions: {
-            plugins: [
-                esmExternalRequirePlugin({
-                    external: ["react"],
-                }),
-            ],
-            output: {
-                globals: {
-                    // Reuse React from the host app
-                    react: "window.React",
-                },
-            },
-        },
     },
     plugins: [
         importCSSSheet(),
@@ -46,15 +30,5 @@ export default defineConfig({
         nodePolyfills({
             include: ["events"],
         }),
-        externalGlobals({
-            // Reuse React from the host app
-            react: "window.React",
-        }),
     ],
-    define: {
-        // Use production mode for the build as it is tested against production builds of Element Web,
-        // this is required for React JSX versions to be compatible.
-        "process.env.NODE_ENV": "'production'",
-        "process": { env: { NODE_ENV: "production" } },
-    },
 });

modules/widget-lifecycle/package.json

@@ -7,12 +7,7 @@
     "license": "SEE LICENSE IN README.md",
     "scripts": {
         "build": "vite build",
-        "lint": "pnpm lint:types && pnpm lint:js",
-        "lint:types": "tsc --noEmit",
-        "lint:js": "eslint --max-warnings 0 src -c ../.eslintrc.cjs",
-        "test:playwright": "playwright test -c ../playwright.config.ts",
-        "test:playwright:open": "yarn test:playwright -c ../playwright.config.ts --ui",
-        "test:playwright:screenshots": "playwright-screenshots yarn test:playwright --update-snapshots --grep @screenshot"
+        "lint:types": "tsc --noEmit"
     },
     "devDependencies": {
         "@element-hq/element-web-module-api": "workspace:*",

modules/widget-lifecycle/vite.config.ts

@@ -7,11 +7,12 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vitest/config";
+import { mergeConfig } from "vitest/config";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
+export default mergeConfig(baseConfig, {
     build: {
         lib: {
             entry: resolve(__dirname, "src/index.ts"),
@@ -19,10 +20,6 @@ export default defineConfig({
             fileName: "index",
             formats: ["es"],
         },
-        outDir: "lib",
-        target: "esnext",
-        sourcemap: true,
-        minify: false,
     },
     test: {
         include: ["tests/**/*.test.ts"],
@@ -31,7 +28,7 @@ export default defineConfig({
         coverage: {
             provider: "v8",
             include: ["src/**/*.ts"],
-            reporter: [["lcov", { projectRoot: "../../../" }], "text"],
+            reporter: [["lcov", { projectRoot: "../../" }], "text"],
         },
     },
 });

modules/widget-toggles/package.json

@@ -7,13 +7,8 @@
     "license": "SEE LICENSE IN README.md",
     "scripts": {
         "build": "vite build",
-        "lint": "pnpm lint:types && pnpm lint:js",
         "lint:types": "tsc --noEmit",
-        "lint:js": "eslint --max-warnings 0 src -c ../.eslintrc.cjs",
-        "test": "vitest run --coverage",
-        "test:playwright": "playwright test -c ../playwright.config.ts",
-        "test:playwright:open": "yarn test:playwright -c ../playwright.config.ts --ui",
-        "test:playwright:screenshots": "playwright-screenshots yarn test:playwright --update-snapshots --grep @screenshot"
+        "test": "vitest run --coverage"
     },
     "devDependencies": {
         "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
@@ -28,7 +23,6 @@
         "@vitest/coverage-v8": "catalog:",
         "react": "catalog:",
         "typescript": "catalog:",
-        "rollup-plugin-external-globals": "^0.13.0",
         "vite": "catalog:",
         "vite-plugin-node-polyfills": "catalog:",
         "vite-plugin-svgr": "catalog:",

modules/widget-toggles/vite.config.ts

@@ -7,18 +7,17 @@ Please see LICENSE files in the repository root for full details.
 
 import { dirname, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-import { esmExternalRequirePlugin } from "vite";
 import react from "@vitejs/plugin-react";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
-import externalGlobals from "rollup-plugin-external-globals";
 import svgr from "vite-plugin-svgr";
 import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
-import { defineConfig } from "vitest/config";
+import { mergeConfig } from "vitest/config";
 import { playwright } from "@vitest/browser-playwright";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
-export default defineConfig({
+export default mergeConfig(baseConfig, {
     build: {
         lib: {
             entry: resolve(__dirname, "src/index.tsx"),
@@ -26,22 +25,6 @@ export default defineConfig({
             fileName: "index",
             formats: ["es"],
         },
-        outDir: "lib",
-        target: "esnext",
-        sourcemap: true,
-        rolldownOptions: {
-            plugins: [
-                esmExternalRequirePlugin({
-                    external: ["react"],
-                }),
-            ],
-            output: {
-                globals: {
-                    // Reuse React from the host app
-                    react: "window.React",
-                },
-            },
-        },
     },
     plugins: [
         importCSSSheet(),
@@ -50,17 +33,7 @@ export default defineConfig({
         nodePolyfills({
             include: ["events"],
         }),
-        externalGlobals({
-            // Reuse React from the host app
-            react: "window.React",
-        }),
     ],
-    define: {
-        // Use production mode for the build as it is tested against production builds of Element Web,
-        // this is required for React JSX versions to be compatible.
-        "process.env.NODE_ENV": "'production'",
-        "process": { env: { NODE_ENV: "production" } },
-    },
     test: {
         include: ["tests/**/*.test.{ts,tsx}"],
         exclude: ["./e2e/**/*", "./node_modules/**/*"],
@@ -68,7 +41,7 @@ export default defineConfig({
         coverage: {
             provider: "v8",
             include: ["src/**/*.ts"],
-            reporter: [["lcov", { projectRoot: "../../../" }], "text"],
+            reporter: [["lcov", { projectRoot: "../../" }], "text"],
         },
         browser: {
             enabled: true,