feat(ui): Add rsdoctor support and fix build:analyze

.changeset/tough-ravens-dance.md

@@ -0,0 +1,2 @@
+---
+---

packages/ui/package.json

@@ -48,8 +48,9 @@
   ],
   "scripts": {
     "build": "pnpm build:umd && pnpm build:esm",
-    "build:analyze": "rspack build --config rspack.config.js --env production --analyze",
+    "build:analyze": "rspack build --config rspack.config.js --env production --env analyze --analyze",
     "build:esm": "tsdown",
+    "build:rsdoctor": "RSDOCTOR=true rspack build --config rspack.config.js --env production",
     "build:umd": "rspack build --config rspack.config.js --env production",
     "bundlewatch": "FORCE_COLOR=1 bundlewatch --config bundlewatch.config.json",
     "bundlewatch:fix": "node bundlewatch-fix.mjs",
@@ -90,6 +91,7 @@
   },
   "devDependencies": {
     "@floating-ui/react-dom": "^2.1.6",
+    "@rsdoctor/rspack-plugin": "^0.4.13",
     "@rspack/cli": "^1.6.0",
     "@rspack/core": "^1.6.0",
     "@rspack/plugin-react-refresh": "^1.5.2",

packages/ui/rspack.config.js

@@ -6,6 +6,7 @@ import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
 import { merge } from 'webpack-merge';
 import ReactRefreshPlugin from '@rspack/plugin-react-refresh';
+import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 import { svgLoader, typescriptLoaderProd, typescriptLoaderDev } from '../../scripts/rspack-common.js';
 
 const require = createRequire(import.meta.url);
@@ -54,6 +55,14 @@ const common = ({ mode, variant }) => {
       new rspack.EnvironmentPlugin({
         NODE_ENV: mode,
       }),
+      process.env.RSDOCTOR &&
+        new RsdoctorRspackPlugin({
+          mode: process.env.RSDOCTOR === 'brief' ? 'brief' : 'normal',
+          disableClientServer: process.env.RSDOCTOR === 'brief',
+          supports: {
+            generateTileGraph: true,
+          },
+        }),
     ].filter(Boolean),
     output: {
       chunkFilename: `[name]_ui_[fullhash:6]_${packageJSON.version}.js`,
@@ -179,10 +188,12 @@ const commonForProdBrowser = ({ targets = 'last 2 years', useCoreJs = false } =
 
 /**
  * Production configuration - builds UMD browser variants
- * @param {'development'|'production'} mode
+ * @param {object} config
+ * @param {'development'|'production'} config.mode
+ * @param {boolean} config.analysis
  * @returns {import('@rspack/core').Configuration[]}
  */
-const prodConfig = mode => {
+const prodConfig = ({ mode, analysis }) => {
   // Browser bundle with chunks (UMD)
   const uiBrowser = merge(
     entryForVariant(variants.uiBrowser),
@@ -197,6 +208,11 @@ const prodConfig = mode => {
     commonForProdBrowser({ targets: packageJSON.browserslistLegacy, useCoreJs: true }),
   );
 
+  // webpack-bundle-analyzer only supports a single build, use uiBrowser as that's the default build we serve
+  if (analysis) {
+    return [uiBrowser];
+  }
+
   return [uiBrowser, uiLegacyBrowser];
 };
 
@@ -247,5 +263,6 @@ const devConfig = (mode, env) => {
 
 export default env => {
   const mode = env.production ? 'production' : 'development';
-  return isProduction(mode) ? prodConfig(mode) : devConfig(mode, env);
+  const analysis = !!env.analyze;
+  return isProduction(mode) ? prodConfig({ mode, analysis }) : devConfig(mode, env);
 };