Implement getPackageCommand method in package manager proxies for imp…

…roved command execution

code/core/src/cli/AddonVitestService.ts

@@ -125,7 +125,7 @@ export class AddonVitestService {
         : await (async () => {
             logger.log(dedent`
             Playwright browser binaries are necessary for @storybook/addon-vitest. The download can take some time. If you don't want to wait, you can skip the installation and run the following command manually later:
-            ${CLI_COLORS.cta(`npx ${playwrightCommand.join(' ')}`)}
+            ${CLI_COLORS.cta(this.packageManager.getPackageCommand(playwrightCommand))}
             `);
             return prompt.confirm({
               message: 'Do you want to install Playwright with Chromium now?',
@@ -143,8 +143,8 @@ export class AddonVitestService {
             }),
           {
             id: 'playwright-installation',
-            intro: 'Installing Playwright browser binaries (Press "c" to abort)',
-            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: npx ${playwrightCommand.join(' ')}`,
+            intro: 'Installing Playwright browser binaries (press "c" to abort)',
+            error: `An error occurred while installing Playwright browser binaries. Please run the following command later: ${playwrightCommandString}`,
             success: 'Playwright browser binaries installed successfully',
             abortable: true,
           }

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

@@ -87,6 +87,10 @@ export class BUNProxy extends JsPackageManager {
     return `bunx ${pkg}${specifier ? `@${specifier}` : ''} ${args.join(' ')}`;
   }
 
+  getPackageCommand(args: string[]): string {
+    return `bunx ${args.join(' ')}`;
+  }
+
   public async getModulePackageJSON(packageName: string): Promise<PackageJson | null> {
     const wantedPath = join('node_modules', packageName, 'package.json');
     const packageJsonPath = find.up(wantedPath, {

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

@@ -101,9 +101,12 @@ export abstract class JsPackageManager {
     this.primaryPackageJson = this.#getPrimaryPackageJson();
   }
 
-  /** Runs arbitrary package scripts. */
+  /** Runs arbitrary package scripts (as a string for display). */
   abstract getRunCommand(command: string): string;
 
+  /** Returns the command to run the binary of a local package */
+  abstract getPackageCommand(args: string[]): string;
+
   /** Get the package.json file for a given module. */
   abstract getModulePackageJSON(packageName: string, cwd?: string): Promise<PackageJson | null>;
 

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

@@ -98,6 +98,10 @@ export class NPMProxy extends JsPackageManager {
     return this.installArgs;
   }
 
+  public getPackageCommand(args: string[]): string {
+    return `npx ${args.join(' ')}`;
+  }
+
   public runPackageCommand(
     options: Omit<ExecuteCommandOptions, 'command'> & { args: string[] }
   ): ExecaChildProcess {

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

@@ -73,6 +73,10 @@ export class PNPMProxy extends JsPackageManager {
     return this.installArgs;
   }
 
+  getPackageCommand(args: string[]): string {
+    return `pnpm exec ${args.join(' ')}`;
+  }
+
   public runPackageCommand({
     args,
     ...options

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

@@ -50,6 +50,11 @@ export class Yarn1Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getPackageCommand(args: string[]): string {
+    const [command, ...rest] = args;
+    return `yarn exec ${command} -- ${rest.join(' ')}`;
+  }
+
   public runPackageCommand({
     args,
     ...options

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

@@ -94,6 +94,10 @@ export class Yarn2Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getPackageCommand(args: string): string {
+    return `yarn exec ${args}`;
+  }
+
   public runPackageCommand({
     args,
     ...options