search

toss / suspensive

Manage asynchronous operations, timing, error handling, detecting intersection of elements, and caching easily and declaratively (One of TanStack Query community resources)
https://suspensive.org
MIT License
479 stars 45 forks source link

[Feature]: Support codesandbox to provide interactive examples #7

Closed manudeli closed 1 month ago

manudeli commented 1 year ago

Package Scope

docs

Package name:

Overview

Describe the solution you'd like

Additional context

manudeli commented 11 months ago

@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 commented 11 months ago

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

minsoo-web commented 11 months ago
image

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

manudeli commented 10 months ago

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

manudeli commented 7 months ago

@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 commented 7 months ago

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

Of course, I'll work on it

sonsurim commented 7 months ago

@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 commented 7 months ago

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

manudeli commented 7 months ago

@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 commented 7 months ago

reference

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

We can check examples in Pull Request too.

image
minsoo-web commented 7 months ago

@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 commented 2 months ago

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

kangju2000 commented 2 months ago

@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>
  )
}
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}</>
  })
export const api = {
  text: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    return { text: 'Hello, Suspensive!' }
  },
}



### Result

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

How about using this instead of implementing it ourselves?
kangju2000 commented 2 months ago

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

manudeli commented 2 months ago

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

How about using this instead of implementing it ourselves?

Cool! I agree this

manudeli commented 2 months ago

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

kangju2000 commented 2 months ago
coauthors[bot] commented 2 days ago

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 <61593290+manudeli@users.noreply.github.com>
@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 <57122180+minsoo-web@users.noreply.github.com>
@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 <23312485+kangju2000@users.noreply.github.com>
@sonsurim https://github.com/toss/suspensive/issues/7#issuecomment-1899784861 https://github.com/toss/suspensive/issues/7#issuecomment-1899796306 2 Co-authored-by: sonsurim <47546413+sonsurim@users.noreply.github.com>