Upgrade React and update React.lazy support

Author: kitten

package.json

@@ -50,7 +50,7 @@
     }
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "@ampproject/rollup-plugin-closure-compiler": "^0.26.0",
@@ -72,8 +72,8 @@
     "lint-staged": "^10.5.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "rollup": "^2.33.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-replace": "^2.2.0",

src/__tests__/element.test.js

@@ -26,13 +26,6 @@ describe('typeOf', () => {
       })
     ).toBe(REACT_PORTAL_TYPE)
 
-    expect(
-      typeOf({
-        $$typeof: is.Element,
-        type: is.ConcurrentMode
-      })
-    ).toBe(REACT_CONCURRENT_MODE_TYPE)
-
     expect(
       typeOf({
         $$typeof: is.Element,

src/__tests__/suspense.test.js

@@ -52,7 +52,7 @@ describe('renderPrepass', () => {
 
       const render$ = renderPrepass(<Outer />)
 
-      return render$.catch(error => {
+      return render$.catch((error) => {
         expect(Inner).toHaveBeenCalledTimes(1)
         expect(error).toBe(exception)
       })
@@ -66,7 +66,7 @@ describe('renderPrepass', () => {
         return null
       }
 
-      const Wait = props => {
+      const Wait = (props) => {
         const start = Date.now()
         while (Date.now() - start < 21) {}
         return props.children
@@ -149,7 +149,7 @@ describe('renderPrepass', () => {
         })
         .mockImplementationOnce(() => value)
 
-      const Inner = jest.fn(props => {
+      const Inner = jest.fn((props) => {
         expect(props.value).toBe(value)
         // We expect useState to work across suspense
         expect(props.state).toBe('test')
@@ -191,7 +191,7 @@ describe('renderPrepass', () => {
         })
         .mockImplementation(() => 'test')
 
-      const Inner = jest.fn(props => {
+      const Inner = jest.fn((props) => {
         expect(props.value).toBe('test')
         expect(props.state).toBe('test')
       })
@@ -232,7 +232,7 @@ describe('renderPrepass', () => {
         })
         .mockImplementation(() => 'test')
 
-      const Inner = jest.fn(props => {
+      const Inner = jest.fn((props) => {
         expect(props.state).toBe('test')
       })
 
@@ -263,7 +263,7 @@ describe('renderPrepass', () => {
       const Inner = jest.fn(() => null)
       const Outer = jest.fn(() => <Inner />)
 
-      const visitor = jest.fn(element => {
+      const visitor = jest.fn((element) => {
         if (element.type === Inner) return Promise.resolve()
       })
 
@@ -294,7 +294,7 @@ describe('renderPrepass', () => {
         })
         .mockImplementationOnce(() => value)
 
-      const Inner = jest.fn(props => expect(props.value).toBe(value))
+      const Inner = jest.fn((props) => expect(props.value).toBe(value))
 
       class Outer extends Component {
         render() {
@@ -389,12 +389,12 @@ describe('renderPrepass', () => {
   describe('lazy components', () => {
     it('supports resolving lazy components', () => {
       const value = {}
-      const Inner = jest.fn(props => expect(props.value).toBe(value))
+      const Inner = jest.fn((props) => expect(props.value).toBe(value))
       const loadInner = jest.fn().mockResolvedValueOnce(Inner)
 
       const Outer = React.lazy(loadInner)
       // Initially React sets the lazy component's status to -1
-      expect(Outer._status).toBe(-1 /* INITIAL */)
+      expect(Outer._payload._status).toBe(-1 /* INITIAL */)
 
       const render$ = renderPrepass(<Outer value={value} />)
 
@@ -405,14 +405,14 @@ describe('renderPrepass', () => {
 
       // The lazy component's state should be updated with some initial
       // progress
-      expect(Outer._status).toBe(0 /* PENDING */)
+      expect(Outer._payload._status).toBe(0 /* PENDING */)
 
       return render$.then(() => {
         // Afterwards we can expect Inner to have loaded and rendered
         expect(Inner).toHaveBeenCalledTimes(1)
 
         // The lazy component's state should reflect this
-        expect(Outer._status).toBe(1 /* SUCCESSFUL */)
+        expect(Outer._payload._status).toBe(1 /* SUCCESSFUL */)
       })
     })
 
@@ -424,28 +424,11 @@ describe('renderPrepass', () => {
 
       expect(Inner).not.toHaveBeenCalled()
       expect(loadInner).toHaveBeenCalledTimes(1)
-      expect(Outer._status).toBe(0 /* PENDING */)
+      expect(Outer._payload._status).toBe(0 /* PENDING */)
 
       return render$.then(() => {
         expect(Inner).toHaveBeenCalledTimes(1)
-        expect(Outer._status).toBe(1 /* SUCCESSFUL */)
-      })
-    })
-
-    it('supports skipping rejecting lazy components', () => {
-      const Inner = jest.fn(() => null)
-      const loadInner = jest.fn().mockRejectedValueOnce(new Error('test'))
-      const Outer = React.lazy(loadInner)
-      const render$ = renderPrepass(<Outer />)
-
-      expect(Inner).not.toHaveBeenCalled()
-      expect(loadInner).toHaveBeenCalledTimes(1)
-      expect(Outer._status).toBe(0 /* PENDING */)
-
-      return render$.then(() => {
-        expect(Inner).toHaveBeenCalledTimes(0)
-        // The lazy component's state should reflect the rejected promise
-        expect(Outer._status).toBe(2 /* FAILED */)
+        expect(Outer._payload._status).toBe(1 /* SUCCESSFUL */)
       })
     })
 
@@ -455,10 +438,10 @@ describe('renderPrepass', () => {
       const render$ = renderPrepass(<Outer />)
 
       expect(loadInner).toHaveBeenCalledTimes(1)
-      expect(Outer._status).toBe(0 /* PENDING */)
+      expect(Outer._payload._status).toBe(0 /* PENDING */)
 
       return render$.then(() => {
-        expect(Outer._status).toBe(2 /* FAILED */)
+        expect(Outer._payload._status).toBe(2 /* FAILED */)
       })
     })
 
@@ -467,8 +450,8 @@ describe('renderPrepass', () => {
       const loadInner = jest.fn().mockResolvedValueOnce(Inner)
       const Outer = React.lazy(loadInner)
 
-      Outer._status = 1 /* SUCCESSFUL */
-      Outer._result = Inner /* SUCCESSFUL */
+      Outer._payload._status = 1 /* SUCCESSFUL */
+      Outer._payload._result = Inner /* SUCCESSFUL */
 
       renderPrepass(<Outer />)
 

src/render/lazyComponent.js

@@ -1,7 +1,13 @@
 // @flow
 
 import { createElement, type Node } from 'react'
-import type { LazyComponent, DefaultProps, LazyFrame, Frame } from '../types'
+import type {
+  LazyComponent,
+  LazyComponentPayload,
+  DefaultProps,
+  LazyFrame,
+  Frame
+} from '../types'
 import { getChildrenArray } from '../element'
 
 import {
@@ -15,28 +21,38 @@ import {
 } from '../internals'
 
 const resolve = (type: LazyComponent): Promise<void> => {
-  type._status = 0 /* PENDING */
+  const payload = (type._payload || type: any)
+  if (payload._status === 0) {
+    return payload._result
+  } else if (payload._status === 1) {
+    return Promise.resolve(payload._result)
+  } else if (payload._status === 2) {
+    return Promise.reject(payload._result)
+  }
+
+  payload._status = 0 /* PENDING */
 
-  return type
-    ._ctor()
+  return (payload._result = (payload._ctor || payload._result)()
     .then((Component) => {
+      payload._result = Component
       if (typeof Component === 'function') {
-        type._result = Component
-        type._status = 1 /* SUCCESSFUL */
+        payload._status = 1 /* SUCCESSFUL */
       } else if (
         Component !== null &&
         typeof Component === 'object' &&
         typeof Component.default === 'function'
       ) {
-        type._result = Component.default
-        type._status = 1 /* SUCCESSFUL */
+        payload._result = Component.default
+        payload._status = 1 /* SUCCESSFUL */
       } else {
-        type._status = 2 /* FAILED */
+        payload._status = 2 /* FAILED */
       }
     })
-    .catch(() => {
-      type._status = 2 /* FAILED */
-    })
+    .catch((error) => {
+      payload._status = 2 /* FAILED */
+      payload._result = error
+      return Promise.reject(error)
+    }))
 }
 
 const render = (
@@ -46,8 +62,9 @@ const render = (
 ): Node => {
   // Component has previously been fetched successfully,
   // so create the element with passed props and return it
-  if (type._status === 1) {
-    return createElement(type._result, props)
+  const payload = ((type._payload || type: any): LazyComponentPayload)
+  if (payload._status === 1) {
+    return createElement(payload._result, props)
   }
 
   return null
@@ -59,7 +76,8 @@ export const mount = (
   queue: Frame[]
 ): Node => {
   // If the component has not been fetched yet, suspend this component
-  if (type._status !== 2 && type._status !== 1) {
+  const payload = ((type._payload || type: any): LazyComponentPayload)
+  if (payload._status <= 0) {
     queue.push({
       kind: 'frame.lazy',
       contextMap: getCurrentContextMap(),

src/types/element.js

@@ -76,13 +76,46 @@ export type FragmentElement = {
   $$typeof: typeof REACT_ELEMENT_TYPE
 }
 
-export type LazyComponent = {
+type LazyComponentUninitialized = {
+  _status: -1,
+  _result: () => Promise<any>
+}
+
+type LazyComponentPending = {
+  _status: 0,
+  _result: Promise<any>
+}
+
+type LazyComponentResolved = {
+  _status: 1,
+  _result: ComponentType<DefaultProps> & ComponentStatics
+}
+
+type LazyComponentRejected = {
+  _status: 2,
+  _result: mixed
+}
+
+export type LazyComponentPayload =
+  | LazyComponentUninitialized
+  | LazyComponentPending
+  | LazyComponentResolved
+  | LazyComponentRejected
+
+type LazyComponentLegacy = {
   $$typeof: typeof REACT_LAZY_TYPE,
   _ctor: () => Promise<any>,
   _status: -1 | 0 | 1 | 2,
-  _result: any
+  _result: mixed
+}
+
+type LazyComponentModern = {
+  $$typeof: typeof REACT_LAZY_TYPE,
+  _payload: LazyComponentPayload
 }
 
+export type LazyComponent = LazyComponentLegacy | LazyComponentModern
+
 /** <React.lazy(Comp)> */
 export type LazyElement = {
   $$typeof: typeof REACT_LAZY_TYPE,