feat(ui-devkit): Support pnpm to build UI extensions (#2877)

docs/docs/reference/admin-ui-api/ui-devkit/compile-ui-extensions.md

@@ -11,7 +11,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## compileUiExtensions
 
-<GenerationInfo sourceFile="packages/ui-devkit/src/compiler/compile.ts" sourceLine="35" packageName="@vendure/ui-devkit" />
+<GenerationInfo sourceFile="packages/ui-devkit/src/compiler/compile.ts" sourceLine="36" packageName="@vendure/ui-devkit" />
 
 Compiles the Admin UI app with the specified extensions.
 

docs/docs/reference/admin-ui-api/ui-devkit/ui-extension-build-command.md

@@ -0,0 +1,20 @@
+---
+title: "UiExtensionBuildCommand"
+isDefaultIndex: false
+generated: true
+---
+<!-- This file was generated from the Vendure source. Do not modify. Instead, re-run the "docs:build" script -->
+import MemberInfo from '@site/src/components/MemberInfo';
+import GenerationInfo from '@site/src/components/GenerationInfo';
+import MemberDescription from '@site/src/components/MemberDescription';
+
+
+## UiExtensionBuildCommand
+
+<GenerationInfo sourceFile="packages/ui-devkit/src/compiler/types.ts" sourceLine="356" packageName="@vendure/ui-devkit" />
+
+The package manager to use when invoking the Angular CLI to build UI extensions.
+
+```ts title="Signature"
+type UiExtensionBuildCommand = 'npm' | 'yarn' | 'pnpm'
+```

docs/docs/reference/admin-ui-api/ui-devkit/ui-extension-compiler-options.md

@@ -11,7 +11,7 @@ import MemberDescription from '@site/src/components/MemberDescription';
 
 ## UiExtensionCompilerOptions
 
-<GenerationInfo sourceFile="packages/ui-devkit/src/compiler/types.ts" sourceLine="356" packageName="@vendure/ui-devkit" />
+<GenerationInfo sourceFile="packages/ui-devkit/src/compiler/types.ts" sourceLine="364" packageName="@vendure/ui-devkit" />
 
 Options to configure how the Admin UI should be compiled.
 
@@ -23,7 +23,7 @@ interface UiExtensionCompilerOptions {
     devMode?: boolean;
     baseHref?: string;
     watchPort?: number;
-    command?: 'yarn' | 'npm';
+    command?: UiExtensionBuildCommand;
     additionalProcessArguments?: UiExtensionCompilerProcessArgument[];
 }
 ```
@@ -102,11 +102,11 @@ In watch mode, allows the port of the dev server to be specified. Defaults to th
 of `4200`.
 ### command
 
-<MemberInfo kind="property" type={`'yarn' | 'npm'`}  since="1.5.0"  />
+<MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/ui-devkit/ui-extension-build-command#uiextensionbuildcommand'>UiExtensionBuildCommand</a>`}  since="1.5.0"  />
 
 Internally, the Angular CLI will be invoked as an npm script. By default, the compiler will use Yarn
 to run the script if it is detected, otherwise it will use npm. This setting allows you to explicitly
-set which command to use, rather than relying on the default behavior.
+set which command to use, including pnpm, rather than relying on the default behavior.
 ### additionalProcessArguments
 
 <MemberInfo kind="property" type={`<a href='/reference/admin-ui-api/ui-devkit/ui-extension-compiler-process-argument#uiextensioncompilerprocessargument'>UiExtensionCompilerProcessArgument</a>[]`} default="undefined"  since="1.5.0"  />

packages/ui-devkit/src/compiler/compile.ts

@@ -11,19 +11,20 @@ import { copyGlobalStyleFile, setBaseHref, setupScaffold } from './scaffold';
 import { getAllTranslationFiles, mergeExtensionTranslations } from './translations';
 import {
     StaticAssetDefinition,
+    UiExtensionBuildCommand,
     UiExtensionCompilerOptions,
     UiExtensionCompilerProcessArgument,
 } from './types';
 import {
     copyStaticAsset,
     copyUiDevkit,
+    determinePackageManager,
     getStaticAssetPath,
     isAdminUiExtension,
     isGlobalStylesExtension,
     isStaticAssetExtension,
     isTranslationExtension,
     normalizeExtensions,
-    shouldUseYarn,
 } from './utils';
 
 /**
@@ -35,18 +36,21 @@ import {
 export function compileUiExtensions(
     options: UiExtensionCompilerOptions,
 ): AdminUiAppConfig | AdminUiAppDevModeConfig {
-    const { devMode, watchPort, command } = options;
-    const usingYarn = command && command === 'npm' ? false : shouldUseYarn();
+    const { devMode, watchPort } = options;
+    const command: UiExtensionBuildCommand =
+        options.command && ['npm', 'pnpm'].includes(options.command)
+            ? options.command
+            : determinePackageManager();
     if (devMode) {
         return runWatchMode({
             watchPort: watchPort || 4200,
-            usingYarn,
             ...options,
+            command,
         });
     } else {
         return runCompileMode({
-            usingYarn,
             ...options,
+            command,
         });
     }
 }
@@ -55,10 +59,10 @@ function runCompileMode({
     outputPath,
     baseHref,
     extensions,
-    usingYarn,
+    command,
     additionalProcessArguments,
     ngCompilerPath,
-}: UiExtensionCompilerOptions & { usingYarn: boolean }): AdminUiAppConfig {
+}: UiExtensionCompilerOptions & { command: UiExtensionBuildCommand }): AdminUiAppConfig {
     const distPath = path.join(outputPath, 'dist');
 
     const compile = () =>
@@ -66,13 +70,13 @@ function runCompileMode({
             await setupScaffold(outputPath, extensions);
             await setBaseHref(outputPath, baseHref || DEFAULT_BASE_HREF);
 
-            let cmd = usingYarn ? 'yarn' : 'npm';
+            let cmd: UiExtensionBuildCommand | 'node' = command;
             let commandArgs = ['run', 'build'];
             if (ngCompilerPath) {
                 cmd = 'node';
                 commandArgs = [ngCompilerPath, 'build', '--configuration production'];
             } else {
-                if (!usingYarn) {
+                if (cmd === 'npm') {
                     // npm requires `--` before any command line args being passed to a script
                     commandArgs.splice(2, 0, '--');
                 }
@@ -109,10 +113,10 @@ function runWatchMode({
     baseHref,
     watchPort,
     extensions,
-    usingYarn,
+    command,
     additionalProcessArguments,
     ngCompilerPath,
-}: UiExtensionCompilerOptions & { usingYarn: boolean }): AdminUiAppDevModeConfig {
+}: UiExtensionCompilerOptions & { command: UiExtensionBuildCommand }): AdminUiAppDevModeConfig {
     const devkitPath = require.resolve('@vendure/ui-devkit');
     let buildProcess: ChildProcess;
     let watcher: FSWatcher | undefined;
@@ -128,7 +132,7 @@ function runWatchMode({
             const globalStylesExtensions = extensions.filter(isGlobalStylesExtension);
             const staticAssetExtensions = extensions.filter(isStaticAssetExtension);
             const allTranslationFiles = getAllTranslationFiles(extensions.filter(isTranslationExtension));
-            let cmd = usingYarn ? 'yarn' : 'npm';
+            let cmd: UiExtensionBuildCommand | 'node' = command;
             let commandArgs = ['run', 'start'];
             if (ngCompilerPath) {
                 cmd = 'node';

packages/ui-devkit/src/compiler/types.ts

@@ -347,6 +347,14 @@ export interface AdminUiExtensionLazyModule {
  */
 export type UiExtensionCompilerProcessArgument = string | [string, any];
 
+/**
+ * @description
+ * The package manager to use when invoking the Angular CLI to build UI extensions.
+ *
+ * @docsCategory UiDevkit
+ */
+export type UiExtensionBuildCommand = 'npm' | 'yarn' | 'pnpm';
+
 /**
  * @description
  * Options to configure how the Admin UI should be compiled.
@@ -435,11 +443,11 @@ export interface UiExtensionCompilerOptions {
      * @description
      * Internally, the Angular CLI will be invoked as an npm script. By default, the compiler will use Yarn
      * to run the script if it is detected, otherwise it will use npm. This setting allows you to explicitly
-     * set which command to use, rather than relying on the default behavior.
+     * set which command to use, including pnpm, rather than relying on the default behavior.
      *
      * @since 1.5.0
      */
-    command?: 'yarn' | 'npm';
+    command?: UiExtensionBuildCommand;
 
     /**
      * @description

packages/ui-devkit/src/compiler/utils.ts

@@ -23,14 +23,14 @@ export const logger = {
 };
 
 /**
- * Checks for the global yarn binary and returns true if found.
+ * Checks for the global yarn binary to determine whether to use yarn or npm.
  */
-export function shouldUseYarn(): boolean {
+export function determinePackageManager(): 'yarn' | 'npm' {
     try {
         execSync('yarnpkg --version', { stdio: 'ignore' });
-        return true;
+        return 'yarn';
     } catch (e: any) {
-        return false;
+        return 'npm';
     }
 }