fix: better react component detection

- remove use of `react-is` (bundling error with rollup)
- user special `$$typeof` to detect `Context.Provider`, `Context.Consumer` and object returned by `React.forwardRef`

Author: sastan

.size-snapshot.json

@@ -1,31 +1,31 @@
 {
-  "dist/react-render-callback.cjs.js": {
-    "bundled": 1810,
-    "minified": 1035,
-    "gzipped": 475
+  "dist/react-render-callback.umd.js": {
+    "bundled": 3153,
+    "minified": 1305,
+    "gzipped": 622
   },
   "dist/react-render-callback.esm.js": {
-    "bundled": 1654,
-    "minified": 922,
-    "gzipped": 424,
+    "bundled": 2422,
+    "minified": 1315,
+    "gzipped": 579,
     "treeshaked": {
       "rollup": {
-        "code": 78,
-        "import_statements": 78
+        "code": 269,
+        "import_statements": 101
       },
       "webpack": {
-        "code": 1128
+        "code": 1316
       }
     }
   },
-  "dist/react-render-callback.umd.min.js": {
-    "bundled": 7335,
-    "minified": 3333,
-    "gzipped": 1160
+  "dist/react-render-callback.cjs.js": {
+    "bundled": 2579,
+    "minified": 1432,
+    "gzipped": 617
   },
-  "dist/react-render-callback.umd.js": {
-    "bundled": 11850,
-    "minified": 4930,
-    "gzipped": 1417
+  "dist/react-render-callback.umd.min.js": {
+    "bundled": 3186,
+    "minified": 1291,
+    "gzipped": 611
   }
 }

package.json

@@ -32,11 +32,10 @@
     "node": ">=8.0.0"
   },
   "peerDependencies": {
-    "react": ">=0.14.9"
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
   },
   "dependencies": {
-    "@babel/runtime-corejs2": "^7.0.0",
-    "react-is": "^16.4.2"
+    "@babel/runtime-corejs2": "^7.0.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.0.0",

rollup.config.js

@@ -3,17 +3,6 @@ module.exports = () => {
 
   const rollupConfig = getRollupConfig()
 
-  replace(rollupConfig.plugins, 'commonjs', () => {
-    const commonjs = require('rollup-plugin-commonjs')
-
-    return commonjs({
-      include: 'node_modules/**',
-      namedExports: {
-        'react-is': ['isValidElementType'],
-      },
-    })
-  })
-
   if (process.env.BUILD_FORMAT !== 'umd') {
     replace(rollupConfig.plugins, 'babel', () => {
       const babel = require('rollup-plugin-babel')

src/internal/isReactComponent.js

@@ -1,6 +1,12 @@
-import {isValidElementType} from 'react-is'
+import {
+  REACT_PROVIDER_TYPE,
+  REACT_CONTEXT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+} from './reactSymbols'
 
 export default renderable => {
+  if (renderable == null) return false
+
   const type = typeof renderable
 
   if (type === 'string') return false
@@ -13,5 +19,10 @@ export default renderable => {
     )
   }
 
-  return isValidElementType(renderable)
+  return (
+    type === 'object' &&
+    (renderable.$$typeof === REACT_PROVIDER_TYPE ||
+      renderable.$$typeof === REACT_CONTEXT_TYPE ||
+      renderable.$$typeof === REACT_FORWARD_REF_TYPE)
+  )
 }

src/internal/reactSymbols-before-v16.3.0.test.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+React.createContext = undefined
+React.forwardRef = undefined
+
+let reactSymbols
+
+beforeAll(async () => {
+  reactSymbols = await import('./reactSymbols')
+})
+
+test('react symbols before v16.3.0', () => {
+  expect(reactSymbols).toMatchInlineSnapshot(`
+Object {
+  "REACT_CONTEXT_TYPE": undefined,
+  "REACT_FORWARD_REF_TYPE": undefined,
+  "REACT_PROVIDER_TYPE": undefined,
+}
+`)
+})

src/internal/reactSymbols.js

@@ -0,0 +1,22 @@
+import {createContext, forwardRef} from 'react'
+
+// React.createContext is available since v16.3.0
+const context =
+  /*#__PURE__*/ typeof createContext === 'function'
+    ? createContext()
+    : {Provider: {}, Consumer: {}}
+
+export const REACT_PROVIDER_TYPE = /*#__PURE__*/ context.Provider.$$typeof
+
+export const REACT_CONTEXT_TYPE = /*#__PURE__*/ context.Consumer.$$typeof
+
+// React.forwardRef is available since v16.3.0
+export const REACT_FORWARD_REF_TYPE =
+  /*#__PURE__*/ typeof forwardRef === 'function'
+    ? forwardRef(
+        // need to access both params otherwise react warns
+        // but as this is never used this is no-op
+        /* istanbul ignore next line */
+        (props, ref) => ({props, ref}),
+      ).$$typeof
+    : undefined