typeOf returns symbols; symbols exported for switch/case

facebook · Feb 11, 2018 · 88d1dd4 · 88d1dd4
1 parent cbffbd1
commit 88d1dd4
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/packages/react-is/README.md b/packages/react-is/README.md
@@ -11,7 +11,7 @@ import {isAsyncMode, typeOf} from 'react-is';
 
 const AsyncMode = React.unstable_AsyncMode;
 
-typeOf(<AsyncMode />); // "ReactAsyncMode"
+typeOf(<AsyncMode />); // ReactIs.AsyncMode
 
 isAsyncMode(<AsyncMode />); // true
 ```
@@ -23,8 +23,8 @@ import {isContextConsumer, isContextProvider, typeOf} from 'react-is';
 
 const ThemeContext = React.createContext('blue');
 
-typeOf(<ThemeContext.Provider />); // "ReactContextProvider"
-typeOf(<ThemeContext.Consumer />); // "ReactContextConsumer"
+typeOf(<ThemeContext.Provider />); // ReactIs.ContextProvider
+typeOf(<ThemeContext.Consumer />); // ReactIs.ContextConsumer
 
 isContextConsumer(<ThemeContext.Consumer />); // true
 isContextProvider(<ThemeContext.Provider />); // true
@@ -35,7 +35,7 @@ isContextProvider(<ThemeContext.Provider />); // true
 import React from 'react';
 import {isElement, typeOf} from 'react-is';
 
-typeOf(<div />); // "ReactElement"
+typeOf(<div />); // ReactIs.Element
 
 isElement(<div />); // true
 ```
@@ -45,7 +45,7 @@ isElement(<div />); // true
 import React from 'react';
 import {isFragment, typeOf} from 'react-is';
 
-typeOf(<></>); // "ReactFragment"
+typeOf(<></>); // ReactIs.Fragment
 
 isFragment(<></>); // true
 ```
@@ -59,7 +59,7 @@ import {isPortal, typeOf} from 'react-is';
 const div = document.createElement('div');
 const portal = createPortal(<div />, div);
 
-typeOf(portal); // "ReactPortal"
+typeOf(portal); // ReactIs.Portal
 
 isPortal(portal); // true
 ```
@@ -69,7 +69,7 @@ isPortal(portal); // true
 import React from 'react';
 import {isStrictMode, typeOf} from 'react-is';
 
-typeOf(<React.StrictMode />); // "ReactStrictMode"
+typeOf(<React.StrictMode />); // ReactIs.StrictMode
 
 isStrictMode(<React.StrictMode />); // true
 ```
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
@@ -41,29 +41,37 @@ function getTypeTypeOf(object: any) {
 
 const ReactIs = {
   typeOf(object: any) {
-    switch (getType(object)) {
+    const type = getType(object);
+    switch (type) {
       case REACT_ASYNC_MODE_TYPE:
-        return 'ReactAsyncMode';
       case REACT_FRAGMENT_TYPE:
-        return 'ReactFragment';
       case REACT_STRICT_MODE_TYPE:
-        return 'ReactStrictMode';
+        return type;
     }
 
-    switch (getTypeTypeOf(object)) {
+    const typeTypeOf = getTypeTypeOf(object);
+    switch (typeTypeOf) {
       case REACT_CONTEXT_TYPE:
-        return 'ReactContextConsumer';
       case REACT_PROVIDER_TYPE:
-        return 'ReactContextProvider';
+        return typeTypeOf;
     }
 
-    switch (getTypeOf(object)) {
+    const typeOf = getTypeOf(object);
+    switch (typeOf) {
       case REACT_ELEMENT_TYPE:
-        return 'ReactElement';
       case REACT_PORTAL_TYPE:
-        return 'ReactPortal';
+        return typeOf;
     }
   },
+
+  AsyncMode: REACT_ASYNC_MODE_TYPE,
+  ContextConsumer: REACT_CONTEXT_TYPE,
+  ContextProvider: REACT_PROVIDER_TYPE,
+  Element: REACT_ELEMENT_TYPE,
+  Fragment: REACT_FRAGMENT_TYPE,
+  Portal: REACT_PORTAL_TYPE,
+  StrictMode: REACT_STRICT_MODE_TYPE,
+
   isAsyncMode(object: any) {
     return getType(object) === REACT_ASYNC_MODE_TYPE;
   },

diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -22,38 +22,40 @@ describe('ReactIs', () => {
   });
 
   it('should identify async mode', () => {
-    expect(ReactIs.typeOf(<React.unstable_AsyncMode />)).toBe('ReactAsyncMode');
+    expect(ReactIs.typeOf(<React.unstable_AsyncMode />)).toBe(
+      ReactIs.AsyncMode,
+    );
     expect(ReactIs.isAsyncMode(<React.unstable_AsyncMode />)).toBe(true);
     expect(ReactIs.isAsyncMode(<React.StrictMode />)).toBe(false);
     expect(ReactIs.isAsyncMode(<div />)).toBe(false);
   });
 
   it('should identify context consumers', () => {
     const Context = React.createContext(false);
-    expect(ReactIs.typeOf(<Context.Consumer />)).toBe('ReactContextConsumer');
+    expect(ReactIs.typeOf(<Context.Consumer />)).toBe(ReactIs.ContextConsumer);
     expect(ReactIs.isContextConsumer(<Context.Consumer />)).toBe(true);
     expect(ReactIs.isContextConsumer(<Context.Provider />)).toBe(false);
     expect(ReactIs.isContextConsumer(<div />)).toBe(false);
   });
 
   it('should identify context providers', () => {
     const Context = React.createContext(false);
-    expect(ReactIs.typeOf(<Context.Provider />)).toBe('ReactContextProvider');
+    expect(ReactIs.typeOf(<Context.Provider />)).toBe(ReactIs.ContextProvider);
     expect(ReactIs.isContextProvider(<Context.Provider />)).toBe(true);
     expect(ReactIs.isContextProvider(<Context.Consumer />)).toBe(false);
     expect(ReactIs.isContextProvider(<div />)).toBe(false);
   });
 
   it('should identify elements', () => {
-    expect(ReactIs.typeOf(<div />)).toBe('ReactElement');
+    expect(ReactIs.typeOf(<div />)).toBe(ReactIs.Element);
     expect(ReactIs.isElement(<div />)).toBe(true);
     expect(ReactIs.isElement('div')).toBe(false);
     expect(ReactIs.isElement(true)).toBe(false);
     expect(ReactIs.isElement(123)).toBe(false);
   });
 
   it('should identify fragments', () => {
-    expect(ReactIs.typeOf(<React.Fragment />)).toBe('ReactFragment');
+    expect(ReactIs.typeOf(<React.Fragment />)).toBe(ReactIs.Fragment);
     expect(ReactIs.isFragment(<React.Fragment />)).toBe(true);
     expect(ReactIs.isFragment('React.Fragment')).toBe(false);
     expect(ReactIs.isFragment(<div />)).toBe(false);
@@ -63,13 +65,13 @@ describe('ReactIs', () => {
   it('should identify portals', () => {
     const div = document.createElement('div');
     const portal = ReactDOM.createPortal(<div />, div);
-    expect(ReactIs.typeOf(portal)).toBe('ReactPortal');
+    expect(ReactIs.typeOf(portal)).toBe(ReactIs.Portal);
     expect(ReactIs.isPortal(portal)).toBe(true);
     expect(ReactIs.isPortal(div)).toBe(false);
   });
 
   it('should identify strict mode', () => {
-    expect(ReactIs.typeOf(<React.StrictMode />)).toBe('ReactStrictMode');
+    expect(ReactIs.typeOf(<React.StrictMode />)).toBe(ReactIs.StrictMode);
     expect(ReactIs.isStrictMode(<React.StrictMode />)).toBe(true);
     expect(ReactIs.isStrictMode(<React.unstable_AsyncMode />)).toBe(false);
     expect(ReactIs.isStrictMode(<div />)).toBe(false);