Merge pull request #3765 from Shopify/jmeng/renderTaskstoStdErr

Theme Push: Change progress bar writestream to stderr

.changeset/bright-penguins-think.md

@@ -0,0 +1,5 @@
+---
+'@shopify/theme': patch
+---
+
+Render progress bar for theme uploads to stderr

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}})
+  }
+}

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)
-  }
-}
-
 function reportFailedUploads(uploadResults: Map<string, Result>) {
   for (const [key, result] of uploadResults.entries()) {
     if (!result.success) {