Workspaces support

bin/shadowenv/yarn

@@ -3,3 +3,4 @@
 printf "\033[1;32myarn \033[0;32mhas been superseded by \033[1;32mpnpm \033[0;32mso use that instead.\n\033[0m"
 printf "\033[0;30mCheck out https://github.com/Shopify/cli/pull/870 to understand the rationale behind the move.\n"
 
+exit 1

packages/app/src/cli/models/app/app.ts

@@ -159,7 +159,7 @@ export async function getUIExtensionRendererVersion(
   // Look for the vanilla JS version of the dependency (the react one depends on it, will always be present)
   const rendererDependency = extension.dependency
   if (!rendererDependency) return undefined
-  return getDependencyVersion(rendererDependency.name, app.directory)
+  return getDependencyVersion(rendererDependency, app.directory)
 }
 
 export async function getDependencyVersion(dependency: string, directory: string): Promise<RendererVersionResult> {

packages/app/src/cli/models/app/extensions.ts

@@ -5,7 +5,6 @@ import {BaseConfigContents} from '../extensions/schemas.js'
 import {ExtensionFlavorValue} from '../../services/generate/extension.js'
 import {TokenizedString} from '@shopify/cli-kit/node/output'
 import {Result} from '@shopify/cli-kit/node/result'
-import {DependencyVersion} from '@shopify/cli-kit/node/node-package-manager'
 
 export type ExtensionCategory = 'ui' | 'function' | 'theme'
 
@@ -62,7 +61,7 @@ export type UIExtension<TConfiguration extends BaseConfigContents = BaseConfigCo
   outputBundlePath: string
   devUUID: string
   surface: string
-  dependency?: DependencyVersion
+  dependency?: string
   getBundleExtensionStdinContent(): string
   validate(): Promise<Result<unknown, string>>
   preDeployValidation(): Promise<void>

packages/app/src/cli/models/extensions/ui-specifications/checkout_post_purchase.ts

@@ -2,7 +2,7 @@ import {createUIExtensionSpecification} from '../ui.js'
 import {BaseUIExtensionSchema} from '../schemas.js'
 import {outputContent, outputToken, TokenizedString} from '@shopify/cli-kit/node/output'
 
-const dependency = {name: '@shopify/post-purchase-ui-extensions-react', version: '^0.13.2'}
+const dependency = '@shopify/post-purchase-ui-extensions-react'
 
 const spec = createUIExtensionSpecification({
   identifier: 'checkout_post_purchase',

packages/app/src/cli/models/extensions/ui-specifications/checkout_ui_extension.ts

@@ -3,7 +3,7 @@ import {BaseUIExtensionSchema} from '../schemas.js'
 import {loadLocalesConfig} from '../../../utilities/extensions/locales-configuration.js'
 import {zod} from '@shopify/cli-kit/node/schema'
 
-const dependency = {name: '@shopify/checkout-ui-extensions-react', version: '^0.26.0'}
+const dependency = '@shopify/checkout-ui-extensions-react'
 
 const CheckoutSchema = BaseUIExtensionSchema.extend({
   extensionPoints: zod.array(zod.string()).optional(),

packages/app/src/cli/models/extensions/ui-specifications/customer_accounts_ui_extension.ts

@@ -4,7 +4,7 @@ import {loadLocalesConfig} from '../../../utilities/extensions/locales-configura
 import {zod} from '@shopify/cli-kit/node/schema'
 import {outputContent} from '@shopify/cli-kit/node/output'
 
-const dependency = {name: '@shopify/customer-account-ui-extensions-react', version: '^0.0.20'}
+const dependency = '@shopify/customer-account-ui-extensions-react'
 
 const CustomerAccountsSchema = BaseUIExtensionSchema.extend({
   categories: zod.array(zod.string()).optional(),

packages/app/src/cli/models/extensions/ui-specifications/pos_ui_extension.ts

@@ -3,7 +3,7 @@ import {createUIExtensionSpecification} from '../ui.js'
 import {BaseUIExtensionSchema} from '../schemas.js'
 import {BugError} from '@shopify/cli-kit/node/error'
 
-const dependency = {name: '@shopify/retail-ui-extensions-react', version: '1.0.0'}
+const dependency = '@shopify/retail-ui-extensions-react'
 
 const spec = createUIExtensionSpecification({
   identifier: 'pos_ui_extension',
@@ -12,8 +12,8 @@ const spec = createUIExtensionSpecification({
   partnersWebIdentifier: 'pos_ui_extension',
   schema: BaseUIExtensionSchema,
   deployConfig: async (config, directory) => {
-    const result = await getDependencyVersion(dependency.name, directory)
-    if (result === 'not_found') throw new BugError(`Dependency ${dependency.name} not found`)
+    const result = await getDependencyVersion(dependency, directory)
+    if (result === 'not_found') throw new BugError(`Dependency ${dependency} not found`)
     return {
       name: config.name,
       description: config.description,

packages/app/src/cli/models/extensions/ui-specifications/product_subscription.ts

@@ -3,7 +3,7 @@ import {createUIExtensionSpecification} from '../ui.js'
 import {BaseUIExtensionSchema} from '../schemas.js'
 import {BugError} from '@shopify/cli-kit/node/error'
 
-const dependency = {name: '@shopify/admin-ui-extensions-react', version: '^1.0.1'}
+const dependency = '@shopify/admin-ui-extensions-react'
 
 const spec = createUIExtensionSpecification({
   identifier: 'product_subscription',
@@ -13,8 +13,8 @@ const spec = createUIExtensionSpecification({
   partnersWebIdentifier: 'product_subscription',
   schema: BaseUIExtensionSchema,
   deployConfig: async (_, directory) => {
-    const result = await getDependencyVersion(dependency.name, directory)
-    if (result === 'not_found') throw new BugError('Dependency @shopify/admin-ui-extensions-react not found')
+    const result = await getDependencyVersion(dependency, directory)
+    if (result === 'not_found') throw new BugError(`Dependency ${dependency} not found`)
     return {renderer_version: result?.version}
   },
 })

packages/app/src/cli/models/extensions/ui-specifications/ui_extension.ts

@@ -9,7 +9,7 @@ import {fileExists} from '@shopify/cli-kit/node/fs'
 import {joinPath} from '@shopify/cli-kit/node/path'
 import {outputContent, outputToken} from '@shopify/cli-kit/node/output'
 
-const dependency = {name: '@shopify/checkout-ui-extensions-react', version: '^0.26.0'}
+const dependency = '@shopify/checkout-ui-extensions-react'
 
 const UIExtensionSchema = BaseUIExtensionSchema.extend({
   settings: zod

packages/app/src/cli/models/extensions/ui-specifications/web_pixel_extension.ts

@@ -9,7 +9,7 @@ const kilobytes = 1024
 const BUNDLE_SIZE_LIMIT_KB = 64
 const BUNDLE_SIZE_LIMIT = BUNDLE_SIZE_LIMIT_KB * kilobytes
 
-const dependency = {name: '@shopify/web-pixels-extension', version: '^0.1.1'}
+const dependency = '@shopify/web-pixels-extension'
 
 const WebPixelSchema = BaseUIExtensionSchema.extend({
   runtimeContext: zod.string(),

packages/app/src/cli/models/extensions/ui.ts

@@ -21,7 +21,7 @@ export interface UIExtensionSpec<TConfiguration extends BaseConfigContents = Bas
   supportedFlavors: ExtensionFlavor[]
   gated: boolean
   helpURL?: string
-  dependency?: {name: string; version: string}
+  dependency?: string
   templatePath?: string
   graphQLType?: string
   schema: ZodSchemaType<TConfiguration>

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

@@ -2,6 +2,7 @@ import {buildThemeExtensions, buildFunctionExtension, buildUIExtensions} from '.
 import buildWeb from './web.js'
 import {installAppDependencies} from './dependencies.js'
 import {AppInterface, Web} from '../models/app/app.js'
+import {showWorkspaceWarning} from '../utilities/app/workspaces-warning.js'
 import {renderConcurrent, renderSuccess} from '@shopify/cli-kit/node/ui'
 import {AbortSignal} from '@shopify/cli-kit/node/abort'
 import {Writable} from 'stream'
@@ -13,10 +14,14 @@ interface BuildOptions {
 }
 
 async function build(options: BuildOptions) {
-  if (!options.skipDependenciesInstallation) {
+  if (!options.skipDependenciesInstallation && !options.app.usesWorkspaces) {
     await installAppDependencies(options.app)
   }
 
+  if (!options.app.usesWorkspaces) {
+    showWorkspaceWarning(options.app.packageManager)
+  }
+
   const env: {SHOPIFY_API_KEY?: string} = {}
   if (options.apiKey) {
     env.SHOPIFY_API_KEY = options.apiKey

packages/app/src/cli/services/dev.ts

@@ -19,6 +19,7 @@ import {getAppIdentifiers} from '../models/app/identifiers.js'
 import {getAnalyticsTunnelType} from '../utilities/analytics.js'
 import {buildAppURLForWeb} from '../utilities/app/app-url.js'
 import {HostThemeManager} from '../utilities/host-theme-manager.js'
+import {showWorkspaceWarning} from '../utilities/app/workspaces-warning.js'
 import {Config} from '@oclif/core'
 import {reportAnalyticsEvent} from '@shopify/cli-kit/node/analytics'
 import {execCLI2} from '@shopify/cli-kit/node/ruby'
@@ -80,10 +81,14 @@ async function dev(options: DevOptions) {
   const specifications = await fetchSpecifications({token, apiKey, config: options.commandConfig})
   let localApp = await load({directory: options.directory, specifications})
 
-  if (!options.skipDependenciesInstallation) {
+  if (!options.skipDependenciesInstallation && !localApp.usesWorkspaces) {
     localApp = await installAppDependencies(localApp)
   }
 
+  if (!localApp.usesWorkspaces) {
+    showWorkspaceWarning(localApp.packageManager)
+  }
+
   const frontendConfig = localApp.webs.find(({configuration}) => configuration.type === WebType.Frontend)
   const backendConfig = localApp.webs.find(({configuration}) => configuration.type === WebType.Backend)
   const webhooksPath = backendConfig?.configuration?.webhooksPath || '/api/webhooks'

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

@@ -1,6 +1,6 @@
 import {
+  addExtensionDependencies,
   generateExtension,
-  getExtensionRuntimeDependencies,
   getFunctionRuntimeDependencies,
   TemplateLanguage,
 } from './extension.js'
@@ -25,7 +25,15 @@ import * as git from '@shopify/cli-kit/node/git'
 import {joinPath, dirname} from '@shopify/cli-kit/node/path'
 import type {ExtensionFlavorValue} from './extension.js'
 
-vi.mock('@shopify/cli-kit/node/node-package-manager')
+// vi.mock('@shopify/cli-kit/node/node-package-manager')
+vi.mock('@shopify/cli-kit/node/node-package-manager', async () => {
+  const actual: any = await vi.importActual('@shopify/cli-kit/node/node-package-manager')
+  return {
+    ...actual,
+    addNPMDependenciesIfNeeded: vi.fn(),
+    addResolutionOrOverride: vi.fn(),
+  }
+})
 
 describe('initialize a extension', async () => {
   const allUISpecs = await loadLocalUIExtensionsSpecifications()
@@ -75,28 +83,14 @@ describe('initialize a extension', async () => {
         appDirectory: tmpDir,
         specifications,
       })
-      const addDependenciesCalls = vi.mocked(addNPMDependenciesIfNeeded).mock.calls
-      expect(addDependenciesCalls.length).toEqual(2)
+
+      expect(vi.mocked(addNPMDependenciesIfNeeded)).toHaveBeenCalledTimes(2)
 
       const loadedApp = await loadApp({directory: tmpDir, specifications})
       const generatedExtension2 = loadedApp.extensions.ui.sort((lhs, rhs) =>
         lhs.directory < rhs.directory ? -1 : 1,
       )[1]!
       expect(generatedExtension2.configuration.name).toBe(name2)
-
-      const firstDependenciesCallArgs = addDependenciesCalls[0]!
-      expect(firstDependenciesCallArgs[0]).toEqual([
-        {name: '@shopify/post-purchase-ui-extensions-react', version: '^0.13.2'},
-      ])
-      expect(firstDependenciesCallArgs[1].type).toEqual('prod')
-      expect(firstDependenciesCallArgs[1].directory).toEqual(loadedApp.directory)
-
-      const secondDependencyCallArgs = addDependenciesCalls[1]!
-      expect(firstDependenciesCallArgs[0]).toEqual([
-        {name: '@shopify/post-purchase-ui-extensions-react', version: '^0.13.2'},
-      ])
-      expect(secondDependencyCallArgs[1].type).toEqual('prod')
-      expect(secondDependencyCallArgs[1].directory).toEqual(loadedApp.directory)
     })
   })
 
@@ -397,42 +391,28 @@ describe('initialize a extension', async () => {
   })
 })
 
-describe('getExtensionRuntimeDependencies', () => {
-  test('no not include React for flavored Vanilla UI extensions', async () => {
-    // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecifications()
-    const extensionFlavor: ExtensionFlavorValue = 'vanilla-js'
-
-    // When/then
-    allUISpecs.forEach((specification) => {
-      const got = getExtensionRuntimeDependencies({specification, extensionFlavor})
-      expect(got.find((dep) => dep.name === 'react' && dep.version === '^17.0.0')).toBeFalsy()
-    })
-  })
-
-  test('includes React for flavored React UI extensions', async () => {
-    // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecifications()
-    const extensionFlavor: ExtensionFlavorValue = 'react'
+describe('addExtensionDependencies', () => {
+  test('copies the prod dependencies from the package.json', async () => {
+    await file.inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const packageJsonPath = joinPath(tmpDir, 'package.json')
+      await file.writeFile(
+        packageJsonPath,
+        JSON.stringify({
+          dependencies: {semver: '7.3.8'},
+        }),
+      )
 
-    // When/then
-    allUISpecs.forEach((specification) => {
-      const got = getExtensionRuntimeDependencies({specification, extensionFlavor})
-      expect(got.find((dep) => dep.name === 'react' && dep.version === '^17.0.0')).toBeTruthy()
-    })
-  })
+      // When
+      await addExtensionDependencies(packageJsonPath, '/app', 'npm')
 
-  test('includes the renderer package for UI extensions', async () => {
-    // Given
-    const allUISpecs = await loadLocalUIExtensionsSpecifications()
-
-    // When/then
-    allUISpecs.forEach((specification) => {
-      const reference = specification.dependency
-      if (reference) {
-        const got = getExtensionRuntimeDependencies({specification})
-        expect(got.find((dep) => dep.name === reference.name && dep.version === reference.version)).toBeTruthy()
-      }
+      // Then
+      expect(vi.mocked(addNPMDependenciesIfNeeded)).toHaveBeenCalledOnce()
+      expect(vi.mocked(addNPMDependenciesIfNeeded)).toHaveBeenNthCalledWith(1, [{name: 'semver', version: '7.3.8'}], {
+        packageManager: 'npm',
+        type: 'prod',
+        directory: '/app',
+      })
     })
   })
 })