Bundling and uploading for functions

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

@@ -28,8 +28,7 @@ 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'
 
 export const CONFIG_EXTENSION_IDS = [
@@ -205,6 +204,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,12 +335,14 @@ 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.isThemeExtension && useThemebundling()) {
+    if (this.isFunctionExtension) {
+      await copyFile(this.outputPath, joinPath(bundleDirectory, extensionId, 'index.wasm'))
+    }
+    if (this.isThemeExtension) {
       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,8 @@ 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'
+import { stdout } from 'process'
 
 interface BundleOptions {
   app: AppInterface
@@ -49,6 +51,8 @@ export async function bundleAndBuildExtensions(options: BundleOptions, systemEnv
     })
 
     if (options.bundlePath) {
+      const files = readdirSync(bundleDirectory)
+      stdout.write(`files in zipped directory are ${files.toString()} \n`)
       await zip({
         inputDirectory: bundleDirectory,
         outputZipPath: options.bundlePath,

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

@@ -15,6 +15,7 @@ import {partition} from '@shopify/cli-kit/common/collection'
 import {getPackageManager} from '@shopify/cli-kit/node/node-package-manager'
 import {cwd} from '@shopify/cli-kit/node/path'
 import {assertStringMap} from '@shopify/cli-kit/common/ts/json-narrowing'
+import {stdout} from 'process'
 
 interface DeployThemeExtensionOptions {
   /** The application API key */
@@ -131,6 +132,7 @@ export async function uploadExtensionsBundle(
       apiKey: options.apiKey,
       organizationId: options.organizationId,
     })
+    stdout.write(`Uploading bundle to ${signedURL}`)
 
     const form = formData()
     const buffer = readFileSync(options.bundlePath)

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

@@ -171,6 +171,8 @@ export async function runJavy(
 
   const args = ['compile', '-d', '-o', fun.outputPath, 'dist/function.js', ...extra]
 
+  options.stdout.write(`outputpath is ${fun.outputPath}`)
+  options.stdout.write(`Running ${javy.path} ${args.join(' ')}`)
   return exec(javy.path, args, {
     cwd: fun.directory,
     stdout: 'inherit',

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

@@ -73,7 +73,7 @@ export async function logs(commandOptions: LogsOptions) {
       storeNameById: logsConfig.storeNameById,
     })
   } else {
-    consoleLog('Waiting for app logs...\n')
+    consoleLog('I have been Waiting for app logs...\n')
     await renderLogs({
       options: {
         variables,