Default to pnpm/pnpx internally

Author: gonzaloriestra

.github/workflows/release.yml

@@ -71,7 +71,6 @@ jobs:
             > If the versions don't match, you might have multiple global instances installed.
 
             > Use `which shopify` to find out which one you are running and uninstall it."
-          comment_package_manager: 'npm'
           comment_command_flags: '--@shopify:registry=https://registry.npmjs.org'
           build_script: "node bin/update-cli-kit-version.js && pnpm nx run-many --target=bundle --all --skip-nx-cache --output-style=stream && pnpm refresh-manifests"
         env:

.github/workflows/tests-pr.yml

@@ -234,7 +234,7 @@ jobs:
       - name: Build
         run: pnpm nx run-many --all --skip-nx-cache --target=build --output-style=stream
       - name: Install Playwright Chromium
-        run: npx playwright install chromium
+        run: pnpm exec playwright install chromium
         working-directory: packages/e2e
       - name: Rebuild node-pty
         run: pnpm rebuild node-pty
@@ -247,7 +247,7 @@ jobs:
           E2E_STORE_FQDN: ${{ secrets.E2E_STORE_FQDN }}
           E2E_SECONDARY_CLIENT_ID: ${{ secrets.E2E_SECONDARY_CLIENT_ID }}
           E2E_ORG_ID: ${{ secrets.E2E_ORG_ID }}
-        run: npx playwright test
+        run: pnpm exec playwright test
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}

bin/create-notification-pr.js

@@ -65,7 +65,7 @@ async function createPR() {
         '**Please update the release highlights before merging.**',
         '',
         '### How to test',
-        '- `npx http-server ~/src/github.com/Shopify/static-cdn-assets`',
+        '- `pnpx http-server ~/src/github.com/Shopify/static-cdn-assets`',
         '- `SHOPIFY_CLI_NOTIFICATIONS_URL=http://127.0.0.1:8080/static-24h/cli/notifications.json shopify version`',
         "- You may need to clear the CLI cache with `shopify cache clear` and run the command twice to see the notification (it's fetched in the background).",
         '',

bin/docs/build-dev-docs.sh

@@ -1,12 +1,12 @@
 echo "STARTING"
-COMPILE_DOCS="npx tsc --project bin/docs/tsconfig.docs.json --moduleResolution node --target esNext && npx generate-docs --overridePath ./bin/docs/typeOverride.json --input ./docs-shopify.dev/commands  --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/commands/**/*.doc.js docs-shopify.dev/commands/*.doc.js"
-COMPILE_STATIC_PAGES="npx tsc docs-shopify.dev/static/*.doc.ts --moduleResolution node  --target esNext && npx generate-docs --isLandingPage --input ./docs-shopify.dev/static --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/static/*.doc.js"
-COMPILE_CATEGORY_PAGES="npx tsc docs-shopify.dev/categories/*.doc.ts --moduleResolution node  --target esNext && generate-docs --isCategoryPage --input ./docs-shopify.dev/categories --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/categories/*.doc.js"
+COMPILE_DOCS="pnpx tsc --project bin/docs/tsconfig.docs.json --moduleResolution node --target esNext && pnpx generate-docs --overridePath ./bin/docs/typeOverride.json --input ./docs-shopify.dev/commands  --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/commands/**/*.doc.js docs-shopify.dev/commands/*.doc.js"
+COMPILE_STATIC_PAGES="pnpx tsc docs-shopify.dev/static/*.doc.ts --moduleResolution node  --target esNext && pnpx generate-docs --isLandingPage --input ./docs-shopify.dev/static --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/static/*.doc.js"
+COMPILE_CATEGORY_PAGES="pnpx tsc docs-shopify.dev/categories/*.doc.ts --moduleResolution node  --target esNext && pnpx generate-docs --isCategoryPage --input ./docs-shopify.dev/categories --output ./docs-shopify.dev/generated && rm -rf docs-shopify.dev/categories/*.doc.js"
 
 if [ "$1" = "isTest" ];
 then
-COMPILE_DOCS="npx tsc --project bin/docs/tsconfig.docs.json --moduleResolution node  --target esNext && npx generate-docs --overridePath ./bin/docs/typeOverride.json --input ./docs-shopify.dev/commands --output ./docs-shopify.dev/static/temp && rm -rf docs-shopify.dev/commands/**/*.doc.js docs-shopify.dev/commands/*.doc.js"
-COMPILE_STATIC_PAGES="npx tsc docs-shopify.dev/static/*.doc.ts --moduleResolution node  --target esNext && npx generate-docs --isLandingPage --input ./docs-shopify.dev/static/docs-shopify.dev  --output ./docs-shopify.dev/static/temp && rm -rf docs-shopify.dev/static/*.doc.js"
+COMPILE_DOCS="pnpx tsc --project bin/docs/tsconfig.docs.json --moduleResolution node  --target esNext && pnpx generate-docs --overridePath ./bin/docs/typeOverride.json --input ./docs-shopify.dev/commands --output ./docs-shopify.dev/static/temp && rm -rf docs-shopify.dev/commands/**/*.doc.js docs-shopify.dev/commands/*.doc.js"
+COMPILE_STATIC_PAGES="pnpx tsc docs-shopify.dev/static/*.doc.ts --moduleResolution node  --target esNext && pnpx generate-docs --isLandingPage --input ./docs-shopify.dev/static/docs-shopify.dev  --output ./docs-shopify.dev/static/temp && rm -rf docs-shopify.dev/static/*.doc.js"
 fi
 
 echo $1

dev.yml

@@ -23,7 +23,7 @@ up:
       meet: 'true'
   - custom:
       name: 'Install Playwright Chromium'
-      met?: cd packages/e2e && npx playwright install chromium
+      met?: cd packages/e2e && pnpx playwright install chromium
       meet: 'true'
   - custom:
       name: 'Rebuild node-pty'

package.json

@@ -10,7 +10,7 @@
     "bundle-for-release": "nx run-many --target=bundle --all --skip-nx-cache",
     "changeset-manifests": "changeset version && pnpm install --no-frozen-lockfile && pnpm refresh-manifests && pnpm refresh-readme && pnpm refresh-code-documentation && bin/update-cli-kit-version.js",
     "clean": "nx run-many --target=clean --all --skip-nx-cache && nx reset",
-    "create-app": "nx build create-app && node packages/create-app/bin/dev.js --package-manager npm",
+    "create-app": "nx build create-app && node packages/create-app/bin/dev.js --package-manager pnpm",
     "deploy-experimental": "node bin/deploy-experimental.js",
     "graph": "nx graph",
     "graphql-codegen:get-graphql-schemas": "bin/get-graphql-schemas.js",

packages/app/src/cli/services/function/build.test.ts

@@ -21,13 +21,21 @@ import {
 } from './binaries.js'
 import {testApp, testFunctionExtension} from '../../models/app/app.test-data.js'
 import {beforeEach, describe, expect, test, vi} from 'vitest'
+import {getPackageManager} from '@shopify/cli-kit/node/node-package-manager'
 import {exec} from '@shopify/cli-kit/node/system'
 import {dirname, joinPath} from '@shopify/cli-kit/node/path'
 import {inTemporaryDirectory, mkdir, readFileSync, writeFile, removeFile} from '@shopify/cli-kit/node/fs'
 import {build as esBuild} from 'esbuild'
 
 vi.mock('@shopify/cli-kit/node/fs')
 vi.mock('@shopify/cli-kit/node/system')
+vi.mock('@shopify/cli-kit/node/node-package-manager', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@shopify/cli-kit/node/node-package-manager')>()
+  return {
+    ...actual,
+    getPackageManager: vi.fn(),
+  }
+})
 
 vi.mock('./binaries.js', async (importOriginal) => {
   const actual: any = await importOriginal()
@@ -76,6 +84,7 @@ beforeEach(async () => {
   stderr = {write: vi.fn()}
   stdout = {write: vi.fn()}
   signal = vi.fn()
+  vi.mocked(getPackageManager).mockResolvedValue('npm')
 })
 
 describe('buildGraphqlTypes', () => {
@@ -95,6 +104,34 @@ describe('buildGraphqlTypes', () => {
     })
   })
 
+  test('generate types uses pnpm exec when package manager is pnpm', {timeout: 20000}, async () => {
+    vi.mocked(getPackageManager).mockResolvedValueOnce('pnpm')
+    const ourFunction = await testFunctionExtension({entryPath: 'src/index.js'})
+
+    const got = buildGraphqlTypes(ourFunction, {stdout, stderr, signal, app})
+
+    await expect(got).resolves.toBeUndefined()
+    expect(exec).toHaveBeenCalledWith('pnpm', ['exec', '--', 'graphql-code-generator', '--config', 'package.json'], {
+      cwd: ourFunction.directory,
+      stderr,
+      signal,
+    })
+  })
+
+  test('generate types uses yarn without exec subcommand when package manager is yarn', {timeout: 20000}, async () => {
+    vi.mocked(getPackageManager).mockResolvedValueOnce('yarn')
+    const ourFunction = await testFunctionExtension({entryPath: 'src/index.js'})
+
+    const got = buildGraphqlTypes(ourFunction, {stdout, stderr, signal, app})
+
+    await expect(got).resolves.toBeUndefined()
+    expect(exec).toHaveBeenCalledWith('yarn', ['--', 'graphql-code-generator', '--config', 'package.json'], {
+      cwd: ourFunction.directory,
+      stderr,
+      signal,
+    })
+  })
+
   test('errors if function is not a JS function and no typegen_command', async () => {
     // Given
     const ourFunction = await testFunctionExtension()

packages/app/src/cli/services/function/build.ts

@@ -24,6 +24,7 @@ import {renderTasks} from '@shopify/cli-kit/node/ui'
 import {pickBy} from '@shopify/cli-kit/common/object'
 import {runWithTimer} from '@shopify/cli-kit/node/metadata'
 import {AbortError} from '@shopify/cli-kit/node/error'
+import {getPackageManager} from '@shopify/cli-kit/node/node-package-manager'
 import {Writable} from 'stream'
 
 export const PREFERRED_FUNCTION_NPM_PACKAGE_MAJOR_VERSION = '2'
@@ -144,7 +145,12 @@ export async function buildGraphqlTypes(
   }
 
   return runWithTimer('cmd_all_timing_network_ms')(async () => {
-    return exec('npm', ['exec', '--', 'graphql-code-generator', '--config', 'package.json'], {
+    const packageManager = await getPackageManager(fun.directory)
+    const execArgs = ['--', 'graphql-code-generator', '--config', 'package.json']
+    if (packageManager !== 'yarn') {
+      execArgs.unshift('exec')
+    }
+    return exec(packageManager, execArgs, {
       cwd: fun.directory,
       stderr: options.stderr,
       signal: options.signal,

packages/e2e/scripts/cleanup-test-apps.ts

@@ -1,6 +1,6 @@
 /**
  * Deletes all test apps from the dev dashboard via browser automation.
- * Run: npx tsx packages/e2e/scripts/cleanup-test-apps.ts
+ * Run: pnpx tsx packages/e2e/scripts/cleanup-test-apps.ts
  *
  * Pass --dry-run to list apps without deleting.
  * Pass --filter <pattern> to only delete apps matching the pattern.
@@ -128,15 +128,18 @@ async function main() {
     await page.waitForTimeout(2000)
 
     // Check for 500 error and retry
-    const pageText = await page.textContent('body') ?? ''
+    const pageText = (await page.textContent('body')) ?? ''
     if (pageText.includes('500') || pageText.includes('Internal Server Error')) {
       console.log('Got 500 error, retrying...')
       await page.reload({waitUntil: 'domcontentloaded'})
       await page.waitForTimeout(3000)
     }
 
     // Check for org selection page
-    const orgLink = page.locator('a, button').filter({hasText: /core-build|cli-e2e/i}).first()
+    const orgLink = page
+      .locator('a, button')
+      .filter({hasText: /core-build|cli-e2e/i})
+      .first()
     if (await orgLink.isVisible({timeout: 3000}).catch(() => false)) {
       console.log('Org selection detected, clicking...')
       await orgLink.click()

packages/e2e/scripts/create-test-apps.ts

@@ -1,6 +1,6 @@
 /**
  * Creates test apps in the authenticated org and prints their client IDs.
- * Run: npx tsx packages/e2e/scripts/create-test-apps.ts
+ * Run: pnpx tsx packages/e2e/scripts/create-test-apps.ts
  */
 
 import * as fs from 'fs'
@@ -39,7 +39,7 @@ if (!email || !password) {
 }
 
 const baseEnv: Record<string, string> = {
-  ...process.env as Record<string, string>,
+  ...(process.env as Record<string, string>),
   NODE_OPTIONS: '',
   SHOPIFY_RUN_AS_USER: '0',
   FORCE_COLOR: '0',
@@ -86,16 +86,16 @@ async function createAppInteractive(tmpDir: string, appName: string): Promise<st
   fs.mkdirSync(appDir)
 
   const nodePty = await import('node-pty')
-  const pty = nodePty.spawn('node', [
-    createAppPath,
-    '--name', appName,
-    '--path', appDir,
-    '--template', 'none',
-    '--package-manager', 'npm',
-    '--local',
-  ], {
-    name: 'xterm-color', cols: 120, rows: 30, env: baseEnv,
-  })
+  const pty = nodePty.spawn(
+    'node',
+    [createAppPath, '--name', appName, '--path', appDir, '--template', 'none', '--package-manager', 'pnpm', '--local'],
+    {
+      name: 'xterm-color',
+      cols: 120,
+      rows: 30,
+      env: baseEnv,
+    },
+  )
 
   let output = ''
   pty.onData((data: string) => {
@@ -104,11 +104,7 @@ async function createAppInteractive(tmpDir: string, appName: string): Promise<st
   })
 
   // Answer each interactive prompt as it appears
-  const prompts = [
-    'Which organization',
-    'Create this project as a new app',
-    'App name',
-  ]
+  const prompts = ['Which organization', 'Create this project as a new app', 'App name']
   for (const prompt of prompts) {
     try {
       await waitForText(() => output, prompt, 60_000)
@@ -130,9 +126,7 @@ async function createAppInteractive(tmpDir: string, appName: string): Promise<st
 
   // Find the app dir and extract client_id
   const entries = fs.readdirSync(appDir, {withFileTypes: true})
-  const created = entries.find(
-    (e) => e.isDirectory() && fs.existsSync(path.join(appDir, e.name, 'shopify.app.toml')),
-  )
+  const created = entries.find((e) => e.isDirectory() && fs.existsSync(path.join(appDir, e.name, 'shopify.app.toml')))
   if (!created) throw new Error(`No app directory found in ${appDir}`)
 
   const tomlPath = path.join(appDir, created.name, 'shopify.app.toml')
@@ -147,11 +141,16 @@ async function oauthLogin() {
   const nodePty = await import('node-pty')
   const spawnEnv = {...baseEnv, BROWSER: 'none'}
   const pty = nodePty.spawn('node', [cliPath, 'auth', 'login'], {
-    name: 'xterm-color', cols: 120, rows: 30, env: spawnEnv,
+    name: 'xterm-color',
+    cols: 120,
+    rows: 30,
+    env: spawnEnv,
   })
 
   let output = ''
-  pty.onData((data: string) => { output += data })
+  pty.onData((data: string) => {
+    output += data
+  })
 
   await waitForText(() => output, 'Press any key to open the login page', 30_000)
   pty.write(' ')
@@ -169,7 +168,9 @@ async function oauthLogin() {
   await completeLogin(page, urlMatch[0], email!, password!)
 
   await waitForText(() => output, 'Logged in', 60_000)
-  try { pty.kill() } catch {}
+  try {
+    pty.kill()
+  } catch {}
   await browser.close()
 }