Git Product home page Git Product logo

react's Introduction



npm version npm npm bundle size

All declarative components to use suspense on both CSR, SSR.

Features

  • Suspense
  • ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps
  • ErrorBoundaryGroup, useErrorBoundaryGroup
  • Delay
  • SuspensiveProvider, Suspensive
  • DevMode

Installation

npm install @suspensive/react
pnpm add @suspensive/react
yarn add @suspensive/react

Usage

import { Suspense, ErrorBoundary, ErrorBoundaryGroup, Delay } from '@suspensive/react'

const Example = () => (
  <ErrorBoundaryGroup>
    <ErrorBoundaryGroup.Consumer>
      {(group) => <Button onClick={group.reset}>Reset All</Button>}
    </ErrorBoundaryGroup.Consumer>
    <ErrorBoundary
      fallback={(props) => (
        <>
          <button onClick={props.reset}>Try again</button>
          {props.error.message}
        </>
      )}
    >
      <Suspense
        fallback={
          <Delay>
            <Spinner />
          </Delay>
        }
      >
        <SuspendedComponent />
      </Suspense>
    </ErrorBoundary>
  </ErrorBoundaryGroup>
)


npm version npm npm bundle size

Declarative apis to use @tanstack/react-query with suspense easily.

Features

  • useSuspenseQuery
  • useSuspenseQueries
  • useSuspenseInfiniteQuery
  • QueryErrorBoundary

Installation

npm install @suspensive/react-query
pnpm add @suspensive/react-query
yarn add @suspensive/react-query

Usage

import { Suspense } from '@suspensive/react'
import { QueryErrorBoundary, useSuspenseQuery } from '@suspensive/react-query'

const Example = () => (
  <QueryErrorBoundary
    fallback={(props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    )}
  >
    <Suspense fallback={<Spinner />}>
      <SuspendedComponent />
    </Suspense>
  </QueryErrorBoundary>
)

const SuspendedComponent = () => {
  const query = useSuspenseQuery({
    queryKey,
    queryFn,
  })

  return <>{query.data}</>
}

Docs deployment

We provide Official Docs

See OFFICIAL DOCS


Visualization deployment

Concepts Visualization ready. You can see core concepts of Suspensive visually

See VISUALIZATION.


Contributing

Read our Contributing Guide to familiarize yourself with Suspensive's development process, how to suggest bug fixes and improvements, and the steps for building and testing your changes.

Contributors

contributors


License

MIT © Suspensive. See LICENSE for details.

react's People

Contributors

codebutler avatar dependabot[bot] avatar github-actions[bot] avatar jinn2u avatar kanary159357 avatar manudeli avatar minsoo-web avatar okinawaa avatar renovate[bot] avatar seokkamoni avatar ssi02014 avatar sukvvon avatar sungh0lim avatar tooooo1 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react's Issues

[Feature]: Support @suspensive/swr

Package Scope

@suspensive/swr

  • Add to an existing package
  • New package

Package name: swr

Overview

Describe the solution you'd like

Additional context

[Feature]: Video

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

[Feature]: add publint

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

[BUG]: onSuccess doesn't update the state of the component

Package Scope

useSuspenseQuery

Package name:
@suspensive/react-query

Describe the bug

I'm trying to update state from onSuccess callback of the query this way

const Test = () => {
  const [test, setTest] = useState(0);

  useSuspensiveQuery({
    queryKey: ['some-key'],
    queryFn: somePromise,
    onSuccess: () => {
      setTest(1)
    }
  })

  console.log(test); // it would be 0
  
}

Expected behavior

State should be 1 on success.

To Reproduce

See below

[Feature]: SuspensiveDevtool

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

Rename isDifferentArray function

Oh Thanks, you're right. different of isDifferentArray is limited different. I didn't think about this when I created this function. I made it by referring to the comparison operation of dependencyList of useEffect hook.
Isn't there a better name for this function? If there is a better name, I think it would be nice to make it an issue and work on it in the next PR.

It would be nice to change function name, too!
I think we should think of a good name!

Originally posted by @ChanhyukPark-Tech in #28 (comment)

[Feature]: Expand test coverage for AsyncBoundary

Package Scope

  • Add to an existing package
  • New package

Package name: suspensive/react

Overview

The test coverage for the AsyncBoundary component is currently insufficient. The given test case performs a simple rendering test, but there are no tests that verify whether the key features of AsyncBoundary work properly. Given that AsyncBoundary is a critical component that manages async loading states and error handling, it's essential that comprehensive tests are in place.

Describe the solution you'd like

I propose adding tests for the async loading and error handling aspects of the AsyncBoundary component.

Additional context

AsyncBoundary test code

// suspensive test code
import { render } from '@testing-library/react'

describe('test', () => {
  it('should test', () => {
    const TEST_TEXT = 'suspensive'
    const fixture = render(<div>{TEST_TEXT}</div>)

    expect(fixture.getByText(TEST_TEXT)).toBeInTheDocument()
  })
})

At present, our test code seems to exist only to fulfill the requirement of having test code. What we need is true testing that effectively validates our application's behavior. This will be instrumental in facilitating the next leap forward for our Suspensive service...

[Feature]: use GitHub Package

Package Scope

  • Add to an existing package

Package name: all

Overview

Describe the solution you'd like

Additional context

[Feature]: Add changeset

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

[Feature]: add useErrorBoundary

Package Scope

react

  • Add to an existing package
  • New package

Package name: react

Overview

Describe the solution you'd like

Additional context

[Feature]: new Typescript version(v5) support!

Package Scope

  • Add to an existing package
  • New package

Package name: entire package, root typescript version

Overview

Type script version 5 was actually released, so it would be good to apply it.

Describe the solution you'd like

Upgrade entire typescript version

Additional context

[BUG]: Query does not refetch on the next mount

Package Scope

Package name:
suspensive/react

Describe the bug

broken query triggers boundary but it does not refetch it on the next mount.

Expected behavior

Query should be refetched on the second mount of the component

To Reproduce

https://github.com/timsofteng/query-boundary-bug

suspensive branch

steps:

yarn install && yarn dev
Open http://127.0.0.1:5173/one
Click to page two. See an error in query and in boundary.
Click to page one. Page one should be rendered ok.
Click to page two. Boundary is displayed but query does not refetch.

Possible Solution

Additional context

[Feature]: add tsup

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

[Feature]: tsd jest integration

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

Describe the solution you'd like

Additional context

[Feature]: new public api documentation

Package Scope

  • Add to an existing package

Package name: @suspensive/react

Overview

  • Delay
  • SuspensiveProvider, SuspensiveConfigs
  • suspenseCache, useSuspenseCache

Describe the solution you'd like

Additional context

[BUG]: enabled prop doesn't change output data type

Package Scope

useSuspensiveQuery

Package name:
@suspensive/react-query

Describe the bug

If useSuspensiveQuery has enabled: boolean param then it means data may be undefined (DataType: TData | undefined).
Howerver it is defined despite of enabled param. It may breaks component if user try to get some inner data like data.someInnerKey.
Uncaught TypeError: Cannot read properties of undefined

Expected behavior

I guess the lib should mark data type as TData | undefined and status "loading" | "success" in case useSuspensiveQuery has enabled param.

To Reproduce

Possible Solution

Additional context

BaseErrorbounday fallback type is something wrong in @suspensive/react

Relevant code or config

fallback: ReactNode | ((props: { error: Error; reset: (...args: unknown[]) => void }) => ReactNode)

Problem description:

fallback type has reset prop and it take arg as a factor. but It's not used anywhere

Suggested solution:

i think it works too

fallback: ReactNode | ((props: { error: Error; reset: () => void }) => ReactNode)

[Feature]: I want something like CHANGELOG.md

Package Scope

  • Add to an existing package
  • New package

Package name:

Overview

I'm actually using suspensive well because you provided me a good library. I'm looking forward to it more and more because you're continuing to update new features.
As a library user, I wonder what features have been added depending on the version. It would be nice if we could check the update log and so on somewhere other than PR or commit!

Describe the solution you'd like

  • github release ?

Additional context

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.