Skip to content

Commit

Permalink
Support React 18
Browse files Browse the repository at this point in the history
  • Loading branch information
@santino
santino committed Jun 7, 2022
1 parent bd88f72 commit 7a3a2e6
Show file tree
Hide file tree
Showing 4 changed files with 2,389 additions and 1,974 deletions.
55 changes: 28 additions & 27 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"bugs": {
"url": "https://github.com/santino/react-concurrent-router/issues"
},
"homepage": "https://github.com/santino/react-concurrent-router",
"homepage": "https://github.com/santino/react-concurrent-router#readme",
"keywords": [
"react",
"router",
Expand Down Expand Up @@ -95,46 +95,47 @@
},
"devDependencies": {
"@ampproject/rollup-plugin-closure-compiler": "^0.27.0",
"@babel/core": "^7.16.10",
"@babel/plugin-proposal-object-rest-spread": "^7.16.7",
"@babel/core": "^7.18.2",
"@babel/plugin-proposal-object-rest-spread": "^7.18.0",
"@babel/plugin-transform-object-assign": "^7.16.7",
"@babel/plugin-transform-react-constant-elements": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.16.10",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/runtime": "^7.16.7",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"@testing-library/dom": "^8.11.2",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@types/react": "^17.0.38",
"@babel/plugin-transform-react-constant-elements": "^7.17.12",
"@babel/plugin-transform-runtime": "^7.18.2",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@babel/runtime": "^7.18.3",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@types/react": "^18.0.12",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.4.6",
"babel-jest": "^28.1.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"bundlewatch": "^0.3.3",
"cherry-pick": "^0.5.0",
"coveralls": "^3.1.1",
"cross-env": "^7.0.3",
"doctoc": "^2.1.0",
"doctoc": "^2.2.0",
"dtslint": "^4.2.1",
"jest": "^27.4.7",
"lint-staged": "^12.2.2",
"jest": "^28.1.1",
"jest-environment-jsdom": "^28.1.1",
"lint-staged": "^13.0.0",
"open-cli": "^7.0.1",
"prettier-standard": "^16.3.0",
"prettier-standard": "^16.4.1",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"rimraf": "^3.0.2",
"rollup": "^2.65.0",
"rollup": "^2.75.5",
"rollup-plugin-terser": "^7.0.2",
"standard": "^16.0.4",
"typescript": "^4.5.5"
"standard": "^17.0.0",
"typescript": "^4.7.3"
},
"peerDependencies": {
"@babel/runtime": "^7.11.0",
"react": "^16.8.0",
"react-dom": "^16.8.0"
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
}
9 changes: 2 additions & 7 deletions src/RouteRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import React, {
useMemo,
useState
} from 'react'
import { unstable_batchedUpdates } from 'react-dom'
import PropTypes from 'prop-types'
import RouterContext from './RouterContext'

Expand Down Expand Up @@ -83,12 +82,8 @@ const RouteRenderer = ({ pendingIndicator }) => {
? await computePendingEntry(nextEntry)
: nextEntry

// Don't get fooled by the 'unstable' prefix; according to Dan this is one of the most stable
// hooks. It allow us to batch state updates, which ultimatey prevents multiple re-renders.
unstable_batchedUpdates(() => {
setRouteEntry(routeEntry)
setIsPendingEntry(false)
})
setRouteEntry(routeEntry)
setIsPendingEntry(false)
})
return () => dispose() // cleanup/unsubscribe function
}, [assistPrefetch, awaitComponent, computePendingEntry, subscribe])
Expand Down
80 changes: 38 additions & 42 deletions src/__tests__/RouteRenderer.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

import '@testing-library/jest-dom/extend-expect'
import React, { Suspense } from 'react'
import { waitFor } from '@testing-library/dom'
import { act, render } from '@testing-library/react'

import SuspendableResource from '../SuspendableResource'
Expand Down Expand Up @@ -99,7 +98,7 @@ describe('RouteRenderer', () => {
)
})

it('"Suspends" the component whilst promise for this is resolving', done => {
it('"Suspends" the component whilst promise for this is resolving', async () => {
const componentResource = new SuspendableResource(
() =>
new Promise(resolve => {
Expand All @@ -115,10 +114,9 @@ describe('RouteRenderer', () => {
expect(queryByText('Suspense fallback...')).not.toBe(null)
expect(queryByText('My Component')).toBe(null)

setTimeout(() => {
await setTimeout(() => {
expect(queryByText('Suspense fallback...')).toBe(null)
expect(queryByText('My Component')).not.toBe(null)
done()
}, 520)
})

Expand All @@ -127,7 +125,7 @@ describe('RouteRenderer', () => {
expect(getByTestId('routeEntry')).toHaveTextContent('Initial')

// mock subscription notification
await act(async () => {
await act(() => {
mockRouterSubscribe.mock.calls[0][0](newRouteEntry)
})

Expand Down Expand Up @@ -196,7 +194,7 @@ describe('RouteRenderer', () => {
expect(queryByText('My Component')).toBe(null)

// mock subscription notification
await act(async () => {
await act(() => {
mockRouterSubscribe.mock.calls[0][0]({ component: newComponentResource })
})

Expand All @@ -205,12 +203,13 @@ describe('RouteRenderer', () => {
expect(getByTestId('paramsProp')).toHaveTextContent('{"baz":"qux"}')
expect(queryByText('Pending indicator...')).not.toBe(null)

await waitFor(() => expect(queryByText('My Component')).not.toBe(null))

expect(queryByTestId('routeEntry')).toBe(null)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
await setTimeout(() => {
expect(queryByText('My Component')).not.toBe(null)
expect(queryByTestId('routeEntry')).toBe(null)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
}, 520)
})

it('Waits for non-deferrable prefetch property on new entry, in assist-prefetch mode', async () => {
Expand Down Expand Up @@ -259,7 +258,7 @@ describe('RouteRenderer', () => {
expect(queryByText('Pending indicator...')).toBe(null)

// mock subscription notification
await act(async () => {
await act(() => {
mockRouterSubscribe.mock.calls[0][0](newEntry)
})

Expand All @@ -270,15 +269,16 @@ describe('RouteRenderer', () => {
expect(getByTestId('paramsProp')).toHaveTextContent('{"baz":"qux"}')
expect(queryByText('Pending indicator...')).not.toBe(null)

await waitFor(() => expect(queryByText('Pending indicator...')).toBe(null))

expect(getByTestId('routeEntry')).toHaveTextContent('Subscribed')
expect(getByTestId('prefetchedTestData')).toHaveTextContent(
'{"garply":"waldo"}'
)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
await setTimeout(() => {
expect(queryByText('Pending indicator...')).toBe(null)
expect(getByTestId('routeEntry')).toHaveTextContent('Subscribed')
expect(getByTestId('prefetchedTestData')).toHaveTextContent(
'{"garply":"waldo"}'
)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
}, 320)
})

it('Waits only for non-deferrable prefetch property on new entry, in assist-prefetch mode', async () => {
Expand Down Expand Up @@ -342,34 +342,30 @@ describe('RouteRenderer', () => {
expect(queryByText('Pending indicator...')).toBe(null)

// mock subscription notification
await act(async () => {
await act(() => {
mockRouterSubscribe.mock.calls[0][0](newEntry)
})

expect(queryByText('Pending indicator...')).not.toBe(null)
expect(getByTestId('routeEntry')).toHaveTextContent('Initial')
expect(queryByTestId('prefetchedTestData')).toBe(null)

await waitFor(() =>
expect(queryByText('Suspense fallback...')).not.toBe(null)
)

// since we have been waiting for the faster request only we will fallback
// to Suspense boundary once that completes and whilst the second request is resolved
expect(queryByText('Pending indicator...')).toBe(null)
expect(queryByTestId('routeEntry')).toBe(null)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByTestId('prefetchedTestData')).toBe(null)

await waitFor(() =>
expect(getByTestId('routeEntry')).toHaveTextContent('Subscribed')
)

expect(queryByText('Suspense fallback...')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
expect(getByTestId('prefetchedTestData')).toHaveTextContent(
'{"garply":"waldo","fred":"plugh"}'
)
await setTimeout(() => {
expect(queryByText('Pending indicator...')).toBe(null)
expect(queryByTestId('routeEntry')).toBe(null)
expect(queryByTestId('prefetchedProp')).toBe(null)
expect(queryByTestId('paramsProp')).toBe(null)
expect(queryByTestId('prefetchedTestData')).toBe(null)
}, 320)

await setTimeout(() => {
expect(queryByText('Suspense fallback...')).toBe(null)
expect(queryByText('Pending indicator...')).toBe(null)
expect(getByTestId('prefetchedTestData')).toHaveTextContent(
'{"garply":"waldo","fred":"plugh"}'
)
}, 520)
})
})
Loading

0 comments on commit 7a3a2e6

Please sign in to comment.