Merge branch 'main' into react/feat/all-props

toss · Oct 11, 2023 · 6455629 · 6455629
2 parents c06a3ea + ba1e1a6
commit 6455629
Show file tree

Hide file tree

Showing 26 changed files with 231 additions and 104 deletions.
diff --git a/.changeset/orange-pants-vanish.md → .changeset/olive-hounds-nail.md b/.changeset/orange-pants-vanish.md → .changeset/olive-hounds-nail.md
@@ -2,4 +2,4 @@
 "@suspensive/react": patch
 ---
 
-docs(react): update doc for Delay
+refactor(react): to easier code
diff --git a/.changeset/silly-wolves-shave.md b/.changeset/silly-wolves-shave.md
diff --git a/README.md b/README.md
@@ -63,8 +63,15 @@ import { Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay } from '@suspensive/
 
 const Example = () => (
   <ErrorBoundaryGroup>
-    <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>Reset All</Button>} />
-    <ErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error.message}</Button>}>
+    <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>Reset All</button>} />
+    <ErrorBoundary
+      fallback={(props) => (
+        <>
+          <button onClick={props.reset}>Try again</button>
+          {props.error.message}
+        </>
+      )}
+    >
       <Suspense
         fallback={
           <Delay>
@@ -118,7 +125,14 @@ import { Suspense } from '@suspensive/react'
 import { QueryErrorBoundary, useSuspenseQuery } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryErrorBoundary fallback={(caught) => <Button onClick={caught.reset}>Reset {caught.error.message}</Button>}>
+  <QueryErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <Suspense fallback={<Spinner />}>
       <SuspendedComponent />
     </Suspense>

diff --git a/packages/react-query/CHANGELOG.md b/packages/react-query/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @suspensive/react-query
 
+## 1.15.3
+
+### Patch Changes
+
+- Updated dependencies [b05b4e2]
+- Updated dependencies [e1e9a6b]
+  - @suspensive/react@1.15.3
+
 ## 1.15.2
 
 ### Patch Changes

diff --git a/packages/react-query/package.json b/packages/react-query/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@suspensive/react-query",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "Useful helpers for @tanstack/react-query with suspense",
   "keywords": [
     "suspensive",
@@ -70,7 +70,7 @@
     "tsd": "^0.28.1"
   },
   "peerDependencies": {
-    "@suspensive/react": "workspace:^1.15.2",
+    "@suspensive/react": "workspace:^1.15.3",
     "@tanstack/react-query": "^4",
     "react": "^16.8 || ^17 || ^18"
   },

diff --git a/packages/react-query/src/QueryErrorResetBoundary.en.mdx b/packages/react-query/src/QueryErrorResetBoundary.en.mdx
@@ -11,7 +11,14 @@ You can just use `<QueryErrorBoundary/>`, `<QueryAsyncBoundary/>` like using [`<
 import { QueryErrorBoundary } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+  <QueryErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <Page />
   </QueryErrorBoundary>
 )
@@ -21,7 +28,14 @@ const Example = () => (
 import { QueryAsyncBoundary } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+  <QueryAsyncBoundary
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <Page />
   </QueryAsyncBoundary>
 )
@@ -53,7 +67,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'
 const Example = () => (
   <QueryErrorResetBoundary>
     {({ reset }) => (
-      <ErrorBoundary onReset={reset} fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+      <ErrorBoundary
+        onReset={reset}
+        fallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
+      >
         <Page />
       </ErrorBoundary>
     )}
@@ -72,7 +94,12 @@ const Example = () => (
     {({ reset }) => (
       <AsyncBoundary
         onReset={reset}
-        rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}
+        rejectedFallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
       >
         <Page />
       </AsyncBoundary>

diff --git a/packages/react-query/src/QueryErrorResetBoundary.ko.mdx b/packages/react-query/src/QueryErrorResetBoundary.ko.mdx
@@ -11,7 +11,14 @@ title: '<QueryErrorBoundary/>, <QueryAsyncBoundary/>'
 import { QueryErrorBoundary } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryErrorBoundary fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+  <QueryErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <Page />
   </QueryErrorBoundary>
 )
@@ -21,7 +28,14 @@ const Example = () => (
 import { QueryAsyncBoundary } from '@suspensive/react-query'
 
 const Example = () => (
-  <QueryAsyncBoundary rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+  <QueryAsyncBoundary
+    rejectedFallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <Page />
   </QueryAsyncBoundary>
 )
@@ -53,7 +67,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'
 const Example = () => (
   <QueryErrorResetBoundary>
     {({ reset }) => (
-      <ErrorBoundary onReset={reset} fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+      <ErrorBoundary
+        onReset={reset}
+        fallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
+      >
         <Page />
       </ErrorBoundary>
     )}
@@ -72,7 +94,12 @@ const Example = () => (
     {({ reset }) => (
       <AsyncBoundary
         onReset={reset}
-        rejectedFallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}
+        rejectedFallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
       >
         <Page />
       </AsyncBoundary>

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @suspensive/react
 
+## 1.15.3
+
+### Patch Changes
+
+- b05b4e2: docs(react): update doc for Delay
+- e1e9a6b: docs(react): update doc for ErrorBoundaryGroup
+
 ## 1.15.2
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@suspensive/react",
-  "version": "1.15.2",
+  "version": "1.15.3",
   "description": "Useful interfaces for React Suspense",
   "keywords": [
     "suspensive",

diff --git a/packages/react/src/AsyncBoundary.en.mdx b/packages/react/src/AsyncBoundary.en.mdx
@@ -21,14 +21,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -45,14 +45,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary.CSROnly
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -74,14 +74,14 @@ const Example = withAsyncBoundary(
   },
   {
     pendingFallback: <Loading />,
-    rejectedFallback: (errorBoundary) => (
+    rejectedFallback: (props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     ),
     onReset: () => console.log('reset'),
-    onError: (error) => console.log(JSON.stringify(error)),
+    onError: (error) => console.log(error),
   }
 )
 ```
diff --git a/packages/react/src/AsyncBoundary.ko.mdx b/packages/react/src/AsyncBoundary.ko.mdx
@@ -23,14 +23,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -47,14 +47,14 @@ import { AsyncBoundary } from '@suspensive/react'
 const Example = () => (
   <AsyncBoundary.CSROnly
     pendingFallback={<Loading />}
-    rejectedFallback={(errorBoundary) => (
+    rejectedFallback={(props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     )}
     onReset={() => console.log('reset')}
-    onError={(error) => console.log(JSON.stringify(error))}
+    onError={(error) => console.log(error)}
   >
     <Children />
   </AsyncBoundary>
@@ -76,14 +76,14 @@ const Example = withAsyncBoundary(
   },
   {
     pendingFallback: <Loading />,
-    rejectedFallback: (errorBoundary) => (
+    rejectedFallback: (props) => (
       <>
-        <button onClick={errorBoundary.reset}>reset</button>
-        {JSON.stringify(errorBoundary.error)}
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
       </>
     ),
     onReset: () => console.log('reset'),
-    onError: (error) => console.log(JSON.stringify(error)),
+    onError: (error) => console.log(error),
   }
 )
 ```
diff --git a/packages/react/src/ErrorBoundary.en.mdx b/packages/react/src/ErrorBoundary.en.mdx
@@ -14,7 +14,14 @@ import { ErrorBoundary } from '@suspensive/react'
 import { useState, useEffect } from 'react'
 
 const Example = () => (
-  <ErrorBoundary fallback={({ error, reset }) => <button onClick={reset}>{JSON.stringify(error)}</button>}>
+  <ErrorBoundary
+    fallback={(props) => (
+      <>
+        <button onClick={props.reset}>Try again</button>
+        {props.error.message}
+      </>
+    )}
+  >
     <ErrorAfter4s />
   </ErrorBoundary>
 )
@@ -74,7 +81,15 @@ import { QueryErrorResetBoundary } from '@tanstack/react-query'
 const Example = () => (
   <QueryErrorResetBoundary>
     {({ reset }) => (
-      <ErrorBoundary onReset={reset} fallback={(boundary) => <button onClick={boundary.reset}>Try again</button>}>
+      <ErrorBoundary
+        onReset={reset}
+        fallback={(props) => (
+          <>
+            <button onClick={props.reset}>Try again</button>
+            {props.error.message}
+          </>
+        )}
+      >
         <Page />
       </ErrorBoundary>
     )}