v3

.changeset/angry-cameras-wonder.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+chore(react): resolve ErrorBoundary error of @suspensive/react@3.0.0-next.1

.changeset/chilly-mugs-press.md

@@ -0,0 +1,7 @@
+---
+'@suspensive/react-query-4': patch
+'@suspensive/react-query-5': patch
+'@suspensive/react-query': patch
+---
+
+remove peerDeps error

.changeset/cold-waves-kick.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": patch
+---
+
+fix(react): fix wrong interface of with method

.changeset/config.json

@@ -8,7 +8,8 @@
       "@suspensive/react-query",
       "@suspensive/react-query-4",
       "@suspensive/react-query-5",
-      "@suspensive/jotai"
+      "@suspensive/jotai",
+      "@suspensive/codemods"
     ]
   ],
   "ignore": [

.changeset/fresh-comics-whisper.md

@@ -0,0 +1,8 @@
+---
+"@suspensive/react-query-4": major
+"@suspensive/react-query-5": major
+"@suspensive/react-query": major
+"@suspensive/react": major
+---
+
+feat(v3): remove deprecated interfaces

.changeset/moody-keys-sit.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": major
+---
+
+feat(react): with as method

.changeset/pre.json

@@ -0,0 +1,31 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@suspensive/eslint-config": "0.0.0",
+    "@suspensive/tsconfig": "0.0.0-development",
+    "@suspensive/tsup": "0.0.0",
+    "@suspensive/suspensive.org": "0.0.0",
+    "@suspensive/next-streaming-react-query": "0.0.0",
+    "@suspensive/react-native-playground": "0.0.0",
+    "@suspensive/visualization": "0.0.0",
+    "@suspensive/vite-react-18-suspense-prerender-siblings-problem": "0.0.0",
+    "@suspensive/codemods": "0.2.0",
+    "@suspensive/jotai": "2.18.12",
+    "@suspensive/react": "2.18.12",
+    "@suspensive/react-dom": "0.2.1",
+    "@suspensive/react-native": "0.0.17",
+    "@suspensive/react-query": "2.18.12",
+    "@suspensive/react-query-4": "2.18.12",
+    "@suspensive/react-query-5": "2.18.12"
+  },
+  "changesets": [
+    "angry-cameras-wonder",
+    "chilly-mugs-press",
+    "cold-waves-kick",
+    "fresh-comics-whisper",
+    "moody-keys-sit",
+    "pretty-brooms-float",
+    "unlucky-trees-kick"
+  ]
+}

.changeset/pretty-brooms-float.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": minor
+---
+
+feat(react): prevent recursive expose fallback when fallback throw error

.changeset/selfish-maps-reflect.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/codemods": major
+---
+
+feat(codemods): fixed version like other suspensive libraries

.changeset/unlucky-trees-kick.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react-query-4": major
+---
+
+feat(react-query-4): set network mode to always

.github/workflows/ci.yml

@@ -2,7 +2,7 @@ name: CI
 
 on:
   push:
-    branches: [main, beta, v1, v2]
+    branches: [main, beta, next, v1, v2, v3]
   pull_request:
     types: [opened, synchronize, reopened]
 env:

.github/workflows/release.yml

@@ -2,7 +2,7 @@ name: Changesets PR or Publish
 
 on:
   push:
-    branches: [main, beta]
+    branches: [main, beta, next]
 env:
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}

configs/eslint-config/index.js

@@ -130,7 +130,9 @@ export const suspensiveReactTypeScriptConfig = tseslint.config(
     rules: {
       ...reactHooks.configs.recommended.rules,
       'react-compiler/react-compiler': 'warn',
+      '@eslint-react/no-use-context': 'off',
       '@eslint-react/no-forward-ref': 'off',
+      '@eslint-react/no-context-provider': 'off',
     },
     settings: {
       react: {

docs/suspensive.org/src/app/[lang]/_components/Logo.tsx

@@ -20,7 +20,7 @@ export const Logo = () => {
       </motion.span>
       <div className="relative">
         <strong>Suspensive</strong>
-        <span className="absolute text-[8px]">v2</span>
+        <span className="absolute text-[8px]">v3</span>
       </div>
     </motion.div>
   )

docs/suspensive.org/src/app/_dictionaries/en.tsx

@@ -11,10 +11,8 @@ export default {
   },
   banner: (
     <span>
-      We're preparing Suspensive v3 🚀{' '}
-      <Link href="https://v3.suspensive.org/en/docs/migrate-to-v3">
-        read more
-      </Link>
+      👀 Check out the changes in Suspensive v3.{' '}
+      <Link href="/en/docs/migrate-to-v3">read more</Link>
     </span>
   ),
   lastUpdated: 'Last updated on',

docs/suspensive.org/src/app/_dictionaries/ko.tsx

@@ -12,8 +12,8 @@ export default {
   },
   banner: (
     <span>
-      Suspensive v3를 준비하고 있습니다. 🚀{' '}
-      <Link href="https://v3.suspensive.org/ko/docs/migrate-to-v3">더보기</Link>
+      👀 Suspensive v3에서의 변경을 확인하세요.{' '}
+      <Link href="/ko/docs/migrate-to-v3">더보기</Link>
     </span>
   ),
   lastUpdated: '수정된 날짜:',

docs/suspensive.org/src/content/en/_meta.tsx

@@ -22,7 +22,7 @@ export default {
         href: 'https://suspensive.org',
       },
       v3: {
-        title: 'v3 (WIP)',
+        title: 'v3',
         href: 'https://v3.suspensive.org',
       },
       v2: {

docs/suspensive.org/src/content/en/docs/_meta.tsx

@@ -13,6 +13,9 @@ export default {
     type: 'separator',
     title: 'More',
   },
+  'migrate-to-v3': {
+    title: 'Migrating to v3',
+  },
   'migrate-to-v2': {
     title: 'Migrating to v2',
   },

docs/suspensive.org/src/content/en/docs/migrate-to-v3.mdx

@@ -0,0 +1,23 @@
+import { Cards, Steps } from 'nextra/components'
+import { Callout } from '@/components'
+
+# Migrating to Suspensive v3
+
+### Migration guide
+
+<Cards num={2}>
+  <Cards.Card
+    title="See @suspensive/react v3"
+    href="/docs/react/migrate-to-v3"
+  />
+  <Cards.Card
+    title="See @suspensive/react-query v3"
+    href="/docs/react-query/migrate-to-v3"
+  />
+</Cards>
+
+## Thanks to all Suspensive contributors
+
+We were able to release v3 because of Suspensive's contributors. Thank you to everyone who worked together to make it a better library, and we look forward to your continued support.
+
+[![contributors](https://contrib.rocks/image?repo=toss/suspensive)](https://github.com/toss/suspensive/graphs/contributors)

docs/suspensive.org/src/content/en/docs/react-query/_meta.tsx

@@ -6,6 +6,7 @@ export default {
   'tanstack-query-compatibility': {
     title: 'Support both TanStack Query v4 and 5',
   },
+  'migrate-to-v3': { title: 'Migrating to v3' },
   'migrate-to-v2': { title: 'Migrating to v2' },
   '--- API Reference': {
     type: 'separator',

docs/suspensive.org/src/content/en/docs/react-query/migrate-to-v3.mdx

@@ -0,0 +1,16 @@
+# Migrating to v3
+
+@suspensive/react-query v1 was originally [added as one of TanStack Query's community resources](https://tanstack.com/query/v4/docs/framework/react/community/suspensive-react-query) and was a library that provided `useSuspenseQuery`, `useSuspenseQueries` and `useSuspenseInfiniteQuery` to users of @tanstack/react-query v4.
+Afterwards, [as `useSuspenseQuery`, `useSuspenseQueries`, and `useSuspenseInfiniteQuery` were officially added to @tanstack/react-query v5](https://github.com/TanStack/query/pull/5739) with changes interfaces such as enabled disappeared and queryOptions were received as one.
+Therefore **we made the interface of @suspensive/react-query v2 as similar to the official interface as possible to make it easier for existing users of @suspensive/react-query v1 to migrate to @tanstack/react-query v5**.
+
+However, because of [the higher browser specifications (class private fields) required by @tanstack/react-query v5](https://tanstack.com/query/v5/docs/framework/react/installation#requirements), @tanstack/react-query v4 is still useful to many teams.
+Therefore, we will maintain support for @tanstack/react-query v4.
+
+## What's new
+
+### Draft
+
+## Handling BREAKING CHANGES
+
+### Draft

docs/suspensive.org/src/content/en/docs/react/_meta.tsx

@@ -3,6 +3,7 @@ import type { MetaRecord } from 'nextra'
 export default {
   motivation: { title: 'Why need to use?' },
   installation: { title: 'Installation' },
+  'migrate-to-v3': { title: 'Migrating to v3' },
   'migrate-to-v2': { title: 'Migrating to v2' },
   '--- API Reference': {
     type: 'separator',
@@ -14,5 +15,4 @@ export default {
   Delay: { title: '<Delay/>' },
   ClientOnly: { title: '<ClientOnly/>' },
   DefaultPropsProvider: { title: '<DefaultPropsProvider/>' },
-  wrap: { title: 'wrap' },
 } satisfies MetaRecord

docs/suspensive.org/src/content/en/docs/react/migrate-to-v3.mdx

@@ -0,0 +1,106 @@
+import { Callout } from '@/components'
+
+# Migrating to v3
+
+## What's new
+
+### Now thrown error in `ErrorBoundary` fallback will be passed to parent [#1409](https://github.com/toss/suspensive/pull/1409)
+
+It is not the developer's intention to expose fallbacks recursively due to fallback errors, in v3, errors thrown from fallbacks are caught by the parent ErrorBoundary.
+So this is a new mental model and a BREAKING CHANGE, please understand and use the new behavior.
+
+<Callout>
+
+Errors thrown from the fallback of AS-IS v2 ErrorBoundary cannot be handled by the parent ErrorBoundary, so they are caught by themselves and fallbacks are exposed recursively.
+
+> This is also the case in [react-error-boundary](https://github.com/bvaughn/react-error-boundary) where fallbacks are exposed recursively as follows.
+
+1. children is exposed
+2. fallback is exposed
+3. fallback is exposed
+4. fallback is exposed
+5. ... recursively exposed fallback is exposed
+
+</Callout>
+
+Now, errors thrown from the fallback of ErrorBoundary are caught by the parent ErrorBoundary. Therefore, the behavior is as follows.
+
+1. children are exposed
+2. fallback is exposed
+3. This is expected
+
+```tsx /This is expected/ /fallback is exposed/ /children is exposed/
+const Example = () => (
+  <ErrorBoundary fallback={() => <>This is expected</>}>
+    <ErrorBoundary
+      fallback={() => (
+        <Throw.Error message={ERROR_MESSAGE} after={100}>
+          fallback is exposed
+        </Throw.Error>
+      )}
+    >
+      <Throw.Error message={ERROR_MESSAGE} after={100}>
+        children is exposed
+      </Throw.Error>
+    </ErrorBoundary>
+  </ErrorBoundary>
+)
+
+const Throw = {
+  Error: ({
+    message,
+    after = 0,
+    children,
+  }: PropsWithChildren<{ message: string; after?: number }>) => {
+    const [isNeedThrow, setIsNeedThrow] = useState(after === 0)
+    if (isNeedThrow) {
+      throw new Error(message)
+    }
+    useTimeout(() => setIsNeedThrow(true), after)
+    return <>{children}</>
+  },
+}
+```
+
+## Handling BREAKING CHANGES
+
+### Remove `wrap` & Add `with`
+
+`wrap` has been removed in v3. We added a `with` method to each component that can replace the functionality of wrap.
+
+1. You don't need to understand the builder pattern used in wrap.
+2. Since wrap includes all components internally, the build size increases. In v3, you can import and use only the components you need.
+
+```diff
++ import { ErrorBoundaryGroup, ErrorBoundary, Suspense } from '@suspensive/react'
+- import { wrap } from '@suspensive/react'
+  import { useSuspenseQuery } from '@suspensive/react-query'
+
++ const Example = ErrorBoundaryGroup.with(
++   { blockOutside: false },
++   ErrorBoundary.with(
++     { fallback: ({ error }) => <>{error.message}</>, onError: logger.log },
++     Suspense.with({ fallback: <>loading...</>, clientOnly: true }, () => {
++       const query = useSuspenseQuery({
++         queryKey: ['key'],
++         queryFn: () => api.text(),
++       })
++       return <>{query.data.text}</>
++     })
++   )
++ )
+- const Example = wrap
+-   .ErrorBoundaryGroup({ blockOutside: false })
+-   .ErrorBoundary({
+-     fallback: ({ error }) => <>{error.message}</>,
+-     onError: logger.log,
+-   })
+-   .Suspense({ fallback: <>loading...</>, clientOnly: true })
+-   .on(() => {
+-     const query = useSuspenseQuery({
+-       queryKey: ['key'],
+-       queryFn: () => api.text(),
+-     })
+-     return <>{query.data.text}</>
+-   })
+```