v2 (#629)

# v2

<!--
    A clear and concise description of what this pr is about.
 -->

## PR Checklist

- [x] I did below actions if need

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

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Minsoo Kim <57122180+minsoo-web@users.noreply.github.com>
Co-authored-by: Hyeonjae Lee <71202076+2-NOW@users.noreply.github.com>
Co-authored-by: Minsoo Kang <90169703+minchodang@users.noreply.github.com>
Co-authored-by: Surim Son <47546413+sonsurim@users.noreply.github.com>
Co-authored-by: Chaerim Kim <89721027+chaaerim@users.noreply.github.com>
Co-authored-by: Chungil Jung <wer4272@nate.com>
Co-authored-by: Gihyeon Lee <wes5510@icloud.com>

configs/test-utils/package.json

@@ -38,6 +38,6 @@
     "react": "^18.3.1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18"
+    "react": "^18"
   }
 }

configs/test-utils/src/index.tsx

@@ -0,0 +1,81 @@
+import { type PropsWithChildren, type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+export const sleep = (ms: number) => new Promise<undefined>((resolve) => setTimeout(() => resolve(undefined), ms))
+
+export class CustomError extends Error {
+  constructor(...args: ConstructorParameters<ErrorConstructor>) {
+    super(...args)
+    console.error(...args)
+  }
+}
+export class CustomNotError {
+  constructor(public message?: string) {
+    console.log(message)
+  }
+}
+
+const suspendIsNeed = { current: true }
+type SuspendProps = { during: number; toShow?: ReactNode }
+export const Suspend = ({ during, toShow }: SuspendProps) => {
+  if (suspendIsNeed.current) {
+    throw new Promise((resolve) =>
+      setTimeout(() => {
+        suspendIsNeed.current = false
+        resolve('resolved')
+      }, during)
+    )
+  }
+  return <>{toShow}</>
+}
+Suspend.reset = () => {
+  suspendIsNeed.current = true
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+const useTimeout = (fn: () => void, ms: number) => {
+  const fnRef = useRef(fn)
+
+  useIsomorphicLayoutEffect(() => {
+    fnRef.current = fn
+  }, [fn])
+
+  useEffect(() => {
+    const id = setTimeout(fnRef.current, ms)
+    return () => clearTimeout(id)
+  }, [ms])
+}
+
+const throwErrorIsNeed = { current: false }
+type ThrowErrorProps = PropsWithChildren<{ message: string; after?: number }>
+export const ThrowError = ({ message, after = 0, children }: ThrowErrorProps) => {
+  const [isNeedError, setIsNeedError] = useState(after === 0 ? true : throwErrorIsNeed.current)
+  if (isNeedError) {
+    throw new Error(message)
+  }
+  useTimeout(() => setIsNeedError(true), after)
+  return <>{children}</>
+}
+
+type ThrowNullProps = PropsWithChildren<{ after: number }>
+export const ThrowNull = ({ after, children }: ThrowNullProps) => {
+  const [isNeedError, setIsNeedError] = useState(throwErrorIsNeed.current)
+  if (isNeedError) {
+    throw null
+  }
+  useTimeout(() => setIsNeedError(true), after)
+  return <>{children}</>
+}
+
+ThrowError.reset = () => {
+  throwErrorIsNeed.current = false
+}
+
+export const TEXT = 'TEXT'
+export const ERROR_MESSAGE = 'ERROR_MESSAGE'
+export const FALLBACK = 'FALLBACK'
+
+export const queryKey = ['key'] as const
+export const queryFn = () => sleep(10).then(() => ({ text: 'response' }))
+export const boolean = Math.random() > 0.5
+export const select = (data: Awaited<ReturnType<typeof queryFn>>) => data.text

docs/suspensive.org/src/pages/_meta.en.json

@@ -18,7 +18,7 @@
   },
   "versions": {
     "type": "menu",
-    "title": "v1",
+    "title": "v2",
     "theme": {
       "collapsed": true
     },
@@ -28,12 +28,12 @@
         "href": "https://suspensive.org"
       },
       "v2": {
-        "title": "v2 (beta)",
-        "href": "https://beta.suspensive.org"
+        "title": "v2",
+        "href": "https://suspensive.org"
       },
       "v1": {
         "title": "v1",
-        "href": "https://suspensive.org"
+        "href": "https://v1.suspensive.org"
       }
     }
   }

docs/suspensive.org/src/pages/_meta.ko.json

@@ -18,7 +18,7 @@
   },
   "versions": {
     "type": "menu",
-    "title": "v1",
+    "title": "v2",
     "theme": {
       "collapsed": true
     },
@@ -28,12 +28,12 @@
         "href": "https://suspensive.org/ko"
       },
       "v2": {
-        "title": "v2 (beta)",
-        "href": "https://beta.suspensive.org/ko"
+        "title": "v2",
+        "href": "https://suspensive.org/ko"
       },
       "v1": {
         "title": "v1",
-        "href": "https://suspensive.org/ko"
+        "href": "https://v1.suspensive.org/ko"
       }
     }
   }

docs/suspensive.org/src/pages/docs/_meta.en.json

@@ -21,6 +21,7 @@
     "type": "separator",
     "title": "More"
   },
+  "migrate-to-v2": "Migrating to v2",
   "changelogs": "Changelogs",
   "links": "Related Links"
 }

docs/suspensive.org/src/pages/docs/_meta.ko.json

@@ -21,6 +21,7 @@
     "type": "separator",
     "title": "더보기"
   },
+  "migrate-to-v2": "v2로 마이그레이션하기",
   "changelogs": "Changelogs",
   "links": "관련 링크"
 }

docs/suspensive.org/src/pages/docs/migrate-to-v2.en.mdx

@@ -0,0 +1,25 @@
+import { Steps, Cards, Card } from 'nextra/components'
+import { Callout } from '@/components'
+
+# Migrating to Suspensive v2
+
+Suspensive v2, **we focused on increasing compatibility and improving DX**.
+To accomplish this, we had to introduce some dramatic changes. As a result, we removed some previously deprecated features and added some new interfaces.
+
+### The minimum required React version is now 18.0
+
+**Suspensive v2 requires React 18.0 or later.** This is because we are using the new useSyncExternalStore hook, which is only available in React 18.0 and later. Previously, we have been using the shim provided by React(use-sync-external-store).
+In addition, in React 18, [Suspense-related features were added](https://legacy.reactjs.org/blog/2022/03/29/react-v18.html), We decided that the direction of the Suspensive libraries needed to focus on React 18 or higher in the future rather than responding to Legacy React.
+
+### Migration guide
+
+<Cards num={2}>
+  <Card title="See @suspensive/react v2" href="/docs/react/migrate-to-v2" />
+  <Card title="See @suspensive/react-query v2" href="/docs/react-query/migrate-to-v2" />
+</Cards>
+
+## Thanks to all Suspensive contributors
+
+We were able to release v2 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=suspensive/react)](https://github.com/suspensive/react/graphs/contributors)

docs/suspensive.org/src/pages/docs/migrate-to-v2.ko.mdx

@@ -0,0 +1,25 @@
+import { Steps, Cards, Card } from 'nextra/components'
+import { Callout } from '@/components'
+
+# Suspensive v2로 마이그레이션하기
+
+Suspensive v2에서 **호환성을 높이고 DX를 개선하는 데 중점을 두었습니다**.
+이를 달성하기 위해 우리는 극적인 변화를 도입해야 했고, 그 결과 이전에 deprecated 했던 일부 기능을 제거하고 몇 가지 새 인터페이스를 추가하게 되었습니다.
+
+### 최소 필수 React 버전은 18.0입니다.
+
+**Suspensive v2에는 React 18.0 이상을 요구합니다.** 이는 React 18.0 이상에서만 사용할 수 있는 새로운 useSyncExternalStore를 사용하기 때문입니다. 이전에는 React에서 제공하는 shim(use-sync-external-store)을 사용해 왔습니다.
+또한 React 18에서는 [Suspense관련 기능추가](https://legacy.reactjs.org/blog/2022/03/29/react-v18.html)가 되면서 앞으로의 Suspensive 라이브러리의 방향을 Legacy React를 대응하기 보다는 React 18 이상의 기능에 집중할 필요가 있다고 판단했습니다.
+
+### 마이그레이션 가이드
+
+<Cards num={2}>
+  <Card title="@suspensive/react v2 보기" href="/docs/react/migrate-to-v2" />
+  <Card title="@suspensive/react-query v2 보기" href="/docs/react-query/migrate-to-v2" />
+</Cards>
+
+## 모든 Suspensive 기여자분들께 감사를 전합니다
+
+Suspensive의 기여자가 있어서 이렇게 v2를 출시할 수 있었던 것 같습니다. 더 나은 라이브러리로 만들기 위해 함께 노력해주신 모든 분들 감사하고 앞으로도 잘 부탁드립니다.
+
+[![contributors](https://contrib.rocks/image?repo=suspensive/react)](https://github.com/suspensive/react/graphs/contributors)

docs/suspensive.org/src/pages/docs/react-query/SuspenseInfiniteQuery.en.mdx

@@ -0,0 +1,33 @@
+# SuspenseInfiniteQuery
+
+Just as [`<SuspenseQuery/>`](./SuspenseQuery.ko.mdx) makes useSuspenseQuery easier to use in jsx, `<SuspenseInfiniteQuery/>` serves to make useSuspenseInfiniteQuery easier to use in jsx.
+
+```jsx /SuspenseInfiniteQuery/
+import { SuspenseInfiniteQuery } from '@suspensive/react-query'
+import { Suspense, ErrorBoundary } from '@suspensive/react'
+import { PostItem } from '~/components'
+
+const InfinitePostsPage = ({ authorId }) => (
+  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
+    <Suspense fallback="loading...">
+      <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(authorId)}>
+        {({ data, fetchNextPage }) => (
+          <>
+            {data.pages.map((post) => (
+              <PostItem {...post} />
+            ))}
+            <button
+              type="button"
+              onClick={() => {
+                fetchNextPage()
+              }}
+            >
+              more
+            </button>
+          </>
+        )}
+      </SuspenseInfiniteQuery>
+    </Suspense>
+  </ErrorBoundary>
+)
+```

docs/suspensive.org/src/pages/docs/react-query/SuspenseInfiniteQuery.ko.mdx

@@ -0,0 +1,33 @@
+# SuspenseInfiniteQuery
+
+[`<SuspenseQuery/>`](./SuspenseQuery.ko.mdx)가 useSuspenseQuery를 jsx에서 쉽게 사용하게 하는 역할과 마찬가지로 `<SuspenseInfiniteQuery/>`는 useSuspenseInfiniteQuery를 jsx에서 사용하기 쉽게 하기 위한 역할을 합니다.
+
+```jsx /SuspenseInfiniteQuery/
+import { SuspenseInfiniteQuery } from '@suspensive/react-query'
+import { Suspense, ErrorBoundary } from '@suspensive/react'
+import { PostItem } from '~/components'
+
+const InfinitePostsPage = ({ authorId }) => (
+  <ErrorBoundary fallback={({ error }) => <>{error.message}</>}>
+    <Suspense fallback="loading...">
+      <SuspenseInfiniteQuery {...postsInfiniteQueryOptions(authorId)}>
+        {({ data, fetchNextPage }) => (
+          <>
+            {data.pages.map((post) => (
+              <PostItem {...post} />
+            ))}
+            <button
+              type="button"
+              onClick={() => {
+                fetchNextPage()
+              }}
+            >
+              more
+            </button>
+          </>
+        )}
+      </SuspenseInfiniteQuery>
+    </Suspense>
+  </ErrorBoundary>
+)
+```