feat(react-query): use commander.js to provide an improved CLI

[gwansikk]

Overview

We provide a better CLI UX by using commander.js.

Usage

~/git/@Playgournd/pnpm » npx suspensive-react-query
Usage: @suspensive/react-query [options] [command]

Useful helpers for @tanstack/react-query with suspense

Options:
  -v, --version     display the current version
  -h, --help        display help for command

Commands:
  status            Check the compatibility status of the current version
  switch <version>  Switch to a specific version of @suspensive/react-query
  fix               Fix the compatibility issues
  help [command]    display help for command

Users who have installed the package can access the CLI via npx. The current interfaces provided are

• version
• status
• switch
• fix
• help

version

~/git/@Playgournd/pnpm » npx suspensive-react-query -v
2.2.3

status

When @suspensive/react-query and @tanstack/react-query are set to compatible versions.

~/git/@Playgournd/pnpm » npx suspensive-react-query status
[@suspensive/react-query] v2.2.3 (@suspensive/react-query-4)
[@tanstack/react-query] v4.36.1

The versions are compatible.

If @suspensive/react-query and @tanstack/react-query are set to incompatible versions,

~/git/@Playgournd/pnpm » npx suspensive-react-query status
[@suspensive/react-query] v2.2.3 (@suspensive/react-query-5)
[@tanstack/react-query] v4.36.1

The version of @suspensive/react-query is not compatible with the current version of @tanstack/react-query. 
Please run 'npx suspensive-react-query switch 5' to switch to the compatible version.

switch

~/git/@Playgournd/pnpm » npx suspensive-react-query switch 5
[@suspensive/react-query] switched to version v5

fix

Usage: @suspensive/react-query fix [options]

Fix the compatibility issues

Options:
  -h, --help  display help for command

The fix command switches to the appropriate @suspensive/react-query-x version for the current environment.

help

~/git/@Playgournd/pnpm » npx suspensive-react-query help switch                                                                     gwansikk@gwansik-MacBookPro
Usage: @suspensive/react-query switch [options] <version>

Switch to a specific version of @suspensive/react-query

Arguments:
  version     Switches the version of @suspensive/react-query

Options:
  -h, --help  display help for command

PR Checklist

• [x] I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 6:05pm
v1.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 6:05pm
visualization.suspensive.org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2024 6:05pm

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 5c4fe759d4bbab0c6c2bc2e071feb749be42e3a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | ----------------------- | ----- | | @suspensive/react-query | Minor | | @suspensive/react | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq[bot]]

CodSpeed Performance Report

Merging #976 will create unknown performance changes

_{Comparing react-query/feat/commander (5c4fe75) with main (cfd09f5)}

Summary

:warning: No benchmarks were detected in both the base of the PR and the PR.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 80.88%. Comparing base (cfd09f5) to head (5c4fe75).

Additional details and impacted files

[](https://app.codecov.io/gh/toss/suspensive/pull/976?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) ```diff @@ Coverage Diff @@ ## main #976 +/- ## ======================================= Coverage 80.88% 80.88% ======================================= Files 38 38 Lines 450 450 Branches 98 99 +1 ======================================= Hits 364 364 Misses 77 77 Partials 9 9 ``` | [Components](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | Coverage Δ | | |---|---|---| | [@suspensive/react](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `97.03% <ø> (ø)` | | | [@suspensive/react-query](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `∅ <ø> (∅)` | | | [@suspensive/react-query-4](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-query-5](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `0.00% <ø> (ø)` | | | [@suspensive/react-await](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `100.00% <ø> (ø)` | | | [@suspensive/react-image](https://app.codecov.io/gh/toss/suspensive/pull/976/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=toss) | `23.52% <ø> (ø)` | |

[gwansikk]

@manudeli

Related: https://github.com/toss/suspensive/pull/976#discussion_r1655064350

We need to retrieve the version of @suspensive/react-query-x that is set (switched) in the environment to check if it is compatible with the dependencies of @tanstack/react-query.

• We cannot dynamically retrieve the package.json of @suspensive/react-query-x exported from @suspensive/react-query/dist/index.js.
• Users cannot access @suspensive/react-query-4 or @suspensive/react-query-5 in their environment.

For these reasons, I had to use variables and implemented it as follows:

import packageJson from '@suspensive/react-query-4/package.json'

const packageName = packageJson.name

export * from '@suspensive/react-query-4'
export { packageName }

Originally, I was exporting the entire packageJson, but I minimized it to only export the packageName since it is not necessary to expose the entire packageJson to the user. This allows for dynamic compatibility checks in the user environment.

[manudeli]

@gwansikk I should double check this work before releasing. wait a moment!

[manudeli]

When I use this package in examples/next-streaming-react-query, I met this error

Error: EISDIR: illegal operation on a directory, read

[manudeli]

Ah... because of my unnecessary folder..!