feat(suspensive.org): add Sandpack component #963

kangju2000 · 2024-06-24T05:14:13Z

Overview

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. If there's anything else that needs to be configured, please let me know!

Usage

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

2024-06-24.1.32.43.mov

PR Checklist

I did below actions if need

I read the Contributing Guide
I added documents and tests.

vercel · 2024-06-24T05:14:16Z

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

changeset-bot · 2024-06-24T05:14:16Z

🦋 Changeset detected

Latest commit: 9863328

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

codspeed-hq · 2024-06-24T05:23:35Z

CodSpeed Performance Report

Merging #963 will create unknown performance changes

_{Comparing sandpack (9863328) with main (20119f8)}

Summary

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

codecov-commenter · 2024-06-24T05:23:43Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 80.67%. Comparing base (20119f8) to head (9863328).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #963   +/-   ##
=======================================
  Coverage   80.67%   80.67%           
=======================================
  Files          36       36           
  Lines         445      445           
  Branches       98       98           
=======================================
  Hits          359      359           
  Misses         77       77           
  Partials        9        9

Components	Coverage Δ
@suspensive/react	`96.98% <ø> (ø)`
@suspensive/react-query	`∅ <ø> (∅)`
@suspensive/react-query-4	`0.00% <ø> (ø)`
@suspensive/react-query-5	`0.00% <ø> (ø)`
@suspensive/react-await	`100.00% <ø> (ø)`
@suspensive/react-image	`23.52% <ø> (ø)`

manudeli · 2024-06-24T05:32:48Z

docs/suspensive.org/src/components/Sandpack/index.tsx

+import { atomDark } from '@codesandbox/sandpack-themes'
+import type { ComponentProps } from 'react'
+
+export const Sandpack = (props: Omit<ComponentProps<typeof SandpackReact>, 'template'>) => {


So cool! ❄️

minsoo-web

So cool 🚀
Many thanks!!

# Overview  related #963 To resolve the changeset CI error, remove the changeset from the previous PR. ## 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.

# Overview  In this [PR](#963), the TypeScript version in the lockfile was changed to my local version "5.5.2", so I reverted it. 😅 ## 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.

# Overview  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.