diff --git a/.changeset/bright-penguins-think.md b/.changeset/bright-penguins-think.md new file mode 100644 index 00000000000..bb69bb2a7d4 --- /dev/null +++ b/.changeset/bright-penguins-think.md @@ -0,0 +1,5 @@ +--- +'@shopify/theme': patch +--- + +Render progress bar for theme uploads to stderr diff --git a/packages/theme/src/cli/utilities/theme-ui.ts b/packages/theme/src/cli/utilities/theme-ui.ts index 9f0779e57d0..5bd6e534b0e 100644 --- a/packages/theme/src/cli/utilities/theme-ui.ts +++ b/packages/theme/src/cli/utilities/theme-ui.ts @@ -1,5 +1,5 @@ import {Theme} from '@shopify/cli-kit/node/themes/types' -import {renderConfirmationPrompt, renderWarning} from '@shopify/cli-kit/node/ui' +import {Task, renderConfirmationPrompt, renderTasks, renderWarning} from '@shopify/cli-kit/node/ui' export function themeComponent(theme: Theme) { return [ @@ -31,3 +31,10 @@ export async function currentDirectoryConfirmed(force: boolean) { message: 'Do you want to proceed?', }) } + +// This prevents the progress bar from polluting stdout (important for pipe operations) +export async function renderTasksToStdErr(tasks: Task[]) { + if (tasks.length > 0) { + await renderTasks(tasks, {renderOptions: {stdout: process.stderr}}) + } +} diff --git a/packages/theme/src/cli/utilities/theme-uploader.ts b/packages/theme/src/cli/utilities/theme-uploader.ts index 431bbba6371..c5997088b10 100644 --- a/packages/theme/src/cli/utilities/theme-uploader.ts +++ b/packages/theme/src/cli/utilities/theme-uploader.ts @@ -1,10 +1,11 @@ import {partitionThemeFiles, readThemeFilesFromDisk} from './theme-fs.js' import {applyIgnoreFilters} from './asset-ignore.js' +import {renderTasksToStdErr} from './theme-ui.js' import {AdminSession} from '@shopify/cli-kit/node/session' import {Result, Checksum, Theme, ThemeFileSystem} from '@shopify/cli-kit/node/themes/types' import {AssetParams, bulkUploadThemeAssets, deleteThemeAsset} from '@shopify/cli-kit/node/themes/api' import {fileSize} from '@shopify/cli-kit/node/fs' -import {Task, renderTasks as renderTaskOriginal} from '@shopify/cli-kit/node/ui' +import {Task} from '@shopify/cli-kit/node/ui' import {outputDebug, outputInfo, outputNewline, outputWarn} from '@shopify/cli-kit/node/output' interface UploadOptions { @@ -33,8 +34,8 @@ export async function uploadTheme( const uploadTasks = await buildUploadTasks(remoteChecksums, themeFileSystem, options, theme, session, uploadResults) // The task execution mechanism processes tasks sequentially in the order they are added. - await renderTasks(deleteTasks) - await renderTasks(uploadTasks) + await renderTasksToStdErr(deleteTasks) + await renderTasksToStdErr(uploadTasks) reportFailedUploads(uploadResults) return uploadResults @@ -321,12 +322,6 @@ async function handleFailedUploads( return handleBulkUpload(failedUploadParams, themeId, session, count + 1) } -async function renderTasks(tasks: Task[]) { - if (tasks.length > 0) { - await renderTaskOriginal(tasks, {renderOptions: {stdout: process.stderr}}) - } -} - function reportFailedUploads(uploadResults: Map) { for (const [key, result] of uploadResults.entries()) { if (!result.success) {