chore: add monorepo tools (#9196)

2026-02-15 05:37:32 +00:00 · 2024-12-24 15:29:48 +08:00
parent e3a8b63e38
commit 2443935830
116 changed files with 9390 additions and 1466 deletions
--- a/tools/cli/src/affine.ts
+++ b/tools/cli/src/affine.ts
@@ -0,0 +1,32 @@
+import { Workspace } from '@affine-tools/utils/workspace';
+import { Cli } from 'clipanion';
+
+import { BuildCommand } from './build';
+import { BundleCommand } from './bundle';
+import { CleanCommand } from './clean';
+import { CodegenCommand } from './codegen';
+import type { CliContext } from './context';
+import { DevCommand } from './dev';
+import { RunCommand } from './run';
+
+const cli = new Cli<CliContext>({
+  binaryName: 'affine',
+  binaryVersion: '0.0.0',
+  binaryLabel: 'AFFiNE Monorepo Tools',
+  enableColors: true,
+  enableCapture: true,
+});
+
+cli.register(RunCommand);
+cli.register(CodegenCommand);
+cli.register(CleanCommand);
+cli.register(BuildCommand);
+cli.register(DevCommand);
+cli.register(BundleCommand);
+
+await cli.runExit(process.argv.slice(2), {
+  workspace: new Workspace(),
+  stdin: process.stdin,
+  stdout: process.stdout,
+  stderr: process.stderr,
+});
--- a/tools/cli/src/bin/build.ts
+++ b/tools/cli/src/bin/build.ts
@@ -1,66 +0,0 @@
-import { spawn } from 'node:child_process';
-
-import webpack from 'webpack';
-
-import { getCwdFromDistribution } from '../config/cwd.cjs';
-import type { BuildFlags } from '../config/index.js';
-import { createWebpackConfig } from '../webpack/webpack.config.js';
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const buildType = process.env.BUILD_TYPE_OVERRIDE || process.env.BUILD_TYPE;
-
-if (process.env.BUILD_TYPE_OVERRIDE) {
-  process.env.BUILD_TYPE = process.env.BUILD_TYPE_OVERRIDE;
-}
-
-const getChannel = () => {
-  switch (buildType) {
-    case 'canary':
-    case 'beta':
-    case 'stable':
-    case 'internal':
-      return buildType;
-    case '':
-      throw new Error('BUILD_TYPE is not set');
-    default: {
-      throw new Error(
-        `BUILD_TYPE must be one of canary, beta, stable, internal, received [${buildType}]`
-      );
-    }
-  }
-};
-
-let entry: BuildFlags['entry'];
-
-const { DISTRIBUTION = 'web' } = process.env;
-
-const cwd = getCwdFromDistribution(DISTRIBUTION);
-
-if (DISTRIBUTION === 'desktop') {
-  entry = { app: './index.tsx', shell: './shell/index.tsx' };
-}
-
-const flags = {
-  distribution: DISTRIBUTION as BuildFlags['distribution'],
-  mode: 'production',
-  channel: getChannel(),
-  coverage: process.env.COVERAGE === 'true',
-  entry,
-  static: false,
-} satisfies BuildFlags;
-
-spawn('yarn', ['workspace', '@affine/i18n', 'build'], {
-  stdio: 'inherit',
-});
-
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-webpack(createWebpackConfig(cwd!, flags), (err, stats) => {
-  if (err) {
-    console.error(err);
-    process.exit(1);
-  }
-  if (stats?.hasErrors()) {
-    console.error(stats.toString('errors-only'));
-    process.exit(1);
-  }
-});
--- a/tools/cli/src/bin/dev.ts
+++ b/tools/cli/src/bin/dev.ts
@@ -1,146 +0,0 @@
-import { spawn } from 'node:child_process';
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-
-import * as p from '@clack/prompts';
-import { config } from 'dotenv';
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
-
-import { getCwdFromDistribution, projectRoot } from '../config/cwd.cjs';
-import type { BuildFlags } from '../config/index.js';
-import { createWebpackConfig } from '../webpack/webpack.config.js';
-
-const flags: BuildFlags = {
-  distribution:
-    (process.env.DISTRIBUTION as BuildFlags['distribution']) ?? 'web',
-  mode: 'development',
-  static: false,
-  channel: 'canary',
-  coverage: process.env.COVERAGE === 'true',
-};
-
-const files = ['.env', '.env.local'];
-
-for (const file of files) {
-  if (existsSync(join(projectRoot, file))) {
-    config({
-      path: join(projectRoot, file),
-    });
-    console.log(`${file} loaded`);
-    break;
-  }
-}
-
-const buildFlags = process.argv.includes('--static')
-  ? { ...flags, static: true }
-  : ((await p.group(
-      {
-        distribution: () =>
-          p.select({
-            message: 'Distribution',
-            options: [
-              {
-                value: 'web',
-              },
-              {
-                value: 'desktop',
-              },
-              {
-                value: 'admin',
-              },
-              {
-                value: 'mobile',
-              },
-              {
-                value: 'ios',
-              },
-            ],
-            initialValue: 'web',
-          }),
-        mode: () =>
-          p.select({
-            message: 'Mode',
-            options: [
-              {
-                value: 'development',
-              },
-              {
-                value: 'production',
-              },
-            ],
-            initialValue: 'development',
-          }),
-        channel: () =>
-          p.select({
-            message: 'Channel',
-            options: [
-              {
-                value: 'canary',
-              },
-              {
-                value: 'beta',
-              },
-              {
-                value: 'stable',
-              },
-            ],
-            initialValue: 'canary',
-          }),
-        coverage: () =>
-          p.confirm({
-            message: 'Enable coverage',
-            initialValue: process.env.COVERAGE === 'true',
-          }),
-      },
-      {
-        onCancel: () => {
-          p.cancel('Operation cancelled.');
-          process.exit(0);
-        },
-      }
-    )) as BuildFlags);
-
-flags.distribution = buildFlags.distribution;
-flags.mode = buildFlags.mode;
-flags.channel = buildFlags.channel;
-flags.coverage = buildFlags.coverage;
-flags.static = buildFlags.static;
-flags.entry = undefined;
-
-const cwd = getCwdFromDistribution(flags.distribution);
-
-process.env.DISTRIBUTION = flags.distribution;
-
-if (flags.distribution === 'desktop') {
-  flags.entry = {
-    app: join(cwd, 'index.tsx'),
-    shell: join(cwd, 'shell/index.tsx'),
-  };
-}
-
-console.info(flags);
-
-if (!flags.static) {
-  spawn('yarn', ['workspace', '@affine/i18n', 'dev'], {
-    stdio: 'inherit',
-    shell: true,
-  });
-}
-
-try {
-  // @ts-expect-error no types
-  await import('@affine/templates/build-edgeless');
-  const config = createWebpackConfig(cwd, flags);
-  if (flags.static) {
-    config.watch = false;
-  }
-  const compiler = webpack(config);
-  // Start webpack
-  const devServer = new WebpackDevServer(config.devServer, compiler);
-
-  await devServer.start();
-} catch (error) {
-  console.error('Error during build:', error);
-  process.exit(1);
-}
--- a/tools/cli/src/build.ts
+++ b/tools/cli/src/build.ts
@@ -0,0 +1,15 @@
+import { PackageCommand } from './command';
+
+export class BuildCommand extends PackageCommand {
+  static override paths = [['build'], ['b']];
+
+  async execute() {
+    const args = ['affine build', this.package];
+
+    if (this.deps) {
+      args.push('--deps');
+    }
+
+    await this.cli.run(args);
+  }
+}
--- a/tools/cli/src/bundle.ts
+++ b/tools/cli/src/bundle.ts
@@ -0,0 +1,93 @@
+import webpack, { type Compiler, type Configuration } from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+import { merge } from 'webpack-merge';
+
+import { Option, PackageCommand } from './command';
+import { createWebpackConfig } from './webpack';
+
+function getChannel() {
+  const channel = process.env.BUILD_TYPE ?? 'canary';
+  switch (channel) {
+    case 'canary':
+    case 'beta':
+    case 'stable':
+    case 'internal':
+      return channel;
+    default: {
+      throw new Error(
+        `BUILD_TYPE must be one of canary, beta, stable, internal, received [${channel}]`
+      );
+    }
+  }
+}
+
+export class BundleCommand extends PackageCommand {
+  static override paths = [['bundle'], ['webpack'], ['pack'], ['bun']];
+
+  // bundle is not able to run with deps
+  override deps = false;
+
+  dev = Option.Boolean('--dev,-d', false, {
+    description: 'Run in Development mode',
+  });
+
+  async execute() {
+    this.logger.info(`Packing package ${this.package}...`);
+
+    const config = await this.getConfig();
+
+    const compiler = webpack(config);
+
+    if (this.dev) {
+      await this.start(compiler, config.devServer);
+    } else {
+      await this.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.js');
+
+    if (overrideConfigPath.isFile()) {
+      const override = await import(overrideConfigPath.value);
+      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'));
+        }
+      }
+    });
+  }
+}
--- a/tools/cli/src/clean.ts
+++ b/tools/cli/src/clean.ts
@@ -0,0 +1,71 @@
+import { rmSync } from 'node:fs';
+
+import { exec } from '@affine-tools/utils/process';
+
+import { Command, Option } from './command';
+
+export class CleanCommand extends Command {
+  static override paths = [['clean']];
+
+  cleanDist = Option.Boolean('--dist', false);
+  cleanRustTarget = Option.Boolean('--rust', false);
+  cleanNodeModules = Option.Boolean('--node-modules', false);
+  all = Option.Boolean('--all,-a', false);
+
+  async execute() {
+    this.logger.info('Cleaning Workspace...');
+    if (this.all || this.cleanNodeModules) {
+      this.doCleanNodeModules();
+    }
+
+    if (this.all || this.cleanDist) {
+      this.doCleanDist();
+    }
+
+    if (this.all || this.cleanRustTarget) {
+      this.doCleanRust();
+    }
+  }
+
+  doCleanNodeModules() {
+    this.logger.info('Cleaning node_modules...');
+
+    const rootNodeModules = this.workspace.join('node_modules');
+    if (rootNodeModules.isDirectory()) {
+      this.logger.info(`Cleaning ${rootNodeModules}`);
+      rmSync(rootNodeModules.value, { recursive: true });
+    }
+
+    this.workspace.forEach(pkg => {
+      const nodeModules = pkg.nodeModulesPath;
+      if (nodeModules.isDirectory()) {
+        this.logger.info(`Cleaning ${nodeModules}`);
+        rmSync(nodeModules.value, { recursive: true });
+      }
+    });
+
+    this.logger.info('node_modules cleaned');
+  }
+
+  doCleanDist() {
+    this.logger.info('Cleaning dist...');
+
+    this.workspace.forEach(pkg => {
+      if (pkg.distPath.isDirectory()) {
+        this.logger.info(`Cleaning ${pkg.distPath}`);
+        rmSync(pkg.distPath.value, { recursive: true });
+      }
+
+      if (pkg.libPath.isDirectory()) {
+        this.logger.info(`Cleaning ${pkg.libPath}`);
+        rmSync(pkg.libPath.value, { recursive: true });
+      }
+    });
+
+    this.logger.info('dist cleaned');
+  }
+
+  doCleanRust() {
+    exec('', 'cargo clean');
+  }
+}
--- a/tools/cli/src/codegen.ts
+++ b/tools/cli/src/codegen.ts
@@ -0,0 +1,67 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+import type { Path } from '@affine-tools/utils/path';
+import { type BuiltInParserName, format } from 'prettier';
+
+import { Command } from './command';
+
+export class CodegenCommand extends Command {
+  static override paths = [['init'], ['i'], ['codegen']];
+
+  async execute() {
+    this.logger.info('Generating Workspace configs');
+    await this.generateWorkspaceFiles();
+    this.logger.info('Workspace configs generated');
+  }
+
+  async generateWorkspaceFiles() {
+    const filesToGenerate: [Path, () => string, BuiltInParserName?][] = [
+      [
+        this.workspace.join('tsconfig.project.json'),
+        this.workspace.genProjectTsConfig.bind(this.workspace),
+        'json',
+      ],
+      [
+        this.workspace
+          .getPackage('@affine-tools/utils')
+          .join('src/workspace.gen.ts'),
+        this.workspace.genWorkspaceInfo.bind(this.workspace),
+        'typescript',
+      ],
+      [this.workspace.join('oxlint.json'), this.genOxlintConfig, 'json'],
+    ];
+
+    for (const [path, content, formatter] of filesToGenerate) {
+      this.logger.info(`Output: ${path}`);
+      let file = content();
+      if (formatter) {
+        file = await this.format(file, formatter);
+      }
+      writeFileSync(path.value, file);
+    }
+  }
+
+  format(content: string, parser: BuiltInParserName) {
+    const config = JSON.parse(
+      readFileSync(this.workspace.join('.prettierrc').value, 'utf-8')
+    );
+    return format(content, { parser, ...config });
+  }
+
+  genOxlintConfig = () => {
+    const json = JSON.parse(
+      readFileSync(this.workspace.join('oxlint.json').value, 'utf-8')
+    );
+
+    const ignoreList = readFileSync(
+      this.workspace.join('.prettierignore').value,
+      'utf-8'
+    )
+      .split('\n')
+      .filter(line => line.trim() && !line.startsWith('#'));
+
+    json['ignorePatterns'] = ignoreList;
+
+    return JSON.stringify(json, null, 2);
+  };
+}
--- a/tools/cli/src/command.ts
+++ b/tools/cli/src/command.ts
@@ -0,0 +1,71 @@
+import { AliasToPackage } from '@affine-tools/utils/distribution';
+import { Logger } from '@affine-tools/utils/logger';
+import { type PackageName, Workspace } from '@affine-tools/utils/workspace';
+import { Command as BaseCommand, Option } from 'clipanion';
+import * as t from 'typanion';
+
+import type { CliContext } from './context';
+
+export abstract class Command extends BaseCommand<CliContext> {
+  get logger() {
+    // @ts-expect-error hack: Get the command name
+    return new Logger(this.constructor.paths[0][0]);
+  }
+
+  get workspace() {
+    return this.context.workspace;
+  }
+}
+
+export abstract class PackageCommand extends Command {
+  protected availablePackageNameArgs = (
+    Workspace.PackageNames as string[]
+  ).concat(Array.from(AliasToPackage.keys()));
+  protected packageNameValidator = t.isOneOf(
+    this.availablePackageNameArgs.map(k => t.isLiteral(k))
+  );
+
+  protected packageNameOrAlias = Option.String('--package,-p', {
+    required: true,
+    validator: this.packageNameValidator,
+    description: 'The package name or alias to be run with',
+  });
+
+  get package(): PackageName {
+    return (
+      AliasToPackage.get(this.packageNameOrAlias as any) ??
+      (this.packageNameOrAlias as PackageName)
+    );
+  }
+
+  deps = Option.Boolean('--deps', false, {
+    description:
+      'Execute the same command in workspace dependencies, if defined.',
+  });
+}
+
+export abstract class PackagesCommand extends Command {
+  protected availablePackageNameArgs = (
+    Workspace.PackageNames as string[]
+  ).concat(Array.from(AliasToPackage.keys()));
+  protected packageNameValidator = t.isOneOf(
+    this.availablePackageNameArgs.map(k => t.isLiteral(k))
+  );
+
+  protected packageNamesOrAliases = Option.Array('--package,-p', {
+    required: true,
+    validator: t.isArray(this.packageNameValidator),
+  });
+  get packages() {
+    return this.packageNamesOrAliases.map(
+      name => AliasToPackage.get(name as any) ?? name
+    );
+  }
+
+  deps = Option.Boolean('--deps', false, {
+    description:
+      'Execute the same command in workspace dependencies, if defined.',
+  });
+}
+
+export { Option };
--- a/tools/cli/src/config/cwd.cjs
+++ b/tools/cli/src/config/cwd.cjs
@@ -1,38 +0,0 @@
-// @ts-check
-
-const { join } = require('node:path');
-
-const projectRoot = join(__dirname, '../../../..');
-
-module.exports.projectRoot = projectRoot;
-
-/**
- *
- * @param {string | undefined} distribution
- * @returns string
- */
-module.exports.getCwdFromDistribution = function getCwdFromDistribution(
-  distribution
-) {
-  switch (distribution) {
-    case 'web':
-    case undefined:
-    case null:
-      return join(projectRoot, 'packages/frontend/apps/web');
-    case 'desktop':
-      return join(projectRoot, 'packages/frontend/apps/electron/renderer');
-    case 'admin':
-      return join(projectRoot, 'packages/frontend/admin');
-    case 'mobile':
-      return join(projectRoot, 'packages/frontend/apps/mobile');
-    case 'ios':
-      return join(projectRoot, 'packages/frontend/apps/ios');
-    case 'android':
-      return join(projectRoot, 'packages/frontend/apps/android');
-    default: {
-      throw new Error(
-        'DISTRIBUTION must be one of web, desktop, admin, mobile'
-      );
-    }
-  }
-};
--- a/tools/cli/src/config/index.ts
+++ b/tools/cli/src/config/index.ts
@@ -1,9 +0,0 @@
-export type BuildFlags = {
-  distribution: 'web' | 'desktop' | 'admin' | 'mobile' | 'ios' | 'android';
-  mode: 'development' | 'production';
-  channel: 'stable' | 'beta' | 'canary' | 'internal';
-  static: boolean;
-  coverage?: boolean;
-  localBlockSuite?: string;
-  entry?: string | { [key: string]: string };
-};
--- a/tools/cli/src/context.ts
+++ b/tools/cli/src/context.ts
@@ -0,0 +1,6 @@
+import type { Workspace } from '@affine-tools/utils/workspace';
+import type { BaseContext } from 'clipanion';
+
+export interface CliContext extends BaseContext {
+  workspace: Workspace;
+}
--- a/tools/cli/src/dev.ts
+++ b/tools/cli/src/dev.ts
@@ -0,0 +1,15 @@
+import { PackageCommand } from './command';
+
+export class DevCommand extends PackageCommand {
+  static override paths = [['dev'], ['d']];
+
+  async execute() {
+    const args = [this.package, 'dev'];
+
+    if (this.deps) {
+      args.push('--deps');
+    }
+
+    await this.cli.run(args);
+  }
+}
--- a/tools/cli/src/run.ts
+++ b/tools/cli/src/run.ts
@@ -0,0 +1,135 @@
+import { Path } from '@affine-tools/utils/path';
+import { execAsync } from '@affine-tools/utils/process';
+import type { PackageName } from '@affine-tools/utils/workspace';
+
+import { Option, PackageCommand } from './command';
+
+interface RunScriptOptions {
+  includeDependencies?: boolean;
+  waitDependencies?: boolean;
+}
+
+const currentDir = Path.dir(import.meta.url);
+
+const ignoreLoaderScripts = [
+  'vitest',
+  'vite',
+  'ts-node',
+  'prisma',
+  'cap',
+  'tsc',
+  /electron(?!-)/,
+];
+
+export class RunCommand extends PackageCommand {
+  static override paths = [[], ['run'], ['r']];
+
+  static override usage = PackageCommand.Usage({
+    description: 'AFFiNE Monorepo scripts',
+    details: `
+      \`affine web <script>\`    Run any script defined in package's package.json
+
+      \`affine codegen\`         Generate the required files if there are any package added or removed
+
+      \`affine clean\`           Clean the output files of ts, cargo, webpack, etc.
+
+      \`affine bundle\`          Bundle the packages
+
+      \`affine build\`           A proxy for <-p package>'s \`build\` script
+
+      \`affine dev\`             A proxy for <-p package>'s \`dev\` script
+    `,
+    examples: [
+      [`See detail of each command`, '$0 -h'],
+      [
+        `Run custom 'xxx' script defined in @affine/web's package.json`,
+        '$0 web xxx',
+      ],
+      [`Run 'codegen' for workspace`, '$0 codegen'],
+      [`Clean tsbuild and dist under each package`, '$0 clean --ts --dist'],
+      [`Clean node_modules under each package`, '$0 clean --node-modules'],
+      [`Clean everything`, '$0 clean --all'],
+      [`Run 'build' script for @affine/web`, '$0 build -p web'],
+      [
+        `Run 'build' script for @affine/web with all deps prebuild before`,
+        '$0 build -p web --deps',
+      ],
+    ],
+  });
+
+  // we use positional arguments instead of options
+  protected override packageNameOrAlias: string = Option.String({
+    required: true,
+    validator: this.packageNameValidator,
+  });
+
+  args = Option.Proxy({ name: 'args', required: 1 });
+
+  async execute() {
+    await this.run(this.package, this.args, {
+      includeDependencies: this.deps,
+      waitDependencies: true,
+    });
+  }
+
+  async run(name: PackageName, args: string[], opts: RunScriptOptions = {}) {
+    opts = { includeDependencies: false, ...opts };
+
+    const pkg = this.workspace.getPackage(name);
+    const script = args[0];
+    const pkgScript = pkg.scripts[script];
+
+    let isPackageJsonScript = false;
+    let isAFFiNEScript = false;
+
+    if (pkgScript) {
+      isPackageJsonScript = true;
+      isAFFiNEScript = pkgScript.startsWith('affine ');
+    } else {
+      isAFFiNEScript = script.startsWith('affine ');
+    }
+
+    if (isPackageJsonScript && opts.includeDependencies) {
+      this.logger.info(
+        `Running [${script}] script in dependencies of ${pkg.name}...`
+      );
+
+      await Promise.all(
+        pkg.deps.map(dep => {
+          this.logger.info(`Running [${script}] script in ${dep.name}...`);
+          return this.run(dep.name, args, opts);
+        })
+      );
+    }
+
+    if (isPackageJsonScript) {
+      this.logger.info(`Running [${script}] script in ${pkg.name}...`);
+    }
+
+    if (isAFFiNEScript) {
+      await this.cli.run([
+        ...pkgScript.split(' ').slice(1),
+        ...args.slice(1),
+        '-p',
+        pkg.name,
+      ]);
+    } else {
+      const script = pkgScript ?? args[0];
+      // very simple test for auto ts/mjs scripts
+      const isLoaderRequired = !ignoreLoaderScripts.some(ignore =>
+        new RegExp(ignore).test(script)
+      );
+
+      await execAsync(name, ['yarn', ...args], {
+        cwd: pkg.path.value,
+        ...(isLoaderRequired
+          ? {
+              env: {
+                NODE_OPTIONS: `--import=${currentDir.join('../register.js').toFileUrl()}`,
+              },
+            }
+          : {}),
+      });
+    }
+  }
+}
--- a/tools/cli/src/util/infra.ts
+++ b/tools/cli/src/util/infra.ts
@@ -1,26 +0,0 @@
-import { spawn } from 'node:child_process';
-import { resolve } from 'node:path';
-
-import { build } from 'vite';
-
-import { projectRoot } from '../config/cwd.cjs';
-
-const infraFilePath = resolve(
-  projectRoot,
-  'packages',
-  'infra',
-  'vite.config.ts'
-);
-export const buildInfra = async () => {
-  await build({
-    configFile: infraFilePath,
-  });
-};
-
-export const watchInfra = async () => {
-  spawn('vite', ['build', '--watch'], {
-    cwd: resolve(projectRoot, 'packages/common/infra'),
-    shell: true,
-    stdio: 'inherit',
-  });
-};
--- a/tools/cli/src/webpack/html-plugin.ts
+++ b/tools/cli/src/webpack/html-plugin.ts
@@ -0,0 +1,197 @@
+import { execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+
+import type { BUILD_CONFIG_TYPE } from '@affine/env/global';
+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 type { Compiler, WebpackPluginInstance } from 'webpack';
+import webpack from 'webpack';
+
+import type { BuildFlags } from './types.js';
+
+export const getPublicPath = (
+  flags: BuildFlags,
+  BUILD_CONFIG: BUILD_CONFIG_TYPE
+) => {
+  const { BUILD_TYPE } = process.env;
+  if (typeof process.env.PUBLIC_PATH === 'string') {
+    return process.env.PUBLIC_PATH;
+  }
+
+  if (
+    flags.mode === 'development' ||
+    BUILD_CONFIG.distribution === 'desktop' ||
+    BUILD_CONFIG.distribution === 'ios' ||
+    BUILD_CONFIG.distribution === 'android'
+  ) {
+    return '/';
+  }
+
+  switch (BUILD_TYPE) {
+    case 'stable':
+      return 'https://prod.affineassets.com/';
+    case 'beta':
+      return 'https://beta.affineassets.com/';
+    default:
+      return 'https://dev.affineassets.com/';
+  }
+};
+
+const DESCRIPTION = `There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together.`;
+
+const gitShortHash = once(() => {
+  const { GITHUB_SHA } = process.env;
+  if (GITHUB_SHA) {
+    return GITHUB_SHA.substring(0, 9);
+  }
+  const repo = new Repository(ProjectRoot.path);
+  const shortSha = repo.head().target()?.substring(0, 9);
+  if (shortSha) {
+    return shortSha;
+  }
+  const sha = execSync(`git rev-parse --short HEAD`, {
+    encoding: 'utf-8',
+  }).trim();
+  return sha;
+});
+
+const currentDir = Path.dir(import.meta.url);
+
+function getHTMLPluginOptions(
+  flags: BuildFlags,
+  BUILD_CONFIG: BUILD_CONFIG_TYPE
+) {
+  const publicPath = getPublicPath(flags, BUILD_CONFIG);
+  const cdnOrigin = publicPath.startsWith('/')
+    ? undefined
+    : new URL(publicPath).origin;
+
+  const templateParams = {
+    GIT_SHORT_SHA: gitShortHash(),
+    DESCRIPTION,
+    PRECONNECT: cdnOrigin
+      ? `<link rel="preconnect" href="${cdnOrigin}" />`
+      : '',
+    VIEWPORT_FIT: BUILD_CONFIG.isMobileEdition ? 'cover' : 'auto',
+  };
+
+  return {
+    template: currentDir.join('template.html').toString(),
+    inject: 'body',
+    filename: 'index.html',
+    minify: false,
+    templateParameters: templateParams,
+    chunks: ['app'],
+  } satisfies HTMLPlugin.Options;
+}
+
+export function createShellHTMLPlugin(
+  flags: BuildFlags,
+  BUILD_CONFIG: BUILD_CONFIG_TYPE
+) {
+  const htmlPluginOptions = getHTMLPluginOptions(flags, BUILD_CONFIG);
+
+  return new HTMLPlugin({
+    ...htmlPluginOptions,
+    chunks: ['shell'],
+    filename: `shell.html`,
+  });
+}
+
+export function createHTMLPlugins(
+  flags: BuildFlags,
+  BUILD_CONFIG: BUILD_CONFIG_TYPE
+): WebpackPluginInstance[] {
+  const publicPath = getPublicPath(flags, BUILD_CONFIG);
+  const globalErrorHandler = [
+    'js/global-error-handler.js',
+    readFileSync(currentDir.join('./error-handler.js').toString(), 'utf-8'),
+  ];
+
+  const htmlPluginOptions = getHTMLPluginOptions(flags, BUILD_CONFIG);
+
+  return [
+    {
+      apply(compiler: Compiler) {
+        compiler.hooks.compilation.tap(
+          'assets-manifest-plugin',
+          compilation => {
+            HTMLPlugin.getHooks(compilation).beforeAssetTagGeneration.tap(
+              'assets-manifest-plugin',
+              arg => {
+                if (
+                  !BUILD_CONFIG.isElectron &&
+                  !compilation.getAsset(globalErrorHandler[0])
+                ) {
+                  compilation.emitAsset(
+                    globalErrorHandler[0],
+                    new webpack.sources.RawSource(globalErrorHandler[1])
+                  );
+                  arg.assets.js.unshift(
+                    arg.assets.publicPath + globalErrorHandler[0]
+                  );
+                }
+
+                if (!compilation.getAsset('assets-manifest.json')) {
+                  compilation.emitAsset(
+                    globalErrorHandler[0],
+                    new webpack.sources.RawSource(globalErrorHandler[1])
+                  );
+                  compilation.emitAsset(
+                    `assets-manifest.json`,
+                    new webpack.sources.RawSource(
+                      JSON.stringify(
+                        {
+                          ...arg.assets,
+                          js: arg.assets.js.map(file =>
+                            file.substring(arg.assets.publicPath.length)
+                          ),
+                          css: arg.assets.css.map(file =>
+                            file.substring(arg.assets.publicPath.length)
+                          ),
+                          gitHash:
+                            htmlPluginOptions.templateParameters.GIT_SHORT_SHA,
+                          description:
+                            htmlPluginOptions.templateParameters.DESCRIPTION,
+                        },
+                        null,
+                        2
+                      )
+                    ),
+                    {
+                      immutable: false,
+                    }
+                  );
+                }
+
+                return arg;
+              }
+            );
+          }
+        );
+      },
+    },
+    new HTMLPlugin({
+      ...htmlPluginOptions,
+      publicPath,
+      meta: {
+        'env:publicPath': publicPath,
+      },
+    }),
+    // selfhost html
+    new HTMLPlugin({
+      ...htmlPluginOptions,
+      meta: {
+        'env:isSelfHosted': 'true',
+        'env:publicPath': '/',
+      },
+      filename: 'selfhost.html',
+      templateParameters: {
+        ...htmlPluginOptions.templateParameters,
+        PRECONNECT: '',
+      },
+    }),
+  ];
+}
--- a/tools/cli/src/webpack/config.ts
+++ b/tools/cli/src/webpack/config.ts
@@ -1,32 +1,33 @@
-import { join } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { createRequire } from 'node:module';

-import type { BUILD_CONFIG_TYPE } from '@affine/env/global';
+import { getBuildConfig } from '@affine-tools/utils/build-config';
+import { ProjectRoot } from '@affine-tools/utils/path';
+import type { Package } from '@affine-tools/utils/workspace';
 import { PerfseePlugin } from '@perfsee/webpack';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
 import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
-import { compact } from 'lodash-es';
+import compact from 'lodash-es/compact';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';

-import { projectRoot } from '../config/cwd.cjs';
-import type { BuildFlags } from '../config/index.js';
 import { productionCacheGroups } from './cache-group.js';
+import { createHTMLPlugins, createShellHTMLPlugin } from './html-plugin.js';
 import { WebpackS3Plugin } from './s3-plugin.js';
+import type { BuildFlags } from './types';
+
+const require = createRequire(import.meta.url);
+const cssnano = require('cssnano');

 const IN_CI = !!process.env.CI;

-export const rootPath = join(fileURLToPath(import.meta.url), '..', '..');
-export const workspaceRoot = join(rootPath, '..', '..', '..');
-
 const OptimizeOptionOptions: (
-  buildFlags: BuildFlags
-) => webpack.Configuration['optimization'] = buildFlags => ({
-  minimize: buildFlags.mode === 'production',
+  flags: BuildFlags
+) => webpack.Configuration['optimization'] = flags => ({
+  minimize: flags.mode === 'production',
  minimizer: [
    new TerserPlugin({
      minify: TerserPlugin.swcMinify,
@@ -60,71 +61,48 @@ const OptimizeOptionOptions: (
  },
 });

-export const getPublicPath = (buildFlags: BuildFlags) => {
-  const { BUILD_TYPE } = process.env;
-  if (typeof process.env.PUBLIC_PATH === 'string') {
-    return process.env.PUBLIC_PATH;
-  }
+export function createWebpackConfig(
+  pkg: Package,
+  flags: BuildFlags
+): webpack.Configuration {
+  const buildConfig = getBuildConfig(pkg, flags);

-  if (
-    buildFlags.mode === 'development' ||
-    process.env.COVERAGE ||
-    buildFlags.distribution === 'desktop' ||
-    buildFlags.distribution === 'ios' ||
-    buildFlags.distribution === 'android'
-  ) {
-    return '/';
-  }
-
-  switch (BUILD_TYPE) {
-    case 'stable':
-      return 'https://prod.affineassets.com/';
-    case 'beta':
-      return 'https://beta.affineassets.com/';
-    default:
-      return 'https://dev.affineassets.com/';
-  }
-};
-
-export const createConfiguration: (
-  cwd: string,
-  buildFlags: BuildFlags,
-  buildConfig: BUILD_CONFIG_TYPE
-) => webpack.Configuration = (cwd, buildFlags, buildConfig) => {
  const config = {
    name: 'affine',
-    // to set a correct base path for the source map
-    context: cwd,
+    context: pkg.path.value,
    experiments: {
      topLevelAwait: true,
      outputModule: false,
      syncWebAssembly: true,
    },
+    entry: {
+      app: pkg.entry ?? './src/index.tsx',
+    },
    output: {
      environment: {
        module: true,
        dynamicImport: true,
      },
      filename:
-        buildFlags.mode === 'production'
+        flags.mode === 'production'
          ? 'js/[name].[contenthash:8].js'
          : 'js/[name].js',
      // In some cases webpack will emit files starts with "_" which is reserved in web extension.
      chunkFilename: pathData =>
        pathData.chunk?.name?.endsWith?.('worker')
          ? 'js/[name].[contenthash:8].js'
-          : buildFlags.mode === 'production'
+          : flags.mode === 'production'
            ? 'js/chunk.[name].[contenthash:8].js'
            : 'js/chunk.[name].js',
      assetModuleFilename:
-        buildFlags.mode === 'production'
+        flags.mode === 'production'
          ? 'assets/[name].[contenthash:8][ext][query]'
          : '[name].[contenthash:8][ext]',
      devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
      hotUpdateChunkFilename: 'hot/[id].[fullhash].js',
      hotUpdateMainFilename: 'hot/[runtime].[fullhash].json',
-      path: join(cwd, 'dist'),
-      clean: buildFlags.mode === 'production',
+      path: pkg.distPath.value,
+      clean: flags.mode === 'production',
      globalObject: 'globalThis',
      // NOTE(@forehalo): always keep it '/'
      publicPath: '/',
@@ -132,10 +110,10 @@ export const createConfiguration: (
    },
    target: ['web', 'es2022'],

-    mode: buildFlags.mode,
+    mode: flags.mode,

    devtool:
-      buildFlags.mode === 'production'
+      flags.mode === 'production'
        ? 'source-map'
        : 'eval-cheap-module-source-map',

@@ -147,14 +125,13 @@ export const createConfiguration: (
      },
      extensions: ['.js', '.ts', '.tsx'],
      alias: {
-        yjs: join(workspaceRoot, 'node_modules', 'yjs'),
-        lit: join(workspaceRoot, 'node_modules', 'lit'),
-        '@preact/signals-core': join(
-          workspaceRoot,
+        yjs: ProjectRoot.join('node_modules', 'yjs').value,
+        lit: ProjectRoot.join('node_modules', 'lit').value,
+        '@preact/signals-core': ProjectRoot.join(
          'node_modules',
          '@preact',
          'signals-core'
-        ),
+        ).value,
      },
    },

@@ -230,7 +207,7 @@ export const createConfiguration: (
                  transform: {
                    react: {
                      runtime: 'automatic',
-                      refresh: buildFlags.mode === 'development' && {
+                      refresh: flags.mode === 'development' && {
                        refreshReg: '$RefreshReg$',
                        refreshSig: '$RefreshSig$',
                        emitFullSignatures: true,
@@ -263,7 +240,7 @@ export const createConfiguration: (
            {
              test: /\.css$/,
              use: [
-                buildFlags.mode === 'development'
+                flags.mode === 'development'
                  ? 'style-loader'
                  : MiniCssExtractPlugin.loader,
                {
@@ -280,7 +257,25 @@ export const createConfiguration: (
                  loader: 'postcss-loader',
                  options: {
                    postcssOptions: {
-                      config: join(rootPath, 'webpack', 'postcss.config.cjs'),
+                      plugins: [
+                        cssnano({
+                          preset: [
+                            'default',
+                            {
+                              convertValues: false,
+                            },
+                          ],
+                        }),
+                      ].concat(
+                        pkg.join('tailwind.config.js').exists()
+                          ? [
+                              require('tailwindcss')(
+                                require(pkg.join('tailwind.config.js').path)
+                              ),
+                              'autoprefixer',
+                            ]
+                          : []
+                      ),
                    },
                  },
                },
@@ -292,7 +287,7 @@ export const createConfiguration: (
    },
    plugins: compact([
      IN_CI ? null : new webpack.ProgressPlugin({ percentBy: 'entries' }),
-      buildFlags.mode === 'development'
+      flags.mode === 'development'
        ? new ReactRefreshWebpackPlugin({
            overlay: false,
            esModule: true,
@@ -305,7 +300,7 @@ export const createConfiguration: (
          }),
      new VanillaExtractPlugin(),
      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(buildFlags.mode),
+        'process.env.NODE_ENV': JSON.stringify(flags.mode),
        'process.env.CAPTCHA_SITE_KEY': JSON.stringify(
          process.env.CAPTCHA_SITE_KEY
        ),
@@ -323,24 +318,19 @@ export const createConfiguration: (
          {} as Record<string, string>
        ),
      }),
-      buildFlags.distribution === 'admin'
+      buildConfig.isAdmin
        ? null
        : new CopyPlugin({
            patterns: [
              {
                // copy the shared public assets into dist
-                from: join(
-                  workspaceRoot,
-                  'packages',
-                  'frontend',
-                  'core',
-                  'public'
-                ),
-                to: join(cwd, 'dist'),
+                from: pkg.workspace.getPackage('@affine/core').join('public')
+                  .value,
+                to: pkg.distPath.value,
              },
            ],
          }),
-      buildFlags.mode === 'production' &&
+      flags.mode === 'production' &&
      (buildConfig.isWeb || buildConfig.isMobileWeb || buildConfig.isAdmin) &&
      process.env.R2_SECRET_ACCESS_KEY
        ? new WebpackS3Plugin()
@@ -349,14 +339,12 @@ export const createConfiguration: (
    stats: {
      errorDetails: true,
    },
-
-    optimization: OptimizeOptionOptions(buildFlags),
-
+    optimization: OptimizeOptionOptions(flags),
    devServer: {
      host: '0.0.0.0',
      allowedHosts: 'all',
-      hot: buildFlags.static ? false : 'only',
-      liveReload: !buildFlags.static,
+      hot: true,
+      liveReload: true,
      client: {
        overlay: process.env.DISABLE_DEV_OVERLAY === 'true' ? false : undefined,
      },
@@ -374,20 +362,10 @@ export const createConfiguration: (
      },
      static: [
        {
-          directory: join(
-            projectRoot,
-            'packages',
-            'frontend',
-            'core',
-            'public'
-          ),
+          directory: pkg.workspace.getPackage('@affine/core').join('public')
+            .value,
          publicPath: '/',
-          watch: !buildFlags.static,
-        },
-        {
-          directory: join(cwd, 'public'),
-          publicPath: '/',
-          watch: !buildFlags.static,
+          watch: true,
        },
      ],
      proxy: [
@@ -404,7 +382,7 @@ export const createConfiguration: (
    } as DevServerConfiguration,
  } satisfies webpack.Configuration;

-  if (buildFlags.mode === 'production' && process.env.PERFSEE_TOKEN) {
+  if (flags.mode === 'production' && process.env.PERFSEE_TOKEN) {
    config.plugins.push(
      new PerfseePlugin({
        project: 'affine-toeverything',
@@ -412,7 +390,7 @@ export const createConfiguration: (
    );
  }

-  if (buildFlags.mode === 'development') {
+  if (flags.mode === 'development') {
    config.optimization = {
      ...config.optimization,
      minimize: false,
@@ -456,5 +434,11 @@ export const createConfiguration: (
    );
  }

+  config.plugins = config.plugins.concat(createHTMLPlugins(flags, buildConfig));
+
+  if (buildConfig.isElectron) {
+    config.plugins.push(createShellHTMLPlugin(flags, buildConfig));
+  }
+
  return config;
-};
+}
--- a/tools/cli/src/webpack/postcss.config.cjs
+++ b/tools/cli/src/webpack/postcss.config.cjs
@@ -1,47 +0,0 @@
-const { join } = require('node:path');
-
-const cssnano = require('cssnano');
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
-
-const { getCwdFromDistribution } = require('../config/cwd.cjs');
-
-const projectCwd = getCwdFromDistribution(process.env.DISTRIBUTION);
-
-const twConfig = (function () {
-  try {
-    const config = require(`${projectCwd}/tailwind.config.js`);
-    const { content } = config;
-    if (Array.isArray(content)) {
-      config.content = content.map(c =>
-        c.startsWith(projectCwd) ? c : join(projectCwd, c)
-      );
-    }
-    return config;
-  } catch {
-    return null;
-  }
-})();
-
-module.exports = function (context) {
-  const plugins = [
-    cssnano({
-      preset: [
-        'default',
-        {
-          convertValues: false,
-        },
-      ],
-    }),
-  ];
-
-  if (twConfig) {
-    plugins.push(tailwindcss(twConfig), autoprefixer());
-  }
-
-  return {
-    from: context.from,
-    plugins,
-    to: context.to,
-  };
-};
--- a/tools/cli/src/webpack/runtime-config.ts
+++ b/tools/cli/src/webpack/runtime-config.ts
@@ -1,86 +0,0 @@
-import type { BUILD_CONFIG_TYPE } from '@affine/env/global';
-
-import packageJson from '../../package.json' with { type: 'json' };
-import type { BuildFlags } from '../config';
-
-export function getBuildConfig(buildFlags: BuildFlags): BUILD_CONFIG_TYPE {
-  const buildPreset: Record<BuildFlags['channel'], BUILD_CONFIG_TYPE> = {
-    get stable() {
-      return {
-        debug: buildFlags.mode === 'development',
-        distribution: buildFlags.distribution,
-        isDesktopEdition: (
-          ['web', 'desktop', 'admin'] as BuildFlags['distribution'][]
-        ).includes(buildFlags.distribution),
-        isMobileEdition: (
-          ['mobile', 'ios', 'android'] as BuildFlags['distribution'][]
-        ).includes(buildFlags.distribution),
-        isElectron: buildFlags.distribution === 'desktop',
-        isWeb: buildFlags.distribution === 'web',
-        isMobileWeb: buildFlags.distribution === 'mobile',
-        isIOS: buildFlags.distribution === 'ios',
-        isAndroid: buildFlags.distribution === 'android',
-        isAdmin: buildFlags.distribution === 'admin',
-
-        appBuildType: 'stable' as const,
-        serverUrlPrefix: 'https://app.affine.pro',
-        appVersion: packageJson.version,
-        editorVersion: packageJson.devDependencies['@blocksuite/affine'],
-        githubUrl: 'https://github.com/toeverything/AFFiNE',
-        changelogUrl: 'https://affine.pro/what-is-new',
-        downloadUrl: 'https://affine.pro/download',
-        imageProxyUrl: '/api/worker/image-proxy',
-        linkPreviewUrl: '/api/worker/link-preview',
-      };
-    },
-    get beta() {
-      return {
-        ...this.stable,
-        appBuildType: 'beta' as const,
-        serverUrlPrefix: 'https://insider.affine.pro',
-        changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
-      };
-    },
-    get internal() {
-      return {
-        ...this.stable,
-        appBuildType: 'internal' as const,
-        serverUrlPrefix: 'https://insider.affine.pro',
-        changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
-      };
-    },
-    // canary will be aggressive and enable all features
-    get canary() {
-      return {
-        ...this.stable,
-        appBuildType: 'canary' as const,
-        serverUrlPrefix: 'https://affine.fail',
-        changelogUrl: 'https://github.com/toeverything/AFFiNE/releases',
-      };
-    },
-  };
-
-  const currentBuild = buildFlags.channel;
-
-  if (!(currentBuild in buildPreset)) {
-    throw new Error(`BUILD_TYPE ${currentBuild} is not supported`);
-  }
-
-  const currentBuildPreset = buildPreset[currentBuild];
-
-  const environmentPreset = {
-    changelogUrl: process.env.CHANGELOG_URL ?? currentBuildPreset.changelogUrl,
-  };
-
-  if (buildFlags.mode === 'development') {
-    currentBuildPreset.serverUrlPrefix = 'http://localhost:8080';
-  }
-
-  return {
-    ...currentBuildPreset,
-    // environment preset will overwrite current build preset
-    // this environment variable is for debug proposes only
-    // do not put them into CI
-    ...(process.env.CI ? {} : environmentPreset),
-  };
-}
--- a/tools/cli/src/webpack/s3-plugin.ts
+++ b/tools/cli/src/webpack/s3-plugin.ts
@@ -15,9 +15,7 @@ export class WebpackS3Plugin implements WebpackPluginInstance {
    region: 'auto',
    endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      accessKeyId: process.env.R2_ACCESS_KEY_ID!,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
    },
  });
--- a/tools/cli/src/webpack/types.ts
+++ b/tools/cli/src/webpack/types.ts
@@ -0,0 +1,4 @@
+export interface BuildFlags {
+  mode: 'development' | 'production';
+  channel: 'stable' | 'beta' | 'canary' | 'internal';
+}
--- a/tools/cli/src/webpack/webpack.config.ts
+++ b/tools/cli/src/webpack/webpack.config.ts
@@ -1,183 +0,0 @@
-import { execSync } from 'node:child_process';
-import { readFileSync } from 'node:fs';
-import { join, resolve } from 'node:path';
-
-import type { BuildFlags } from '@affine/cli/config';
-import { Repository } from '@napi-rs/simple-git';
-import HTMLPlugin from 'html-webpack-plugin';
-import { once } from 'lodash-es';
-import type { Compiler } from 'webpack';
-import webpack from 'webpack';
-import { merge } from 'webpack-merge';
-
-import {
-  createConfiguration,
-  getPublicPath,
-  rootPath,
-  workspaceRoot,
-} from './config.js';
-import { getBuildConfig } from './runtime-config.js';
-
-const DESCRIPTION = `There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together.`;
-
-const gitShortHash = once(() => {
-  const { GITHUB_SHA } = process.env;
-  if (GITHUB_SHA) {
-    return GITHUB_SHA.substring(0, 9);
-  }
-  const repo = new Repository(workspaceRoot);
-  const shortSha = repo.head().target()?.substring(0, 9);
-  if (shortSha) {
-    return shortSha;
-  }
-  const sha = execSync(`git rev-parse --short HEAD`, {
-    encoding: 'utf-8',
-  }).trim();
-  return sha;
-});
-
-export function createWebpackConfig(cwd: string, flags: BuildFlags) {
-  console.log('build flags', flags);
-  const runtimeConfig = getBuildConfig(flags);
-  console.log('BUILD_CONFIG', runtimeConfig);
-  const config = createConfiguration(cwd, flags, runtimeConfig);
-  const entry =
-    typeof flags.entry === 'string' || !flags.entry
-      ? {
-          app: flags.entry ?? resolve(cwd, 'src/index.tsx'),
-        }
-      : flags.entry;
-
-  const publicPath = getPublicPath(flags);
-  const cdnOrigin = publicPath.startsWith('/')
-    ? undefined
-    : new URL(publicPath).origin;
-
-  const globalErrorHandler = [
-    'js/global-error-handler.js',
-    readFileSync(
-      join(workspaceRoot, 'tools/cli/src/webpack/error-handler.js'),
-      'utf-8'
-    ),
-  ];
-
-  const templateParams = {
-    GIT_SHORT_SHA: gitShortHash(),
-    DESCRIPTION,
-    PRECONNECT: cdnOrigin
-      ? `<link rel="preconnect" href="${cdnOrigin}" />`
-      : '',
-    VIEWPORT_FIT:
-      flags.distribution === 'mobile' ||
-      flags.distribution === 'ios' ||
-      flags.distribution === 'android'
-        ? 'cover'
-        : 'auto',
-  };
-
-  const createHTMLPlugins = (entryName: string) => {
-    const htmlPluginOptions = {
-      template: join(rootPath, 'webpack', 'template.html'),
-      inject: 'body',
-      filename: 'index.html',
-      minify: false,
-      templateParameters: templateParams,
-      chunks: [entryName],
-    } satisfies HTMLPlugin.Options;
-
-    if (entryName === 'app') {
-      return [
-        {
-          apply(compiler: Compiler) {
-            compiler.hooks.compilation.tap(
-              'assets-manifest-plugin',
-              compilation => {
-                HTMLPlugin.getHooks(compilation).beforeAssetTagGeneration.tap(
-                  'assets-manifest-plugin',
-                  arg => {
-                    if (
-                      flags.distribution !== 'desktop' &&
-                      !compilation.getAsset(globalErrorHandler[0])
-                    ) {
-                      compilation.emitAsset(
-                        globalErrorHandler[0],
-                        new webpack.sources.RawSource(globalErrorHandler[1])
-                      );
-                      arg.assets.js.unshift(
-                        arg.assets.publicPath + globalErrorHandler[0]
-                      );
-                    }
-
-                    if (!compilation.getAsset('assets-manifest.json')) {
-                      compilation.emitAsset(
-                        globalErrorHandler[0],
-                        new webpack.sources.RawSource(globalErrorHandler[1])
-                      );
-                      compilation.emitAsset(
-                        `assets-manifest.json`,
-                        new webpack.sources.RawSource(
-                          JSON.stringify(
-                            {
-                              ...arg.assets,
-                              js: arg.assets.js.map(file =>
-                                file.substring(arg.assets.publicPath.length)
-                              ),
-                              css: arg.assets.css.map(file =>
-                                file.substring(arg.assets.publicPath.length)
-                              ),
-                              gitHash: templateParams.GIT_SHORT_SHA,
-                              description: templateParams.DESCRIPTION,
-                            },
-                            null,
-                            2
-                          )
-                        ),
-                        {
-                          immutable: false,
-                        }
-                      );
-                    }
-
-                    return arg;
-                  }
-                );
-              }
-            );
-          },
-        },
-        new HTMLPlugin({
-          ...htmlPluginOptions,
-          publicPath,
-          meta: {
-            'env:publicPath': publicPath,
-          },
-        }),
-        // selfhost html
-        new HTMLPlugin({
-          ...htmlPluginOptions,
-          meta: {
-            'env:isSelfHosted': 'true',
-            'env:publicPath': '/',
-          },
-          filename: 'selfhost.html',
-          templateParameters: {
-            ...htmlPluginOptions.templateParameters,
-            PRECONNECT: '',
-          },
-        }),
-      ];
-    } else {
-      return [
-        new HTMLPlugin({
-          ...htmlPluginOptions,
-          filename: `${entryName}.html`,
-        }),
-      ];
-    }
-  };
-
-  return merge(config, {
-    entry,
-    plugins: Object.keys(entry).map(createHTMLPlugins).flat(),
-  });
-}