Bundling and uploading for functions

packages/app/src/cli/models/extensions/extension-instance.ts

@@ -28,9 +28,9 @@ import {constantize, slugify} from '@shopify/cli-kit/common/string'
 import {hashString, randomUUID} from '@shopify/cli-kit/node/crypto'
 import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
 import {joinPath} from '@shopify/cli-kit/node/path'
-import {useThemebundling} from '@shopify/cli-kit/node/context/local'
-import {fileExists, touchFile, writeFile} from '@shopify/cli-kit/node/fs'
+import {fileExists, touchFile, writeFile, copyFile} from '@shopify/cli-kit/node/fs'
 import {getPathValue} from '@shopify/cli-kit/common/object'
+import {useThemebundling} from '@shopify/cli-kit/node/context/local'
 
 export const CONFIG_EXTENSION_IDS = [
   AppAccessSpecIdentifier,
@@ -205,6 +205,7 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     apiKey,
     developerPlatformClient,
   }: ExtensionDeployConfigOptions): Promise<{[key: string]: unknown} | undefined> {
+    // To ensure this is not a breaking change we will delete this upload line on a second pass after we've ensured the new file upload process from core is working.
     const {moduleId} = await uploadWasmBlob(this.localIdentifier, this.outputPath, developerPlatformClient)
     return this.specification.deployConfig?.(this.configuration, this.directory, apiKey, moduleId)
   }
@@ -335,11 +336,13 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
 
     if (this.features.includes('bundling')) {
       // Modules that are going to be inclued in the bundle should be built in the bundle directory
-      this.outputPath = joinPath(bundleDirectory, extensionId, outputFile)
+      this.outputPath = this.isFunctionExtension ? this.outputPath : joinPath(bundleDirectory, extensionId, outputFile)
     }
 
     await this.build(options)
-
+    if (this.isFunctionExtension) {
+      await copyFile(this.outputPath, joinPath(bundleDirectory, extensionId, 'index.wasm'))
+    }
     if (this.isThemeExtension && useThemebundling()) {
       await bundleThemeExtension(this, options)
     }

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

@@ -76,7 +76,7 @@ const functionSpec = createExtensionSpecification({
     'pickup_point_delivery_option_generator',
   ],
   schema: FunctionExtensionSchema,
-  appModuleFeatures: (_) => ['function'],
+  appModuleFeatures: (_) => ['function', 'bundling'],
   deployConfig: async (config, directory, apiKey, moduleId) => {
     let inputQuery: string | undefined
     const inputQueryPath = joinPath(directory, 'input.graphql')

packages/app/src/cli/services/deploy.test.ts

@@ -243,7 +243,7 @@ describe('deploy', () => {
     expect(updateAppIdentifiers).toHaveBeenCalledOnce()
   })
 
-  test('uploads the extension bundle with 1 function', async () => {
+  test('uploads the extension bundle with 1 function extension', async () => {
     // Given
     const functionExtension = await testFunctionExtension()
     vi.spyOn(functionExtension, 'preDeployValidation').mockImplementation(async () => {})
@@ -290,7 +290,7 @@ describe('deploy', () => {
       ],
       developerPlatformClient,
       extensionIds: {},
-      bundlePath: undefined,
+      bundlePath: expect.stringMatching(/bundle.zip$/),
       release: true,
     })
     expect(bundleAndBuildExtensions).toHaveBeenCalledOnce()

packages/app/src/cli/services/deploy/bundle.test.ts

@@ -1,5 +1,5 @@
 import {bundleAndBuildExtensions} from './bundle.js'
-import {testApp, testThemeExtensions, testUIExtension} from '../../models/app/app.test-data.js'
+import {testApp, testFunctionExtension, testThemeExtensions, testUIExtension} from '../../models/app/app.test-data.js'
 import {AppInterface} from '../../models/app/app.js'
 import {describe, expect, test, vi} from 'vitest'
 import * as file from '@shopify/cli-kit/node/fs'
@@ -107,4 +107,35 @@ describe('bundleAndBuildExtensions', () => {
       await expect(file.fileExists(bundlePath)).resolves.toBeTruthy()
     })
   })
+
+  test.only('creates a zip file with wasm file in it for a function extension', async () => {
+    await file.inTemporaryDirectory(async (tmpDir: string) => {
+      // Given
+      const bundlePath = joinPath(tmpDir, 'bundle.zip')
+
+      const functionExtension = await testFunctionExtension()
+      const extensionBundleMock = vi.fn().mockImplementation(async (options, bundleDirectory, identifiers) => {
+        file.writeFileSync(joinPath(bundleDirectory, 'index.wasm'), '')
+      })
+      functionExtension.buildForBundle = extensionBundleMock
+      const app = testApp({allExtensions: [functionExtension]})
+
+      const extensions: {[key: string]: string} = {}
+      for (const extension of app.allExtensions) {
+        extensions[extension.localIdentifier] = extension.localIdentifier
+      }
+      const identifiers = {
+        app: 'app-id',
+        extensions,
+        extensionIds: {},
+        extensionsNonUuidManaged: {},
+      }
+
+      // When
+      await bundleAndBuildExtensions({app, identifiers, bundlePath}, {})
+
+      // Then
+      await expect(file.fileExists(bundlePath)).resolves.toBeTruthy()
+    })
+  })
 })

packages/app/src/cli/services/deploy/bundle.ts

@@ -8,6 +8,7 @@ import {joinPath} from '@shopify/cli-kit/node/path'
 import {isTruthy} from '@shopify/cli-kit/node/context/utilities'
 import {renderConcurrent} from '@shopify/cli-kit/node/ui'
 import {Writable} from 'stream'
+import {readdirSync} from 'fs'
 
 interface BundleOptions {
   app: AppInterface
@@ -49,6 +50,7 @@ export async function bundleAndBuildExtensions(options: BundleOptions, systemEnv
     })
 
     if (options.bundlePath) {
+      const files = readdirSync(bundleDirectory)
       await zip({
         inputDirectory: bundleDirectory,
         outputZipPath: options.bundlePath,