feat: add codesandbox example #867
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Overview
<!--
A clear and concise description of what this pr is about.
-->
## PR Checklist
- [ ] 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.
…store (#631) fix #183 # Overview <!-- A clear and concise description of what this pr is about. --> I remove target react v16, v17, unnecessary use-sync-external-store ## 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.
fix #529 # Overview <!-- 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.
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/[email protected] ### Major Changes - ea1c4ed: feat(react): rename Suspensive defaultOptions -> defaultProps - 78f5bd4: feat(react, react-query): remove deprecated apis - 837ed18: feat(\*): remove target react v16, v17 ## @suspensive/[email protected] ### Major Changes - 78f5bd4: feat(react, react-query): remove deprecated apis - 837ed18: feat(\*): remove target react v16, v17 ### Patch Changes - Updated dependencies [ea1c4ed] - Updated dependencies [78f5bd4] - Updated dependencies [837ed18] - @suspensive/[email protected] ## @suspensive/[email protected] ### Patch Changes - 837ed18: feat(\*): remove target react v16, v17 ## @suspensive/[email protected] ### Patch Changes - 837ed18: feat(\*): remove target react v16, v17 ## @suspensive/[email protected] ### Patch Changes - Updated dependencies [ea1c4ed] - Updated dependencies [78f5bd4] - Updated dependencies [837ed18] - @suspensive/[email protected] - @suspensive/[email protected] - @suspensive/[email protected] - @suspensive/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
…on correctly like @tanstack/react-query v5 (#401) fix #253 # Overview <!-- 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.
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/[email protected] ### Major Changes - d06e883: fix(react-query): @suspensive/react-query v2's all naming convention correctly like @tanstack/react-query v5 ### Patch Changes - @suspensive/[email protected] ## @suspensive/[email protected] ## @suspensive/[email protected] ### Patch Changes - Updated dependencies [d06e883] - @suspensive/[email protected] - @suspensive/[email protected] - @suspensive/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
# Overview
<!--
A clear and concise description of what this pr is about.
-->
I remove ErrorBoundaryGroup.Reset
## 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.
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/[email protected] ### Major Changes - 6a3f6f4: feat(react): remove ErrorBoundaryGroup.Reset ## @suspensive/[email protected] ### Patch Changes - Updated dependencies [6a3f6f4] - @suspensive/[email protected] ## @suspensive/[email protected] ### Patch Changes - Updated dependencies [6a3f6f4] - @suspensive/[email protected] - @suspensive/[email protected] - @suspensive/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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/[email protected] ### Major Changes - [#629](#629) [`73c0cc7`](73c0cc7) Thanks [@manudeli](https://github.com/manudeli)! - fix(react): add getServerSnapShot in syncDevMode ## @suspensive/[email protected] ### Patch Changes - Updated dependencies \[[`73c0cc7`](73c0cc7)]: - @suspensive/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2 tasks
|
toss/slash#191 (comment) Check this out please |
|
Rebase is needed before doing this (#867 (comment)) |
manudeli
force-pushed
the
main
branch
2 times, most recently
from
56b8c13 to
d6f0f4e
Compare
|
Could we do this soon? It doesn't necessarily have to be like react.dev, so it might be a good idea to aim to add playground first. |
|
@kangju2000 @minsoo-web Make and share plan to implement this feature on https://suspensive.org please |
1 task
manudeli
pushed a commit
that referenced
this pull request
Jun 24, 2024
# Overview
<!--
A clear and concise description of what this pr is about.
-->
related #867
closed #7
I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.
I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!
## Usage
````mdx
import { Sandpack } from '@/components'
<Sandpack
customSetup={{
dependencies: {
'@suspensive/react': 'latest',
'@suspensive/react-query': 'latest',
'@tanstack/react-query': '^4.0.0',
},
}}
>
```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
```
```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'
export default wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
const query = useSuspenseQuery({
queryKey: ['key'],
queryFn: () => api.text(),
})
return <>{query.data.text}</>
})
```
```js /api.ts
export const api = {
text: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { text: 'Hello, Suspensive!' }
},
}
```
</Sandpack>
````
### Result
https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8
## PR Checklist
- [x] I did below actions if need
1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
|
@minsoo-web I close this Pull Request to assign this work to @kangju2000 |
manudeli
pushed a commit
that referenced
this pull request
Aug 3, 2024
# Overview
<!--
A clear and concise description of what this pr is about.
-->
related #867
closed #7
I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.
I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!
## Usage
````mdx
import { Sandpack } from '@/components'
<Sandpack
customSetup={{
dependencies: {
'@suspensive/react': 'latest',
'@suspensive/react-query': 'latest',
'@tanstack/react-query': '^4.0.0',
},
}}
>
```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
```
```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'
export default wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
const query = useSuspenseQuery({
queryKey: ['key'],
queryFn: () => api.text(),
})
return <>{query.data.text}</>
})
```
```js /api.ts
export const api = {
text: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { text: 'Hello, Suspensive!' }
},
}
```
</Sandpack>
````
### Result
https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8
## PR Checklist
- [x] I did below actions if need
1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
manudeli
pushed a commit
that referenced
this pull request
Aug 3, 2024
# Overview
<!--
A clear and concise description of what this pr is about.
-->
related #867
closed #7
I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.
I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!
## Usage
````mdx
import { Sandpack } from '@/components'
<Sandpack
customSetup={{
dependencies: {
'@suspensive/react': 'latest',
'@suspensive/react-query': 'latest',
'@tanstack/react-query': '^4.0.0',
},
}}
>
```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
```
```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'
export default wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
const query = useSuspenseQuery({
queryKey: ['key'],
queryFn: () => api.text(),
})
return <>{query.data.text}</>
})
```
```js /api.ts
export const api = {
text: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { text: 'Hello, Suspensive!' }
},
}
```
</Sandpack>
````
### Result
https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8
## PR Checklist
- [x] I did below actions if need
1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
manudeli
pushed a commit
that referenced
this pull request
Aug 3, 2024
# Overview
<!--
A clear and concise description of what this pr is about.
-->
related #867
closed #7
I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.
I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!
## Usage
````mdx
import { Sandpack } from '@/components'
<Sandpack
customSetup={{
dependencies: {
'@suspensive/react': 'latest',
'@suspensive/react-query': 'latest',
'@tanstack/react-query': '^4.0.0',
},
}}
>
```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
```
```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'
export default wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
const query = useSuspenseQuery({
queryKey: ['key'],
queryFn: () => api.text(),
})
return <>{query.data.text}</>
})
```
```js /api.ts
export const api = {
text: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { text: 'Hello, Suspensive!' }
},
}
```
</Sandpack>
````
### Result
https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8
## PR Checklist
- [x] I did below actions if need
1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
manudeli
pushed a commit
that referenced
this pull request
Aug 3, 2024
# Overview
<!--
A clear and concise description of what this pr is about.
-->
related #867
closed #7
I have set up the documentation to easily add examples in MDX using
Sandpack from CodeSandbox.
I have also carried over the theme selected in the [related
PR](#867). If there's anything
else that needs to be configured, please let me know!
## Usage
````mdx
import { Sandpack } from '@/components'
<Sandpack
customSetup={{
dependencies: {
'@suspensive/react': 'latest',
'@suspensive/react-query': 'latest',
'@tanstack/react-query': '^4.0.0',
},
}}
>
```js /App.tsx
import Example from './Example'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
```
```js /Example.tsx active
import { wrap } from '@suspensive/react'
import { useSuspenseQuery } from '@suspensive/react-query'
import { api } from './api'
export default wrap
.ErrorBoundaryGroup({ blockOutside: false })
.ErrorBoundary({ fallback: ({ error }) => <>{error.message}</> })
.Suspense({ fallback: <>loading...</>, clientOnly: true })
.on(() => {
const query = useSuspenseQuery({
queryKey: ['key'],
queryFn: () => api.text(),
})
return <>{query.data.text}</>
})
```
```js /api.ts
export const api = {
text: async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return { text: 'Hello, Suspensive!' }
},
}
```
</Sandpack>
````
### Result
https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8
## PR Checklist
- [x] I did below actions if need
1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
closed #7
Points to discuss
theme
I have selected the theme as
atom dark.Attach a link to the page that lists the available themes: https://sandpack.codesandbox.io/docs/getting-started/themes
Sandpack Component abstraction
It's hard to use autocomplete in MDX because there is no type inference.
I had a choice between constraining the interface to only accept code, and leaving the interface open to modify whenever needed, and I chose the latter.
Once I get this PR review, I'll look for improvements, fix them, and apply them to all articles in bulk.
PR Checklist