[Feature]: Support codesandbox to provide interactive examples

[manudeli]

Package Scope

docs

• 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

2024-06-24.1.32.43.mov

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 />
  • <ErrorBoundary />
  • <ErrorBoundaryGroup /> docs(suspensive.org): add ErrorBoundaryGroup examples using sandpack #1002
  • <Delay />
  • <DefaultPropsProvider />
  • <DevMode />
  • wrap docs(suspensive.org): add sandpack example to wrap #1017
• @suspensive/react-query
  • Migrating to v2
  • useSuspenseQuery docs(suspensive.org): add sandpack examples to useSuspenseQuery, useSuspenseQueries, and useSuspenseInfiniteQuery #1003
  • useSuspenseQueries docs(suspensive.org): add sandpack examples to useSuspenseQuery, useSuspenseQueries, and useSuspenseInfiniteQuery #1003
  • useSuspenseInfiniteQuery docs(suspensive.org): add sandpack examples to useSuspenseQuery, useSuspenseQueries, and useSuspenseInfiniteQuery #1003
  • queryOptions
  • <SuspenseQuery /> docs(suspensive.org): add sandpack examples to SuspenseQuery, SuspenseQueries, and SuspenseInfiniteQuery #1016
  • <SuspenseQueries /> docs(suspensive.org): add sandpack examples to SuspenseQuery, SuspenseQueries, and SuspenseInfiniteQuery #1016
  • <SuspenseInfiniteQuery /> docs(suspensive.org): add sandpack examples to SuspenseQuery, SuspenseQueries, and SuspenseInfiniteQuery #1016
  • <QueryErrorBoundary />

[coauthors]

People can be co-author:

Candidate	Reasons	Count	Add this as commit message
@manudeli	#7 #7 (comment) #7 (comment) #7 (comment) #7 (comment) #7 (comment) #7 (comment) #7 (comment) #7 (comment)	9	Co-authored-by: manudeli <61593290+manudeli@users.noreply.github.com>
@minsoo-web	#7 (comment) #7 (comment) #7 (comment) #7 (comment)	4	Co-authored-by: minsoo-web <57122180+minsoo-web@users.noreply.github.com>
@kangju2000	#7 (comment) #7 (comment) #7 (comment)	3	Co-authored-by: kangju2000 <23312485+kangju2000@users.noreply.github.com>
@sonsurim	#7 (comment) #7 (comment)	2	Co-authored-by: sonsurim <47546413+sonsurim@users.noreply.github.com>