simplify bundlesize configuration

packages/bundlesize/package.json

@@ -7,8 +7,8 @@
 	"private": true,
 	"scripts": {
 		"clean": "rimraf dist",
-		"build:components": "vite build -c vite.components.config.js",
-		"build:system": "vite build -c vite.system.config.js",
+		"build:components": "cross-env-shell VITE_UI_TARGET=components vite build",
+		"build:system": "cross-env-shell VITE_UI_TARGET=system vite build",
 		"build": "npm-run-all --serial clean build:components build:system",
 		"test": "echo \"WARNING: no test specified\" && exit 0",
 		"test:coverage": "echo \"WARNING: no test specified\" && exit 0"

packages/bundlesize/tsconfig.json

@@ -21,6 +21,6 @@
 		"noUnusedParameters": true,
 		"noFallthroughCasesInSwitch": true
 	},
-	"include": ["ui-components/src", "ui-system/src"],
+	"include": ["./src"],
 	"references": [{ "path": "./tsconfig.node.json" }]
 }

packages/bundlesize/vite.config.ts

@@ -0,0 +1,63 @@
+/** @type {import('vite').UserConfig} */
+
+import { resolve } from "node:path";
+
+import fs from "fs-extra";
+import { defineConfig, loadEnv } from "vite";
+
+const VENDOR_CHUNK = "vendorChunk";
+
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd());
+	const packageJson = fs.readJSONSync(
+		`../ui-${env.VITE_UI_TARGET}/package.json`,
+	);
+	const prodDependencies = Object.keys(packageJson.dependencies).filter(
+		(dependency) =>
+			dependency !== "react" &&
+			dependency !== "react-dom" &&
+			dependency !== "react/jsx-runtime" &&
+			dependency !== "react-dom/server" &&
+			dependency !== "tailwindcss",
+	);
+	prodDependencies.push(
+		"react-dom",
+		"react-dom/server",
+		"react",
+		"react/jsx-runtime",
+	);
+
+	return {
+		esbuild: {
+			supported: {
+				"top-level-await": true, //browsers can handle top-level-await features
+			},
+		},
+		build: {
+			outDir: `dist/${env.VITE_UI_TARGET}`,
+			emptyOutDir: false,
+			rollupOptions: {
+				input: {
+					index: resolve(__dirname, "src", env.VITE_UI_TARGET, "index.html"),
+				},
+				output: {
+					assetFileNames: "assets/style[extname]",
+					entryFileNames: "assets/[name].js",
+					/**
+					 * Manually creating chunks for prod dependencies.
+					 */
+					manualChunks: {
+						[VENDOR_CHUNK]: prodDependencies,
+					},
+					chunkFileNames(chunkInfo) {
+						if (chunkInfo.name.includes(VENDOR_CHUNK)) {
+							return "assets/vendor.js";
+						}
+						return "[name]-[hash].js";
+					},
+				},
+			},
+		},
+		plugins: [],
+	};
+});