Fix installing function dependencies when using npm with workspaces

Author: Arkham

packages/app/src/cli/services/generate/extension.test.ts

@@ -15,7 +15,11 @@ import checkoutPostPurchaseExtension from '../../models/templates/ui-specificati
 import {ExtensionTemplate} from '../../models/app/template.js'
 import {describe, expect, vi, test} from 'vitest'
 import * as output from '@shopify/cli-kit/node/output'
-import {addNPMDependenciesIfNeeded, addResolutionOrOverride} from '@shopify/cli-kit/node/node-package-manager'
+import {
+  installNodeModules,
+  addNPMDependenciesIfNeeded,
+  addResolutionOrOverride,
+} from '@shopify/cli-kit/node/node-package-manager'
 import * as template from '@shopify/cli-kit/node/liquid'
 import * as file from '@shopify/cli-kit/node/fs'
 import * as git from '@shopify/cli-kit/node/git'
@@ -28,6 +32,7 @@ vi.mock('@shopify/cli-kit/node/node-package-manager', async () => {
     ...actual,
     addNPMDependenciesIfNeeded: vi.fn(),
     addResolutionOrOverride: vi.fn(),
+    installNodeModules: vi.fn(),
   }
 })
 
@@ -324,48 +329,52 @@ describe('initialize a extension', async () => {
   })
 
   test('generates a JS function', async () => {
-    await withTemporaryApp(async (tmpDir) => {
-      // Given
-      const name = 'my-fun-1'
-      const specification = allFunctionTemplates.find((spec) => spec.identifier === 'order_discounts')!
-      const extensionFlavor = 'vanilla-js'
-
-      vi.spyOn(git, 'downloadGitRepository').mockResolvedValue()
-      vi.spyOn(extensionsCommon, 'ensureDownloadedExtensionFlavorExists').mockImplementationOnce(async () => tmpDir)
-      vi.spyOn(template, 'recursiveLiquidTemplateCopy').mockImplementationOnce(async (_origin, destination) => {
-        await file.writeFile(
-          joinPath(destination, 'shopify.function.extension.toml'),
-          `name = "my-fun-1"
+    await withTemporaryApp(
+      async (tmpDir) => {
+        // Given
+        const name = 'my-fun-1'
+        const specification = allFunctionTemplates.find((spec) => spec.identifier === 'order_discounts')!
+        const extensionFlavor = 'vanilla-js'
+
+        vi.spyOn(git, 'downloadGitRepository').mockResolvedValue()
+        vi.spyOn(extensionsCommon, 'ensureDownloadedExtensionFlavorExists').mockImplementationOnce(async () => tmpDir)
+        vi.spyOn(template, 'recursiveLiquidTemplateCopy').mockImplementationOnce(async (_origin, destination) => {
+          await file.writeFile(
+            joinPath(destination, 'shopify.function.extension.toml'),
+            `name = "my-fun-1"
           type = "order_discounts"
           api_version = "2023-01"
 
           [build]
           path = "dist/function.wasm"`,
-        )
-        await file.mkdir(joinPath(destination, 'src'))
-        await file.writeFile(joinPath(destination, 'src', 'index'), '')
-      })
-      const buildGraphqlTypesSpy = vi.spyOn(functionBuild, 'buildGraphqlTypes').mockResolvedValue()
-
-      // When
-      const extensionDir = await createFromTemplate({
-        name,
-        extensionTemplate: specification,
-        extensionFlavor,
-        appDirectory: tmpDir,
-        specifications,
-      })
+          )
+          await file.mkdir(joinPath(destination, 'src'))
+          await file.writeFile(joinPath(destination, 'src', 'index'), '')
+        })
+        const buildGraphqlTypesSpy = vi.spyOn(functionBuild, 'buildGraphqlTypes').mockResolvedValue()
 
-      // Then
-      const app = await loadApp({directory: tmpDir, specifications})
-      const generatedFunction = app.extensions.function[0]!
-      expect(extensionDir).toEqual(joinPath(tmpDir, 'extensions', name))
-      expect(generatedFunction.configuration.name).toBe(name)
-      expect(generatedFunction.entrySourceFilePath).toBe(joinPath(extensionDir, 'src', 'index.js'))
+        // When
+        const extensionDir = await createFromTemplate({
+          name,
+          extensionTemplate: specification,
+          extensionFlavor,
+          appDirectory: tmpDir,
+          specifications,
+        })
 
-      expect(addNPMDependenciesIfNeeded).toHaveBeenCalledOnce()
-      expect(buildGraphqlTypesSpy).toHaveBeenCalledOnce()
-    })
+        // Then
+        const app = await loadApp({directory: tmpDir, specifications})
+        const generatedFunction = app.extensions.function[0]!
+        expect(extensionDir).toEqual(joinPath(tmpDir, 'extensions', name))
+        expect(generatedFunction.configuration.name).toBe(name)
+        expect(generatedFunction.entrySourceFilePath).toBe(joinPath(extensionDir, 'src', 'index.js'))
+
+        expect(installNodeModules).toHaveBeenCalledOnce()
+        expect(addNPMDependenciesIfNeeded).toHaveBeenCalledOnce()
+        expect(buildGraphqlTypesSpy).toHaveBeenCalledOnce()
+      },
+      {useWorkspaces: true},
+    )
   })
 
   test('throws an error if there is no folder for selected flavor', async () => {
@@ -417,7 +426,10 @@ async function createFromTemplate({
   })
   return result[0]!.directory
 }
-async function withTemporaryApp(callback: (tmpDir: string) => Promise<void> | void) {
+async function withTemporaryApp(
+  callback: (tmpDir: string) => Promise<void> | void,
+  options?: {useWorkspaces: boolean},
+) {
   await file.inTemporaryDirectory(async (tmpDir) => {
     const appConfigurationPath = joinPath(tmpDir, configurationFileNames.app)
     const webConfigurationPath = joinPath(tmpDir, blocks.web.directoryName, blocks.web.configurationName)
@@ -436,7 +448,18 @@ async function withTemporaryApp(callback: (tmpDir: string) => Promise<void> | vo
     await file.writeFile(appConfigurationPath, appConfiguration)
     await file.mkdir(dirname(webConfigurationPath))
     await file.writeFile(webConfigurationPath, webConfiguration)
-    await file.writeFile(joinPath(tmpDir, 'package.json'), JSON.stringify({dependencies: {}, devDependencies: {}}))
+
+    const packageJsonContents: {
+      workspaces?: string[]
+      dependencies: {[key: string]: string}
+      devDependencies: {[key: string]: string}
+    } = {dependencies: {}, devDependencies: {}}
+
+    if (options?.useWorkspaces) {
+      packageJsonContents.workspaces = ['extensions/*']
+    }
+
+    await file.writeFile(joinPath(tmpDir, 'package.json'), JSON.stringify(packageJsonContents))
     return callback(tmpDir)
   })
 }

packages/app/src/cli/services/generate/extension.ts

@@ -13,7 +13,7 @@ import {
   addNPMDependenciesIfNeeded,
   addResolutionOrOverride,
   DependencyVersion,
-  installNPMDependenciesRecursively,
+  installNodeModules,
   readAndParsePackageJson,
 } from '@shopify/cli-kit/node/node-package-manager'
 import {recursiveLiquidTemplateCopy} from '@shopify/cli-kit/node/liquid'
@@ -142,6 +142,11 @@ async function functionExtensionInit({directory, url, app, name, extensionFlavor
     taskList.push({
       title: 'Installing additional dependencies',
       task: async () => {
+        // We need to run `npm install` once to setup the workspace correctly
+        if (app.usesWorkspaces && app.packageManager === 'npm') {
+          await installNodeModules({packageManager: 'npm', directory: app.directory})
+        }
+
         const requiredDependencies = getFunctionRuntimeDependencies(templateLanguage)
         await addNPMDependenciesIfNeeded(requiredDependencies, {
           packageManager: app.packageManager,
@@ -201,11 +206,7 @@ async function uiExtensionInit({directory, url, app, name, extensionFlavor}: Ext
               directory: app.directory,
             })
           }
-          await installNPMDependenciesRecursively({
-            packageManager,
-            directory: app.directory,
-            deep: 0,
-          })
+          await installNodeModules({packageManager, directory: app.directory})
         } else {
           await addResolutionOrOverrideIfNeeded(app.directory, extensionFlavor?.value)
           const extensionPackageJsonPath = joinPath(directory, 'package.json')

packages/cli-kit/src/public/node/node-package-manager.ts

@@ -154,7 +154,7 @@ export async function installNPMDependenciesRecursively(
 
 interface InstallNodeModulesOptions {
   directory: string
-  args: string[]
+  args?: string[]
   packageManager: PackageManager
   stdout?: Writable
   stderr?: Writable