feat(react): add DevMode

[manudeli]

fix: #446

Overview

@okinawaa @minsoo-web I want to add new feature DevMode in @suspensive/react or in new package @suspensive/react-devtools

Before add new feature, I want discuss this without explaining it. because I want to make DevMode's user understand it easily without studying

'use client'

import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
import { DevMode, ErrorBoundary, Suspense, devMode } from '@suspensive/react'
import { Area, Box, Button, Spinner } from '~/components/uis'

export default function Page() {
  return (
    <Area title="devMode">
      <Area title="<Suspense devMode={{ showFallback: true }} />">
        <Suspense fallback={<Spinner />} devMode={{ showFallback: true }}>
          <Box.Success>children</Box.Success>
        </Suspense>
      </Area>

      <Area title="<ErrorBoundary devMode={{ showFallback: true }} />">
        <ErrorBoundary fallback={ErrorBoundaryFallback} devMode={{ showFallback: true }}>
          <Box.Default>children</Box.Default>
        </ErrorBoundary>
      </Area>
      <Area title="<ErrorBoundary devMode={{ showFallback: { after: 2000 } }} />">
        <ErrorBoundary fallback={ErrorBoundaryFallback} devMode={{ showFallback: { after: 2000 } }}>
          <Box.Default>children</Box.Default>
        </ErrorBoundary>
      </Area>
    </Area>
  )
}

const ErrorBoundaryFallback = ({ error, reset }: ErrorBoundaryFallbackProps) => (
  <Box.Error>
    {error.message}
    <Button onClick={reset}>↻</Button>
  </Box.Error>
)

PR Checklist

• I did below actions if need

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 4e05229

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

This PR includes changesets to release 3 packages

Name	Type
@suspensive/react	Minor
@suspensive/react-query	Minor
@suspensive/visualization	Patch

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

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
docs-v1	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 25, 2023 4:09pm
docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 25, 2023 4:09pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
visualization	⬜️ Ignored (Inspect)	Visit Preview		Dec 25, 2023 4:09pm

[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 #470 (4e05229) into main (b28ae8e) will decrease coverage by 7.27%.
The diff coverage is 50.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #470      +/-   ##
==========================================
- Coverage   81.37%   74.11%   -7.27%     
==========================================
  Files          25       29       +4     
  Lines         392      452      +60     
  Branches       84      110      +26     
==========================================
+ Hits          319      335      +16     
- Misses         63       98      +35     
- Partials       10       19       +9     

Components	Coverage Δ
@suspensive/react	84.11% <50.00%> (-15.89%)	⬇️
@suspensive/react-query	0.00% <ø> (ø)
@suspensive/react-await	100.00% <ø> (ø)
@suspensive/react-image	24.00% <ø> (ø)

[minsoo-web]

First of all, I'm sorry for the late confirmation.

In my case, I understood by looking at the code, but from the user's point of view, there seems to be something that needs to be improved by showing documents and example cases.

From my understanding, DevMode's role seems to be a tool to help you control

"when you want to see the fallback of Suspense, Errorboundry on purpose,"

is that right?

I think DevMode's naming made it harder to understand for now.

And assuming that we usually use developer tools, I think we only declared it once at the top and tested the development environment using only that tool. Redux or react-query are examples of that.

But now that user only can control each by calling DevMode components to a specific Suspense and Errorboundry, I thought it might be a little inconvenient for users.
Because, I think I'll have to intentionally erase the code when I go to production.

First of all, I think that if I understand what I meant, it would give me a great DX.
But I thought that we should give to user a guide through clear examples and documents to improve.

[minsoo-web]

And visualization app is also production, user can't see Devmode 😢

[manudeli]

Note to remember idea: how about make each Suspense, ErrorBoundary contain DevMode