Render extension generation tasks to stderr to reduce output noise

amcaplan · amcaplan · commit 7681be7a3856 · 2026-04-14T23:54:46.000+03:00
Render the loading bar to stderr instead of stdout for extension
generation tasks, following the pattern already used by the theme
package's renderTasksToStdErr.

This keeps the animated progress bar out of stdout, which prevents
output flooding in non-TTY environments (CI, AI coding agents) where
Ink's ANSI escape codes can't overwrite previous frames. stderr is
typically still a TTY, so the animation remains visible to interactive
users. Piped commands (e.g. | cat) are also unaffected since only
stdout is piped.

Reverts the previous approach of suppressing the animation at the
LoadingBar component level, which couldn't distinguish between
'pipe to terminal' (animation works fine) and 'output captured as
text' (animation floods).
diff --git a/packages/app/src/cli/services/dependencies.ts b/packages/app/src/cli/services/dependencies.ts
@@ -1,6 +1,6 @@
 import {Project} from '../models/project/project.js'
 import {installNPMDependenciesRecursively} from '@shopify/cli-kit/node/node-package-manager'
-import {renderTasks} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../utilities/app-ui.js'
 
 /**
  * Given a project, it installs its NPM dependencies by traversing
@@ -21,5 +21,5 @@ export async function installAppDependencies(project: Project) {
       },
     },
   ]
-  await renderTasks(tasks)
+  await renderTasksToStdErr(tasks)
 }
diff --git a/packages/app/src/cli/services/deploy.ts b/packages/app/src/cli/services/deploy.ts
@@ -12,7 +12,8 @@ import {Organization, OrganizationApp} from '../models/organization.js'
 import {reloadApp} from '../models/app/loader.js'
 import {ExtensionRegistration} from '../api/graphql/all_app_extension_registrations.js'
 import {getTomls} from '../utilities/app/config/getTomls.js'
-import {renderInfo, renderSuccess, renderTasks, renderConfirmationPrompt, isTTY} from '@shopify/cli-kit/node/ui'
+import {renderInfo, renderSuccess, renderConfirmationPrompt, isTTY} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../utilities/app-ui.js'
 import {mkdir} from '@shopify/cli-kit/node/fs'
 import {joinPath, dirname} from '@shopify/cli-kit/node/path'
 import {outputNewline, outputInfo, formatPackageManagerCommand} from '@shopify/cli-kit/node/output'
@@ -277,7 +278,7 @@ export async function deploy(options: DeployOptions) {
       },
     ]
 
-    await renderTasks(tasks)
+    await renderTasksToStdErr(tasks)
 
     await outputCompletionMessage({
       app,
diff --git a/packages/app/src/cli/services/dev/processes/theme-app-extension.ts b/packages/app/src/cli/services/dev/processes/theme-app-extension.ts
@@ -8,7 +8,8 @@ import {AdminSession, ensureAuthenticatedAdmin} from '@shopify/cli-kit/node/sess
 import {fetchTheme} from '@shopify/cli-kit/node/themes/api'
 import {AbortError} from '@shopify/cli-kit/node/error'
 import {Theme} from '@shopify/cli-kit/node/themes/types'
-import {renderInfo, renderTasks, Task} from '@shopify/cli-kit/node/ui'
+import {renderInfo, Task} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../../utilities/app-ui.js'
 import {initializeDevelopmentExtensionServer, ensureValidPassword, isStorefrontPasswordProtected} from '@shopify/theme'
 import {partnersFqdn, adminFqdn} from '@shopify/cli-kit/node/context/fqdn'
 
@@ -135,7 +136,7 @@ export async function findOrCreateHostTheme(adminSession: AdminSession, theme?:
         },
       },
     ]
-    await renderTasks(tasks)
+    await renderTasksToStdErr(tasks)
   }
 
   if (!hostTheme) {
diff --git a/packages/app/src/cli/services/dev/select-store.ts b/packages/app/src/cli/services/dev/select-store.ts
@@ -10,7 +10,8 @@ import {
 } from '../../api/graphql/convert_dev_to_transfer_disabled_store.js'
 import {ClientName, DeveloperPlatformClient, Paginateable} from '../../utilities/developer-platform-client.js'
 import {sleep} from '@shopify/cli-kit/node/system'
-import {renderInfo, renderTasks} from '@shopify/cli-kit/node/ui'
+import {renderInfo} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../utilities/app-ui.js'
 import {firstPartyDev} from '@shopify/cli-kit/node/context/local'
 import {AbortError, BugError, CancelExecution} from '@shopify/cli-kit/node/error'
 import {outputSuccess} from '@shopify/cli-kit/node/output'
@@ -107,7 +108,7 @@ async function waitForCreatedStore(
       },
     },
   ]
-  await renderTasks(tasks)
+  await renderTasksToStdErr(tasks)
 
   return data
 }
diff --git a/packages/app/src/cli/services/function/build.ts b/packages/app/src/cli/services/function/build.ts
@@ -20,7 +20,7 @@ import {dirname, joinPath} from '@shopify/cli-kit/node/path'
 import {build as esBuild, BuildResult} from 'esbuild'
 import {findPathUp, inTemporaryDirectory, readFile, readFileSync, writeFile} from '@shopify/cli-kit/node/fs'
 import {AbortSignal} from '@shopify/cli-kit/node/abort'
-import {renderTasks} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../utilities/app-ui.js'
 import {pickBy} from '@shopify/cli-kit/common/object'
 import {runWithTimer} from '@shopify/cli-kit/node/metadata'
 import {AbortError} from '@shopify/cli-kit/node/error'
@@ -100,7 +100,7 @@ async function buildJSFunctionWithTasks(
   builder: JavyBuilder,
   deps: BinaryDependencies,
 ) {
-  await renderTasks([
+  await renderTasksToStdErr([
     {
       title: 'Building GraphQL types',
       task: async () => {
diff --git a/packages/app/src/cli/services/generate/extension.ts b/packages/app/src/cli/services/generate/extension.ts
@@ -15,7 +15,7 @@ import {
   readAndParsePackageJson,
 } from '@shopify/cli-kit/node/node-package-manager'
 import {recursiveLiquidTemplateCopy} from '@shopify/cli-kit/node/liquid'
-import {renderTasks} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../utilities/app-ui.js'
 import {downloadGitRepository} from '@shopify/cli-kit/node/git'
 import {fileExists, inTemporaryDirectory, mkdir, moveFile, removeFile, glob} from '@shopify/cli-kit/node/fs'
 import {joinPath, relativizePath} from '@shopify/cli-kit/node/path'
@@ -214,7 +214,7 @@ async function functionExtensionInit({
     })
   }
 
-  await renderTasks(taskList)
+  await renderTasksToStdErr(taskList)
 }
 
 async function uiExtensionInit({
@@ -289,7 +289,7 @@ async function uiExtensionInit({
     },
   })
 
-  await renderTasks(tasks)
+  await renderTasksToStdErr(tasks)
 }
 
 type SrcFileExtension = 'ts' | 'tsx' | 'js' | 'jsx' | 'rs' | 'wasm' | 'liquid' | ''
diff --git a/packages/app/src/cli/services/generate/shop-import/declarative-definitions.ts b/packages/app/src/cli/services/generate/shop-import/declarative-definitions.ts
@@ -25,7 +25,8 @@ import {outputContent, outputInfo, outputToken} from '@shopify/cli-kit/node/outp
 import {TypedDocumentNode} from '@graphql-typed-document-node/core'
 import {Variables} from 'graphql-request'
 import {updateTomlValues} from '@shopify/toml-patch'
-import {renderInfo, renderSingleTask, renderTasks} from '@shopify/cli-kit/node/ui'
+import {renderInfo, renderSingleTask} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../../utilities/app-ui.js'
 import {isEmpty} from '@shopify/cli-kit/common/object'
 
 interface ImportDeclarativeDefinitionsOptions {
@@ -282,7 +283,7 @@ async function loadMetafieldNodes(adminSession: AdminSession): Promise<Metafield
     graphQLOwner: MetafieldOwnerType
   }[] = []
 
-  await renderTasks(
+  await renderTasksToStdErr(
     Object.entries(DCDD_OWNER_TO_GRAPHQL_MAPPING).map(([dcddOwner, graphQLOwner]) => ({
       title: outputContent`Loading ${outputToken.green(dcddOwner)} metafields`,
       task: async () => {
diff --git a/packages/app/src/cli/services/init/init.ts b/packages/app/src/cli/services/init/init.ts
@@ -13,7 +13,8 @@ import {
   UnknownPackageManagerError,
   writePackageJSON,
 } from '@shopify/cli-kit/node/node-package-manager'
-import {renderInfo, renderSuccess, renderTasks, Task} from '@shopify/cli-kit/node/ui'
+import {renderInfo, renderSuccess, Task} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../../utilities/app-ui.js'
 import {parseGitHubRepositoryReference} from '@shopify/cli-kit/node/github'
 import {hyphenate} from '@shopify/cli-kit/common/string'
 import {recursiveLiquidTemplateCopy} from '@shopify/cli-kit/node/liquid'
@@ -192,7 +193,7 @@ async function init(options: InitOptions) {
       },
     )
 
-    await renderTasks(tasks)
+    await renderTasksToStdErr(tasks)
 
     // Ensure the app directory is available before moving the template scaffold
     await ensureAppDirectoryIsAvailable(outputDirectory, hyphenizedName)
diff --git a/packages/app/src/cli/services/release.ts b/packages/app/src/cli/services/release.ts
@@ -7,7 +7,8 @@ import {AppReleaseSchema} from '../api/graphql/app_release.js'
 import {deployOrReleaseConfirmationPrompt} from '../prompts/deploy-release.js'
 import {OrganizationApp} from '../models/organization.js'
 import {DeveloperPlatformClient} from '../utilities/developer-platform-client.js'
-import {renderError, renderSuccess, renderTasks, TokenItem} from '@shopify/cli-kit/node/ui'
+import {renderError, renderSuccess, TokenItem} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from '../utilities/app-ui.js'
 import {AbortSilentError} from '@shopify/cli-kit/node/error'
 
 interface ReleaseOptions {
@@ -82,7 +83,7 @@ export async function release(options: ReleaseOptions) {
 
   const {
     appRelease: {appRelease: release},
-  } = await renderTasks<Context>(tasks)
+  } = await renderTasksToStdErr<Context>(tasks)
 
   const linkAndMessage: TokenItem = [
     {link: {label: versionDetails.versionTag ?? undefined, url: versionDetails.location}},
diff --git a/packages/app/src/cli/utilities/app-ui.ts b/packages/app/src/cli/utilities/app-ui.ts
@@ -0,0 +1,16 @@
+import {Task, renderTasks} from '@shopify/cli-kit/node/ui'
+
+/**
+ * Renders tasks with the progress bar on stderr instead of stdout.
+ * This prevents the animated loading bar from polluting stdout, which is
+ * important for pipe operations and non-TTY environments (CI, AI agents).
+ * stderr is typically still connected to the terminal, so the animation
+ * remains visible to interactive users.
+ *
+ * When stderr is not a TTY (e.g. AI agents that redirect stderr via
+ * `2>&1`), the LoadingBar component automatically shows static output
+ * instead of the animated progress bar.
+ */
+export async function renderTasksToStdErr<TContext>(tasks: Task<TContext>[]): Promise<TContext> {
+  return renderTasks(tasks, {renderOptions: {stdout: process.stderr as unknown as NodeJS.WriteStream}})
+}
diff --git a/packages/app/src/cli/utilities/mkcert.ts b/packages/app/src/cli/utilities/mkcert.ts
@@ -8,7 +8,8 @@ import {fileExists, readFile, writeFile} from '@shopify/cli-kit/node/fs'
 import {outputContent, outputDebug, outputInfo, outputToken} from '@shopify/cli-kit/node/output'
 import {AbortError, BugError} from '@shopify/cli-kit/node/error'
 import which from 'which'
-import {RenderAlertOptions, keypress, renderInfo, renderTasks, renderWarning} from '@shopify/cli-kit/node/ui'
+import {RenderAlertOptions, keypress, renderInfo, renderWarning} from '@shopify/cli-kit/node/ui'
+import {renderTasksToStdErr} from './app-ui.js'
 
 const MKCERT_VERSION = 'v1.4.4'
 const MKCERT_REPO = 'FiloSottile/mkcert'
@@ -164,7 +165,7 @@ export async function generateCertificate({
   let mkcertPath = ''
   let licenseError: RenderAlertOptions | undefined
 
-  await renderTasks([
+  await renderTasksToStdErr([
     {
       title: 'Finding or downloading mkcert binary',
       task: async () => {
diff --git a/packages/cli-kit/src/private/node/ui/components/LoadingBar.test.tsx b/packages/cli-kit/src/private/node/ui/components/LoadingBar.test.tsx
@@ -17,7 +17,6 @@ vi.mock('../../../../public/node/output.js', async () => {
 })
 
 beforeEach(() => {
-  // Default terminal width
   vi.mocked(useLayout).mockReturnValue({
     twoThirds: 53,
     oneThird: 27,
@@ -27,9 +26,9 @@ beforeEach(() => {
 })
 
 /**
- * Creates a Stdout test double simulating a TTY stream (the default for
- * interactive terminals). On real Node streams, `isTTY` is only defined
- * as an own property when the stream IS a TTY — it's absent otherwise.
+ * Creates a Stdout test double simulating a TTY stream.
+ * On real Node streams, isTTY is only present as an own property when the
+ * stream IS a TTY.
  */
 function createTTYStdout(columns = 100) {
   const stdout = new Stdout({columns}) as Stdout & {isTTY: boolean}
@@ -38,23 +37,12 @@ function createTTYStdout(columns = 100) {
 }
 
 /**
- * Creates a Stdout test double simulating a non-TTY environment
- * (piped output, CI without a pseudo-TTY, AI coding agents).
- */
-function createNonTTYStdout(columns = 100) {
-  const stdout = new Stdout({columns}) as Stdout & {isTTY: boolean}
-  stdout.isTTY = false
-  return stdout
-}
-
-/**
- * Renders LoadingBar with a TTY stdout and returns the last frame.
- * Most tests need a TTY to verify the animated progress bar renders.
+ * Renders LoadingBar with a TTY stdout so the animated progress bar renders.
  */
 function renderWithTTY(element: React.ReactElement) {
   const stdout = createTTYStdout()
   const instance = render(element, {stdout})
-  return {lastFrame: stdout.lastFrame, unmount: instance.unmount, stdout}
+  return {lastFrame: stdout.lastFrame, unmount: instance.unmount}
 }
 
 describe('LoadingBar', () => {
@@ -78,7 +66,6 @@ describe('LoadingBar', () => {
 
   test('renders loading bar with hill pattern when shouldDisplayColors returns false', async () => {
     vi.mocked(shouldDisplayColors).mockReturnValue(false)
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Downloading packages" />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -89,7 +76,6 @@ describe('LoadingBar', () => {
 
   test('handles narrow terminal width correctly', async () => {
     vi.mocked(useLayout).mockReturnValue({twoThirds: 20, oneThird: 10, fullWidth: 30})
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Building app" />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -100,7 +86,6 @@ describe('LoadingBar', () => {
 
   test('handles narrow terminal width correctly in no-color mode', async () => {
     vi.mocked(useLayout).mockReturnValue({twoThirds: 15, oneThird: 8, fullWidth: 23})
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Installing" noColor />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -111,7 +96,6 @@ describe('LoadingBar', () => {
 
   test('handles very narrow terminal width in no-color mode', async () => {
     vi.mocked(useLayout).mockReturnValue({twoThirds: 5, oneThird: 3, fullWidth: 8})
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Wait" noColor />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -122,7 +106,6 @@ describe('LoadingBar', () => {
 
   test('handles wide terminal width correctly', async () => {
     vi.mocked(useLayout).mockReturnValue({twoThirds: 100, oneThird: 50, fullWidth: 150})
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Synchronizing data" />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -133,7 +116,6 @@ describe('LoadingBar', () => {
 
   test('handles wide terminal width correctly in no-color mode with pattern repetition', async () => {
     vi.mocked(useLayout).mockReturnValue({twoThirds: 90, oneThird: 45, fullWidth: 135})
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Analyzing dependencies" noColor />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -153,7 +135,6 @@ describe('LoadingBar', () => {
 
   test('noColor prop overrides shouldDisplayColors when both would show colors', async () => {
     vi.mocked(shouldDisplayColors).mockReturnValue(true)
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="Testing override" noColor />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`
@@ -164,7 +145,6 @@ describe('LoadingBar', () => {
 
   test('renders consistently with same props', async () => {
     const props = {title: 'Consistent test', noColor: false}
-
     const {lastFrame: frame1} = renderWithTTY(<LoadingBar {...props} />)
     const {lastFrame: frame2} = renderWithTTY(<LoadingBar {...props} />)
 
@@ -173,41 +153,23 @@ describe('LoadingBar', () => {
 
   test('hides progress bar when noProgressBar is true', async () => {
     vi.mocked(shouldDisplayColors).mockReturnValue(true)
-
     const {lastFrame} = renderWithTTY(<LoadingBar title="task 1" noProgressBar />)
 
     expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`"task 1 ..."`)
   })
 
-  test('renders only title text without animated progress bar in non-TTY environments', async () => {
-    const stdout = createNonTTYStdout()
-
-    const renderInstance = render(<LoadingBar title="Installing dependencies" />, {stdout})
+  test('shows only static title text when output stream is not a TTY', async () => {
+    // Default test Stdout has no isTTY property, simulating a non-TTY stream
+    const {lastFrame} = render(<LoadingBar title="Installing dependencies" />)
 
-    expect(unstyled(stdout.lastFrame()!)).toMatchInlineSnapshot(`"Installing dependencies ..."`)
-    renderInstance.unmount()
+    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`"Installing dependencies ..."`)
   })
 
-  test('renders only title text in non-TTY even when noColor and noProgressBar are not set', async () => {
-    const stdout = createNonTTYStdout()
-    vi.mocked(shouldDisplayColors).mockReturnValue(true)
-
-    const renderInstance = render(<LoadingBar title="Generating extension" />, {stdout})
-
-    expect(unstyled(stdout.lastFrame()!)).toMatchInlineSnapshot(`"Generating extension ..."`)
-    renderInstance.unmount()
-  })
-
-  test('keeps animated progress bar when Ink renders to a TTY stream (e.g. renderTasksToStdErr)', async () => {
-    // renderTasksToStdErr passes process.stderr as Ink's stdout option.
-    // useStdout() returns that stream, so the TTY check uses the correct stream.
-    const ttyStream = createTTYStdout()
-
-    const renderInstance = render(<LoadingBar title="Uploading theme" />, {stdout: ttyStream})
+  test('shows animated progress bar when output stream is a TTY', async () => {
+    const {lastFrame} = renderWithTTY(<LoadingBar title="Uploading theme" />)
 
-    const frame = unstyled(ttyStream.lastFrame()!)
+    const frame = unstyled(lastFrame()!)
     expect(frame).toContain('▀')
     expect(frame).toContain('Uploading theme ...')
-    renderInstance.unmount()
   })
 })
diff --git a/packages/cli-kit/src/private/node/ui/components/LoadingBar.tsx b/packages/cli-kit/src/private/node/ui/components/LoadingBar.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import {Project} from '../models/project/project.js'`
`2`	`2`	`import {installNPMDependenciesRecursively} from '@shopify/cli-kit/node/node-package-manager'`
`3`		`-import {renderTasks} from '@shopify/cli-kit/node/ui'`
	`3`	`+import {renderTasksToStdErr} from '../utilities/app-ui.js'`
`4`	`4`
`5`	`5`	`/**`
`6`	`6`	`* Given a project, it installs its NPM dependencies by traversing`
`@@ -21,5 +21,5 @@ export async function installAppDependencies(project: Project) {`
`21`	`21`	`},`
`22`	`22`	`},`
`23`	`23`	`]`
`24`		`- await renderTasks(tasks)`
	`24`	`+ await renderTasksToStdErr(tasks)`
`25`	`25`	`}`