chore(tools): add package selector to dev command (#9328)

.github/workflows/build-images.yml

@@ -27,7 +27,7 @@ jobs:
           electron-install: false
           extra-flags: workspaces focus @affine/server
       - name: Build Server
-        run: yarn affine @affine/server build
+        run: yarn workspace @affine/server build
       - name: Upload server dist
         uses: actions/upload-artifact@v4
         with:
@@ -257,7 +257,7 @@ jobs:
           yarn workspaces focus @affine/server --production
 
       - name: Generate Prisma client
-        run: yarn affine @affine/server prisma generate
+        run: yarn workspace @affine/server prisma generate
 
       - name: Setup Version
         id: version

packages/backend/server/package.json

@@ -15,7 +15,7 @@
     "test:coverage": "c8 ava --concurrency 1 --serial",
     "test:copilot:coverage": "c8 ava --timeout=5m \"tests/**/copilot-*.spec.ts\"",
     "data-migration": "cross-env NODE_ENV=script node ./src/data/index.ts",
-    "predeploy": "yarn prisma migrate deploy && node --import ./scripts/register.js ./dist/data/index.js run",
+    "predeploy": "yarn prisma migrate deploy && NODE_ENV=script node --import ./scripts/register.js ./dist/data/index.js run",
     "postinstall": "prisma generate"
   },
   "dependencies": {

packages/frontend/apps/electron/forge.config.mjs

@@ -206,13 +206,6 @@ export default {
 
       cp.spawnSync('yarn', ['generate-assets'], {
         stdio: 'inherit',
-        env: {
-          ...process.env,
-          NODE_OPTIONS: (process.env.NODE_OPTIONS ?? '').replace(
-            '--loader ts-node/esm',
-            ''
-          ),
-        },
         cwd: __dirname,
       });
     },

packages/frontend/apps/electron/scripts/generate-assets.ts

@@ -42,20 +42,18 @@ if (releaseVersionEnv && electronPackageJson.version !== releaseVersionEnv) {
 }
 // copy web dist files to electron dist
 
-process.env.DISTRIBUTION = 'desktop';
-
 const cwd = repoRootDir;
 
 // step 1: build web dist
 if (!process.env.SKIP_WEB_BUILD) {
-  spawnSync('yarn', ['build'], {
+  spawnSync('yarn', ['affine', '@affine/electron', 'bundle'], {
     stdio: 'inherit',
     env: process.env,
     cwd,
     shell: true,
   });
 
-  spawnSync('yarn', ['workspace', '@affine/electron', 'build'], {
+  spawnSync('yarn', ['affine', '@affine/electron', 'build'], {
     stdio: 'inherit',
     env: process.env,
     cwd,

packages/frontend/apps/ios/package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "build": "affine bundle",
     "dev": "affine bundle --dev",
-    "sync": "yarn cap sync",
-    "sync:dev": "CAP_SERVER_URL=http://localhost:8080 yarn cap sync"
+    "sync": "cap sync",
+    "sync:dev": "CAP_SERVER_URL=http://localhost:8080 cap sync"
   },
   "dependencies": {
     "@affine/component": "workspace:*",

packages/frontend/i18n/src/i18n.gen.ts

@@ -6302,7 +6302,7 @@ export function useAFFiNEI18N(): {
     /**
       * `Loading...`
       */
-    ["com.affine.editor.at-menu.recent-docs.loading"](): string;
+    ["com.affine.editor.at-menu.loading"](): string;
     /**
       * `New`
       */

tests/affine-desktop-cloud/playwright.config.ts

@@ -23,7 +23,7 @@ const config: PlaywrightTestConfig = {
   webServer: [
     // Intentionally not building the web, reminds you to run it by yourself.
     {
-      command: 'yarn run -T affine bundle -p @affine/electron --dev',
+      command: 'yarn run -T affine dev -p @affine/electron-renderer',
       port: 8080,
       timeout: 120 * 1000,
       reuseExistingServer: !process.env.CI,

tools/cli/README.md

@@ -46,7 +46,7 @@ yarn affine init
 
 ```json
 {
-  "name": "@affine/demo"
+  "name": "@affine/demo",
   "scripts": {
     "dev": "node ./dev.ts"
   }
@@ -57,6 +57,20 @@ yarn affine init
 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
@@ -111,3 +125,7 @@ restart all the integrated terminals and now you get:
 ```bash
 af web build
 ```
+
+```
+
+```

tools/cli/package.json

@@ -27,6 +27,7 @@
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
     "html-webpack-plugin": "^5.6.3",
+    "inquirer": "^12.3.0",
     "lodash-es": "^4.17.21",
     "mime-types": "^2.1.35",
     "mini-css-extract-plugin": "^2.9.2",

tools/cli/src/build.ts

@@ -7,7 +7,7 @@ export class BuildCommand extends PackageCommand {
     const args: string[] = [];
 
     if (this.deps) {
-      args.push('--deps');
+      args.push('--deps', '--wait-deps');
     }
 
     args.push(this.package, 'build');

tools/cli/src/command.ts

@@ -2,6 +2,7 @@ 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 inquirer from 'inquirer';
 import * as t from 'typanion';
 
 import type { CliContext } from './context';
@@ -32,10 +33,14 @@ export abstract class PackageCommand extends Command {
   });
 
   get package(): PackageName {
-    return (
+    const name =
       AliasToPackage.get(this.packageNameOrAlias as any) ??
-      (this.packageNameOrAlias as PackageName)
-    );
+      (this.packageNameOrAlias as PackageName);
+
+    // check
+    this.workspace.getPackage(name);
+
+    return name;
   }
 
   protected _deps = Option.Boolean('--deps', false, {
@@ -76,4 +81,50 @@ export abstract class PackagesCommand extends Command {
   });
 }
 
+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,
+          })),
+          default: '@affine/web',
+        },
+      ]);
+
+      name = answer.package as PackageName;
+    }
+
+    // check
+    this.workspace.getPackage(name as PackageName);
+
+    return name as PackageName;
+  }
+}
+
 export { Option };

tools/cli/src/dev.ts

@@ -1,16 +1,33 @@
-import { PackageCommand } from './command';
+import type { PackageName } from '@affine-tools/utils/workspace';
 
-export class DevCommand extends PackageCommand {
+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',
+  ];
+
+  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', '--wait-deps');
+      args.push('--deps');
     }
 
-    args.push(this.package, 'dev');
+    args.push(name, 'dev');
 
     await this.cli.run(args);
   }