feat(client): migration old package to rspack (#15068)

#### PR Dependency Tree


* **PR #15068** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Upgraded Vitest across packages to 4.1.8 and bumped Tailwind PostCSS
to 4.3.0
* CLI/tooling updated to support the media-capture-playground package
and adjust build/dev server behavior

* **Bug Fixes**
  * Improved workspace deletion reliability in the Electron app

* **Refactor**
* Simplified media capture playground build setup (build/config
adjustments)

* **Tests**
* Made tests more robust by preserving/restoring environment state
during runs
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tools/cli/src/bundle-shared.ts

@@ -9,6 +9,7 @@ export const RSPACK_SUPPORTED_PACKAGES = [
   '@affine/electron-renderer',
   '@affine/server',
   '@affine/reader',
+  '@affine/media-capture-playground',
 ] as const;
 
 const rspackSupportedPackageSet = new Set<string>(RSPACK_SUPPORTED_PACKAGES);

tools/cli/src/bundle.ts

@@ -194,11 +194,41 @@ function getRspackBundleConfigs(pkg: Package): MultiRspackOptions {
         }),
       ] as MultiRspackOptions;
     }
+    case '@affine/media-capture-playground': {
+      return [
+        createRspackHTMLTargetConfig(pkg, pkg.join('web/main.tsx').value, {
+          template: pkg.join('web/index.html').value,
+          additionalEntryForSelfhost: false,
+          copySharedPublicAssets: false,
+          injectGlobalErrorHandler: false,
+          emitAssetsManifest: false,
+        }),
+      ] as MultiRspackOptions;
+    }
   }
 
   throw new Error(`Unsupported package: ${pkg.name}`);
 }
 
+function getRspackDevServerConfig(
+  pkg: Package
+): RspackDevServerConfiguration | undefined {
+  if (pkg.name !== '@affine/media-capture-playground') {
+    return;
+  }
+
+  return {
+    proxy: [
+      {
+        context: '/api',
+        target: 'http://localhost:6544',
+        changeOrigin: true,
+        pathRewrite: { '^/api': '' },
+      },
+    ],
+  };
+}
+
 export class BundleCommand extends PackageCommand {
   static override paths = [['bundle'], ['pack'], ['bun']];
 
@@ -214,7 +244,7 @@ export class BundleCommand extends PackageCommand {
     const pkg = this.workspace.getPackage(this.package);
 
     if (this.dev) {
-      await BundleCommand.dev(pkg);
+      await BundleCommand.dev(pkg, getRspackDevServerConfig(pkg));
     } else {
       await BundleCommand.build(pkg);
     }
@@ -294,10 +324,12 @@ export class BundleCommand extends PackageCommand {
       throw new Error('Failed to create rspack compiler');
     }
 
-    const devServer = new RspackDevServer(
-      merge({}, DEFAULT_DEV_SERVER_CONFIG, devServerConfig),
-      compiler
-    );
+    const serverConfig = merge({}, DEFAULT_DEV_SERVER_CONFIG, devServerConfig);
+    if (devServerConfig?.proxy) {
+      serverConfig.proxy = devServerConfig.proxy;
+    }
+
+    const devServer = new RspackDevServer(serverConfig, compiler);
 
     await devServer.start();
   }

tools/cli/src/rspack-shared/html-plugin.ts

@@ -83,6 +83,8 @@ const currentDir = Path.dir(import.meta.url);
 
 export interface CreateHTMLPluginConfig {
   filename?: string;
+  template?: string;
+  copySharedPublicAssets?: boolean;
   additionalEntryForSelfhost?: boolean;
   selfhostPublicPath?: string;
   injectGlobalErrorHandler?: boolean;
@@ -209,7 +211,10 @@ export function createHTMLPlugins(
   config: CreateHTMLPluginConfig
 ): (HtmlRspackPluginInstance | PluginLike)[] {
   const publicPath = getPublicPath(BUILD_CONFIG);
-  const htmlPluginOptions = getHTMLPluginOptions(BUILD_CONFIG);
+  const htmlPluginOptions = {
+    ...getHTMLPluginOptions(BUILD_CONFIG),
+    ...(config.template ? { template: config.template } : {}),
+  };
   const selfhostPublicPath = config.selfhostPublicPath ?? '/';
 
   const plugins: (HtmlRspackPluginInstance | PluginLike)[] = [];

tools/cli/src/rspack/index.ts

@@ -77,12 +77,20 @@ export function createHTMLTargetConfig(
   deps?: string[]
 ): RspackConfiguration {
   entry = typeof entry === 'string' ? { index: entry } : entry;
+  const tailwindConfigPath = pkg.join('tailwind.config.js');
+  const hasTailwind =
+    tailwindConfigPath.exists() ||
+    pkg.name === '@affine/media-capture-playground';
+  const tailwindPlugin = tailwindConfigPath.exists()
+    ? ['@tailwindcss/postcss', require(tailwindConfigPath.value)]
+    : ['@tailwindcss/postcss'];
 
   htmlConfig = merge(
     {},
     {
       filename: 'index.html',
       additionalEntryForSelfhost: true,
+      copySharedPublicAssets: true,
       injectGlobalErrorHandler: true,
       emitAssetsManifest: true,
     },
@@ -268,12 +276,9 @@ export function createHTMLTargetConfig(
                   loader: 'postcss-loader',
                   options: {
                     postcssOptions: {
-                      plugins: pkg.join('tailwind.config.js').exists()
+                      plugins: hasTailwind
                         ? [
-                            [
-                              '@tailwindcss/postcss',
-                              require(pkg.join('tailwind.config.js').value),
-                            ],
+                            tailwindPlugin,
                             ['autoprefixer'],
                             ...(buildConfig.isAdmin
                               ? [queuedashScopePostcssPlugin()]
@@ -318,6 +323,7 @@ export function createHTMLTargetConfig(
         }),
       new VanillaExtractPlugin(),
       !buildConfig.isAdmin &&
+        htmlConfig.copySharedPublicAssets &&
         new rspack.CopyRspackPlugin({
           patterns: [
             {