DRY

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,