Skip to content

Commit a10faf5

Browse files
alfonso-noriegaalfonso-noriega
committed
Abstract build steps to externalize the build configuration
1 parent 4feb5ae commit a10faf5

20 files changed

+780
-50
lines changed

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ vi.mock('../../services/build/extension.js', async () => {
3232
return {
3333
...actual,
3434
buildUIExtension: vi.fn(),
35-
buildThemeExtension: vi.fn(),
3635
buildFunctionExtension: vi.fn(),
3736
}
3837
})
@@ -148,8 +147,16 @@ describe('build', async () => {
148147
// Given
149148
const extensionInstance = await testTaxCalculationExtension(tmpDir)
150149
const options: ExtensionBuildOptions = {
151-
stdout: new Writable(),
152-
stderr: new Writable(),
150+
stdout: new Writable({
151+
write(chunk, enc, cb) {
152+
cb()
153+
},
154+
}),
155+
stderr: new Writable({
156+
write(chunk, enc, cb) {
157+
cb()
158+
},
159+
}),
153160
app: testApp(),
154161
environment: 'production',
155162
}

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

Lines changed: 24 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,19 @@ import {PrivacyComplianceWebhooksSpecIdentifier} from './specifications/app_conf
1111
import {WebhooksSpecIdentifier} from './specifications/app_config_webhook.js'
1212
import {WebhookSubscriptionSpecIdentifier} from './specifications/app_config_webhook_subscription.js'
1313
import {EventsSpecIdentifier} from './specifications/app_config_events.js'
14-
import {
15-
ExtensionBuildOptions,
16-
buildFunctionExtension,
17-
buildThemeExtension,
18-
buildUIExtension,
19-
bundleFunctionExtension,
20-
} from '../../services/build/extension.js'
21-
import {bundleThemeExtension, copyFilesForExtension} from '../../services/extensions/bundle.js'
14+
import {ExtensionBuildOptions, bundleFunctionExtension} from '../../services/build/extension.js'
15+
import {bundleThemeExtension} from '../../services/extensions/bundle.js'
2216
import {Identifiers} from '../app/identifiers.js'
2317
import {DeveloperPlatformClient} from '../../utilities/developer-platform-client.js'
2418
import {AppConfiguration} from '../app/app.js'
2519
import {ApplicationURLs} from '../../services/dev/urls.js'
20+
import {executeStep, BuildContext} from '../../services/build/client-steps.js'
2621
import {ok} from '@shopify/cli-kit/node/result'
2722
import {constantize, slugify} from '@shopify/cli-kit/common/string'
2823
import {hashString, nonRandomUUID} from '@shopify/cli-kit/node/crypto'
2924
import {partnersFqdn} from '@shopify/cli-kit/node/context/fqdn'
3025
import {joinPath, normalizePath, resolvePath, relativePath, basename} from '@shopify/cli-kit/node/path'
31-
import {fileExists, touchFile, moveFile, writeFile, glob, copyFile, globSync} from '@shopify/cli-kit/node/fs'
26+
import {fileExists, moveFile, glob, copyFile, globSync} from '@shopify/cli-kit/node/fs'
3227
import {getPathValue} from '@shopify/cli-kit/common/object'
3328
import {outputDebug} from '@shopify/cli-kit/node/output'
3429
import {extractJSImports, extractImportPathsRecursively} from '@shopify/cli-kit/node/import-extractor'
@@ -336,32 +331,26 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
336331
}
337332

338333
async build(options: ExtensionBuildOptions): Promise<void> {
339-
const mode = this.specification.buildConfig.mode
340-
341-
switch (mode) {
342-
case 'theme':
343-
await buildThemeExtension(this, options)
344-
return bundleThemeExtension(this, options)
345-
case 'function':
346-
return buildFunctionExtension(this, options)
347-
case 'ui':
348-
await buildUIExtension(this, options)
349-
// Copy static assets after build completes
350-
return this.copyStaticAssets()
351-
case 'tax_calculation':
352-
await touchFile(this.outputPath)
353-
await writeFile(this.outputPath, '(()=>{})();')
354-
break
355-
case 'copy_files':
356-
return copyFilesForExtension(
357-
this,
358-
options,
359-
this.specification.buildConfig.filePatterns,
360-
this.specification.buildConfig.ignoredFilePatterns,
361-
)
362-
case 'hosted_app_home':
363-
case 'none':
364-
break
334+
const {clientSteps = []} = this.specification
335+
336+
const context: BuildContext = {
337+
extension: this,
338+
options,
339+
stepResults: new Map(),
340+
}
341+
342+
const steps = clientSteps
343+
.filter((lifecycle) => lifecycle.lifecycle === 'deploy')
344+
.flatMap((lifecycle) => lifecycle.steps)
345+
346+
for (const step of steps) {
347+
// eslint-disable-next-line no-await-in-loop
348+
const result = await executeStep(step, context)
349+
context.stepResults.set(step.id, result)
350+
351+
if (!result.success && !step.continueOnError) {
352+
throw new Error(`Build step "${step.name}" failed: ${result.error?.message}`)
353+
}
365354
}
366355
}
367356

‎packages/app/src/cli/models/extensions/specifications/channel.test.ts‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import spec from './channel.js'
2+
import {ExtensionInstance} from '../extension-instance.js'
3+
import {ExtensionBuildOptions} from '../../../services/build/extension.js'
4+
import {describe, expect, test} from 'vitest'
5+
import {inTemporaryDirectory, writeFile, fileExists, mkdir} from '@shopify/cli-kit/node/fs'
6+
import {joinPath} from '@shopify/cli-kit/node/path'
7+
import {Writable} from 'stream'
8+
9+
const SUBDIRECTORY = 'specifications'
10+
11+
describe('channel_config', () => {
12+
describe('clientSteps', () => {
13+
test('uses copy_files mode', () => {
14+
expect(spec.buildConfig.mode).toBe('copy_files')
15+
})
16+
17+
test('has a single copy-files step scoped to the specifications subdirectory', () => {
18+
expect(spec.clientSteps![0]!.steps).toHaveLength(1)
19+
expect(spec.clientSteps![0]!.steps[0]).toMatchObject({
20+
id: 'copy-files',
21+
type: 'include_assets',
22+
config: {
23+
inclusions: [{type: 'pattern', baseDir: SUBDIRECTORY, destination: SUBDIRECTORY}],
24+
},
25+
})
26+
27+
const {include} = (spec.clientSteps![0]!.steps[0]!.config as {inclusions: [{include: string[]}]}).inclusions[0]
28+
29+
expect(include).toEqual(expect.arrayContaining(['**/*.json', '**/*.toml', '**/*.yaml', '**/*.yml', '**/*.svg']))
30+
})
31+
32+
test('config is serializable to JSON', () => {
33+
const serialized = JSON.stringify(spec.clientSteps!)
34+
const deserialized = JSON.parse(serialized)
35+
36+
expect(deserialized[0].steps).toHaveLength(1)
37+
expect(deserialized[0].steps[0].config.inclusions[0].type).toBe('pattern')
38+
})
39+
})
40+
41+
describe('build integration', () => {
42+
test('copies specification files to output, preserving subdirectory structure', async () => {
43+
await inTemporaryDirectory(async (tmpDir) => {
44+
// Given
45+
const extensionDir = joinPath(tmpDir, 'extension')
46+
const specsDir = joinPath(extensionDir, SUBDIRECTORY)
47+
const outputDir = joinPath(tmpDir, 'output')
48+
49+
await mkdir(specsDir)
50+
await mkdir(outputDir)
51+
52+
await writeFile(joinPath(specsDir, 'product.json'), '{}')
53+
await writeFile(joinPath(specsDir, 'order.toml'), '[spec]')
54+
await writeFile(joinPath(specsDir, 'logo.svg'), '<svg/>')
55+
// Root-level files should NOT be copied
56+
await writeFile(joinPath(extensionDir, 'README.md'), '# readme')
57+
await writeFile(joinPath(extensionDir, 'index.js'), 'ignored')
58+
59+
const extension = new ExtensionInstance({
60+
configuration: {name: 'my-channel', type: 'channel'},
61+
configurationPath: '',
62+
directory: extensionDir,
63+
specification: spec,
64+
})
65+
extension.outputPath = outputDir
66+
67+
const buildOptions: ExtensionBuildOptions = {
68+
stdout: new Writable({
69+
write(chunk, enc, cb) {
70+
cb()
71+
},
72+
}),
73+
stderr: new Writable({
74+
write(chunk, enc, cb) {
75+
cb()
76+
},
77+
}),
78+
app: {} as any,
79+
environment: 'production',
80+
}
81+
82+
// When
83+
await extension.build(buildOptions)
84+
85+
// Then — specification files copied with path preserved
86+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'product.json'))).resolves.toBe(true)
87+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'order.toml'))).resolves.toBe(true)
88+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'logo.svg'))).resolves.toBe(true)
89+
90+
// Root-level files not in specifications/ are not copied
91+
await expect(fileExists(joinPath(outputDir, 'README.md'))).resolves.toBe(false)
92+
await expect(fileExists(joinPath(outputDir, 'index.js'))).resolves.toBe(false)
93+
})
94+
})
95+
96+
test('does not copy files with non-matching extensions inside specifications/', async () => {
97+
await inTemporaryDirectory(async (tmpDir) => {
98+
// Given
99+
const extensionDir = joinPath(tmpDir, 'extension')
100+
const specsDir = joinPath(extensionDir, SUBDIRECTORY)
101+
const outputDir = joinPath(tmpDir, 'output')
102+
103+
await mkdir(specsDir)
104+
await mkdir(outputDir)
105+
106+
await writeFile(joinPath(specsDir, 'spec.json'), '{}')
107+
await writeFile(joinPath(specsDir, 'ignored.ts'), 'const x = 1')
108+
await writeFile(joinPath(specsDir, 'ignored.js'), 'const x = 1')
109+
110+
const extension = new ExtensionInstance({
111+
configuration: {name: 'my-channel', type: 'channel'},
112+
configurationPath: '',
113+
directory: extensionDir,
114+
specification: spec,
115+
})
116+
extension.outputPath = outputDir
117+
118+
const buildOptions: ExtensionBuildOptions = {
119+
stdout: new Writable({
120+
write(chunk, enc, cb) {
121+
cb()
122+
},
123+
}),
124+
stderr: new Writable({
125+
write(chunk, enc, cb) {
126+
cb()
127+
},
128+
}),
129+
app: {} as any,
130+
environment: 'production',
131+
}
132+
133+
// When
134+
await extension.build(buildOptions)
135+
136+
// Then
137+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'spec.json'))).resolves.toBe(true)
138+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'ignored.ts'))).resolves.toBe(false)
139+
await expect(fileExists(joinPath(outputDir, SUBDIRECTORY, 'ignored.js'))).resolves.toBe(false)
140+
})
141+
})
142+
})
143+
})

‎packages/app/src/cli/models/extensions/specifications/channel.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,28 @@ const channelSpecificationSpec = createContractBasedModuleSpecification({
1010
mode: 'copy_files',
1111
filePatterns: FILE_EXTENSIONS.map((ext) => joinPath(SUBDIRECTORY_NAME, '**', `*.${ext}`)),
1212
},
13+
clientSteps: [
14+
{
15+
lifecycle: 'deploy',
16+
steps: [
17+
{
18+
id: 'copy-files',
19+
name: 'Copy Files',
20+
type: 'include_assets',
21+
config: {
22+
inclusions: [
23+
{
24+
type: 'pattern',
25+
baseDir: SUBDIRECTORY_NAME,
26+
destination: SUBDIRECTORY_NAME,
27+
include: FILE_EXTENSIONS.map((ext) => `**/*.${ext}`),
28+
},
29+
],
30+
},
31+
},
32+
],
33+
},
34+
],
1335
appModuleFeatures: () => [],
1436
})
1537

‎packages/app/src/cli/models/extensions/specifications/checkout_post_purchase.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ const checkoutPostPurchaseSpec = createExtensionSpecification({
1919
buildConfig: {mode: 'ui'},
2020
getOutputRelativePath: (extension: ExtensionInstance<CheckoutPostPurchaseConfigType>) =>
2121
`dist/${extension.handle}.js`,
22+
clientSteps: [
23+
{
24+
lifecycle: 'deploy',
25+
steps: [
26+
{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
27+
{id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
28+
],
29+
},
30+
],
2231
deployConfig: async (config, _) => {
2332
return {metafields: config.metafields ?? []}
2433
},

‎packages/app/src/cli/models/extensions/specifications/checkout_ui_extension.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ const checkoutSpec = createExtensionSpecification({
2525
appModuleFeatures: (_) => ['ui_preview', 'cart_url', 'esbuild', 'single_js_entry_path', 'generates_source_maps'],
2626
buildConfig: {mode: 'ui'},
2727
getOutputRelativePath: (extension: ExtensionInstance<CheckoutConfigType>) => `dist/${extension.handle}.js`,
28+
clientSteps: [
29+
{
30+
lifecycle: 'deploy',
31+
steps: [
32+
{id: 'bundle-ui', name: 'Bundle UI Extension', type: 'bundle_ui', config: {}},
33+
{id: 'copy-static-assets', name: 'Copy Static Assets', type: 'copy_static_assets', config: {}},
34+
],
35+
},
36+
],
2837
deployConfig: async (config, directory) => {
2938
return {
3039
extension_points: config.extension_points,

0 commit comments

Comments
 (0)