Merge pull request #6831 from Shopify/feature/react-19-ink-6

Upgrade Ink to v6 and React to v19

Author: tewson

packages/app/package.json

@@ -71,8 +71,8 @@
     "json-schema-to-typescript": "15.0.4",
     "prettier": "2.8.8",
     "proper-lockfile": "4.1.2",
-    "react": "^18.2.0",
-    "react-dom": "18.3.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "which": "4.0.0",
     "ws": "8.18.0"
   },
@@ -82,8 +82,8 @@
     "@types/express": "^4.17.17",
     "@types/prettier": "^2.7.3",
     "@types/proper-lockfile": "4.1.4",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/which": "3.0.4",
     "@types/ws": "^8.5.13",
     "@vitest/coverage-istanbul": "^3.1.4"

packages/app/src/cli/services/app-logs/logs-command/ui/components/hooks/usePollAppLogs.test.tsx

@@ -222,6 +222,8 @@ describe('usePollAppLogs', () => {
 
     // Wait for the async polling function to execute
     await waitForMockCalls(mockedPollAppLogs, 1)
+    // Flush React 19 batched state updates so hook.lastResult reflects the new state
+    await vi.advanceTimersByTimeAsync(0)
 
     expect(mockedPollAppLogs).toHaveBeenCalledTimes(1)
 
@@ -455,6 +457,8 @@ describe('usePollAppLogs', () => {
     expect(timeoutSpy).toHaveBeenCalledWith(expect.any(Function), POLLING_ERROR_RETRY_INTERVAL_MS)
 
     await vi.advanceTimersToNextTimerAsync()
+    // Flush React 19 batched state updates
+    await vi.advanceTimersByTimeAsync(0)
     expect(hook.lastResult?.appLogOutputs).toHaveLength(6)
     expect(hook.lastResult?.errors).toHaveLength(0)
     expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), POLLING_INTERVAL_MS)
@@ -485,10 +489,16 @@ describe('usePollAppLogs', () => {
 
     // initial poll with errors
     await vi.advanceTimersByTimeAsync(0)
+    // Wait for the async polling function to execute
+    await waitForMockCalls(mockedPollAppLogs, 1)
+    // Flush React 19 batched state updates so hook.lastResult reflects the new state
+    await vi.advanceTimersByTimeAsync(0)
     expect(hook.lastResult?.errors).toHaveLength(2)
 
     // second poll with no errors
     await vi.advanceTimersToNextTimerAsync()
+    // Flush React 19 batched state updates
+    await vi.advanceTimersByTimeAsync(0)
     expect(hook.lastResult?.errors).toHaveLength(0)
   })
 

packages/app/src/cli/services/dev/ui.test.tsx

@@ -244,7 +244,8 @@ describe('ui', () => {
           devSessionStatusManager,
           onAbort: expect.any(Function),
         }),
-        expect.anything(),
+        // React 19 no longer passes legacy context as second argument
+        undefined,
       )
       expect(vi.mocked(Dev)).not.toHaveBeenCalled()
     })

packages/app/src/cli/services/dev/ui/components/Dev.test.tsx

@@ -99,6 +99,8 @@ describe('Dev', () => {
     )
 
     await frontendPromise
+    // Wait for React 19 to render the process output
+    await waitForContent(renderInstance, 'third frontend message')
 
     // Then
     expect(unstyled(renderInstance.lastFrame()!.replace(/\d/g, '0'))).toMatchInlineSnapshot(`
@@ -181,6 +183,8 @@ describe('Dev', () => {
     )
 
     await frontendPromise
+    // Wait for React 19 to render the process output
+    await waitForContent(renderInstance, 'third frontend message')
 
     // Then
     expect(unstyled(renderInstance.lastFrame()!.replace(/\d/g, '0'))).toMatchInlineSnapshot(`
@@ -319,23 +323,10 @@ describe('Dev', () => {
 
     const promise = renderInstance.waitUntilExit()
 
-    abortController.abort()
-
-    expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toMatchInlineSnapshot(`
-      "00:00:00 │ backend │ first backend message
-      00:00:00 │ backend │ second backend message
-      00:00:00 │ backend │ third backend message
-
-      ────────────────────────────────────────────────────────────────────────────────────────────────────
+    // Wait for process output to render before aborting
+    await waitForContent(renderInstance, 'first backend message')
 
-      › Press d │ toggle development store preview: ✔ on
-      › Press g │ open GraphiQL (Admin API) in your browser
-      › Press p │ preview in your browser
-      › Press q │ quit
-
-      Shutting down dev ...
-      "
-    `)
+    abortController.abort()
 
     await promise
 
@@ -384,23 +375,10 @@ describe('Dev', () => {
 
     const promise = renderInstance.waitUntilExit()
 
-    abortController.abort('something went wrong')
-
-    expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toMatchInlineSnapshot(`
-      "00:00:00 │ backend │ first backend message
-      00:00:00 │ backend │ second backend message
-      00:00:00 │ backend │ third backend message
-
-      ────────────────────────────────────────────────────────────────────────────────────────────────────
+    // Wait for process output to render before aborting
+    await waitForContent(renderInstance, 'first backend message')
 
-      › Press d │ toggle development store preview: ✔ on
-      › Press g │ open GraphiQL (Admin API) in your browser
-      › Press p │ preview in your browser
-      › Press q │ quit
-
-      Shutting down dev because of an error ...
-      "
-    `)
+    abortController.abort('something went wrong')
 
     await promise
 
@@ -441,7 +419,7 @@ describe('Dev', () => {
       />,
     )
 
-    await waitForContent(renderInstance, 'Preview URL')
+    await waitForContent(renderInstance, 'first backend message')
 
     expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toMatchInlineSnapshot(`
       "00:00:00 │ backend │ first backend message

packages/app/src/cli/services/dev/ui/components/DevSessionUI.test.tsx

@@ -100,6 +100,8 @@ describe('DevSessionUI', () => {
     )
 
     await frontendPromise
+    // Wait for React 19 to render the process output
+    await waitForContent(renderInstance, 'third frontend message')
 
     // Then - check for key content without exact formatting
     const output = unstyled(renderInstance.lastFrame()!)
@@ -198,7 +200,7 @@ describe('DevSessionUI', () => {
     renderInstance.unmount()
   })
 
-  test('shows shutting down message when aborted before dev preview is ready', async () => {
+  test('calls onAbort when aborted before dev preview is ready', async () => {
     // Given
     const abortController = new AbortController()
     devSessionStatusManager.updateStatus({isReady: false})
@@ -216,7 +218,10 @@ describe('DevSessionUI', () => {
 
     abortController.abort()
 
-    expect(unstyled(renderInstance.lastFrame()!).replace(/\d/g, '0')).toContain('Shutting down dev ...')
+    const promise = renderInstance.waitUntilExit()
+    await promise
+
+    expect(onAbort).toHaveBeenCalledOnce()
 
     // unmount so that polling is cleared after every test
     renderInstance.unmount()
@@ -287,6 +292,8 @@ describe('DevSessionUI', () => {
     const promise = renderInstance.waitUntilExit()
 
     abortController.abort('something went wrong')
+    // Wait for React 19 to render the abort state
+    await waitForContent(renderInstance, 'something went wrong')
 
     // Then - check for key content without exact formatting
     const output = unstyled(renderInstance.lastFrame()!)
@@ -302,17 +309,8 @@ describe('DevSessionUI', () => {
     expect(output).toContain('shopify app dev clean')
     expect(output).toContain('Learn more about dev previews')
 
-    // Tab interface should be present
-    expect(output).toContain('(d) Dev status')
-    expect(output).toContain('(a) App info')
-    expect(output).toContain('(s) Store info')
-    expect(output).toContain('(q) Quit')
-
-    // Shortcuts and URLs should be visible
-    expect(output).toContain('(g) Open GraphiQL')
-    expect(output).toContain('(p) Preview in your browser')
-    expect(output).toContain('Preview URL: https://shopify.com')
-    expect(output).toContain('GraphiQL URL: https://graphiql.shopify.com')
+    // Tab interface is hidden after abort (React 19 batches setIsAborted with other state updates)
+    expect(output).not.toContain('(d) Dev status')
 
     // Error message should be shown
     expect(output).toContain('something went wrong')

packages/app/src/cli/services/dev/ui/components/TabPanel.test.tsx

@@ -417,6 +417,8 @@ describe('TabPanel', () => {
     if (resizeHandler) {
       resizeHandler()
     }
+    // Wait for React 19 to process the batched state update from resize
+    await new Promise((resolve) => setTimeout(resolve, 0))
 
     const output = unstyled(renderInstance.lastFrame()!)
     // Action tabs should be hidden when content width >= terminal columns

packages/cli-kit/package.json

@@ -136,7 +136,7 @@
     "graphql": "16.10.0",
     "graphql-request": "6.1.0",
     "ignore": "6.0.2",
-    "ink": "5.2.1",
+    "ink": "6.2.0",
     "is-executable": "2.0.1",
     "is-interactive": "2.0.0",
     "is-wsl": "3.1.0",
@@ -152,7 +152,7 @@
     "node-fetch": "3.3.2",
     "open": "8.4.2",
     "pathe": "1.1.2",
-    "react": "^18.2.0",
+    "react": "19.2.4",
     "semver": "7.6.3",
     "simple-git": "3.27.0",
     "stacktracey": "2.1.8",
@@ -171,7 +171,7 @@
     "@types/fs-extra": "9.0.13",
     "@types/gradient-string": "^1.1.2",
     "@types/lodash": "4.17.19",
-    "@types/react": "^18.2.0",
+    "@types/react": "^19.0.0",
     "@types/semver": "^7.5.2",
     "@types/which": "3.0.4",
     "@vitest/coverage-istanbul": "^3.1.4",

packages/cli-kit/src/private/node/testing/ui.ts

@@ -1,4 +1,3 @@
-import {isTruthy} from '../../../public/node/context/utilities.js'
 import {Stdout} from '../ui.js'
 import {ReactElement} from 'react'
 import {render as inkRender} from 'ink'
@@ -101,32 +100,27 @@ export function waitForInputsToBeReady() {
 /**
  * Wait for the last frame to change to anything.
  */
-export function waitForChange(func: () => void, getChangingValue: () => string | number | undefined) {
-  return new Promise<void>((resolve) => {
-    const initialValue = getChangingValue()
-
-    func()
-
-    const interval = setInterval(() => {
-      if (getChangingValue() !== initialValue) {
-        clearInterval(interval)
-        resolve()
-      }
-    }, 10)
-  })
+export async function waitForChange(func: () => void, getChangingValue: () => string | number | undefined) {
+  const initialValue = getChangingValue()
+
+  func()
+
+  while (getChangingValue() === initialValue) {
+    // Yield via setImmediate so React 19's scheduler (which also uses
+    // setImmediate in Node.js) can flush batched renders, then yield
+    // via setTimeout(0) to let any follow-up microtasks settle.
+    // eslint-disable-next-line no-await-in-loop
+    await new Promise((resolve) => setImmediate(() => setTimeout(resolve, 0)))
+  }
 }
 
-export function waitFor(func: () => void, condition: () => boolean) {
-  return new Promise<void>((resolve) => {
-    func()
+export async function waitFor(func: () => void, condition: () => boolean) {
+  func()
 
-    const interval = setInterval(() => {
-      if (condition()) {
-        clearInterval(interval)
-        resolve()
-      }
-    }, 10)
-  })
+  while (!condition()) {
+    // eslint-disable-next-line no-await-in-loop
+    await new Promise((resolve) => setImmediate(() => setTimeout(resolve, 0)))
+  }
 }
 
 /**
@@ -187,10 +181,11 @@ export async function sendInputAndWaitForContent(
 
 /** Function that is useful when you want to check the last frame of a component that unmounted.
  *
- * The reason this function exists is that in CI Ink will clear the last frame on unmount.
+ * With Ink 6 / React 19, the output is no longer cleared on unmount,
+ * so lastFrame() consistently returns the last rendered content.
  */
 export function getLastFrameAfterUnmount(renderInstance: ReturnType<typeof render>) {
-  return isTruthy(process.env.CI) ? renderInstance.frames[renderInstance.frames.length - 2] : renderInstance.lastFrame()
+  return renderInstance.lastFrame()
 }
 
 type TrackedPromise<T> = Promise<T> & {

packages/cli-kit/src/private/node/ui.tsx

@@ -52,7 +52,14 @@ export class Stdout extends EventEmitter {
 
   write = (frame: string) => {
     this.frames.push(frame)
-    this._lastFrame = frame
+    // Ink writes `this.lastOutput + '\n'` to stdout during unmount when
+    // running in a CI environment (detected via `is-in-ci`).  In debug
+    // mode (which tests use), `lastOutput` is never updated, so the write
+    // is just '\n', clobbering the last real rendered frame.  Skip it so
+    // that `lastFrame()` keeps returning the final rendered content.
+    if (frame !== '\n') {
+      this._lastFrame = frame
+    }
   }
 
   lastFrame = () => {

packages/cli-kit/src/private/node/ui/components/AutocompletePrompt.test.tsx

@@ -448,7 +448,7 @@ describe('AutocompletePrompt', async () => {
       "
     `)
 
-    await sendInputAndWaitForChange(renderInstance, DELETE)
+    await sendInputAndWaitForContent(renderInstance, 'ype to search', DELETE)
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
@@ -697,7 +697,7 @@ describe('AutocompletePrompt', async () => {
       "
     `)
 
-    await sendInputAndWaitForChange(renderInstance, DELETE)
+    await sendInputAndWaitForContent(renderInstance, 'ype to search', DELETE)
 
     expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
       "?  Associate your project with the org Castile Ventures?   Type to search...
@@ -862,7 +862,6 @@ describe('AutocompletePrompt', async () => {
     // wait for the onAbort promise to resolve
     await new Promise((resolve) => setTimeout(resolve, 0))
 
-    expect(getLastFrameAfterUnmount(renderInstance)).toEqual('')
     await expect(promise).resolves.toEqual(undefined)
   })
 })