Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react-query): universal react-query for suspensive 4 and 5 #953

Merged
merged 2 commits into from
Jun 21, 2024

Conversation

gwansikk
Copy link
Collaborator

@gwansikk gwansikk commented Jun 20, 2024

Summary

@suspensive/react-query now automatically identifies the installed version of @tanstack/react-query and uses either @suspensive/react-query-4 or @suspensive/react-query-5 accordingly.

How it works

The mechanism for identifying the version of @tanstack/react-query and selecting the appropriate @suspensive/react-query-x to use is similar to vue-demi.

When @suspsensive/react-query is added as a dependency, the postinstall script fetches the version of @tanstack/react-query and overlays the build files of @suspensive/react-query-x at the entry point (build root) to ensure the appropriate version is used.

// package.json
// ...
"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "require": {
      "types": "./dist/index.d.cts",
      "default": "./dist/index.cjs"
    }
  },
  "./package.json": "./package.json"
},
// ...
"postinstall": "node -e \"import('./scripts/postinstall.js').catch(e => console.error(e))\""
// ...

The postinstall.js script is executed during the postinstall process.

// script/postinstall.js
import { loadModule, switchVersion } from './utils.js'

const reactQueryPackageJson = loadModule('@tanstack/react-query/package.json')
const version = reactQueryPackageJson?.version

if (!version || typeof version !== 'string') {
  console.warn('@tanstack/react-query is not found.')
} else if (version.startsWith('4.')) {
  switchVersion(4)
} else if (version.startsWith('5.')) {
  switchVersion(5)
} else {
  console.warn('[@suspensive/react-query]', `version v${version} is not supported.`)
}

This script fetches the installed @tanstack/react-query/package.json, checks the version, and copies the corresponding @suspensive/react-query-x files to the library's root.

suspensive/packages/react-query/dist
# --- Library entry point
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
# ---
├── v4
# --- Copy files from this folder to the entry point if @tanstack/react-query@4 is detected
|  ├── index.cjs
|  ├── index.cjs.map
|  ├── index.d.cts
|  ├── index.d.ts
|  ├── index.js
|  └── index.js.map
# ---
└── v5
# --- Copy files from this folder to the entry point if @tanstack/react-query@5 is detected
   ├── index.cjs
   ├── index.cjs.map
   ├── index.d.cts
   ├── index.d.ts
   ├── index.js
   └── index.js.map

By following this process, @suspensive/react-query automatically uses the appropriate version upon installation.

When added as a dependency, the version switching happens automatically as shown in the logs below:

# case1: @tanstack/react-query@4
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v4
└─ Done in 56ms

# case2: @tanstack/react-query@5
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v5
└─ Done in 56ms

Field Test

These tests were conducted in isolated environments using ~.tgz.
In all environments, @suspensive/react": "^2.1.2-beta.0 was used consistently, and versions 4 and 5 of @tanstack/react-query were tested.

  • pnpm@9.4.0 ✅
  • yarn@v1.22.22 ✅
  • yarn berry@4.3.0 (pnp) ✅
  • pnpm@9.4.9 (monorepo) ✅

CLI

In typical environments (single repo), the version switches automatically. However, for special cases, we have created the suspensive-react-query-switch script, which forces the switching of @suspensive/react-query-x.

npx suspensive-react-query-switch
[@suspensive/react-query], expecting version "4" or "5""

npx suspensive-react-query-switch 4
[@suspensive/react-query] set version to v4

Although it works in most environments, it does not work in the following case:

  • The CLI does not work properly in a monorepo environment. ⚠️
  • The CLI does not work properly in a yarn-berry (pnp) environment. ⚠️

@gwansikk gwansikk self-assigned this Jun 20, 2024
Copy link

vercel bot commented Jun 20, 2024

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 21, 2024 7:24am
v1.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 21, 2024 7:24am
visualization.suspensive.org ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 21, 2024 7:24am

Copy link

changeset-bot bot commented Jun 20, 2024

🦋 Changeset detected

Latest commit: 53c0056

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 Patch
@suspensive/react Patch

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

@gwansikk gwansikk marked this pull request as draft June 20, 2024 15:44
@gwansikk
Copy link
Collaborator Author

gwansikk commented Jun 20, 2024

Dependency Log

WARNIssues with peer dependencies found
// case1: @tanstack/react-query@4
packages/project-one
└─┬ @suspensive/react-query 2.1.2-beta.0
  └─┬ @suspensive/react-query-5 0.0.1-beta.0
    └──  unmet peer @tanstack/react-query@^5: found 4.36.1

// case2: @tanstack/react-query@5
packages/project-two
└─┬ @suspensive/react-query 2.1.2-beta.0
  └─┬ @suspensive/react-query-4 0.0.1-beta.0
    └──  unmet peer @tanstack/react-query@^4: found 5.45.1

When users install version 4 or 5 of @tanstack/react-query, the logs above are generated. While this does not affect development or builds, it might confuse users.

Copy link

codspeed-hq bot commented Jun 20, 2024

CodSpeed Performance Report

Merging #953 will create unknown performance changes

Comparing react-query/feat/universal (53c0056) with beta (0ce2c79)

Summary

⚠️ No benchmarks were detected in both the base of the PR and the PR.

@gwansikk
Copy link
Collaborator Author

/// src/index.ts
export * from '@suspensive/react-query-4'

By default, we have configured it to use the @suspensive/react-query-4 version since existing suspensive users are using v4.

export * from './4'

We did not specify it this way to avoid unnecessary chunks during the switching process.

suspensive/packages/react-query/dist
├── chunk-LA4U6BAL.js
├── chunk-LA4U6BAL.js.map
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
├── output.txt
├── v4
└── v5

As shown above, chunks are created, and if switched to v5, these chunks become unused and unnecessary files.

@gwansikk gwansikk marked this pull request as ready for review June 21, 2024 07:08
Copy link
Member

@manudeli manudeli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's modify the dependency of examples/next-streaming-react-query on @suspensive/react-query instead of @suspensive/react-query-5 later. We hope that this will ensure that our intentions work for each project.

Comment on lines +1 to +3
#!/usr/bin/env node
'use strict'
import '../scripts/switch.js'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion, it seems possible to change to TypeScript. Let's try this in the next version.

Comment on lines +43 to +44
"bin",
"scripts"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When trying to change to a TypeScript file, I think it is possible to do all the work in src and put all bin and scripts files in dist.

Suggested change
"bin",
"scripts"

packages/react-query/package.json Show resolved Hide resolved
@manudeli manudeli merged commit 8d8a2d6 into beta Jun 21, 2024
14 checks passed
@manudeli manudeli deleted the react-query/feat/universal branch June 21, 2024 11:13
manudeli pushed a commit that referenced this pull request Jun 21, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`beta` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `beta`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @suspensive/react-query@2.1.2-beta.1

### Patch Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

-   Updated dependencies \[]:
    -   @suspensive/react@2.1.2-beta.1
    -   @suspensive/react-query-4@0.0.1-beta.0
    -   @suspensive/react-query-5@0.0.1-beta.0

## @suspensive/react@2.1.2-beta.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@github-actions github-actions bot mentioned this pull request Jun 23, 2024
manudeli pushed a commit that referenced this pull request Jun 23, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.


# Releases
## @suspensive/react-query@2.2.0

### Minor Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

- Updated dependencies
\[[`2fd8108`](2fd8108)]:
    -   @suspensive/react-query-4@0.0.1
    -   @suspensive/react-query-5@0.0.1
    -   @suspensive/react@2.2.0

## @suspensive/react-query-4@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react-query-5@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react@2.2.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
manudeli added a commit that referenced this pull request Aug 3, 2024
# Summary

`@suspensive/react-query` now automatically identifies the installed
version of `@tanstack/react-query` and uses either
`@suspensive/react-query-4` or `@suspensive/react-query-5` accordingly.

# Roadmaps

> This is the list of remaining tasks. It may be added to or revised.

- [x] Core 
- [x] Field Test
- [ ] CLI ⚠️
- [ ] Dependency Log
([comment](#953 (comment)))

# How it works

The mechanism for identifying the version of `@tanstack/react-query` and
selecting the appropriate `@suspensive/react-query-x` to use is similar
to `vue-demi`.

- https://github.com/vueuse/vue-demi

When `@suspsensive/react-query` is added as a dependency, the
`postinstall` script fetches the version of `@tanstack/react-query` and
overlays the build files of `@suspensive/react-query-x` at the entry
point (build root) to ensure the appropriate version is used.

```json
// package.json
// ...
"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "require": {
      "types": "./dist/index.d.cts",
      "default": "./dist/index.cjs"
    }
  },
  "./package.json": "./package.json"
},
// ...
"postinstall": "node -e \"import('./scripts/postinstall.js').catch(e => console.error(e))\""
// ...
```

The `postinstall.js` script is executed during the `postinstall`
process.

```jsx
// script/postinstall.js
import { loadModule, switchVersion } from './utils.js'

const reactQueryPackageJson = loadModule('@tanstack/react-query/package.json')
const version = reactQueryPackageJson?.version

if (!version || typeof version !== 'string') {
  console.warn('@tanstack/react-query is not found.')
} else if (version.startsWith('4.')) {
  switchVersion(4)
} else if (version.startsWith('5.')) {
  switchVersion(5)
} else {
  console.warn('[@suspensive/react-query]', `version v${version} is not supported.`)
}
```

This script fetches the installed `@tanstack/react-query/package.json`,
checks the version, and copies the corresponding
`@suspensive/react-query-x` files to the library's root.

```bash
suspensive/packages/react-query/dist
# --- Library entry point
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
# ---
├── v4
# --- Copy files from this folder to the entry point if @tanstack/react-query@4 is detected
|  ├── index.cjs
|  ├── index.cjs.map
|  ├── index.d.cts
|  ├── index.d.ts
|  ├── index.js
|  └── index.js.map
# ---
└── v5
# --- Copy files from this folder to the entry point if @tanstack/react-query@5 is detected
   ├── index.cjs
   ├── index.cjs.map
   ├── index.d.cts
   ├── index.d.ts
   ├── index.js
   └── index.js.map
```

By following this process, `@suspensive/react-query` automatically uses
the appropriate version upon installation.

When added as a dependency, the version switching happens automatically
as shown in the logs below:

```bash
# case1: @tanstack/react-query@4
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v4
└─ Done in 56ms

# case2: @tanstack/react-query@5
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v5
└─ Done in 56ms
```

# Field Test

> These tests were conducted in isolated environments using `~.tgz`.
In all environments, `@suspensive/react": "^2.1.2-beta.0` was used
consistently, and versions 4 and 5 of `@tanstack/react-query` were
tested.
> 
- pnpm@9.4.0 ✅
- yarn@v1.22.22 ✅
- yarn berry@4.3.0 (pnp) ✅
- pnpm@9.4.9 (monorepo) ✅

# CLI

In typical environments (single repo), the version switches
automatically. However, for special cases, we have created the
`suspensive-react-query-switch` script, which forces the switching of
`@suspensive/react-query-x`.

```bash
npx suspensive-react-query-switch
[@suspensive/react-query], expecting version "4" or "5""

npx suspensive-react-query-switch 4
[@suspensive/react-query] set version to v4
```

Although it works in most environments, it does not work in the
following case:

- The CLI does not work properly in a monorepo environment. ⚠️
- The CLI does not work properly in a yarn-berry (pnp) environment. ⚠️

---------

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`beta` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `beta`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @suspensive/react-query@2.1.2-beta.1

### Patch Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

-   Updated dependencies \[]:
    -   @suspensive/react@2.1.2-beta.1
    -   @suspensive/react-query-4@0.0.1-beta.0
    -   @suspensive/react-query-5@0.0.1-beta.0

## @suspensive/react@2.1.2-beta.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.


# Releases
## @suspensive/react-query@2.2.0

### Minor Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

- Updated dependencies
\[[`2fd8108`](2fd8108)]:
    -   @suspensive/react-query-4@0.0.1
    -   @suspensive/react-query-5@0.0.1
    -   @suspensive/react@2.2.0

## @suspensive/react-query-4@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react-query-5@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react@2.2.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
manudeli pushed a commit that referenced this pull request Aug 3, 2024
# Summary

`@suspensive/react-query` now automatically identifies the installed
version of `@tanstack/react-query` and uses either
`@suspensive/react-query-4` or `@suspensive/react-query-5` accordingly.

# Roadmaps

> This is the list of remaining tasks. It may be added to or revised.

- [x] Core 
- [x] Field Test
- [ ] CLI ⚠️
- [ ] Dependency Log
([comment](#953 (comment)))

# How it works

The mechanism for identifying the version of `@tanstack/react-query` and
selecting the appropriate `@suspensive/react-query-x` to use is similar
to `vue-demi`.

- https://github.com/vueuse/vue-demi

When `@suspsensive/react-query` is added as a dependency, the
`postinstall` script fetches the version of `@tanstack/react-query` and
overlays the build files of `@suspensive/react-query-x` at the entry
point (build root) to ensure the appropriate version is used.

```json
// package.json
// ...
"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "require": {
      "types": "./dist/index.d.cts",
      "default": "./dist/index.cjs"
    }
  },
  "./package.json": "./package.json"
},
// ...
"postinstall": "node -e \"import('./scripts/postinstall.js').catch(e => console.error(e))\""
// ...
```

The `postinstall.js` script is executed during the `postinstall`
process.

```jsx
// script/postinstall.js
import { loadModule, switchVersion } from './utils.js'

const reactQueryPackageJson = loadModule('@tanstack/react-query/package.json')
const version = reactQueryPackageJson?.version

if (!version || typeof version !== 'string') {
  console.warn('@tanstack/react-query is not found.')
} else if (version.startsWith('4.')) {
  switchVersion(4)
} else if (version.startsWith('5.')) {
  switchVersion(5)
} else {
  console.warn('[@suspensive/react-query]', `version v${version} is not supported.`)
}
```

This script fetches the installed `@tanstack/react-query/package.json`,
checks the version, and copies the corresponding
`@suspensive/react-query-x` files to the library's root.

```bash
suspensive/packages/react-query/dist
# --- Library entry point
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
# ---
├── v4
# --- Copy files from this folder to the entry point if @tanstack/react-query@4 is detected
|  ├── index.cjs
|  ├── index.cjs.map
|  ├── index.d.cts
|  ├── index.d.ts
|  ├── index.js
|  └── index.js.map
# ---
└── v5
# --- Copy files from this folder to the entry point if @tanstack/react-query@5 is detected
   ├── index.cjs
   ├── index.cjs.map
   ├── index.d.cts
   ├── index.d.ts
   ├── index.js
   └── index.js.map
```

By following this process, `@suspensive/react-query` automatically uses
the appropriate version upon installation.

When added as a dependency, the version switching happens automatically
as shown in the logs below:

```bash
# case1: @tanstack/react-query@4
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v4
└─ Done in 56ms

# case2: @tanstack/react-query@5
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v5
└─ Done in 56ms
```

# Field Test

> These tests were conducted in isolated environments using `~.tgz`.
In all environments, `@suspensive/react": "^2.1.2-beta.0` was used
consistently, and versions 4 and 5 of `@tanstack/react-query` were
tested.
> 
- pnpm@9.4.0 ✅
- yarn@v1.22.22 ✅
- yarn berry@4.3.0 (pnp) ✅
- pnpm@9.4.9 (monorepo) ✅

# CLI

In typical environments (single repo), the version switches
automatically. However, for special cases, we have created the
`suspensive-react-query-switch` script, which forces the switching of
`@suspensive/react-query-x`.

```bash
npx suspensive-react-query-switch
[@suspensive/react-query], expecting version "4" or "5""

npx suspensive-react-query-switch 4
[@suspensive/react-query] set version to v4
```

Although it works in most environments, it does not work in the
following case:

- The CLI does not work properly in a monorepo environment. ⚠️
- The CLI does not work properly in a yarn-berry (pnp) environment. ⚠️

---------
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`beta` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `beta`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @suspensive/react-query@2.1.2-beta.1

### Patch Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

-   Updated dependencies \[]:
    -   @suspensive/react@2.1.2-beta.1
    -   @suspensive/react-query-4@0.0.1-beta.0
    -   @suspensive/react-query-5@0.0.1-beta.0

## @suspensive/react@2.1.2-beta.1
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.


# Releases
## @suspensive/react-query@2.2.0

### Minor Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

- Updated dependencies
\[[`2fd8108`](2fd8108)]:
    -   @suspensive/react-query-4@0.0.1
    -   @suspensive/react-query-5@0.0.1
    -   @suspensive/react@2.2.0

## @suspensive/react-query-4@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react-query-5@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react@2.2.0
manudeli added a commit that referenced this pull request Aug 3, 2024
# Summary

`@suspensive/react-query` now automatically identifies the installed
version of `@tanstack/react-query` and uses either
`@suspensive/react-query-4` or `@suspensive/react-query-5` accordingly.

# Roadmaps

> This is the list of remaining tasks. It may be added to or revised.

- [x] Core 
- [x] Field Test
- [ ] CLI ⚠️
- [ ] Dependency Log
([comment](#953 (comment)))

# How it works

The mechanism for identifying the version of `@tanstack/react-query` and
selecting the appropriate `@suspensive/react-query-x` to use is similar
to `vue-demi`.

- https://github.com/vueuse/vue-demi

When `@suspsensive/react-query` is added as a dependency, the
`postinstall` script fetches the version of `@tanstack/react-query` and
overlays the build files of `@suspensive/react-query-x` at the entry
point (build root) to ensure the appropriate version is used.

```json
// package.json
// ...
"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "require": {
      "types": "./dist/index.d.cts",
      "default": "./dist/index.cjs"
    }
  },
  "./package.json": "./package.json"
},
// ...
"postinstall": "node -e \"import('./scripts/postinstall.js').catch(e => console.error(e))\""
// ...
```

The `postinstall.js` script is executed during the `postinstall`
process.

```jsx
// script/postinstall.js
import { loadModule, switchVersion } from './utils.js'

const reactQueryPackageJson = loadModule('@tanstack/react-query/package.json')
const version = reactQueryPackageJson?.version

if (!version || typeof version !== 'string') {
  console.warn('@tanstack/react-query is not found.')
} else if (version.startsWith('4.')) {
  switchVersion(4)
} else if (version.startsWith('5.')) {
  switchVersion(5)
} else {
  console.warn('[@suspensive/react-query]', `version v${version} is not supported.`)
}
```

This script fetches the installed `@tanstack/react-query/package.json`,
checks the version, and copies the corresponding
`@suspensive/react-query-x` files to the library's root.

```bash
suspensive/packages/react-query/dist
# --- Library entry point
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
# ---
├── v4
# --- Copy files from this folder to the entry point if @tanstack/react-query@4 is detected
|  ├── index.cjs
|  ├── index.cjs.map
|  ├── index.d.cts
|  ├── index.d.ts
|  ├── index.js
|  └── index.js.map
# ---
└── v5
# --- Copy files from this folder to the entry point if @tanstack/react-query@5 is detected
   ├── index.cjs
   ├── index.cjs.map
   ├── index.d.cts
   ├── index.d.ts
   ├── index.js
   └── index.js.map
```

By following this process, `@suspensive/react-query` automatically uses
the appropriate version upon installation.

When added as a dependency, the version switching happens automatically
as shown in the logs below:

```bash
# case1: @tanstack/react-query@4
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v4
└─ Done in 56ms

# case2: @tanstack/react-query@5
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v5
└─ Done in 56ms
```

# Field Test

> These tests were conducted in isolated environments using `~.tgz`.
In all environments, `@suspensive/react": "^2.1.2-beta.0` was used
consistently, and versions 4 and 5 of `@tanstack/react-query` were
tested.
> 
- pnpm@9.4.0 ✅
- yarn@v1.22.22 ✅
- yarn berry@4.3.0 (pnp) ✅
- pnpm@9.4.9 (monorepo) ✅

# CLI

In typical environments (single repo), the version switches
automatically. However, for special cases, we have created the
`suspensive-react-query-switch` script, which forces the switching of
`@suspensive/react-query-x`.

```bash
npx suspensive-react-query-switch
[@suspensive/react-query], expecting version "4" or "5""

npx suspensive-react-query-switch 4
[@suspensive/react-query] set version to v4
```

Although it works in most environments, it does not work in the
following case:

- The CLI does not work properly in a monorepo environment. ⚠️
- The CLI does not work properly in a yarn-berry (pnp) environment. ⚠️

---------

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`beta` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `beta`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @suspensive/react-query@2.1.2-beta.1

### Patch Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

-   Updated dependencies \[]:
    -   @suspensive/react@2.1.2-beta.1
    -   @suspensive/react-query-4@0.0.1-beta.0
    -   @suspensive/react-query-5@0.0.1-beta.0

## @suspensive/react@2.1.2-beta.1
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.


# Releases
## @suspensive/react-query@2.2.0

### Minor Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

- Updated dependencies
\[[`2fd8108`](2fd8108)]:
    -   @suspensive/react-query-4@0.0.1
    -   @suspensive/react-query-5@0.0.1
    -   @suspensive/react@2.2.0

## @suspensive/react-query-4@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react-query-5@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react@2.2.0
manudeli added a commit that referenced this pull request Aug 3, 2024
# Summary

`@suspensive/react-query` now automatically identifies the installed
version of `@tanstack/react-query` and uses either
`@suspensive/react-query-4` or `@suspensive/react-query-5` accordingly.

# Roadmaps

> This is the list of remaining tasks. It may be added to or revised.

- [x] Core 
- [x] Field Test
- [ ] CLI ⚠️
- [ ] Dependency Log
([comment](#953 (comment)))

# How it works

The mechanism for identifying the version of `@tanstack/react-query` and
selecting the appropriate `@suspensive/react-query-x` to use is similar
to `vue-demi`.

- https://github.com/vueuse/vue-demi

When `@suspsensive/react-query` is added as a dependency, the
`postinstall` script fetches the version of `@tanstack/react-query` and
overlays the build files of `@suspensive/react-query-x` at the entry
point (build root) to ensure the appropriate version is used.

```json
// package.json
// ...
"exports": {
  ".": {
    "import": {
      "types": "./dist/index.d.ts",
      "default": "./dist/index.js"
    },
    "require": {
      "types": "./dist/index.d.cts",
      "default": "./dist/index.cjs"
    }
  },
  "./package.json": "./package.json"
},
// ...
"postinstall": "node -e \"import('./scripts/postinstall.js').catch(e => console.error(e))\""
// ...
```

The `postinstall.js` script is executed during the `postinstall`
process.

```jsx
// script/postinstall.js
import { loadModule, switchVersion } from './utils.js'

const reactQueryPackageJson = loadModule('@tanstack/react-query/package.json')
const version = reactQueryPackageJson?.version

if (!version || typeof version !== 'string') {
  console.warn('@tanstack/react-query is not found.')
} else if (version.startsWith('4.')) {
  switchVersion(4)
} else if (version.startsWith('5.')) {
  switchVersion(5)
} else {
  console.warn('[@suspensive/react-query]', `version v${version} is not supported.`)
}
```

This script fetches the installed `@tanstack/react-query/package.json`,
checks the version, and copies the corresponding
`@suspensive/react-query-x` files to the library's root.

```bash
suspensive/packages/react-query/dist
# --- Library entry point
├── index.cjs
├── index.cjs.map
├── index.d.cts
├── index.d.ts
├── index.js
├── index.js.map
# ---
├── v4
# --- Copy files from this folder to the entry point if @tanstack/react-query@4 is detected
|  ├── index.cjs
|  ├── index.cjs.map
|  ├── index.d.cts
|  ├── index.d.ts
|  ├── index.js
|  └── index.js.map
# ---
└── v5
# --- Copy files from this folder to the entry point if @tanstack/react-query@5 is detected
   ├── index.cjs
   ├── index.cjs.map
   ├── index.d.cts
   ├── index.d.ts
   ├── index.js
   └── index.js.map
```

By following this process, `@suspensive/react-query` automatically uses
the appropriate version upon installation.

When added as a dependency, the version switching happens automatically
as shown in the logs below:

```bash
# case1: @tanstack/react-query@4
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v4
└─ Done in 56ms

# case2: @tanstack/react-query@5
packages/react-query postinstall$ node -e "import('./scripts/postinstall.js').catch(e => console.error(e))"
│ [@suspensive/react-query] set version to v5
└─ Done in 56ms
```

# Field Test

> These tests were conducted in isolated environments using `~.tgz`.
In all environments, `@suspensive/react": "^2.1.2-beta.0` was used
consistently, and versions 4 and 5 of `@tanstack/react-query` were
tested.
> 
- pnpm@9.4.0 ✅
- yarn@v1.22.22 ✅
- yarn berry@4.3.0 (pnp) ✅
- pnpm@9.4.9 (monorepo) ✅

# CLI

In typical environments (single repo), the version switches
automatically. However, for special cases, we have created the
`suspensive-react-query-switch` script, which forces the switching of
`@suspensive/react-query-x`.

```bash
npx suspensive-react-query-switch
[@suspensive/react-query], expecting version "4" or "5""

npx suspensive-react-query-switch 4
[@suspensive/react-query] set version to v4
```

Although it works in most environments, it does not work in the
following case:

- The CLI does not work properly in a monorepo environment. ⚠️
- The CLI does not work properly in a yarn-berry (pnp) environment. ⚠️

---------

Co-authored-by: Jonghyeon Ko <jonghyeon@toss.im>
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`beta` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `beta`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @suspensive/react-query@2.1.2-beta.1

### Patch Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

-   Updated dependencies \[]:
    -   @suspensive/react@2.1.2-beta.1
    -   @suspensive/react-query-4@0.0.1-beta.0
    -   @suspensive/react-query-5@0.0.1-beta.0

## @suspensive/react@2.1.2-beta.1
manudeli added a commit that referenced this pull request Aug 3, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to beta, this PR will
be updated.


# Releases
## @suspensive/react-query@2.2.0

### Minor Changes

- [#953](#953)
[`8d8a2d6`](8d8a2d6)
Thanks [@gwansikk](https://github.com/gwansikk)! - feat(react-query):
universal support for TanStack Query 4 and 5

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

- Updated dependencies
\[[`2fd8108`](2fd8108)]:
    -   @suspensive/react-query-4@0.0.1
    -   @suspensive/react-query-5@0.0.1
    -   @suspensive/react@2.2.0

## @suspensive/react-query-4@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react-query-5@0.0.1

### Patch Changes

- [#946](#946)
[`2fd8108`](2fd8108)
Thanks [@manudeli](https://github.com/manudeli)! - feat(react-query)
depend on @suspensive/react-query-4,5 to support
@tanstack/react-query@4,5 at once automatically

-   Updated dependencies \[]:
    -   @suspensive/react@2.2.0

## @suspensive/react@2.2.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants