feat(react-query): more descriptions for cli status (#1024)

# Overview

I've added you as a co-author! @juno7803 
Thank you for your valuable feedback! Thanks to you, the explanation has
become even better.

I have made the API display static for now. In the next version, I will
make it dynamic to list and display the APIs.
#1000 (comment)

| version 4 | version 5|
| --- | --- |
|<img width="472" alt="image"
src="https://github.com/toss/suspensive/assets/39869096/2e4e4adf-c2db-4b19-bab4-e847075aae09">|<img
width="475" alt="image"
src="https://github.com/toss/suspensive/assets/39869096/1a5f6afa-d2a5-498b-99f6-a10049ea3fd1">|

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

---------

Co-authored-by: Jun <[email protected]>

.changeset/tasty-pets-play.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react-query": minor
+---
+
+feat(react-query): more descriptions for cli status

packages/react-query/src/scripts/cli.spec.ts

@@ -1,7 +1,7 @@
 import { execFileSync } from 'child_process'
 import path from 'path'
-import tanstackReactQueryPackageJson from '@tanstack/react-query/package.json'
 import packageJson from '../../package.json'
+import { version4APIs } from './utils/commands'
 
 const cliPath = path.resolve(__dirname, '../../dist/scripts/cli.cjs')
 
@@ -21,9 +21,16 @@ describe('cli', () => {
   it('should display the status of the packages', () => {
     const result = execFileSync('node', [cliPath, 'status']).toString()
 
+    expect(result).toContain('Suspensive React Query status:')
     expect(result).toContain(
-      `[@suspensive/react-query] v${packageJson.version} (4)\n[@tanstack/react-query] v${tanstackReactQueryPackageJson.version}`
+      `@suspensive/react-query@${packageJson.version} export @suspensive/react-query-4's interfaces`
     )
+
+    version4APIs.forEach((api) => {
+      expect(result).toContain(`  - ${api}`)
+    })
+
+    expect(result).toContain('\nThe versions are compatible.')
   })
 
   it('should switch to the specified version when using the switch command', () => {

packages/react-query/src/scripts/utils/commands.spec.ts

@@ -2,7 +2,14 @@ import fs from 'fs'
 import path from 'path'
 import type { Mock, MockInstance } from 'vitest'
 import packageJson from '../../../package.json'
-import { fixAction, getSuspensiveReactQueryVersion, statusAction, switchAction } from './commands'
+import {
+  fixAction,
+  getSuspensiveReactQueryVersion,
+  statusAction,
+  switchAction,
+  version4APIs,
+  version5APIs,
+} from './commands'
 import * as packageUtils from './package'
 import { switchVersion } from './switchVersion'
 
@@ -50,17 +57,42 @@ describe('commands', () => {
   })
 
   describe('statusAction', () => {
-    it('should display the status correctly when versions are compatible', () => {
+    it('should display the status correctly when versions are compatible (version 4)', () => {
       vi.mocked(fs.readFileSync).mockReturnValue(`export * from '@suspensive/react-query-4'`)
+      const getTanStackReactQueryPackageJsonMock = packageUtils.getTanStackReactQueryPackageJson as Mock
+      getTanStackReactQueryPackageJsonMock.mockReturnValue({ version: '4.0.0' })
 
       statusAction()
 
       expect(consoleWarnSpy).toHaveBeenCalledWith(`"suspensive-react-query status" is experimental feature`)
-      expect(consoleLogSpy).toHaveBeenCalledWith('[@suspensive/react-query]', `v${packageJson.version}`, `(4)`)
-      expect(consoleLogSpy).toHaveBeenCalledWith('[@tanstack/react-query]', `v${tanStackReactQueryPackageJson.version}`)
+      expect(consoleLogSpy).toHaveBeenCalledWith('\nSuspensive React Query status:')
+      expect(consoleLogSpy).toHaveBeenCalledWith(
+        `@suspensive/react-query@${packageJson.version} export @suspensive/react-query-4's interfaces`
+      )
+      version4APIs.forEach((api) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(`  - ${api}`)
+      })
+      expect(consoleLogSpy).toHaveBeenCalledWith(`@tanstack/react-query@${tanStackReactQueryPackageJson.version}`)
       expect(consoleLogSpy).toHaveBeenCalledWith('\nThe versions are compatible.')
     })
 
+    it('should display the status correctly when versions are compatible (version 5)', () => {
+      vi.mocked(fs.readFileSync).mockReturnValue(`export * from '@suspensive/react-query-5'`)
+      const getTanStackReactQueryPackageJsonMock = packageUtils.getTanStackReactQueryPackageJson as Mock
+      getTanStackReactQueryPackageJsonMock.mockReturnValue({ version: '5.0.0' })
+
+      statusAction()
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(`"suspensive-react-query status" is experimental feature`)
+      expect(consoleLogSpy).toHaveBeenCalledWith('\nSuspensive React Query status:')
+      expect(consoleLogSpy).toHaveBeenCalledWith(
+        `@suspensive/react-query@${packageJson.version} export @suspensive/react-query-5's interfaces`
+      )
+      version5APIs.forEach((api) => {
+        expect(consoleLogSpy).toHaveBeenCalledWith(`  - ${api}`)
+      })
+    })
+
     it('should display incompatible versions message (suspensive 5, tanstack 4)', () => {
       vi.mocked(fs.readFileSync).mockReturnValue(`export * from '@suspensive/react-query-5'`)
 

packages/react-query/src/scripts/utils/commands.ts

@@ -3,6 +3,19 @@ import path from 'path'
 import { getPackageJson, getTanStackReactQueryPackageJson } from './package'
 import { switchVersion } from './switchVersion'
 
+export const version5APIs = ['SuspenseQuery', 'SuspenseQueries', 'SuspenseInfiniteQuery', 'QueryErrorBoundary']
+
+export const version4APIs = [
+  'useSuspenseQuery',
+  'useSuspenseQueries',
+  'useSuspenseInfiniteQuery',
+  'queryOptions',
+  'SuspenseQuery',
+  'SuspenseQueries',
+  'SuspenseInfiniteQuery',
+  'QueryErrorBoundary',
+]
+
 export const getSuspensiveReactQueryVersion = (): string => {
   const indexFileContent = fs.readFileSync(path.join(__dirname, '../../dist/index.js'), 'utf-8')
   return (RegExp(/@suspensive\/react-query-(\d+)/).exec(indexFileContent) || [])[1] || 'not found'
@@ -14,10 +27,17 @@ export const statusAction = () => {
   const packageJson = getPackageJson()
   const tanStackReactQueryPackageJson = getTanStackReactQueryPackageJson()
   const suspensiveReactQueryVersion = getSuspensiveReactQueryVersion()
-
   const tanStackReactQueryMajorVersion = tanStackReactQueryPackageJson.version.split('.')[0]
-  console.log(`[@suspensive/react-query]`, `v${packageJson.version}`, `(${suspensiveReactQueryVersion})`)
-  console.log('[@tanstack/react-query]', `v${tanStackReactQueryPackageJson.version}`)
+
+  console.log('\nSuspensive React Query status:')
+  console.log(
+    `@suspensive/react-query@${packageJson.version} export @suspensive/react-query-${suspensiveReactQueryVersion}'s interfaces`
+  )
+
+  const apis = suspensiveReactQueryVersion === '5' ? version5APIs : version4APIs
+  apis.forEach((api) => console.log(`  - ${api}`))
+
+  console.log(`@tanstack/react-query@${tanStackReactQueryPackageJson.version}`)
 
   if (suspensiveReactQueryVersion === tanStackReactQueryMajorVersion) {
     console.log(`\nThe versions are compatible.`)