Add support for Suspense & lazy() to the react-is package (#14423)

* Add support for lazy & Suspense to react-is

Author: pleunv

packages/react-is/src/ReactIs.js

@@ -16,11 +16,13 @@ import {
 REACT_ELEMENT_TYPE,
 REACT_FORWARD_REF_TYPE,
 REACT_FRAGMENT_TYPE,
+REACT_LAZY_TYPE,
 REACT_MEMO_TYPE,
 REACT_PORTAL_TYPE,
 REACT_PROFILER_TYPE,
 REACT_PROVIDER_TYPE,
 REACT_STRICT_MODE_TYPE,
+REACT_SUSPENSE_TYPE,
 }from'shared/ReactSymbols';
 importisValidElementTypefrom'shared/isValidElementType';
 importlowPriorityWarningfrom'shared/lowPriorityWarning';
@@ -38,6 +40,7 @@ export function typeOf(object: any) {
 caseREACT_FRAGMENT_TYPE:
 caseREACT_PROFILER_TYPE:
 caseREACT_STRICT_MODE_TYPE:
+caseREACT_SUSPENSE_TYPE:
 returntype;
 default:
 const$$typeofType=type&&type.$$typeof;
@@ -51,6 +54,7 @@ export function typeOf(object: any) {
 return$$typeof;
 }
 }
+caseREACT_LAZY_TYPE:
 caseREACT_MEMO_TYPE:
 caseREACT_PORTAL_TYPE:
 return$$typeof;
@@ -68,10 +72,12 @@ export const ContextProvider = REACT_PROVIDER_TYPE;
 exportconstElement=REACT_ELEMENT_TYPE;
 exportconstForwardRef=REACT_FORWARD_REF_TYPE;
 exportconstFragment=REACT_FRAGMENT_TYPE;
-exportconstProfiler=REACT_PROFILER_TYPE;
-exportconstPortal=REACT_PORTAL_TYPE;
+exportconstLazy=REACT_LAZY_TYPE;
 exportconstMemo=REACT_MEMO_TYPE;
+exportconstPortal=REACT_PORTAL_TYPE;
+exportconstProfiler=REACT_PROFILER_TYPE;
 exportconstStrictMode=REACT_STRICT_MODE_TYPE;
+exportconstSuspense=REACT_SUSPENSE_TYPE;
 
 export{isValidElementType};
 
@@ -114,15 +120,21 @@ export function isForwardRef(object: any) {
 exportfunctionisFragment(object: any){
 returntypeOf(object)===REACT_FRAGMENT_TYPE;
 }
-exportfunctionisProfiler(object: any){
-returntypeOf(object)===REACT_PROFILER_TYPE;
+exportfunctionisLazy(object: any){
+returntypeOf(object)===REACT_LAZY_TYPE;
 }
 exportfunctionisMemo(object: any){
 returntypeOf(object)===REACT_MEMO_TYPE;
 }
 exportfunctionisPortal(object: any){
 returntypeOf(object)===REACT_PORTAL_TYPE;
 }
+exportfunctionisProfiler(object: any){
+returntypeOf(object)===REACT_PROFILER_TYPE;
+}
 exportfunctionisStrictMode(object: any){
 returntypeOf(object)===REACT_STRICT_MODE_TYPE;
 }
+exportfunctionisSuspense(object: any){
+returntypeOf(object)===REACT_SUSPENSE_TYPE;
+}

packages/react-is/src/__tests__/ReactIs-test.js

@@ -39,17 +39,19 @@ describe('ReactIs', () => {
 }
 
 constFunctionComponent=()=>React.createElement('div');
-
 constForwardRefComponent=React.forwardRef((props,ref)=>
 React.createElement(Component,{forwardedRef: ref, ...props}),
 );
-
+constLazyComponent=React.lazy(()=>Component);
+constMemoComponent=React.memo(Component);
 constContext=React.createContext(false);
 
 expect(ReactIs.isValidElementType('div')).toEqual(true);
 expect(ReactIs.isValidElementType(Component)).toEqual(true);
 expect(ReactIs.isValidElementType(FunctionComponent)).toEqual(true);
 expect(ReactIs.isValidElementType(ForwardRefComponent)).toEqual(true);
+expect(ReactIs.isValidElementType(LazyComponent)).toEqual(true);
+expect(ReactIs.isValidElementType(MemoComponent)).toEqual(true);
 expect(ReactIs.isValidElementType(Context.Provider)).toEqual(true);
 expect(ReactIs.isValidElementType(Context.Consumer)).toEqual(true);
 expect(ReactIs.isValidElementType(React.createFactory('div'))).toEqual(
@@ -60,6 +62,7 @@ describe('ReactIs', () => {
 true,
 );
 expect(ReactIs.isValidElementType(React.StrictMode)).toEqual(true);
+expect(ReactIs.isValidElementType(React.Suspense)).toEqual(true);
 
 expect(ReactIs.isValidElementType(true)).toEqual(false);
 expect(ReactIs.isValidElementType(123)).toEqual(false);
@@ -116,6 +119,7 @@ describe('ReactIs', () => {
 expect(ReactIs.isElement(<React.Fragment/>)).toBe(true);
 expect(ReactIs.isElement(<React.unstable_ConcurrentMode/>)).toBe(true);
 expect(ReactIs.isElement(<React.StrictMode/>)).toBe(true);
+expect(ReactIs.isElement(<React.Suspense/>)).toBe(true);
 });
 
 it('should identify ref forwarding component',()=>{
@@ -152,6 +156,14 @@ describe('ReactIs', () => {
 expect(ReactIs.isMemo(Component)).toBe(false);
 });
 
+it('should identify lazy',()=>{
+constComponent=()=>React.createElement('div');
+constlazyComponent=React.lazy(()=>Component);
+expect(ReactIs.typeOf(lazyComponent)).toBe(ReactIs.Lazy);
+expect(ReactIs.isLazy(lazyComponent)).toBe(true);
+expect(ReactIs.isLazy(Component)).toBe(false);
+});
+
 it('should identify strict mode',()=>{
 expect(ReactIs.typeOf(<React.StrictMode/>)).toBe(ReactIs.StrictMode);
 expect(ReactIs.isStrictMode(<React.StrictMode/>)).toBe(true);
@@ -160,6 +172,14 @@ describe('ReactIs', () => {
 expect(ReactIs.isStrictMode(<div/>)).toBe(false);
 });
 
+it('should identify suspense',()=>{
+expect(ReactIs.typeOf(<React.Suspense/>)).toBe(ReactIs.Suspense);
+expect(ReactIs.isSuspense(<React.Suspense/>)).toBe(true);
+expect(ReactIs.isSuspense({type: ReactIs.Suspense})).toBe(false);
+expect(ReactIs.isSuspense('React.Suspense')).toBe(false);
+expect(ReactIs.isSuspense(<div/>)).toBe(false);
+});
+
 it('should identify profile root',()=>{
 expect(
 ReactIs.typeOf(<React.unstable_Profilerid="foo"onRender={jest.fn()}/>),