ci: start devServer before test running to avoid tests timeout (#11297)

tools/cli/package.json

@@ -7,7 +7,8 @@
     "r": "./bin/runner.js"
   },
   "exports": {
-    "./loader": "./loader.js"
+    "./loader": "./loader.js",
+    "./bundle": "./src/bundle.ts"
   },
   "scripts": {
     "affine": "r ./src/affine.ts"

tools/cli/src/bundle.ts

@@ -1,3 +1,4 @@
+import type { Package } from '@affine-tools/utils/workspace';
 import webpack, { type Compiler, type Configuration } from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import { merge } from 'webpack-merge';
@@ -21,6 +22,55 @@ function getChannel() {
   }
 }
 
+export async function getConfig(pkg: Package, dev: boolean) {
+  let config = createWebpackConfig(pkg, {
+    mode: dev ? 'development' : 'production',
+    channel: getChannel(),
+  });
+
+  let configOverride: Configuration | undefined;
+  const overrideConfigPath = pkg.join('webpack.config.ts');
+
+  if (overrideConfigPath.isFile()) {
+    const override = await import(overrideConfigPath.toFileUrl().toString());
+    configOverride = override.config ?? override.default;
+  }
+
+  if (configOverride) {
+    config = merge(config, configOverride);
+  }
+
+  return config;
+}
+
+export async function start(
+  compiler: Compiler,
+  config: Configuration['devServer']
+): Promise<WebpackDevServer> {
+  const devServer = new WebpackDevServer(config, compiler);
+
+  await devServer.start();
+
+  return devServer;
+}
+
+export async function build(compiler: Compiler) {
+  compiler.run((error, stats) => {
+    if (error) {
+      console.error(error);
+      process.exit(1);
+    }
+    if (stats) {
+      if (stats.hasErrors()) {
+        console.error(stats.toString('errors-only'));
+        process.exit(1);
+      } else {
+        console.log(stats.toString('minimal'));
+      }
+    }
+  });
+}
+
 export class BundleCommand extends PackageCommand {
   static override paths = [['bundle'], ['webpack'], ['pack'], ['bun']];
 
@@ -35,60 +85,17 @@ export class BundleCommand extends PackageCommand {
   async execute() {
     this.logger.info(`Packing package ${this.package}...`);
 
-    const config = await this.getConfig();
+    const config = await getConfig(
+      this.workspace.getPackage(this.package),
+      this.dev
+    );
 
     const compiler = webpack(config);
 
     if (this.dev) {
-      await this.start(compiler, config.devServer);
+      await start(compiler, config.devServer);
     } else {
-      await this.build(compiler);
+      await build(compiler);
     }
   }
-
-  async getConfig() {
-    let config = createWebpackConfig(this.workspace.getPackage(this.package), {
-      mode: this.dev ? 'development' : 'production',
-      channel: getChannel(),
-    });
-
-    let configOverride: Configuration | undefined;
-    const overrideConfigPath = this.workspace
-      .getPackage(this.package)
-      .join('webpack.config.ts');
-
-    if (overrideConfigPath.isFile()) {
-      const override = await import(overrideConfigPath.toFileUrl().toString());
-      configOverride = override.config ?? override.default;
-    }
-
-    if (configOverride) {
-      config = merge(config, configOverride);
-    }
-
-    return config;
-  }
-
-  async start(compiler: Compiler, config: Configuration['devServer']) {
-    const devServer = new WebpackDevServer(config, compiler);
-
-    await devServer.start();
-  }
-
-  async build(compiler: Compiler) {
-    compiler.run((error, stats) => {
-      if (error) {
-        console.error(error);
-        process.exit(1);
-      }
-      if (stats) {
-        if (stats.hasErrors()) {
-          console.error(stats.toString('errors-only'));
-          process.exit(1);
-        } else {
-          console.log(stats.toString('minimal'));
-        }
-      }
-    });
-  }
 }

tools/cli/src/webpack/html-plugin.ts

@@ -4,7 +4,7 @@ import { readFileSync } from 'node:fs';
 import { Path, ProjectRoot } from '@affine-tools/utils/path';
 import { Repository } from '@napi-rs/simple-git';
 import HTMLPlugin from 'html-webpack-plugin';
-import once from 'lodash-es/once';
+import { once } from 'lodash-es';
 import type { Compiler, WebpackPluginInstance } from 'webpack';
 import webpack from 'webpack';
 

tools/cli/src/webpack/index.ts

@@ -7,7 +7,7 @@ import { PerfseePlugin } from '@perfsee/webpack';
 import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
 import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
-import compact from 'lodash-es/compact';
+import { compact } from 'lodash-es';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
@@ -227,7 +227,7 @@ export function createWebpackConfig(
             },
             {
               test: /\.(ttf|eot|woff|woff2)$/,
-              type: 'asset/resource',
+              type: IN_CI ? 'asset/inline' : 'asset/resource',
             },
             {
               test: /\.txt$/,
@@ -313,7 +313,7 @@ export function createWebpackConfig(
           {} as Record<string, string>
         ),
       }),
-      buildConfig.isAdmin
+      buildConfig.isAdmin && flags.mode !== 'production'
         ? null
         : new CopyPlugin({
             patterns: [
@@ -360,7 +360,11 @@ export function createWebpackConfig(
           directory: pkg.workspace.getPackage('@affine/core').join('public')
             .value,
           publicPath: '/',
-          watch: true,
+          watch: !IN_CI,
+          staticOptions: {
+            immutable: IN_CI,
+            maxAge: '1d',
+          },
         },
       ],
       proxy: [

tools/utils/src/workspace.gen.ts

@@ -1080,7 +1080,7 @@ export const PackageList = [
   {
     location: 'tests/affine-local',
     name: '@affine-test/affine-local',
-    workspaceDependencies: ['tests/kit'],
+    workspaceDependencies: ['tests/kit', 'tools/cli', 'tools/utils'],
   },
   {
     location: 'tests/affine-mobile',