[Feature]: Support codesandbox to provide interactive examples

[manudeli]

Package Scope

docs

• [x] Add to an existing package
• [ ] New package

Package name:

Overview

Describe the solution you'd like

Additional context

[manudeli]

@minsoo-web How about making Pull Request for adding codesandbox embed in documentation Let's make our documentation like Panda CSS. Can I assign you with me?

[minsoo-web]

Of course. It is my pleasure. I will do my best 🚀🚀🚀

[minsoo-web]

How about like this case ? https://polaris.shopify.com/components/typography/text

[manudeli]

ref https://github.com/codesandbox/sandpack

[manudeli]

@minsoo-web Could I assign you for v2 docs soon?

@sonsurim We need someone have no experience for this library to see how difficulty to onboard with this. Could you be the one to see it objectively?

[minsoo-web]

@minsoo-web Could I assign you for v2 docs soon?

Of course, I'll work on it

[sonsurim]

@sonsurim We need someone have no experience for this library to see how difficulty to onboard with this. Could you be the one to see it objectively?

@manudeli Sure, that's great, I'll see it out and leave a comment!

[sonsurim]

@manudeli I was just wondering, Could I see it when it's done?

[manudeli]

@manudeli I was just wondering, Could I see it when it's done?

@sonsurim I guess that v2 will be release until at least in March, After then We need to do this work(codesandbox for interactive examples) in v2. at that time We need your help for new examples or comment or review

[manudeli]

reference

https://github.com/TanStack/query/blob/main/.codesandbox/ci.json

We can check examples in Pull Request too.

[minsoo-web]

@manudeli

I'd like to ask for your opinion, the docs of @chara-ui/react, which I'm using as a reference, are provided as a library called react-live. I'm impressed that you can add scope, so that you can modify only the code blocks you need without separate function declarations and import syntax.

However, I think the import syntax is necessary information for the user, and the function declaration and use-case should also show the entire code. I'd love to hear your thoughts on whether using react-live or sandpack is the right way to go!

[manudeli]

@kangju2000 @minsoo-web Make and share plan to implement this feature on https://suspensive.org/ please

[kangju2000]

@manudeli @minsoo-web

While searching for references, I came across a plugin called remark-sandpack

On react.dev, they compile MDX directly, but since Suspensive uses Nextra, we can attach the remark plugin.

If you use the plugin, here's how to do it:

Register remark plugin

next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires, import/order
const { remarkSandpack } = require('remark-sandpack')

// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-assignment, import/order
const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.tsx',
  defaultShowCopyCode: true,
+  mdxOptions: {
+    remarkPlugins: [remarkSandpack],
+  },
})

/** @type {import('next').NextConfig} */
module.exports = withNextra({
  i18n: {
    locales: ['en', 'ko'],
    defaultLocale: 'en',
  },
})

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

https://github.com/toss/suspensive/assets/23312485/370b6508-cd9b-494d-8ea6-28273eaabba8

How about using this instead of implementing it ourselves?

[kangju2000]

The differences in markdown rules on react.dev are as follows:

• Import Sandpack component at the top
• Pass dependencies as component props (on react.dev, these are written in code blocks)

[manudeli]

Wow.........!!!!!!!!! So much cooool! Could you make Pull Request too?

How about using this instead of implementing it ourselves?

Cool! I agree this

[manudeli]

@kangju2000 Could you make playgrounds of Suspensive 1 page by 1 page or 1 feature by 1 feaure please?

[kangju2000]

• [ ] @suspensive/react
  • [ ] Migrating to v2
  • [ ] <Suspense />
  • [x] <ErrorBoundary />
  • [x] <ErrorBoundaryGroup /> https://github.com/toss/suspensive/pull/1002
  • [x] <Delay />
  • [x] <DefaultPropsProvider />
  • [x] <DevMode />
  • [x] wrap https://github.com/toss/suspensive/pull/1017
• [ ] @suspensive/react-query
  • [ ] Migrating to v2
  • [x] useSuspenseQuery https://github.com/toss/suspensive/pull/1003
  • [x] useSuspenseQueries https://github.com/toss/suspensive/pull/1003
  • [x] useSuspenseInfiniteQuery https://github.com/toss/suspensive/pull/1003
  • [x] queryOptions
  • [x] <SuspenseQuery /> https://github.com/toss/suspensive/pull/1016
  • [x] <SuspenseQueries /> https://github.com/toss/suspensive/pull/1016
  • [x] <SuspenseInfiniteQuery /> https://github.com/toss/suspensive/pull/1016
  • [ ] <QueryErrorBoundary />

[coauthors[bot]]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	https://github.com/toss/suspensive/issues/7 https://github.com/toss/suspensive/issues/7#issuecomment-1757687716 https://github.com/toss/suspensive/issues/7#issuecomment-1790619738 https://github.com/toss/suspensive/issues/7#issuecomment-1897867546 https://github.com/toss/suspensive/issues/7#issuecomment-1899951940 https://github.com/toss/suspensive/issues/7#issuecomment-1900326016 https://github.com/toss/suspensive/issues/7#issuecomment-2185554397 https://github.com/toss/suspensive/issues/7#issuecomment-2185608336 https://github.com/toss/suspensive/issues/7#issuecomment-2186422997	9	Co-authored-by: manudeli <[email protected]>
@minsoo-web	https://github.com/toss/suspensive/issues/7#issuecomment-1758655721 https://github.com/toss/suspensive/issues/7#issuecomment-1759083122 https://github.com/toss/suspensive/issues/7#issuecomment-1897938801 https://github.com/toss/suspensive/issues/7#issuecomment-1914583686	4	Co-authored-by: minsoo-web <[email protected]>
@kangju2000	https://github.com/toss/suspensive/issues/7#issuecomment-2185590968 https://github.com/toss/suspensive/issues/7#issuecomment-2185595130 https://github.com/toss/suspensive/issues/7#issuecomment-2198736852	3	Co-authored-by: kangju2000 <[email protected]>
@sonsurim	https://github.com/toss/suspensive/issues/7#issuecomment-1899784861 https://github.com/toss/suspensive/issues/7#issuecomment-1899796306	2	Co-authored-by: sonsurim <[email protected]>