build: try to test/run against different react versions

Author: sastan

.prettierignore

@@ -0,0 +1 @@
+flow-typed

.size-snapshot.json

@@ -1,31 +1,31 @@
 {
   "dist/react-render-callback.umd.js": {
-    "bundled": 3207,
-    "minified": 1340,
-    "gzipped": 617
+    "bundled": 3213,
+    "minified": 1336,
+    "gzipped": 616
   },
   "dist/react-render-callback.esm.js": {
-    "bundled": 2490,
-    "minified": 1390,
-    "gzipped": 598,
+    "bundled": 2502,
+    "minified": 1398,
+    "gzipped": 595,
     "treeshaked": {
       "rollup": {
-        "code": 265,
+        "code": 246,
         "import_statements": 97
       },
       "webpack": {
-        "code": 1312
+        "code": 1293
       }
     }
   },
   "dist/react-render-callback.cjs.js": {
-    "bundled": 2627,
-    "minified": 1489,
-    "gzipped": 631
+    "bundled": 2639,
+    "minified": 1497,
+    "gzipped": 628
   },
   "dist/react-render-callback.umd.min.js": {
-    "bundled": 3240,
-    "minified": 1326,
-    "gzipped": 608
+    "bundled": 3246,
+    "minified": 1322,
+    "gzipped": 604
   }
 }

.travis.yml

@@ -9,7 +9,18 @@ notifications:
 node_js:
   - 10
   - 8
-install: npm install
+env: 
+  matrix:
+    - REACT_VERSION="^16.3.0"
+    - REACT_VERSION=">=16.0.0 <16.3.0"
+    - REACT_VERSION="^15.4.0"
+    - REACT_VERSION=">=15.0.0 <15.4.0"
+    - REACT_VERSION="^0.14"
+    - REACT_VERSION="latest"
+install: 
+  - npm install --no-save "react@${REACT_VERSION}"
+  - npm install
+  - npm ls react
 script:
   - kcd-scripts validate lint,test:cover,build-and-test
 after_success: kcd-scripts travis-after-success

README.md

@@ -53,10 +53,11 @@ View an example in [codesandbox.io](https://codesandbox.io/s/48k5p1r764?module=%
 
 - :package: Super tiny (~600 bytes)
 - :ok_hand: Dependency free (except for [Object.assign](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) polyfill)
-- :electric_plug: Plug and play
+- :electric_plug: Just Works <sup>TM</sup>
 - :crystal_ball: Tree shaking friendly (ESM, no side effects)
 - :books: Well documented
 - :100: test coverage
+- :sunny: supports React v0.14, v15 and v16
 - :family: supports rendering of
   - [Stateless Function Components (SFC)](https://reactjs.org/docs/components-and-props.html#functional-and-class-components)
     with one argument (the common `props` case) aka _Render Props_ aka _Function as Child_

package.json

@@ -18,7 +18,7 @@
   },
   "scripts": {
     "add-contributor": "kcd-scripts contributors add",
-    "build": "kcd-scripts build --bundle --no-clean --size-snapshot && npm run flowgen",
+    "build": "kcd-scripts build --bundle --no-clean --size-snapshot",
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test",
     "test:cover": "kcd-scripts test --coverage",
@@ -35,21 +35,22 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
+    "react": "^0.14 || ^15 || ^16"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.0.0",
-    "@types/react": "^16.4.2",
+    "@types/react": "^0.14 || ^15 || ^16",
     "ajv": "^6.5.3",
     "babel-plugin-dynamic-import-node": "^2.1.0",
     "flowgen": "^1.2.2",
-    "react": "^16.4.2",
     "kcd-scripts": "^0.44.0",
+    "react": "^0.14 || ^15 || ^16",
+    "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-babel": "^4.0.3"
+    "semver": "^5.5.1"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js"

src/internal/isReactComponent.js

@@ -21,6 +21,7 @@ export default renderable => {
 
   return (
     type === 'object' &&
+    renderable.$$typeof !== undefined &&
     (renderable.$$typeof === REACT_PROVIDER_TYPE ||
       renderable.$$typeof === REACT_CONTEXT_TYPE ||
       renderable.$$typeof === REACT_FORWARD_REF_TYPE)

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

@@ -0,0 +1,38 @@
+import React from 'react'
+
+// setup react <16.3.0
+// https://github.com/facebook/react/blob/master/packages/shared/ReactSymbols.js
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+const hasSymbol = typeof Symbol === 'function' && Symbol.for
+
+const REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd
+const REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace
+const REACT_FORWARD_REF_TYPE = hasSymbol
+  ? Symbol.for('react.forward_ref')
+  : 0xead0
+
+if (!React.createContext) {
+  React.createContext = () => ({
+    Provider: {$$typeof: REACT_PROVIDER_TYPE},
+    Consumer: {$$typeof: REACT_CONTEXT_TYPE},
+  })
+}
+
+if (!React.forwardRef) {
+  React.forwardRef = () => ({$$typeof: REACT_FORWARD_REF_TYPE})
+}
+
+let reactSymbols
+
+beforeAll(async () => {
+  reactSymbols = await import('./reactSymbols')
+})
+
+test('react symbols after v16.3.0', () => {
+  expect(reactSymbols).toEqual({
+    REACT_CONTEXT_TYPE,
+    REACT_FORWARD_REF_TYPE,
+    REACT_PROVIDER_TYPE,
+  })
+})

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
-React.createContext = undefined
-React.forwardRef = undefined
+if (React.createContext) delete React.createContext
+if (React.forwardRef) delete React.forwardRef
 
 let reactSymbols
 
@@ -12,9 +12,9 @@ beforeAll(async () => {
 test('react symbols before v16.3.0', () => {
   expect(reactSymbols).toMatchInlineSnapshot(`
 Object {
-  "REACT_CONTEXT_TYPE": undefined,
-  "REACT_FORWARD_REF_TYPE": undefined,
-  "REACT_PROVIDER_TYPE": undefined,
+  "REACT_CONTEXT_TYPE": false,
+  "REACT_FORWARD_REF_TYPE": false,
+  "REACT_PROVIDER_TYPE": false,
 }
 `)
 })

src/internal/reactSymbols.js

@@ -2,21 +2,19 @@ import {createContext, forwardRef} from 'react'
 
 // React.createContext is available since v16.3.0
 const context =
-  /*#__PURE__*/ typeof createContext === 'function'
-    ? createContext()
-    : {Provider: {}, Consumer: {}}
+  /*#__PURE__*/ typeof createContext === 'function' &&
+  /*#__PURE__*/ createContext()
 
-export const REACT_PROVIDER_TYPE = /*#__PURE__*/ context.Provider.$$typeof
+export const REACT_PROVIDER_TYPE = context && context.Provider.$$typeof
 
-export const REACT_CONTEXT_TYPE = /*#__PURE__*/ context.Consumer.$$typeof
+export const REACT_CONTEXT_TYPE = context && 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
+  /*#__PURE__*/ typeof forwardRef === 'function' &&
+  /*#__PURE__*/ 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