snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tools/cli/README.md

@@ -0,0 +1,131 @@
+# AFFiNE Monorepo Cli
+
+## Start
+
+```bash
+yarn affine -h
+```
+
+### Run build command defined in package.json
+
+```bash
+yarn affine i18n build
+# or
+yarn build -p i18n
+```
+
+### Run dev command defined in package.json
+
+```bash
+yarn affine web dev
+# or
+yarn dev -p i18n
+```
+
+### Clean
+
+```bash
+yarn affine clean --dist --rust
+# clean node_modules
+yarn affine clean --node-modules
+```
+
+### Init
+
+> Generate files that make the monorepo work properly, the per project codegen will not be included anymore
+
+```bash
+yarn affine init
+```
+
+## Tricks
+
+### Define scripts to run a .ts files without manually wiring a TypeScript loader
+
+`affine run` will automatically inject `tsx` for your scripts
+
+```json
+{
+  "name": "@affine/demo",
+  "scripts": {
+    "dev": "node ./dev.ts"
+  }
+}
+```
+
+```bash
+affine @affine/demo dev
+```
+
+or
+
+```json
+{
+  "name": "@affine/demo",
+  "scripts": {
+    "dev": "r ./src/index.ts"
+  },
+  "devDependencies": {
+    "@affine-tools/cli": "workspace:*"
+  }
+}
+```
+
+### Short your key presses
+
+```bash
+# af is also available for running the scripts
+yarn af web build
+```
+
+#### by custom shell script
+
+> personally, I use 'af'
+
+create file `af` in the root of AFFiNE project with the following content
+
+```bash
+#!/usr/bin/env sh
+./tools/scripts/bin/runner.js affine.ts $@
+```
+
+or on windows:
+
+```cmd
+node "./tools/cli/bin/runner.js" affine.ts %*
+```
+
+and give it executable permission
+
+```bash
+chmod a+x ./af
+
+# now you can run scripts with simply
+./af web build
+```
+
+if you want to go further, but for vscode(or other forks) only, add the following to your `.vscode/settings.json`
+
+```json
+{
+  "terminal.integrated.env.osx": {
+    "PATH": "${env:PATH}:${cwd}"
+  },
+  "terminal.integrated.env.linux": {
+    "PATH": "${env:PATH}:${cwd}"
+  },
+  "terminal.integrated.env.windows": {
+    "PATH": "${env:PATH};${cwd}"
+  }
+}
+```
+
+restart all the integrated terminals and now you get:
+
+```bash
+af web build
+```
+
+```
+
+```

tools/cli/bin/cli.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
+
+spawnSync('yarn', ['r', 'affine.ts', ...process.argv.slice(2)], {
+  stdio: 'inherit',
+});

tools/cli/bin/runner.js

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const scriptsFolder = join(fileURLToPath(import.meta.url), '..', '..');
+const scriptsSrcFolder = join(scriptsFolder, 'src');
+const projectRoot = join(scriptsFolder, '..', '..');
+const serverRoot = join(projectRoot, 'packages', 'backend', 'server');
+const tsRuntimeRegister = join(scriptsFolder, 'register.js');
+const tsxRuntimeRegister = join(scriptsFolder, 'tsx-register.js');
+
+const [node, _self, file, ...options] = process.argv;
+
+if (!file) {
+  console.error(`Please provide a file to run, e.g. 'run src/index.{js/ts}'`);
+  process.exit(1);
+}
+
+const fileLocationCandidates = new Set([
+  process.cwd(),
+  scriptsSrcFolder,
+  projectRoot,
+]);
+const lookups = [];
+
+/**
+ * @type {string | undefined}
+ */
+let scriptLocation;
+for (const location of fileLocationCandidates) {
+  if (scriptLocation) {
+    break;
+  }
+
+  const fileCandidates = [file, `${file}.js`, `${file}.ts`];
+  for (const candidate of fileCandidates) {
+    const candidateLocation = join(location, candidate);
+    if (existsSync(candidateLocation)) {
+      scriptLocation = candidateLocation;
+      break;
+    }
+    lookups.push(candidateLocation);
+  }
+}
+
+if (!scriptLocation) {
+  console.error(
+    `File ${file} not found, please make sure the first parameter passed to 'run' script is a valid js or ts file.`
+  );
+  console.error(`Searched locations: `);
+  lookups.forEach(location => {
+    console.error(`  - ${location}`);
+  });
+  process.exit(1);
+}
+
+const nodeOptions = [];
+
+if (
+  scriptLocation.endsWith('.ts') ||
+  scriptLocation.startsWith(scriptsFolder)
+) {
+  if (scriptLocation.startsWith(serverRoot)) {
+    nodeOptions.unshift(`--import=${pathToFileURL(tsRuntimeRegister)}`);
+  } else {
+    nodeOptions.unshift(`--import=${pathToFileURL(tsxRuntimeRegister)}`);
+  }
+} else {
+  nodeOptions.unshift('--experimental-specifier-resolution=node');
+}
+
+spawn(node, [...nodeOptions, scriptLocation, ...options], {
+  stdio: 'inherit',
+}).on('exit', code => {
+  process.exit(code);
+});

tools/cli/hooks.js

@@ -0,0 +1,165 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+import { transform } from '@swc/core';
+
+const TS_EXTENSIONS = new Set(['.ts', '.tsx', '.mts', '.cts']);
+const JS_EXTENSIONS = ['.js', '.mjs', '.cjs'];
+const ALL_EXTENSIONS = [...TS_EXTENSIONS, ...JS_EXTENSIONS];
+
+const JS_EXTENSION_TO_TS = {
+  '.js': ['.ts', '.tsx', '.js'],
+  '.mjs': ['.mts', '.mjs'],
+  '.cjs': ['.cts', '.cjs'],
+};
+
+const transformCache = new Map();
+
+function createCandidates(basePath) {
+  const parsedExt = path.extname(basePath);
+  const hasKnownExtension =
+    parsedExt in JS_EXTENSION_TO_TS || ALL_EXTENSIONS.includes(parsedExt);
+  const ext = hasKnownExtension ? parsedExt : '';
+  const stem = ext ? basePath.slice(0, -ext.length) : basePath;
+  const candidates = new Set();
+
+  const extensions = ext ? (JS_EXTENSION_TO_TS[ext] ?? [ext]) : ALL_EXTENSIONS;
+
+  for (const candidateExt of extensions) {
+    candidates.add(`${stem}${candidateExt}`);
+  }
+
+  if (!ext) {
+    for (const candidateExt of ALL_EXTENSIONS) {
+      candidates.add(path.join(basePath, `index${candidateExt}`));
+    }
+  }
+
+  return candidates;
+}
+
+function isPathLike(specifier) {
+  return (
+    specifier.startsWith('./') ||
+    specifier.startsWith('../') ||
+    specifier.startsWith('/') ||
+    specifier.startsWith('file:')
+  );
+}
+
+function resolvePathLikeSpecifier(specifier, parentURL) {
+  if (!isPathLike(specifier)) {
+    return undefined;
+  }
+
+  const [specifierWithoutQuery, queryString = ''] = specifier.split('?');
+  const querySuffix = queryString ? `?${queryString}` : '';
+
+  const parentPath = parentURL?.startsWith('file:')
+    ? fileURLToPath(parentURL)
+    : path.join(process.cwd(), 'index.js');
+
+  const basePath = specifierWithoutQuery.startsWith('file:')
+    ? fileURLToPath(specifierWithoutQuery)
+    : path.isAbsolute(specifierWithoutQuery)
+      ? specifierWithoutQuery
+      : path.resolve(path.dirname(parentPath), specifierWithoutQuery);
+
+  for (const candidate of createCandidates(basePath)) {
+    try {
+      if (fs.statSync(candidate).isFile()) {
+        return `${pathToFileURL(candidate).href}${querySuffix}`;
+      }
+    } catch {
+      // ignore missing candidates
+    }
+  }
+
+  return undefined;
+}
+
+export async function resolve(specifier, context, nextResolve) {
+  try {
+    return await nextResolve(specifier, context);
+  } catch (error) {
+    const resolvedUrl = resolvePathLikeSpecifier(specifier, context.parentURL);
+    if (resolvedUrl) {
+      return {
+        url: resolvedUrl,
+        shortCircuit: true,
+      };
+    }
+
+    throw error;
+  }
+}
+
+export async function load(url, context, nextLoad) {
+  const [urlWithoutQuery] = url.split('?');
+
+  if (!urlWithoutQuery.startsWith('file:')) {
+    return nextLoad(url, context);
+  }
+
+  const filePath = fileURLToPath(urlWithoutQuery);
+  if (!TS_EXTENSIONS.has(path.extname(filePath))) {
+    return nextLoad(url, context);
+  }
+
+  const stat = await fs.promises.stat(filePath);
+  const cached = transformCache.get(filePath);
+  if (cached?.mtimeMs === stat.mtimeMs) {
+    return {
+      format: cached.format,
+      source: cached.source,
+      shortCircuit: true,
+    };
+  }
+
+  const sourceText = await fs.promises.readFile(filePath, 'utf8');
+  const isCommonJs = filePath.endsWith('.cts');
+  const moduleType = isCommonJs ? 'commonjs' : 'es6';
+  const tsx = filePath.endsWith('.tsx');
+
+  let output;
+  try {
+    output = await transform(sourceText, {
+      filename: filePath,
+      sourceMaps: 'inline',
+      module: { type: moduleType },
+      jsc: {
+        target: 'es2022',
+        keepClassNames: true,
+        experimental: { keepImportAttributes: true },
+        parser: {
+          syntax: 'typescript',
+          tsx,
+          decorators: true,
+          dynamicImport: true,
+        },
+        transform: {
+          legacyDecorator: true,
+          decoratorMetadata: true,
+          useDefineForClassFields: false,
+          react: tsx
+            ? { runtime: 'automatic', importSource: 'react' }
+            : undefined,
+        },
+      },
+    });
+  } catch (error) {
+    const detail = error instanceof Error ? error.message : String(error);
+    throw new Error(`[swc-loader] Failed to compile ${filePath}\n${detail}`);
+  }
+
+  const source = output.code ?? '';
+  const format = isCommonJs ? 'commonjs' : 'module';
+  transformCache.set(filePath, { mtimeMs: stat.mtimeMs, source, format });
+
+  return {
+    format,
+    source,
+    shortCircuit: true,
+  };
+}

tools/cli/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@affine-tools/cli",
+  "version": "0.27.5",
+  "type": "module",
+  "private": true,
+  "bin": {
+    "affine": "./bin/cli.js",
+    "r": "./bin/runner.js"
+  },
+  "exports": {
+    "./loader": "./loader.js",
+    "./bundle": "./src/bundle.ts"
+  },
+  "scripts": {
+    "affine": "r ./src/affine.ts"
+  },
+  "dependencies": {
+    "@affine-tools/utils": "workspace:*",
+    "@affine/s3-compat": "workspace:*",
+    "@napi-rs/simple-git": "^1.0.0",
+    "@rspack/core": "^2.0.8",
+    "@rspack/dev-server": "^2.1.0",
+    "@sentry/webpack-plugin": "^5.3.0",
+    "@swc/core": "^1.10.1",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@vanilla-extract/webpack-plugin": "^2.3.15",
+    "autoprefixer": "^10.4.20",
+    "clipanion": "^3.2.1",
+    "css-loader": "^7.1.4",
+    "cssnano": "^7.0.6",
+    "inquirer": "^12.3.0",
+    "jsonc-parser": "^3.3.1",
+    "lodash-es": "^4.17.23",
+    "mime-types": "^3.0.0",
+    "oxfmt": "0.63.0",
+    "postcss": "^8.5.18",
+    "postcss-loader": "^8.2.1",
+    "postcss-selector-parser": "^7.1.0",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.6",
+    "tailwindcss": "^4.1.17",
+    "tsx": "^4.21.0",
+    "typanion": "^3.14.0",
+    "typescript": "npm:@typescript/typescript6@6.0.2"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/mime-types": "^3.0.0",
+    "@types/node": "^22.0.0"
+  }
+}

tools/cli/register.js

@@ -0,0 +1,3 @@
+import { register } from 'node:module';
+
+register('./hooks.js', import.meta.url);

tools/cli/src/affine.ts

@@ -0,0 +1,34 @@
+import { Workspace } from '@affine-tools/utils/workspace';
+import { Cli } from 'clipanion';
+
+import { BuildCommand } from './build';
+import { BundleCommand } from './bundle';
+import { CertCommand } from './cert';
+import { CleanCommand } from './clean';
+import type { CliContext } from './context';
+import { DevCommand } from './dev';
+import { InitCommand } from './init';
+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(InitCommand);
+cli.register(CleanCommand);
+cli.register(BuildCommand);
+cli.register(DevCommand);
+cli.register(BundleCommand);
+cli.register(CertCommand);
+
+await cli.runExit(process.argv.slice(2), {
+  workspace: new Workspace(),
+  stdin: process.stdin,
+  stdout: process.stdout,
+  stderr: process.stderr,
+});

tools/cli/src/build.ts

@@ -0,0 +1,17 @@
+import { PackageCommand } from './command';
+
+export class BuildCommand extends PackageCommand {
+  static override paths = [['build'], ['b']];
+
+  async execute() {
+    const args: string[] = [];
+
+    if (this.deps) {
+      args.push('--deps', '--wait-deps');
+    }
+
+    args.push(this.package, 'build');
+
+    await this.cli.run(args);
+  }
+}

tools/cli/src/bundle-shared.ts

@@ -0,0 +1,72 @@
+import type { Configuration as RspackDevServerConfiguration } from '@rspack/dev-server';
+
+export const RSPACK_SUPPORTED_PACKAGES = [
+  '@affine/admin',
+  '@affine/web',
+  '@affine/mobile',
+  '@affine/ios',
+  '@affine/android',
+  '@affine/electron-renderer',
+  '@affine/server',
+  '@affine/reader',
+] as const;
+
+const rspackSupportedPackageSet = new Set<string>(RSPACK_SUPPORTED_PACKAGES);
+
+export function isRspackSupportedPackageName(name: string) {
+  return rspackSupportedPackageSet.has(name);
+}
+
+export function assertRspackSupportedPackageName(name: string) {
+  if (isRspackSupportedPackageName(name)) {
+    return;
+  }
+
+  throw new Error(
+    `Rspack bundling currently supports: ${Array.from(RSPACK_SUPPORTED_PACKAGES).join(', ')}. Unsupported package: ${name}.`
+  );
+}
+
+export const DEFAULT_DEV_SERVER_CONFIG: RspackDevServerConfiguration = {
+  host: '0.0.0.0',
+  allowedHosts: 'all',
+  hot: false,
+  liveReload: true,
+  compress: !process.env.CI,
+  setupExitSignals: true,
+  client: {
+    overlay: process.env.DISABLE_DEV_OVERLAY === 'true' ? false : undefined,
+    logging: process.env.CI ? 'none' : 'error',
+    // see: https://webpack.js.org/configuration/dev-server/#websocketurl
+    // must be an explicit ws/wss URL because custom protocols (e.g. assets://)
+    // cannot be used to construct WebSocket endpoints in Electron
+    webSocketURL: 'ws://0.0.0.0:8080/ws',
+  },
+  historyApiFallback: {
+    rewrites: [
+      {
+        from: /.*/,
+        to: () => {
+          return process.env.SELF_HOSTED === 'true'
+            ? '/selfhost.html'
+            : '/index.html';
+        },
+      },
+    ],
+  },
+  proxy: [
+    {
+      context: '/api',
+      target: 'http://localhost:3010',
+    },
+    {
+      context: '/socket.io',
+      target: 'http://localhost:3010',
+      ws: true,
+    },
+    {
+      context: '/graphql',
+      target: 'http://localhost:3010',
+    },
+  ],
+};

tools/cli/src/bundle.ts

@@ -0,0 +1,306 @@
+import { rmSync } from 'node:fs';
+import { cpus } from 'node:os';
+
+import { Logger } from '@affine-tools/utils/logger';
+import { Package } from '@affine-tools/utils/workspace';
+import rspack, { type MultiRspackOptions } from '@rspack/core';
+import {
+  type Configuration as RspackDevServerConfiguration,
+  RspackDevServer,
+} from '@rspack/dev-server';
+import { merge } from 'lodash-es';
+
+import {
+  assertRspackSupportedPackageName,
+  DEFAULT_DEV_SERVER_CONFIG,
+} from './bundle-shared';
+import { Option, PackageCommand } from './command';
+import {
+  createHTMLTargetConfig as createRspackHTMLTargetConfig,
+  createNodeTargetConfig as createRspackNodeTargetConfig,
+  createWorkerTargetConfig as createRspackWorkerTargetConfig,
+} from './rspack';
+import {
+  shouldUploadReleaseAssets,
+  uploadDistAssetsToS3,
+} from './rspack-shared/s3-plugin.js';
+
+type WorkerConfig = { name: string };
+type CreateWorkerTargetConfig = (pkg: Package, entry: string) => WorkerConfig;
+type BaseWorkerOptions = {
+  includeMermaidAndTypst?: boolean;
+};
+
+function assertRspackSupportedPackage(pkg: Package) {
+  assertRspackSupportedPackageName(pkg.name);
+}
+
+function shouldUploadAssetsForPackage(pkg: Package): boolean {
+  return (
+    !!process.env.R2_SECRET_ACCESS_KEY && shouldUploadReleaseAssets(pkg.name)
+  );
+}
+
+async function uploadAssetsForPackage(pkg: Package, logger: Logger) {
+  if (!shouldUploadAssetsForPackage(pkg)) {
+    return;
+  }
+  logger.info('Uploading dist assets to R2...');
+  await uploadDistAssetsToS3(pkg.distPath.value);
+  logger.info('Uploaded dist assets to R2.');
+}
+
+function getBaseWorkerConfigs(
+  pkg: Package,
+  createWorkerTargetConfig: CreateWorkerTargetConfig,
+  options: BaseWorkerOptions = {}
+) {
+  const core = new Package('@affine/core');
+  const includeMermaidAndTypst = options.includeMermaidAndTypst ?? true;
+
+  const workerConfigs = [
+    createWorkerTargetConfig(
+      pkg,
+      core.srcPath.join(
+        'modules/workspace-engine/impls/workspace-profile.worker.ts'
+      ).value
+    ),
+    createWorkerTargetConfig(
+      pkg,
+      core.srcPath.join('modules/pdf/renderer/pdf.worker.ts').value
+    ),
+    createWorkerTargetConfig(
+      pkg,
+      core.srcPath.join(
+        'blocksuite/view-extensions/turbo-renderer/turbo-painter.worker.ts'
+      ).value
+    ),
+  ];
+
+  if (includeMermaidAndTypst) {
+    workerConfigs.push(
+      createWorkerTargetConfig(
+        pkg,
+        core.srcPath.join('modules/mermaid/renderer/mermaid.worker.ts').value
+      ),
+      createWorkerTargetConfig(
+        pkg,
+        core.srcPath.join('modules/typst/renderer/typst.worker.ts').value
+      )
+    );
+  }
+
+  return workerConfigs;
+}
+
+function getRspackBundleConfigs(pkg: Package): MultiRspackOptions {
+  assertRspackSupportedPackage(pkg);
+
+  switch (pkg.name) {
+    case '@affine/admin': {
+      return [
+        createRspackHTMLTargetConfig(pkg, pkg.srcPath.join('index.tsx').value, {
+          selfhostPublicPath: '/admin/',
+        }),
+      ] as MultiRspackOptions;
+    }
+    case '@affine/web':
+    case '@affine/mobile': {
+      const workerConfigs = getBaseWorkerConfigs(
+        pkg,
+        createRspackWorkerTargetConfig
+      );
+      workerConfigs.push(
+        createRspackWorkerTargetConfig(
+          pkg,
+          pkg.srcPath.join('nbstore.worker.ts').value
+        )
+      );
+
+      return [
+        createRspackHTMLTargetConfig(
+          pkg,
+          pkg.srcPath.join('index.tsx').value,
+          {},
+          workerConfigs.map(config => config.name)
+        ),
+        ...workerConfigs,
+      ] as MultiRspackOptions;
+    }
+    case '@affine/ios':
+    case '@affine/android': {
+      const workerConfigs = getBaseWorkerConfigs(
+        pkg,
+        createRspackWorkerTargetConfig,
+        { includeMermaidAndTypst: false }
+      );
+      workerConfigs.push(
+        createRspackWorkerTargetConfig(
+          pkg,
+          pkg.srcPath.join('nbstore.worker.ts').value
+        )
+      );
+
+      return [
+        createRspackHTMLTargetConfig(
+          pkg,
+          pkg.srcPath.join('index.tsx').value,
+          {},
+          workerConfigs.map(config => config.name)
+        ),
+        ...workerConfigs,
+      ] as MultiRspackOptions;
+    }
+    case '@affine/electron-renderer': {
+      const workerConfigs = getBaseWorkerConfigs(
+        pkg,
+        createRspackWorkerTargetConfig,
+        { includeMermaidAndTypst: false }
+      );
+
+      return [
+        createRspackHTMLTargetConfig(
+          pkg,
+          {
+            index: pkg.srcPath.join('app/index.tsx').value,
+            shell: pkg.srcPath.join('shell/index.tsx').value,
+            popup: pkg.srcPath.join('popup/index.tsx').value,
+            backgroundWorker: pkg.srcPath.join('background-worker/index.ts')
+              .value,
+          },
+          {
+            additionalEntryForSelfhost: false,
+            injectGlobalErrorHandler: false,
+            emitAssetsManifest: false,
+          },
+          workerConfigs.map(config => config.name)
+        ),
+        ...workerConfigs,
+      ] as MultiRspackOptions;
+    }
+    case '@affine/server': {
+      return [
+        createRspackNodeTargetConfig(pkg, pkg.srcPath.join('index.ts').value),
+      ] as MultiRspackOptions;
+    }
+    case '@affine/reader': {
+      return [
+        createRspackNodeTargetConfig(pkg, pkg.srcPath.join('index.ts').value, {
+          outputFilename: 'index.js',
+          decoratorVersion: '2022-03',
+          libraryType: 'module',
+          bundleAllDependencies: true,
+          forceExternal: ['yjs'],
+        }),
+      ] as MultiRspackOptions;
+    }
+  }
+
+  throw new Error(`Unsupported package: ${pkg.name}`);
+}
+
+export class BundleCommand extends PackageCommand {
+  static override paths = [['bundle'], ['pack'], ['bun']];
+
+  // bundle is not able to run with deps
+  override _deps = false;
+  override waitDeps = false;
+
+  dev = Option.Boolean('--dev,-d', false, {
+    description: 'Run in Development mode',
+  });
+
+  async execute() {
+    const pkg = this.workspace.getPackage(this.package);
+
+    if (this.dev) {
+      await BundleCommand.dev(pkg);
+    } else {
+      await BundleCommand.build(pkg);
+    }
+  }
+
+  static async build(pkg: Package) {
+    return BundleCommand.buildWithRspack(pkg);
+  }
+
+  static async dev(
+    pkg: Package,
+    devServerConfig?: RspackDevServerConfiguration
+  ) {
+    return BundleCommand.devWithRspack(pkg, devServerConfig);
+  }
+
+  static async buildWithRspack(pkg: Package) {
+    process.env.NODE_ENV = 'production';
+    assertRspackSupportedPackage(pkg);
+
+    const logger = new Logger('bundle');
+    logger.info(`Packing package ${pkg.name} with rspack...`);
+    logger.info('Cleaning old output...');
+    rmSync(pkg.distPath.value, { recursive: true, force: true });
+
+    const config = getRspackBundleConfigs(pkg);
+    config.parallelism = cpus().length;
+
+    const compiler = rspack(config);
+    if (!compiler) {
+      throw new Error('Failed to create rspack compiler');
+    }
+
+    try {
+      const stats = await new Promise<any>((resolve, reject) => {
+        compiler.run((error, stats) => {
+          if (error) {
+            reject(error);
+            return;
+          }
+          if (!stats) {
+            reject(new Error('Failed to get rspack stats'));
+            return;
+          }
+          resolve(stats);
+        });
+      });
+      if (stats.hasErrors()) {
+        console.error(stats.toString('errors-only'));
+        process.exit(1);
+        return;
+      }
+      console.log(stats.toString('minimal'));
+      await uploadAssetsForPackage(pkg, logger);
+    } catch (error) {
+      console.error(error);
+      process.exit(1);
+      return;
+    }
+  }
+
+  static async devWithRspack(
+    pkg: Package,
+    devServerConfig?: RspackDevServerConfiguration
+  ) {
+    process.env.NODE_ENV = 'development';
+    assertRspackSupportedPackage(pkg);
+
+    const logger = new Logger('bundle');
+    logger.info(`Starting rspack dev server for ${pkg.name}...`);
+
+    const config = getRspackBundleConfigs(pkg);
+    config.parallelism = cpus().length;
+
+    const compiler = rspack(config);
+    if (!compiler) {
+      throw new Error('Failed to create rspack 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/cert.ts

@@ -0,0 +1,124 @@
+import { type Path, ProjectRoot } from '@affine-tools/utils/path';
+
+import { Command, Option } from './command';
+
+const CERT_DIR = ProjectRoot.join('.docker/dev/certs');
+const CA_DIR = CERT_DIR.join('ca');
+const TEMPLATES_DIR = ProjectRoot.join('.docker/dev/templates');
+const NGINX_CONF_DIR = ProjectRoot.join('.docker/dev/nginx/conf.d');
+const CA_PEM_PATH = CA_DIR.join('affine-self-signed.pem');
+const CA_KEY_PATH = CA_DIR.join('affine-self-signed.key');
+
+const CA_ORG = 'AFFiNE Dev CA Self Signed Org';
+const CA_NAME = 'AFFiNE Dev CA Self Signed CN';
+
+export class CertCommand extends Command {
+  static override paths = [['cert']];
+
+  install = Option.Boolean('--install', {
+    description: 'Install the CA',
+  });
+
+  domain = Option.String('--domain', {
+    description:
+      'Generate certificates for given domain. e.g. "affine.localhost"',
+  });
+
+  uninstall = Option.Boolean('--uninstall', {
+    description: 'Uninstall the CA',
+  });
+
+  async execute() {
+    if (this.install) {
+      this.installCa();
+    } else if (this.uninstall) {
+      this.uninstallCa(CA_PEM_PATH);
+    } else if (this.domain) {
+      this.createCert(this.domain);
+    }
+  }
+
+  private createCert(domain: string) {
+    if (!this.checkInstalled(CA_PEM_PATH)) {
+      this.logger.error(
+        'CA not installed. Please run `yarn affine cert --install` first.'
+      );
+      process.exit(1);
+    }
+
+    const domainDir = CERT_DIR.join(domain);
+    domainDir.rm({ recursive: true });
+    domainDir.mkdir();
+    NGINX_CONF_DIR.mkdir();
+
+    const keyPath = domainDir.join('key');
+    const crtPath = domainDir.join('crt');
+    const csrPath = domainDir.join('csr');
+    const confPath = domainDir.join('conf');
+    const nginxConfPath = NGINX_CONF_DIR.join(`${domain}.conf`);
+
+    const configTemp = TEMPLATES_DIR.join('openssl.conf')
+      .readAsFile()
+      .toString('utf-8');
+    const config = configTemp.replaceAll('DEV_DOMAIN', domain);
+
+    confPath.writeFile(config);
+    this.exec(`openssl genrsa -out ${keyPath} 2048`);
+    this.exec(
+      `openssl req -new -key ${keyPath} -out ${csrPath} -config ${confPath} -subj "/C=/ST=/O=/localityName=/commonName=${domain}/organizationalUnitName=/emailAddress=${domain}@affine.pro/"`
+    );
+    this.exec(
+      `openssl x509 -req -days 1024 -in ${csrPath} -CA ${CA_PEM_PATH} -CAkey ${CA_KEY_PATH} -CAcreateserial -out ${crtPath} -extensions v3_req -extfile ${confPath}`
+    );
+
+    const nginxConfTemp = TEMPLATES_DIR.join('nginx.conf')
+      .readAsFile()
+      .toString('utf-8');
+    const nginxConf = nginxConfTemp.replaceAll('DEV_DOMAIN', domain);
+    nginxConfPath.writeFile(nginxConf);
+  }
+
+  private installCa() {
+    if (this.checkInstalled(CA_PEM_PATH)) {
+      return;
+    }
+
+    // remove old ca
+    CA_PEM_PATH.rm();
+    CA_KEY_PATH.rm();
+    CA_DIR.mkdir();
+
+    this.exec(
+      `openssl req -new -newkey rsa:2048 -days 1024 -nodes -x509 -subj "/C=/ST=/O=${CA_ORG}/localityName=/commonName=${CA_NAME}/organizationalUnitName=Developers/emailAddress=dev@affine.pro/" -keyout ${CA_KEY_PATH} -out ${CA_PEM_PATH}`
+    );
+    this.trustCa(CA_PEM_PATH);
+  }
+
+  private trustCa(pem: Path) {
+    this.logger.info(`Trusting AFFiNE Dev Self Signed CA`);
+    this.exec(
+      `sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain ${pem}`
+    );
+  }
+
+  private uninstallCa(pem: Path) {
+    if (!this.checkInstalled(pem)) {
+      this.logger.error('CA not installed');
+      return;
+    }
+
+    this.exec(
+      `sudo security delete-certificate -c ${CA_NAME} /Library/Keychains/System.keychain`
+    );
+  }
+
+  private checkInstalled(pem: Path) {
+    if (!pem.exists()) {
+      return false;
+    }
+
+    const ret = this.exec(`security verify-cert -c ${pem}`);
+
+    return ret.includes('...certificate verification successful.');
+  }
+}

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');
+  }
+}

tools/cli/src/command.ts

@@ -0,0 +1,142 @@
+import { AliasToPackage } from '@affine-tools/utils/distribution';
+import { Logger } from '@affine-tools/utils/logger';
+import { exec, execAsync, spawn } from '@affine-tools/utils/process';
+import { type PackageName, Workspace } from '@affine-tools/utils/workspace';
+import { Command as BaseCommand, Option } from 'clipanion';
+import inquirer from 'inquirer';
+import * as t from 'typanion';
+
+import type { CliContext } from './context';
+
+export abstract class Command extends BaseCommand<CliContext> {
+  // @ts-expect-error hack: Get the command name
+  cmd = this.constructor.paths[0][0];
+
+  get logger() {
+    return new Logger(this.cmd);
+  }
+
+  get workspace() {
+    return this.context.workspace;
+  }
+
+  set workspace(workspace: Workspace) {
+    this.context.workspace = workspace;
+  }
+
+  exec = exec.bind(null, this.cmd);
+  execAsync = execAsync.bind(null, this.cmd);
+  spawn = spawn.bind(null, this.cmd);
+}
+
+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 {
+    const name =
+      AliasToPackage.get(this.packageNameOrAlias as any) ??
+      (this.packageNameOrAlias as PackageName);
+
+    // check
+    this.workspace.getPackage(name);
+
+    return name;
+  }
+
+  protected _deps = Option.Boolean('--deps', false, {
+    description:
+      'Execute the same command in workspace dependencies, if defined.',
+  });
+
+  get deps() {
+    return this._deps;
+  }
+
+  waitDeps = Option.Boolean('--wait-deps', false, {
+    description: 'Wait for dependencies to be ready before running the command',
+  });
+}
+
+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 abstract class PackageSelectorCommand extends Command {
+  protected availablePackages = Workspace.PackageNames;
+
+  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', {
+    validator: this.packageNameValidator,
+    description: 'The package name or alias to be run with',
+  });
+
+  async getPackage(): Promise<PackageName> {
+    let name = this.packageNameOrAlias
+      ? (AliasToPackage.get(this.packageNameOrAlias as any) ??
+        this.packageNameOrAlias)
+      : undefined;
+
+    if (!name) {
+      const answer = await inquirer.prompt([
+        {
+          type: 'list',
+          name: 'package',
+          message: 'Which package do you want to dev?',
+          choices: this.availablePackages.map(name => ({
+            name,
+            value: name,
+          })),
+          pageSize: 10,
+          default: '@affine/web',
+        },
+      ]);
+
+      name = answer.package as PackageName;
+    }
+
+    // check
+    this.workspace.getPackage(name as PackageName);
+
+    return name as PackageName;
+  }
+}
+
+export { Option };

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;
+}

tools/cli/src/dev.ts

@@ -0,0 +1,35 @@
+import type { PackageName } from '@affine-tools/utils/workspace';
+
+import { Option, PackageSelectorCommand } from './command';
+
+export class DevCommand extends PackageSelectorCommand {
+  static override paths = [['dev'], ['d']];
+
+  protected override availablePackages: PackageName[] = [
+    '@affine/web',
+    '@affine/server',
+    '@affine/electron',
+    '@affine/electron-renderer',
+    '@affine/mobile',
+    '@affine/ios',
+    '@affine/android',
+    '@affine/admin',
+  ];
+
+  protected deps = Option.Boolean('--deps', {
+    description: 'Run dev with dependencies',
+  });
+
+  async execute() {
+    const name = await this.getPackage();
+    const args = [];
+
+    if (this.deps) {
+      args.push('--deps');
+    }
+
+    args.push(name, 'dev');
+
+    await this.cli.run(args);
+  }
+}

tools/cli/src/init.ts

@@ -0,0 +1,134 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+import type { Path } from '@affine-tools/utils/path';
+import {
+  type Package,
+  Workspace,
+  yarnList,
+} from '@affine-tools/utils/workspace';
+import { applyEdits, modify } from 'jsonc-parser';
+import { format, type FormatConfig } from 'oxfmt';
+
+import { Command } from './command';
+
+export class InitCommand 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() {
+    this.workspace = new Workspace(yarnList());
+    const filesToGenerate: [Path, (prev: string) => string][] = [
+      [this.workspace.join('tsconfig.json'), this.genProjectTsConfig],
+      [
+        this.workspace
+          .getPackage('@affine-tools/utils')
+          .join('src/workspace.gen.ts'),
+        this.genWorkspaceInfo,
+      ],
+      [this.workspace.join('.oxlintrc.json'), this.genOxlintConfig],
+      ...this.workspace.packages
+        .filter(p => p.isTsProject)
+        .map(
+          p =>
+            [
+              p.join('tsconfig.json'),
+              this.genPackageTsConfig.bind(this, p),
+            ] satisfies [Path, (prev: string) => string]
+        ),
+    ];
+
+    for (const [path, content] of filesToGenerate) {
+      this.logger.info(`Generating: ${path}`);
+      const previous = readFileSync(path.value, 'utf-8');
+      const file = await this.format(content(previous), path.value);
+      writeFileSync(path.value, file);
+    }
+  }
+
+  async format(content: string, fileName: string) {
+    const config = JSON.parse(
+      readFileSync(this.workspace.join('.oxfmtrc.json').value, 'utf-8')
+    ) as FormatConfig;
+    const result = await format(fileName, content, config);
+    if (result.errors.length) {
+      throw new Error(
+        result.errors.map(error => error.codeframe ?? error.message).join('\n')
+      );
+    }
+    return result.code;
+  }
+
+  genOxlintConfig = () => {
+    const json = JSON.parse(
+      readFileSync(this.workspace.join('.oxlintrc.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);
+  };
+
+  genWorkspaceInfo = () => {
+    const list = yarnList();
+
+    const names = list.map(p => p.name);
+
+    const content = [
+      '// Auto generated content',
+      '// DO NOT MODIFY THIS FILE MANUALLY',
+      `export const PackageList = ${JSON.stringify(list, null, 2)}`,
+      '',
+      `export type PackageName = ${names.map(n => `'${n}'`).join(' | ')}`,
+    ];
+
+    return content.join('\n');
+  };
+
+  genProjectTsConfig = (prev: string) => {
+    return applyEdits(
+      prev,
+      modify(
+        prev,
+        ['references'],
+        this.workspace.packages
+          .filter(p => p.isTsProject)
+          .map(p => ({ path: p.path.relativePath })),
+        {}
+      )
+    );
+  };
+
+  genPackageTsConfig = (pkg: Package, prev: string) => {
+    // TODO(@forehalo):
+    //   currently electron-api => electron => nbstore => electron-api
+    //   this is a circular dependency, we need to fix it
+    //   basically, the electron app don't need to use nbstore for exposing js bridge apis
+    if (pkg.name === '@affine/electron-api') {
+      return prev;
+    }
+
+    return applyEdits(
+      prev,
+      modify(
+        prev,
+        ['references'],
+        pkg.deps
+          .filter(p => p.isTsProject)
+          .map(d => ({ path: pkg.path.relative(d.path.value) })),
+        {}
+      )
+    );
+  };
+}

tools/cli/src/postcss/queuedash-scope.ts

@@ -0,0 +1,111 @@
+import type { AtRule, Container, Node, PluginCreator, Rule } from 'postcss';
+import selectorParser from 'postcss-selector-parser';
+
+export interface QueuedashScopeOptions {
+  scopeClass?: string;
+}
+
+function normalizeFilePath(filePath: string) {
+  return filePath.replaceAll('\\', '/').split('?')[0];
+}
+
+function isInKeyframes(rule: Rule) {
+  let parent: Node | undefined = rule.parent;
+  while (parent) {
+    if (parent.type === 'atrule') {
+      const name = (parent as AtRule).name?.toLowerCase();
+      if (name && name.endsWith('keyframes')) {
+        return true;
+      }
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+
+const DEFAULT_SCOPE_CLASS = 'affine-queuedash';
+
+export const queuedashScopePostcssPlugin: PluginCreator<
+  QueuedashScopeOptions
+> = (options = {}) => {
+  const scopeClass = options.scopeClass ?? DEFAULT_SCOPE_CLASS;
+  const scopeSelector = `:where(.${scopeClass})`;
+
+  const scopeAst = selectorParser().astSync(scopeSelector);
+  const scopeNodes = scopeAst.nodes[0]?.nodes;
+
+  if (!scopeNodes) {
+    throw new Error(
+      `[queuedashScopePostcssPlugin] Failed to parse scope selector: ${scopeSelector}`
+    );
+  }
+
+  const scopeProcessor = selectorParser(selectors => {
+    selectors.each(selector => {
+      const raw = selector.toString().trim();
+
+      if (
+        raw.startsWith(scopeSelector) ||
+        raw.startsWith(`.${scopeClass}`) ||
+        raw.startsWith(`:where(.${scopeClass})`)
+      ) {
+        return;
+      }
+
+      if (
+        raw === 'html' ||
+        raw === 'body' ||
+        raw === ':host' ||
+        raw === ':root'
+      ) {
+        selector.nodes = scopeNodes.map(node => node.clone());
+        return;
+      }
+
+      const prefixNodes = scopeNodes.map(node => node.clone());
+      const space = selectorParser.combinator({ value: ' ' });
+      selector.nodes = [...prefixNodes, space, ...selector.nodes];
+    });
+  });
+
+  return {
+    postcssPlugin: 'affine-queuedash-scope',
+    Once(root, { result }) {
+      const from =
+        root.source?.input.file ||
+        root.source?.input.from ||
+        result.opts.from ||
+        '';
+
+      const normalized = from ? normalizeFilePath(from) : '';
+      const isQueuedashVendorCss = normalized.endsWith(
+        '/@queuedash/ui/dist/styles.css'
+      );
+
+      const queuedashLayers: AtRule[] = [];
+      root.walkAtRules('layer', atRule => {
+        if (atRule.params?.trim() === 'queuedash' && atRule.nodes?.length) {
+          queuedashLayers.push(atRule);
+        }
+      });
+
+      if (!isQueuedashVendorCss && queuedashLayers.length === 0) {
+        return;
+      }
+
+      const targets: Container[] =
+        queuedashLayers.length > 0 ? queuedashLayers : [root];
+
+      targets.forEach(container => {
+        container.walkRules(rule => {
+          if (!rule.selector || isInKeyframes(rule)) {
+            return;
+          }
+          rule.selector = scopeProcessor.processSync(rule.selector);
+        });
+      });
+    },
+  };
+};
+
+queuedashScopePostcssPlugin.postcss = true;

tools/cli/src/rspack-shared/cache-group.ts

@@ -0,0 +1,100 @@
+function testPackageName(regexp: RegExp): (module: any) => boolean {
+  return (module: any) =>
+    module.nameForCondition && regexp.test(module.nameForCondition());
+}
+
+// https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
+export const productionCacheGroups = {
+  i18n: {
+    test: /frontend[\\/]i18n[\\/]/,
+    name: (module: any) => {
+      const name = module.resource.match(/[\\/]([^\\/]+)\.json$/)?.[1];
+      if (name && name !== 'en') {
+        return `i18n-langs.${name}`;
+      }
+
+      return 'i18n';
+    },
+    priority: 200,
+    enforce: true,
+  },
+  asyncVendor: {
+    test: /[\\/]node_modules[\\/]/,
+    name(module: any) {
+      const modulePath =
+        module?.nameForCondition?.() || module?.context || module?.resource;
+
+      if (!modulePath || typeof modulePath !== 'string') {
+        return 'app-async';
+      }
+
+      // monorepo linked in node_modules, so it's not a npm package
+      if (!modulePath.includes('node_modules')) {
+        return `app-async`;
+      }
+      const name = modulePath.match(
+        /[\\/]node_modules[\\/](.*?)([\\/]|$)/
+      )?.[1];
+      return `npm-async-${name}`;
+    },
+    priority: Number.MAX_SAFE_INTEGER,
+    chunks: 'async' as const,
+  },
+  blocksuite: {
+    name: `npm-blocksuite`,
+    test: testPackageName(/[\\/]node_modules[\\/](@blocksuite)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  react: {
+    name: `npm-react`,
+    test: testPackageName(
+      /[\\/]node_modules[\\/](react|react-dom|scheduler)[\\/]/
+    ),
+    priority: 200,
+    enforce: true,
+  },
+  jotai: {
+    name: `npm-jotai`,
+    test: testPackageName(/[\\/]node_modules[\\/](jotai)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  rxjs: {
+    name: `npm-rxjs`,
+    test: testPackageName(/[\\/]node_modules[\\/]rxjs[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  lodash: {
+    name: `npm-lodash`,
+    test: testPackageName(/[\\/]node_modules[\\/]lodash[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  emotion: {
+    name: `npm-emotion`,
+    test: testPackageName(/[\\/]node_modules[\\/](@emotion)[\\/]/),
+    priority: 200,
+    enforce: true,
+  },
+  vendor: {
+    name: 'vendor',
+    test: /[\\/]node_modules[\\/]/,
+    priority: 190,
+    enforce: true,
+  },
+  styles: {
+    name: 'styles',
+    test: (module: any) =>
+      module.nameForCondition &&
+      module.nameForCondition()?.endsWith('.css') &&
+      !module.type.startsWith('javascript'),
+    chunks: 'all' as const,
+    minSize: 1,
+    minChunks: 1,
+    reuseExistingChunk: true,
+    priority: 1000,
+    enforce: true,
+  },
+};

tools/cli/src/rspack-shared/error-handler.js

@@ -0,0 +1,116 @@
+(function () {
+  let errorEl = null;
+  function showGlobalErrorPage() {
+    if (errorEl) {
+      return;
+    }
+
+    errorEl = document.createElement('div');
+    errorEl.innerHTML = [
+      '<style>',
+      '.gue {display:flex;flex-direction:column;align-items:center;justify-content:center;width:380px;}',
+      '.gue img{width:380px;}',
+      '.gue div{padding:16px 40px 0 40px;text-align:center;}',
+      '.gue .p1{color:#141414;line-height:24px;font-weight:500;}',
+      '.gue .p2{color:#7A7A7A;line-height:22px;}',
+      '</style>',
+      '<div class="gue">',
+      '<img src="https://cdn.affine.pro/error.png" />',
+      '<div>',
+      '<p class="p1">Unsupported Environment</p>',
+      '<p class="p2">',
+      'It looks like AFFiNE cannot run in this environment.',
+      "Please ensure you are using a supported browser or update your device's operating system to the latest version.",
+      'If the issue persists, visit our <a href="https://github.com/toeverything/AFFiNE/issues">support page</a> for further assistance.',
+      '</p>',
+      '</div>',
+      '</div>',
+    ].join('');
+    errorEl.setAttribute(
+      'style',
+      'position:absolute;top:0;left:0;height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;background:white;z-index:999;'
+    );
+    document.body.append(errorEl);
+  }
+
+  /**
+   * @param event {PromiseRejectionEvent|ErrorEvent}
+   */
+  function handler(event) {
+    let error;
+
+    if ('error' in event) {
+      error =
+        event.error ||
+        (event.message === 'Script error.'
+          ? new SyntaxError(event.message)
+          : new Error(event.message));
+    } else {
+      error = event.reason;
+    }
+
+    console.error('unhandled unrecoverable error', error);
+
+    const shouldCache =
+      // syntax error
+      error && error instanceof SyntaxError;
+
+    if (!shouldCache) {
+      return;
+    }
+
+    event.stopImmediatePropagation();
+    showGlobalErrorPage();
+  }
+
+  function registerGlobalErrorHandler() {
+    if (typeof document !== 'undefined') {
+      globalThis.addEventListener('unhandledrejection', handler);
+      globalThis.addEventListener('error', handler);
+
+      return function () {
+        globalThis.removeEventListener('unhandledrejection', handler);
+        globalThis.removeEventListener('error', handler);
+      };
+    }
+
+    return null;
+  }
+
+  function unregisterRegisterGlobalErrorHandler(fn) {
+    if (typeof fn === 'function') {
+      const app = document.getElementById('app');
+      if (app) {
+        let ob = new MutationObserver(function () {
+          fn();
+          ob.disconnect();
+          ob = null;
+        });
+
+        ob.observe(app, { childList: true });
+      }
+    }
+  }
+
+  function ensureBasicEnvironment() {
+    const globals = [
+      'Promise',
+      'Map',
+      'fetch',
+      'customElements',
+      'MutationObserver',
+    ];
+
+    // oxlint-disable-next-line typescript/prefer-for-of
+    for (let i = 0; i < globals.length; i++) {
+      if (!(globals[i] in globalThis)) {
+        showGlobalErrorPage();
+        return;
+      }
+    }
+  }
+
+  ensureBasicEnvironment();
+  const goodtogo = registerGlobalErrorHandler();
+  unregisterRegisterGlobalErrorHandler(goodtogo);
+})();

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

@@ -0,0 +1,297 @@
+import { execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+
+import { Path, ProjectRoot } from '@affine-tools/utils/path';
+import { Repository } from '@napi-rs/simple-git';
+import { HtmlRspackPlugin, type HtmlRspackPluginOptions } from '@rspack/core';
+import { once } from 'lodash-es';
+
+type HtmlRspackPluginInstance = InstanceType<typeof HtmlRspackPlugin>;
+
+type PluginLike = {
+  apply: (compiler: CompilerLike) => void;
+};
+
+type CompilerLike = {
+  webpack?: {
+    sources?: {
+      RawSource?: new (source: string) => unknown;
+    };
+  };
+  hooks: {
+    compilation: {
+      tap: (name: string, callback: (compilation: any) => void) => void;
+    };
+  };
+};
+
+function createRawSource(compiler: CompilerLike, source: string) {
+  const RawSource = compiler.webpack?.sources?.RawSource;
+  if (!RawSource) {
+    throw new Error(
+      'compiler.webpack.sources.RawSource is required for html plugin assets emission'
+    );
+  }
+
+  return new RawSource(source);
+}
+
+export const getPublicPath = (BUILD_CONFIG: BUILD_CONFIG_TYPE) => {
+  const { BUILD_TYPE } = process.env;
+  if (typeof process.env.PUBLIC_PATH === 'string') {
+    return process.env.PUBLIC_PATH;
+  }
+
+  if (
+    BUILD_CONFIG.debug ||
+    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.value);
+  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);
+
+export interface CreateHTMLPluginConfig {
+  filename?: string;
+  template?: string;
+  copySharedPublicAssets?: boolean;
+  additionalEntryForSelfhost?: boolean;
+  selfhostPublicPath?: string;
+  injectGlobalErrorHandler?: boolean;
+  emitAssetsManifest?: boolean;
+}
+
+function getHTMLPluginOptions(BUILD_CONFIG: BUILD_CONFIG_TYPE) {
+  const publicPath = getPublicPath(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',
+    minify: false,
+    templateParameters: templateParams,
+    chunks: ['app'],
+    scriptLoading: 'blocking',
+  } satisfies HtmlRspackPluginOptions;
+}
+
+const AssetsManifestPlugin = {
+  apply(compiler: CompilerLike) {
+    compiler.hooks.compilation.tap('assets-manifest-plugin', compilation => {
+      HtmlRspackPlugin.getCompilationHooks(
+        compilation
+      ).beforeAssetTagGeneration.tap('assets-manifest-plugin', arg => {
+        if (!compilation.getAsset('assets-manifest.json')) {
+          compilation.emitAsset(
+            `assets-manifest.json`,
+            createRawSource(
+              compiler,
+              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: gitShortHash(),
+                  description: DESCRIPTION,
+                },
+                null,
+                2
+              )
+            ),
+            {
+              immutable: false,
+            }
+          );
+        }
+
+        return arg;
+      });
+    });
+  },
+};
+
+const GlobalErrorHandlerPlugin = {
+  apply(compiler: CompilerLike) {
+    const globalErrorHandler = [
+      'js/global-error-handler.js',
+      readFileSync(currentDir.join('./error-handler.js').toString(), 'utf-8'),
+    ];
+
+    compiler.hooks.compilation.tap(
+      'global-error-handler-plugin',
+      compilation => {
+        HtmlRspackPlugin.getCompilationHooks(
+          compilation
+        ).beforeAssetTagGeneration.tap('global-error-handler-plugin', arg => {
+          if (!compilation.getAsset(globalErrorHandler[0])) {
+            compilation.emitAsset(
+              globalErrorHandler[0],
+              createRawSource(compiler, globalErrorHandler[1])
+            );
+            arg.assets.js.unshift(
+              arg.assets.publicPath + globalErrorHandler[0]
+            );
+          }
+
+          return arg;
+        });
+      }
+    );
+  },
+};
+
+const CorsPlugin = {
+  apply(compiler: CompilerLike) {
+    compiler.hooks.compilation.tap('html-js-cors-plugin', compilation => {
+      HtmlRspackPlugin.getCompilationHooks(compilation).alterAssetTags.tap(
+        'html-js-cors-plugin',
+        options => {
+          if (options.publicPath !== '/') {
+            options.assetTags.scripts.forEach(script => {
+              script.attributes.crossorigin = true;
+            });
+            options.assetTags.styles.forEach(style => {
+              style.attributes.crossorigin = true;
+            });
+          }
+          return options;
+        }
+      );
+    });
+  },
+};
+
+export function createHTMLPlugins(
+  BUILD_CONFIG: BUILD_CONFIG_TYPE,
+  config: CreateHTMLPluginConfig
+): (HtmlRspackPluginInstance | PluginLike)[] {
+  const publicPath = getPublicPath(BUILD_CONFIG);
+  const htmlPluginOptions = {
+    ...getHTMLPluginOptions(BUILD_CONFIG),
+    ...(config.template ? { template: config.template } : {}),
+  };
+  const selfhostPublicPath = config.selfhostPublicPath ?? '/';
+
+  const plugins: (HtmlRspackPluginInstance | PluginLike)[] = [];
+  plugins.push(
+    new HtmlRspackPlugin({
+      ...htmlPluginOptions,
+      chunks: ['index'],
+      filename: config.filename,
+      publicPath,
+      meta: {
+        'env:publicPath': publicPath,
+      },
+    })
+  );
+
+  if (BUILD_CONFIG.isElectron) {
+    plugins.push(
+      new HtmlRspackPlugin({
+        ...htmlPluginOptions,
+        chunks: ['shell'],
+        filename: 'shell.html',
+        publicPath,
+        meta: {
+          'env:publicPath': publicPath,
+        },
+      }),
+      new HtmlRspackPlugin({
+        ...htmlPluginOptions,
+        filename: 'popup.html',
+        chunks: ['popup'],
+        publicPath,
+        meta: {
+          'env:publicPath': publicPath,
+        },
+      }),
+      new HtmlRspackPlugin({
+        ...htmlPluginOptions,
+        filename: 'background-worker.html',
+        chunks: ['backgroundWorker'],
+        publicPath,
+        meta: {
+          'env:publicPath': publicPath,
+        },
+      })
+    );
+  }
+
+  if (!BUILD_CONFIG.isElectron) {
+    plugins.push(CorsPlugin);
+  }
+
+  if (config.emitAssetsManifest) {
+    plugins.push(AssetsManifestPlugin);
+  }
+
+  if (config.injectGlobalErrorHandler) {
+    plugins.push(GlobalErrorHandlerPlugin);
+  }
+
+  if (config.additionalEntryForSelfhost) {
+    plugins.push(
+      new HtmlRspackPlugin({
+        ...htmlPluginOptions,
+        chunks: ['index'],
+        publicPath: selfhostPublicPath,
+        meta: {
+          'env:isSelfHosted': 'true',
+          'env:publicPath': selfhostPublicPath,
+        },
+        filename: 'selfhost.html',
+        templateParameters: {
+          ...htmlPluginOptions.templateParameters,
+          PRECONNECT: '',
+        },
+      })
+    );
+  }
+
+  return plugins;
+}

tools/cli/src/rspack-shared/node-loader.js

@@ -0,0 +1,18 @@
+import { parse } from 'node:path';
+
+export const raw = true;
+/**
+ * @type {import('webpack').LoaderDefinitionFunction}
+ */
+export default function loader(content) {
+  const name = parse(this.resourcePath).base;
+  this.emitFile(name, content);
+
+  return `
+    import { createRequire } from 'node:module'
+
+    const require = createRequire(import.meta.url)
+    const binding = require('./${name}')
+    export default binding
+  `;
+}

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

@@ -0,0 +1,141 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join, relative, sep } from 'node:path';
+
+import { createS3CompatClient } from '@affine/s3-compat';
+import { lookup } from 'mime-types';
+
+export const R2_BUCKET =
+  process.env.R2_BUCKET ??
+  (process.env.BUILD_TYPE === 'canary' ? 'assets-dev' : 'assets-prod');
+
+const S3_UPLOAD_PACKAGE_NAMES = new Set([
+  '@affine/web',
+  '@affine/mobile',
+  '@affine/admin',
+]);
+const MAX_UPLOAD_RETRIES = 3;
+const UPLOAD_RETRY_BASE_DELAY_MS = 500;
+
+function createR2Client() {
+  const { R2_ACCOUNT_ID, R2_ACCESS_KEY_ID, R2_SECRET_ACCESS_KEY } = process.env;
+  if (!R2_ACCOUNT_ID || !R2_ACCESS_KEY_ID || !R2_SECRET_ACCESS_KEY) {
+    throw new Error('Missing R2 credentials for uploading release assets');
+  }
+
+  return createS3CompatClient(
+    {
+      region: 'auto',
+      bucket: R2_BUCKET,
+      forcePathStyle: true,
+      endpoint: `https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+    },
+    {
+      accessKeyId: R2_ACCESS_KEY_ID,
+      secretAccessKey: R2_SECRET_ACCESS_KEY,
+    }
+  );
+}
+
+async function collectFiles(dir: string): Promise<string[]> {
+  const dirs = [dir];
+  const files: string[] = [];
+
+  while (dirs.length > 0) {
+    const current = dirs.pop()!;
+    const entries = await readdir(current, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join(current, entry.name);
+      if (entry.isDirectory()) {
+        dirs.push(fullPath);
+      } else if (entry.isFile()) {
+        files.push(fullPath);
+      }
+    }
+  }
+
+  return files;
+}
+
+function toAssetKey(outputPath: string, filePath: string): string {
+  return relative(outputPath, filePath).split(sep).join('/');
+}
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+async function putObjectWithRetry(
+  s3: ReturnType<typeof createR2Client>,
+  asset: string,
+  assetSource: Buffer,
+  contentType: string | false | undefined
+) {
+  let retries = 0;
+  while (true) {
+    try {
+      await s3.putObject(asset, assetSource, {
+        contentType: contentType || undefined,
+        contentLength: assetSource.byteLength,
+      });
+      return;
+    } catch (error) {
+      if (retries >= MAX_UPLOAD_RETRIES) {
+        throw error;
+      }
+      retries += 1;
+      const delay = UPLOAD_RETRY_BASE_DELAY_MS * 2 ** (retries - 1);
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      console.warn(
+        `[s3-upload] Retry ${retries}/${MAX_UPLOAD_RETRIES} for ${asset}: ${errorMessage}`
+      );
+      await sleep(delay);
+    }
+  }
+}
+
+async function runInParallel<T>(
+  values: T[],
+  worker: (value: T) => Promise<void>,
+  concurrency = 16
+) {
+  if (values.length === 0) {
+    return;
+  }
+  let nextIndex = 0;
+  const workers = Array.from(
+    { length: Math.min(concurrency, values.length) },
+    async () => {
+      while (true) {
+        const index = nextIndex++;
+        if (index >= values.length) {
+          return;
+        }
+        await worker(values[index]!);
+      }
+    }
+  );
+
+  await Promise.all(workers);
+}
+
+export function shouldUploadReleaseAssets(pkgName: string): boolean {
+  return S3_UPLOAD_PACKAGE_NAMES.has(pkgName);
+}
+
+export async function uploadDistAssetsToS3(outputPath: string) {
+  const allFiles = await collectFiles(outputPath);
+  const uploadFiles = allFiles.filter(file => !file.endsWith('.html'));
+
+  if (uploadFiles.length === 0) {
+    return;
+  }
+
+  const s3 = createR2Client();
+  await runInParallel(uploadFiles, async filePath => {
+    const asset = toAssetKey(outputPath, filePath);
+    const assetSource = await readFile(filePath);
+    const contentType = lookup(asset);
+    await putObjectWithRetry(s3, asset, assetSource, contentType);
+  });
+}

tools/cli/src/rspack-shared/template.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=<%= VIEWPORT_FIT %>"
+    />
+
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+
+    <title>AFFiNE</title>
+    <meta name="theme-color" content="#fafafa" />
+    <%= PRECONNECT %>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" sizes="192x192" href="/favicon-192.png" />
+    <link rel="shortcut icon" href="/favicon.ico?v=2" />
+    <meta name="emotion-insertion-point" content="" />
+    <meta property="description" content="<%= DESCRIPTION %>" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://app.affine.pro/" />
+    <meta
+      name="twitter:title"
+      content="AFFiNE: There can be more than Notion and Miro."
+    />
+    <meta name="twitter:description" content="<%= DESCRIPTION %>" />
+    <meta name="twitter:site" content="@AffineOfficial" />
+    <meta name="twitter:image" content="https://affine.pro/og.jpeg" />
+    <meta
+      property="og:title"
+      content="AFFiNE: There can be more than Notion and Miro."
+    />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="<%= DESCRIPTION %>" />
+    <meta property="og:url" content="https://app.affine.pro/" />
+    <meta property="og:image" content="https://affine.pro/og.jpeg" />
+  </head>
+
+  <body>
+    <div id="app" data-version="<%= GIT_SHORT_SHA %>"></div>
+  </body>
+</html>

tools/cli/src/rspack/index.ts

@@ -0,0 +1,696 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import { getBuildConfig } from '@affine-tools/utils/build-config';
+import { Path, ProjectRoot } from '@affine-tools/utils/path';
+import { Package } from '@affine-tools/utils/workspace';
+import rspack, {
+  type Configuration as RspackConfiguration,
+} from '@rspack/core';
+import type { sentryWebpackPlugin as SentryWebpackPluginFactory } from '@sentry/webpack-plugin';
+import { VanillaExtractPlugin } from '@vanilla-extract/webpack-plugin';
+import cssnano from 'cssnano';
+import { compact, merge } from 'lodash-es';
+
+import { queuedashScopePostcssPlugin } from '../postcss/queuedash-scope.js';
+import { productionCacheGroups } from '../rspack-shared/cache-group.js';
+import {
+  type CreateHTMLPluginConfig,
+  createHTMLPlugins,
+} from '../rspack-shared/html-plugin.js';
+
+const require = createRequire(import.meta.url);
+
+const IN_CI = !!process.env.CI;
+const hasSentryBuildEnvs = () =>
+  !!(
+    process.env.SENTRY_AUTH_TOKEN &&
+    process.env.SENTRY_ORG &&
+    process.env.SENTRY_PROJECT
+  );
+
+function createSentryPlugin() {
+  if (!hasSentryBuildEnvs()) {
+    return null;
+  }
+
+  try {
+    const { sentryWebpackPlugin } = require('@sentry/webpack-plugin') as {
+      sentryWebpackPlugin: typeof SentryWebpackPluginFactory;
+    };
+
+    return sentryWebpackPlugin({
+      org: process.env.SENTRY_ORG!,
+      project: process.env.SENTRY_PROJECT!,
+      authToken: process.env.SENTRY_AUTH_TOKEN!,
+    });
+  } catch (error) {
+    const reason =
+      error instanceof Error ? error.message : 'unknown load error';
+    throw new Error(
+      `Failed to load @sentry/webpack-plugin while SENTRY_* envs are set: ${reason}`
+    );
+  }
+}
+
+const availableChannels = ['canary', 'beta', 'stable', 'internal'];
+function getBuildConfigFromEnv(pkg: Package) {
+  const channel = process.env.BUILD_TYPE ?? 'canary';
+  const dev = process.env.NODE_ENV === 'development';
+  if (!availableChannels.includes(channel)) {
+    throw new Error(
+      `BUILD_TYPE must be one of ${availableChannels.join(', ')}, received [${channel}]`
+    );
+  }
+
+  return getBuildConfig(pkg, {
+    // @ts-expect-error checked
+    channel,
+    mode: dev ? 'development' : 'production',
+  });
+}
+
+export function createHTMLTargetConfig(
+  pkg: Package,
+  entry: string | Record<string, string>,
+  htmlConfig: Partial<CreateHTMLPluginConfig> = {},
+  deps?: string[]
+): RspackConfiguration {
+  entry = typeof entry === 'string' ? { index: entry } : entry;
+  const tailwindConfigPath = pkg.join('tailwind.config.js');
+  const hasTailwind = tailwindConfigPath.exists();
+  const tailwindPlugin = tailwindConfigPath.exists()
+    ? ['@tailwindcss/postcss', require(tailwindConfigPath.value)]
+    : ['@tailwindcss/postcss'];
+
+  htmlConfig = merge(
+    {},
+    {
+      filename: 'index.html',
+      additionalEntryForSelfhost: true,
+      copySharedPublicAssets: true,
+      injectGlobalErrorHandler: true,
+      emitAssetsManifest: true,
+    },
+    htmlConfig
+  );
+
+  const buildConfig = getBuildConfigFromEnv(pkg);
+  const codeBlockPreviewBackendFile =
+    buildConfig.distribution === 'desktop'
+      ? 'platform-backend.desktop.ts'
+      : buildConfig.distribution === 'ios' ||
+          buildConfig.distribution === 'android'
+        ? 'platform-backend.mobile.ts'
+        : 'platform-backend.ts';
+  const codeBlockPreviewBackendAlias = ProjectRoot.join(
+    'packages',
+    'frontend',
+    'core',
+    'src',
+    'modules',
+    'code-block-preview-renderer',
+    codeBlockPreviewBackendFile
+  ).value;
+
+  console.log(
+    `Building [${pkg.name}] for [${buildConfig.appBuildType}] channel in [${buildConfig.debug ? 'development' : 'production'}] mode.`
+  );
+  console.log(
+    `Entry points: ${Object.entries(entry)
+      .map(([name, path]) => `${name}: ${path}`)
+      .join(', ')}`
+  );
+  console.log(`Output path: ${pkg.distPath.value}`);
+  console.log(`Config: ${JSON.stringify(buildConfig, null, 2)}`);
+
+  const config: RspackConfiguration = {
+    //#region basic bundler config
+    name: entry['index'],
+    dependencies: deps,
+    context: ProjectRoot.value,
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    entry,
+    output: {
+      environment: { module: true, dynamicImport: true },
+      filename: buildConfig.debug
+        ? 'js/[name].js'
+        : 'js/[name].[contenthash:8].js',
+      assetModuleFilename: buildConfig.debug
+        ? '[name].[contenthash:8][ext]'
+        : 'assets/[name].[contenthash:8][ext][query]',
+      path: pkg.distPath.value,
+      clean: false,
+      globalObject: 'globalThis',
+      // NOTE: always keep it '/'
+      publicPath: '/',
+    },
+    target: ['web', 'es2022'],
+    mode: buildConfig.debug ? 'development' : 'production',
+    devtool: buildConfig.debug ? 'cheap-module-source-map' : 'source-map',
+    resolve: {
+      symlinks: true,
+      extensionAlias: {
+        '.js': ['.js', '.tsx', '.ts'],
+        '.mjs': ['.mjs', '.mts'],
+      },
+      extensions: ['.js', '.ts', '.tsx'],
+      alias: {
+        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,
+        '@affine/core/modules/code-block-preview-renderer/platform-backend':
+          codeBlockPreviewBackendAlias,
+      },
+    },
+    //#endregion
+
+    //#region module config
+    module: {
+      parser: {
+        javascript: {
+          // Do not mock Node.js globals
+          node: false,
+          requireJs: false,
+          import: true,
+          // Treat as missing export as error
+          strictExportPresence: true,
+        },
+      },
+      //#region rules
+      rules: [
+        { test: /\.m?js?$/, resolve: { fullySpecified: false } },
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          include: /@blocksuite/,
+          use: ['source-map-loader'],
+        },
+        {
+          oneOf: [
+            {
+              test: /\.ts$/,
+              exclude: /node_modules/,
+              loader: 'swc-loader',
+              options: {
+                // https://swc.rs/docs/configuring-swc/
+                jsc: {
+                  preserveAllComments: true,
+                  parser: {
+                    syntax: 'typescript',
+                    dynamicImport: true,
+                    topLevelAwait: false,
+                    tsx: false,
+                    decorators: true,
+                  },
+                  target: 'es2022',
+                  externalHelpers: false,
+                  transform: {
+                    useDefineForClassFields: false,
+                    decoratorVersion: '2022-03',
+                  },
+                },
+                sourceMaps: true,
+                inlineSourcesContent: true,
+              },
+            },
+            {
+              test: /\.tsx$/,
+              exclude: /node_modules/,
+              loader: 'swc-loader',
+              options: {
+                // https://swc.rs/docs/configuring-swc/
+                jsc: {
+                  preserveAllComments: true,
+                  parser: {
+                    syntax: 'typescript',
+                    dynamicImport: true,
+                    topLevelAwait: false,
+                    tsx: true,
+                    decorators: true,
+                  },
+                  target: 'es2022',
+                  externalHelpers: false,
+                  transform: {
+                    react: { runtime: 'automatic' },
+                    useDefineForClassFields: false,
+                    decoratorVersion: '2022-03',
+                  },
+                },
+                sourceMaps: true,
+                inlineSourcesContent: true,
+              },
+            },
+            {
+              test: /\.(png|jpg|gif|svg|webp|mp4|zip)$/,
+              type: 'asset/resource',
+            },
+            { test: /\.(ttf|eot|woff|woff2)$/, type: 'asset/resource' },
+            { test: /\.txt$/, type: 'asset/source' },
+            { test: /\.inline\.svg$/, type: 'asset/inline' },
+            {
+              test: /\.css$/,
+              use: [
+                buildConfig.debug
+                  ? 'style-loader'
+                  : rspack.CssExtractRspackPlugin.loader,
+                {
+                  loader: 'css-loader',
+                  options: {
+                    url: true,
+                    sourceMap: false,
+                    modules: false,
+                    import: true,
+                    importLoaders: 1,
+                  },
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    postcssOptions: {
+                      plugins: hasTailwind
+                        ? [
+                            tailwindPlugin,
+                            ['autoprefixer'],
+                            ...(buildConfig.isAdmin
+                              ? [queuedashScopePostcssPlugin()]
+                              : []),
+                          ]
+                        : [
+                            cssnano({
+                              preset: ['default', { convertValues: false }],
+                            }),
+                          ],
+                    },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      //#endregion
+    },
+    //#endregion
+
+    //#region plugins
+    plugins: compact([
+      !IN_CI && new rspack.ProgressPlugin(),
+      ...createHTMLPlugins(buildConfig, htmlConfig),
+      new rspack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+        ...Object.entries(buildConfig).reduce(
+          (def, [k, v]) => {
+            def[`BUILD_CONFIG.${k}`] = JSON.stringify(v);
+            return def;
+          },
+          {} as Record<string, string>
+        ),
+      }),
+      !buildConfig.debug &&
+        // todo: support multiple entry points
+        new rspack.CssExtractRspackPlugin({
+          filename: `[name].[contenthash:8].css`,
+          ignoreOrder: true,
+        }),
+      new VanillaExtractPlugin(),
+      !buildConfig.isAdmin &&
+        htmlConfig.copySharedPublicAssets &&
+        new rspack.CopyRspackPlugin({
+          patterns: [
+            {
+              // copy the shared public assets into dist
+              from: new Package('@affine/core').join('public').value,
+            },
+          ],
+        }),
+      createSentryPlugin(),
+      // sourcemap url like # sourceMappingURL=76-6370cd185962bc89.js.map wont load in electron
+      // this is because the default file:// protocol will be ignored by Chromium
+      // so we need to replace the sourceMappingURL to assets:// protocol
+      // for example:
+      // replace # sourceMappingURL=76-6370cd185962bc89.js.map
+      // to      # sourceMappingURL=assets://./{dir}/76-6370cd185962bc89.js.map
+      buildConfig.isElectron &&
+        new rspack.SourceMapDevToolPlugin({
+          append: (pathData: { filename?: string }) => {
+            return `\n//# sourceMappingURL=assets://./${pathData.filename ?? ''}.map`;
+          },
+          filename: '[file].map',
+        }),
+    ]),
+    //#endregion
+
+    stats: { errorDetails: true },
+
+    //#region optimization
+    optimization: {
+      minimize: !buildConfig.debug,
+      minimizer: [
+        new rspack.SwcJsMinimizerRspackPlugin({
+          extractComments: true,
+          minimizerOptions: {
+            ecma: 2020,
+            compress: { unused: true },
+            mangle: { keep_classnames: true },
+          },
+        }),
+      ],
+      removeEmptyChunks: true,
+      providedExports: true,
+      usedExports: true,
+      sideEffects: true,
+      runtimeChunk: { name: 'runtime' },
+      splitChunks: {
+        chunks: 'all',
+        minSize: 1,
+        minChunks: 1,
+        maxInitialRequests: Number.MAX_SAFE_INTEGER,
+        maxAsyncRequests: Number.MAX_SAFE_INTEGER,
+        cacheGroups: {
+          ...productionCacheGroups,
+          // Rspack tends to pull async node_modules into the initial vendor chunk
+          // when `vendor` is configured as `chunks: 'all'`.
+          vendor: {
+            ...productionCacheGroups.vendor,
+            chunks: 'initial',
+          },
+        },
+      },
+    },
+    //#endregion
+  };
+
+  if (buildConfig.debug && !IN_CI) {
+    config.optimization = {
+      ...config.optimization,
+      minimize: false,
+      runtimeChunk: false,
+      splitChunks: {
+        maxInitialRequests: Infinity,
+        chunks: 'all',
+        cacheGroups: {
+          defaultVendors: {
+            test: `[\\/]node_modules[\\/](?!.*vanilla-extract)`,
+            priority: -10,
+            reuseExistingChunk: true,
+          },
+          default: { minChunks: 2, priority: -20, reuseExistingChunk: true },
+          styles: {
+            name: 'styles',
+            type: 'css/mini-extract',
+            chunks: 'all',
+            enforce: true,
+          },
+        },
+      },
+    };
+  }
+
+  return config;
+}
+
+export function createWorkerTargetConfig(
+  pkg: Package,
+  entry: string
+): Omit<RspackConfiguration, 'name'> & { name: string } {
+  const workerName = path.basename(entry).replace(/\.worker\.ts$/, '');
+  const buildConfig = getBuildConfigFromEnv(pkg);
+
+  return {
+    name: entry,
+    context: ProjectRoot.value,
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    entry: { [workerName]: entry },
+    output: {
+      filename: `js/${workerName}-${buildConfig.appVersion}.worker.js`,
+      path: pkg.distPath.value,
+      clean: false,
+      globalObject: 'globalThis',
+      // NOTE: always keep it '/'
+      publicPath: '/',
+    },
+    target: ['webworker', 'es2022'],
+    mode: buildConfig.debug ? 'development' : 'production',
+    devtool: buildConfig.debug ? 'cheap-module-source-map' : 'source-map',
+    resolve: {
+      symlinks: true,
+      extensionAlias: { '.js': ['.js', '.ts'], '.mjs': ['.mjs', '.mts'] },
+      extensions: ['.js', '.ts'],
+      alias: { yjs: ProjectRoot.join('node_modules', 'yjs').value },
+    },
+
+    module: {
+      parser: {
+        javascript: {
+          // Do not mock Node.js globals
+          node: false,
+          requireJs: false,
+          import: true,
+          // Treat as missing export as error
+          strictExportPresence: true,
+        },
+      },
+      rules: [
+        { test: /\.m?js?$/, resolve: { fullySpecified: false } },
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          include: /@blocksuite/,
+          use: ['source-map-loader'],
+        },
+        {
+          oneOf: [
+            {
+              test: /\.ts$/,
+              exclude: /node_modules/,
+              loader: 'swc-loader',
+              options: {
+                // https://swc.rs/docs/configuring-swc/
+                jsc: {
+                  preserveAllComments: true,
+                  parser: {
+                    syntax: 'typescript',
+                    dynamicImport: true,
+                    topLevelAwait: false,
+                    tsx: false,
+                    decorators: true,
+                  },
+                  target: 'es2022',
+                  externalHelpers: false,
+                  transform: {
+                    useDefineForClassFields: false,
+                    decoratorVersion: '2022-03',
+                  },
+                },
+                sourceMaps: true,
+                inlineSourcesContent: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    plugins: compact([
+      new rspack.DefinePlugin(
+        Object.entries(buildConfig).reduce(
+          (def, [k, v]) => {
+            def[`BUILD_CONFIG.${k}`] = JSON.stringify(v);
+            return def;
+          },
+          {} as Record<string, string>
+        )
+      ),
+      new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+      createSentryPlugin(),
+    ]),
+    stats: { errorDetails: true },
+    optimization: {
+      minimize: !buildConfig.debug,
+      minimizer: [
+        new rspack.SwcJsMinimizerRspackPlugin({
+          extractComments: true,
+          minimizerOptions: {
+            ecma: 2020,
+            compress: { unused: true },
+            mangle: { keep_classnames: true },
+          },
+        }),
+      ],
+      removeEmptyChunks: true,
+      providedExports: true,
+      usedExports: true,
+      sideEffects: true,
+      runtimeChunk: false,
+      splitChunks: false,
+    },
+    performance: { hints: false },
+  };
+}
+
+export function createNodeTargetConfig(
+  pkg: Package,
+  entry: string,
+  options: {
+    outputFilename?: string;
+    decoratorVersion?: 'legacy' | '2022-03';
+    libraryType?: 'module' | 'commonjs2';
+    bundleAllDependencies?: boolean;
+    forceExternal?: string[];
+  } = {}
+): Omit<RspackConfiguration, 'name'> & { name: string } {
+  const dev = process.env.NODE_ENV === 'development';
+  const useLegacyDecorator = options.decoratorVersion !== '2022-03';
+  const forceExternal = options.forceExternal ?? [];
+  return {
+    name: entry,
+    context: ProjectRoot.value,
+    experiments: {
+      asyncWebAssembly: true,
+    },
+    entry: { index: entry },
+    output: {
+      filename: options.outputFilename ?? 'main.js',
+      path: pkg.distPath.value,
+      clean: true,
+      globalObject: 'globalThis',
+      module: pkg.packageJson.type === 'module',
+      ...(options.libraryType
+        ? { library: { type: options.libraryType } }
+        : {}),
+    },
+    target: ['node', 'es2022'],
+    externals: ((data: any, callback: (err: null, value: boolean) => void) => {
+      if (
+        data.request &&
+        forceExternal.some(
+          dep => data.request === dep || data.request.startsWith(`${dep}/`)
+        )
+      ) {
+        callback(null, true);
+      } else if (
+        data.request &&
+        // import ... from 'module'
+        /^[a-zA-Z@]/.test(data.request) &&
+        !options.bundleAllDependencies &&
+        // not workspace deps
+        !pkg.deps.some(dep => data.request!.startsWith(dep.name))
+      ) {
+        callback(null, true);
+      } else {
+        callback(null, false);
+      }
+    }) as any,
+    externalsPresets: { node: true },
+    node: { __dirname: false, __filename: false },
+    mode: dev ? 'development' : 'production',
+    devtool: 'source-map',
+    resolve: {
+      symlinks: true,
+      extensionAlias: { '.js': ['.js', '.ts'], '.mjs': ['.mjs', '.mts'] },
+      extensions: ['.js', '.ts', '.tsx', '.node'],
+      alias: { yjs: ProjectRoot.join('node_modules', 'yjs').value },
+    },
+    module: {
+      parser: {
+        javascript: { url: false, importMeta: false, createRequire: false },
+      },
+      rules: [
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          include: /@blocksuite/,
+          use: ['source-map-loader'],
+        },
+        {
+          test: /\.node$/,
+          loader: Path.dir(import.meta.url).join(
+            '../rspack-shared/node-loader.js'
+          ).value,
+        },
+        {
+          test: /\.tsx?$/,
+          exclude: /node_modules/,
+          loader: 'swc-loader',
+          options: {
+            // https://swc.rs/docs/configuring-swc/
+            jsc: {
+              preserveAllComments: true,
+              parser: {
+                syntax: 'typescript',
+                dynamicImport: true,
+                topLevelAwait: true,
+                tsx: true,
+                decorators: true,
+              },
+              target: 'es2022',
+              externalHelpers: false,
+              transform: {
+                ...(useLegacyDecorator
+                  ? {
+                      legacyDecorator: true,
+                      decoratorMetadata: true,
+                    }
+                  : {
+                      useDefineForClassFields: false,
+                      decoratorVersion: '2022-03',
+                    }),
+                react: { runtime: 'automatic' },
+              },
+            },
+            sourceMaps: true,
+            inlineSourcesContent: true,
+          },
+        },
+      ],
+    },
+    plugins: compact([
+      new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+      new rspack.IgnorePlugin({
+        checkResource(resource) {
+          const lazyImports = [
+            '@nestjs/microservices',
+            '@nestjs/websockets/socket-module',
+            '@apollo/subgraph',
+            '@apollo/gateway',
+            '@as-integrations/fastify',
+            'ts-morph',
+            'class-validator',
+            'class-transformer',
+          ];
+          return lazyImports.some(lazyImport =>
+            resource.startsWith(lazyImport)
+          );
+        },
+      }),
+      new rspack.DefinePlugin({
+        'process.env.NODE_ENV': '"production"',
+      }),
+    ]),
+    stats: { errorDetails: true },
+    optimization: {
+      nodeEnv: false,
+      minimize: !dev,
+      minimizer: [
+        new rspack.SwcJsMinimizerRspackPlugin({
+          extractComments: true,
+          minimizerOptions: {
+            ecma: 2020,
+            compress: { unused: true },
+            mangle: { keep_classnames: true },
+          },
+        }),
+      ],
+    },
+    performance: { hints: false },
+    ignoreWarnings: [/^(?!CriticalDependenciesWarning$)/],
+  };
+}

tools/cli/src/run.ts

@@ -0,0 +1,238 @@
+import { Path } from '@affine-tools/utils/path';
+import { execAsync } from '@affine-tools/utils/process';
+import type { Package, PackageName } from '@affine-tools/utils/workspace';
+
+import { Option, PackageCommand } from './command';
+
+interface RunScriptOptions {
+  includeDependencies?: boolean;
+  waitDependencies?: boolean;
+  ignoreIfNotFound?: boolean;
+}
+
+const currentDir = Path.dir(import.meta.url);
+const serverRuntimeLoader = currentDir
+  .join('../register.js')
+  .toFileUrl()
+  .toString();
+const tsxRuntimeLoader = currentDir
+  .join('../tsx-register.js')
+  .toFileUrl()
+  .toString();
+
+const ignoreLoaderScripts = [
+  'vitest',
+  'vite',
+  'tsx',
+  'prisma',
+  'cap',
+  'tsc',
+  'typedoc',
+  /^r$/,
+  /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 init\`            Generate the required files if there are any package added or removed
+
+      \`affine clean\`           Clean the output files of ts, cargo, bundler outputs, 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 'init' for workspace`, '$0 init'],
+      [`Clean dist of each package`, '$0 clean --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: this.waitDeps,
+    });
+  }
+
+  async run(name: PackageName, args: string[], opts: RunScriptOptions = {}) {
+    opts = {
+      includeDependencies: false,
+      waitDependencies: true,
+      ignoreIfNotFound: false,
+      ...opts,
+    };
+
+    const pkg = this.workspace.getPackage(name);
+    const scriptName = args[0];
+    const pkgScript = pkg.scripts[scriptName];
+
+    if (pkgScript) {
+      await this.runScript(pkg, scriptName, args.slice(1), opts);
+    } else {
+      await this.runCommand(pkg, args);
+    }
+  }
+
+  async runScript(
+    pkg: Package,
+    scriptName: string,
+    args: string[],
+    opts: RunScriptOptions = {}
+  ) {
+    const rawScript = pkg.scripts[scriptName];
+
+    if (!rawScript) {
+      if (opts.ignoreIfNotFound) {
+        return;
+      }
+
+      throw new Error(`Script ${scriptName} not found in ${pkg.name}`);
+    }
+
+    const rawArgs = [...rawScript.split(' '), ...args];
+
+    const { args: extractedArgs, envs } = this.extractEnvs(rawArgs);
+
+    args = extractedArgs;
+
+    if (opts.includeDependencies) {
+      const depsRun = Promise.all(
+        pkg.deps.map(dep => {
+          return this.runScript(
+            pkg.workspace.getPackage(dep.name),
+            scriptName,
+            [],
+            {
+              ...opts,
+              ignoreIfNotFound: true,
+            }
+          );
+        })
+      );
+
+      if (opts.waitDependencies) {
+        await depsRun;
+      } else {
+        depsRun.catch(e => {
+          this.logger.error(e);
+        });
+      }
+    }
+
+    const isAFFiNECommand = args[0] === 'affine';
+    if (isAFFiNECommand) {
+      // remove 'affine' from 'affine xxx' command
+      args.shift();
+      args.push('-p', pkg.name);
+
+      process.env = {
+        ...process.env,
+        ...envs,
+      };
+      await this.cli.run(args);
+    } else {
+      await this.runCommand(pkg, rawArgs);
+    }
+  }
+
+  async runCommand(pkg: Package, args: string[]) {
+    const { args: extractedArgs, envs } = this.extractEnvs(args);
+    args = extractedArgs;
+
+    const bin = args[0] === 'yarn' ? args[1] : args[0];
+    const loader =
+      pkg.name === '@affine/server' ? serverRuntimeLoader : tsxRuntimeLoader;
+    const hasKnownLoader =
+      process.env.NODE_OPTIONS?.includes('tsx') ||
+      process.env.NODE_OPTIONS?.includes(tsxRuntimeLoader) ||
+      process.env.NODE_OPTIONS?.includes(serverRuntimeLoader);
+
+    // very simple test for auto ts/mjs scripts
+    const isLoaderRequired =
+      !ignoreLoaderScripts.some(ignore => new RegExp(ignore).test(bin)) ||
+      hasKnownLoader ||
+      process.env.NODE_OPTIONS?.includes(loader);
+
+    let NODE_OPTIONS = process.env.NODE_OPTIONS
+      ? [process.env.NODE_OPTIONS]
+      : [];
+
+    if (isLoaderRequired) {
+      NODE_OPTIONS.push(`--import=${loader}`);
+    }
+
+    if (args[0] !== 'yarn') {
+      // add 'yarn' to the command so we can bypass bin execution to it
+      args.unshift('yarn');
+    }
+
+    await execAsync(pkg.name, args, {
+      cwd: pkg.path.value,
+      env: {
+        ...envs,
+        NODE_OPTIONS: NODE_OPTIONS.join(' '),
+      },
+    });
+  }
+
+  private extractEnvs(args: string[]): {
+    args: string[];
+    envs: Record<string, string>;
+  } {
+    const envs: Record<string, string> = {};
+
+    let i = 0;
+
+    while (i < args.length) {
+      const arg = args[i];
+      if (arg === 'cross-env') {
+        i++;
+        continue;
+      }
+
+      const match = arg.match(/^([A-Z_]+)=(.+)$/);
+
+      if (match) {
+        envs[match[1]] = match[2];
+        i++;
+      } else {
+        // not envs any more
+        break;
+      }
+    }
+
+    return {
+      args: args.slice(i),
+      envs,
+    };
+  }
+}

tools/cli/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.node.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../utils" },
+    { "path": "../../packages/common/s3-compat" }
+  ]
+}

tools/cli/tsx-register.js

@@ -0,0 +1 @@
+import 'tsx';