feat(react): update wrap as builder pattern

[manudeli]

related with #269

Overview

I update wrap as builder pattern to remove wrap nesting.

AS-IS (wrap nesting with importing all public apis(ErrorBoundary, Suspense, etc.))

import { ErrorBoundary, ErrorBoundaryGroup, Suspense, useErrorBoundary, wrap } from '@suspensive/react'
import { UseSuspenseQuery } from '~/components'
import { api } from '~/utils'

const logError = (error: Error) => console.error(error)

export default wrap(ErrorBoundaryGroup, { blockOutside: false })(
  wrap(ErrorBoundary, { fallback: (props) => <>{props.error.message}</>, onError: logError })(
    wrap(Suspense.CSROnly, { fallback: <>loading...</> })(() => {
      const errorBoundary = useErrorBoundary()

      return (
        <>
          <button onClick={() => errorBoundary.setError(new Error('trigger error by useErrorBoundary().setError'))}>
            trigger error by useErrorBoundary().setError
          </button>
          <UseSuspenseQuery queryKey={['with', 1] as const} queryFn={() => api.delay(200, { percentage: 50 })} />
        </>
      )
    })
  )
)

TO-BE (wrap builder with no import)

import { useErrorBoundary, wrap } from '@suspensive/react' // It's easy

const logError = (error: Error) => console.error(error)

export default wrap
  .ErrorBoundaryGroup({ blockOutside: false })
  .ErrorBoundary({ fallback: (props) => <div>{props.error.message}</div>, onError: logError })
  .Suspense.CSROnly({ fallback: 'loading...' }) // CSROnly chaining available
  .on<{ text: string }>(({ text }) => { // We can type of Page at once. generic also available
    const errorBoundary = useErrorBoundary()

    return (
      <div>
        <button onClick={() => errorBoundary.setError(new Error('trigger error by useErrorBoundary().setError'))}>
          trigger error by useErrorBoundary().setError
        </button>
        {text}
      </div>
    )
  })

PR Checklist

• I did below actions if need

1. I read the Contributing Guide
2. I added documents and tests.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 57d4423

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 2, 2023 0:23am
visualization	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 2, 2023 0:23am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov]

Codecov Report

Merging #280 (57d4423) into react/feat/wrap (d1a04f7) will not change coverage.
The diff coverage is 100.00%.

@@                Coverage Diff                @@
##           react/feat/wrap      #280   +/-   ##
=================================================
  Coverage           100.00%   100.00%           
=================================================
  Files                   24        24           
  Lines                  752       839   +87     
  Branches               126       143   +17     
=================================================
+ Hits                   752       839   +87     

Components	Coverage Δ
@suspensive/react	100.00% <100.00%> (ø)
@suspensive/react-query	∅ <ø> (∅)
@suspensive/react-await	100.00% <ø> (ø)

[minsoo-web]

GooD!

[manudeli]

@okinawaa Review this Pull Request please. I want to get approval from all maintainers because this new feature will be important change of @suspensive/react

[manudeli]

@okinawaa I merge this to react/feat/wrap first, because I think this branch's implementation is better than it. then review react/feat/wrap's Pull Request plesae. If it have problem, I will change it