Merge branch 'valentin/cli-init-rework' into valentin/cli-init-docs-performance

Author: valentinpalkovic

code/addons/vitest/src/postinstall.ts

@@ -324,29 +324,30 @@ export default async function postInstall(options: PostinstallOptions) {
 
   if (a11yAddon) {
     try {
-      const command = ['automigrate', 'addon-a11y-addon-test'];
-
-      command.push('--loglevel', 'silent');
-      command.push('--yes', '--skip-doctor');
+      const command = [
+        'storybook',
+        'automigrate',
+        'addon-a11y-addon-test',
+        '--loglevel=silent',
+        '--yes',
+        '--skip-doctor',
+      ];
 
       if (options.packageManager) {
-        command.push('--package-manager', options.packageManager);
+        command.push(`--package-manager=${options.packageManager}`);
       }
 
       if (options.skipInstall) {
         command.push('--skip-install');
       }
 
       if (options.configDir !== '.storybook') {
-        command.push('--config-dir', `"${options.configDir}"`);
+        command.push(`--config-dir="${options.configDir}"`);
       }
 
-      const remoteCommand = packageManager.getRemoteRunCommand('storybook', command);
-      const [cmd, ...args] = remoteCommand.split(' ');
-
       await prompt.executeTask(
         // TODO: Remove stdio: 'ignore' once we have a way to log the output of the command properly
-        () => packageManager.executeCommand({ command: cmd, args, stdio: 'ignore' }),
+        () => packageManager.runPackageCommand({ args: command, stdio: 'ignore' }),
         {
           intro: 'Setting up a11y addon for @storybook/addon-vitest',
           error: 'Failed to setup a11y addon for @storybook/addon-vitest',

code/core/src/cli/AddonVitestService.test.ts

@@ -3,7 +3,7 @@ import * as fs from 'node:fs/promises';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { JsPackageManager } from 'storybook/internal/common';
-import { getProjectRoot } from 'storybook/internal/common';
+import { executeCommand, getProjectRoot } from 'storybook/internal/common';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 import * as find from 'empathic/find';
@@ -30,7 +30,7 @@ describe('AddonVitestService', () => {
     mockPackageManager = {
       getAllDependencies: vi.fn(),
       getInstalledVersion: vi.fn(),
-      executeCommand: vi.fn(),
+      runRemoteCommand: vi.fn(),
     } as Partial<JsPackageManager> as JsPackageManager;
 
     // Setup default mocks for logger and prompt
@@ -382,14 +382,16 @@ describe('AddonVitestService', () => {
         intro: 'Installing Playwright browser binaries',
         error: expect.stringContaining('An error occurred'),
         success: 'Playwright browser binaries installed successfully',
+        abortable: true,
       });
     });
 
     it('should execute playwright install command', async () => {
-      let commandFactory: (() => ExecaChildProcess) | (() => ExecaChildProcess)[];
+      type ChildProcessFactory = (signal?: AbortSignal) => ExecaChildProcess;
+      let commandFactory: ChildProcessFactory | ChildProcessFactory[];
       vi.mocked(prompt.confirm).mockResolvedValue(true);
       vi.mocked(prompt.executeTaskWithSpinner).mockImplementation(
-        async (factory: (() => ExecaChildProcess) | (() => ExecaChildProcess)[]) => {
+        async (factory: ChildProcessFactory | ChildProcessFactory[]) => {
           commandFactory = Array.isArray(factory) ? factory[0] : factory;
           // Simulate the child process completion
           commandFactory();
@@ -398,10 +400,10 @@ describe('AddonVitestService', () => {
 
       await service.installPlaywright(mockPackageManager);
 
-      expect(mockPackageManager.executeCommand).toHaveBeenCalledWith({
-        command: 'npx',
+      expect(mockPackageManager.runRemoteCommand).toHaveBeenCalledWith({
         args: ['playwright', 'install', 'chromium', '--with-deps'],
-        killSignal: 'SIGINT',
+        signal: undefined,
+        stdio: 'ignore',
       });
     });
 

code/core/src/cli/AddonVitestService.ts

@@ -5,6 +5,7 @@ import type { JsPackageManager } from 'storybook/internal/common';
 import { getProjectRoot } from 'storybook/internal/common';
 import { CLI_COLORS } from 'storybook/internal/node-logger';
 import { logger, prompt } from 'storybook/internal/node-logger';
+import { ErrorCollector } from 'storybook/internal/telemetry';
 
 import type { CallExpression } from '@babel/types';
 import * as find from 'empathic/find';
@@ -134,26 +135,25 @@ export class AddonVitestService {
 
       if (shouldBeInstalled) {
         await prompt.executeTaskWithSpinner(
-          () => {
-            const result = packageManager.executeCommand({
-              command: 'npx',
+          (signal) =>
+            packageManager.runRemoteCommand({
               args: playwrightCommand,
-              killSignal: 'SIGINT',
-            });
-
-            return result;
-          },
+              stdio: 'ignore',
+              signal,
+            }),
           {
             id: 'playwright-installation',
             intro: 'Installing Playwright browser binaries',
-            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: ${playwrightCommand.join(' ')}`,
+            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: npx ${playwrightCommand.join(' ')}`,
             success: 'Playwright browser binaries installed successfully',
+            abortable: true,
           }
         );
       } else {
         logger.warn('Playwright installation skipped');
       }
     } catch (e) {
+      ErrorCollector.addError(e);
       if (e instanceof Error) {
         errors.push(e.stack ?? e.message);
       } else {

code/core/src/common/index.ts

@@ -47,6 +47,7 @@ export * from './utils/transform-imports';
 export * from '../shared/utils/module';
 export * from './utils/get-addon-names';
 export * from './utils/utils';
+export * from './utils/command';
 
 export { versions };
 

code/core/src/common/js-package-manager/BUNProxy.ts

@@ -6,8 +6,12 @@ import { logger, prompt } from 'storybook/internal/node-logger';
 import { FindPackageVersionsError } from 'storybook/internal/server-errors';
 
 import * as find from 'empathic/find';
+// eslint-disable-next-line depend/ban-dependencies
+import type { ExecaChildProcess } from 'execa';
 import sort from 'semver/functions/sort.js';
 
+import type { ExecuteCommandOptions } from '../utils/command';
+import { executeCommand, executeCommandSync } from '../utils/command';
 import { getProjectRoot } from '../utils/paths';
 import { JsPackageManager } from './JsPackageManager';
 import type { PackageJson } from './PackageJson';
@@ -69,7 +73,7 @@ export class BUNProxy extends JsPackageManager {
   installArgs: string[] | undefined;
 
   async initPackageJson() {
-    return this.executeCommand({ command: 'bun', args: ['init'] });
+    return executeCommand({ command: 'bun', args: ['init'] });
   }
 
   getRunStorybookCommand(): string {
@@ -84,6 +88,10 @@ export class BUNProxy extends JsPackageManager {
     return `bunx ${pkg}${specifier ? `@${specifier}` : ''} ${args.join(' ')}`;
   }
 
+  public runRemoteCommand(options: Omit<ExecuteCommandOptions, 'command'> & { args: string[] }) {
+    return executeCommand({ command: 'bunx', ...options });
+  }
+
   public async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
     const packageJsonPath = find.up(wantedPath, { cwd: this.cwd, last: getProjectRoot() });
@@ -103,31 +111,25 @@ export class BUNProxy extends JsPackageManager {
     return this.installArgs;
   }
 
-  public runPackageCommandSync(
-    command: string,
-    args: string[],
-    cwd?: string,
-    stdio?: 'pipe' | 'inherit'
-  ): string {
-    return this.executeCommandSync({
+  public runPackageCommandSync({
+    args,
+    ...options
+  }: Omit<ExecuteCommandOptions, 'command'> & { args: string[] }): string {
+    return executeCommandSync({
       command: 'bun',
-      args: ['run', command, ...args],
-      cwd,
-      stdio,
+      args: ['run', ...args],
+      ...options,
     });
   }
 
-  public runPackageCommand(
-    command: string,
-    args: string[],
-    cwd?: string,
-    stdio?: 'pipe' | 'inherit'
-  ) {
-    return this.executeCommand({
+  public runPackageCommand({
+    args,
+    ...options
+  }: Omit<ExecuteCommandOptions, 'command'> & { args: string[] }): ExecaChildProcess {
+    return executeCommand({
       command: 'bun',
-      args: ['run', command, ...args],
-      cwd,
-      stdio,
+      args: ['run', ...args],
+      ...options,
     });
   }
 
@@ -137,15 +139,21 @@ export class BUNProxy extends JsPackageManager {
     cwd?: string,
     stdio?: 'inherit' | 'pipe' | 'ignore'
   ) {
-    return this.executeCommand({ command: 'bun', args: [command, ...args], cwd, stdio });
+    return executeCommand({
+      command: 'bun',
+      args: [command, ...args],
+      cwd: cwd ?? this.cwd,
+      stdio,
+    });
   }
 
   public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
     const exec = async ({ packageDepth }: { packageDepth: number }) => {
       const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null';
-      return this.executeCommand({
+      return executeCommand({
         command: 'npm',
         args: ['ls', '--json', `--depth=${packageDepth}`, pipeToNull],
+        cwd: this.cwd,
         env: {
           FORCE_COLOR: 'false',
         },
@@ -188,7 +196,7 @@ export class BUNProxy extends JsPackageManager {
   }
 
   protected runInstall(options?: { force?: boolean }) {
-    return this.executeCommand({
+    return executeCommand({
       command: 'bun',
       args: ['install', ...this.getInstallArgs(), ...(options?.force ? ['--force'] : [])],
       cwd: this.cwd,
@@ -197,8 +205,9 @@ export class BUNProxy extends JsPackageManager {
   }
 
   public async getRegistryURL() {
-    const process = this.executeCommand({
+    const process = executeCommand({
       command: 'npm',
+      cwd: this.cwd,
       // "npm config" commands are not allowed in workspaces per default
       // https://github.com/npm/cli/issues/6099#issuecomment-1847584792
       args: ['config', 'get', 'registry', '-ws=false', '-iwr'],
@@ -215,7 +224,7 @@ export class BUNProxy extends JsPackageManager {
       args = ['-D', ...args];
     }
 
-    return this.executeCommand({
+    return executeCommand({
       command: 'bun',
       args: ['add', ...args, ...this.getInstallArgs()],
       stdio: 'pipe',
@@ -229,8 +238,9 @@ export class BUNProxy extends JsPackageManager {
   ): Promise<T extends true ? string[] : string> {
     const args = fetchAllVersions ? ['versions', '--json'] : ['version'];
     try {
-      const process = this.executeCommand({
+      const process = executeCommand({
         command: 'npm',
+        cwd: this.cwd,
         args: ['info', packageName, ...args],
       });
       const result = await process;