Upgrade dev tools & use new context API (#33)

* Upgrade dev tools and prepare support for React new Context

* Use React new Context

* Remove componentWillReceiveProps for getDerivedStateFromProps

* fix getDerivedStateFromProps

.eslintrc

@@ -25,7 +25,8 @@
     "import/no-unresolved": ["error", { "ignore": ["^react$"] }],
     "comma-dangle": ["error", "always-multiline"],
     "semi": ["error", "never"],
-    "no-trailing-spaces": ["error", { "skipBlankLines": true }]
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }],
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   },
   "plugins": [
     "import",

.storybook/components/Code.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
-import { github as theme } from 'react-syntax-highlighter/dist/styles'
+import { dark } from 'react-syntax-highlighter/dist/styles/prism';
 import Block from './Block'
 
 const Code = ({ children }) => (
   <Block title="Code">
-    <SyntaxHighlighter language="jsx" style={theme} customStyle={{ margin: 0 }}>
+    <SyntaxHighlighter language="jsx" style={dark} customStyle={{ margin: 0 }}>
       {children}
     </SyntaxHighlighter>
   </Block>

.storybook/components/index.js

@@ -1,3 +1,3 @@
-export Block from './Block'
-export Code from './Code'
-export Result from './Result'
+export { default as Block } from './Block'
+export { default as Code } from './Code'
+export { default as Result } from './Result'

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 function loadStories() {
   require('./stories');

.storybook/stories/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { storiesOf, action, linkTo } from '@kadira/storybook'
+import { storiesOf } from '@storybook/react'
 import { Code, Result } from '../components'
 import MobileBreakpoint from '../components/MobileBreakpoint'
 import withSizes from '../../src/withSizes'

babel.config.js

@@ -0,0 +1,20 @@
+module.exports = api => {
+  api.cache(true)
+  return {
+    plugins: ['@babel/plugin-proposal-class-properties'],
+    env: {
+      es: {
+        presets: ['@babel/preset-env', '@babel/preset-react'],
+      },
+      commonjs: {
+        presets: ['@babel/preset-env', '@babel/preset-react'],
+      },
+      rollup: {
+        presets: [
+          ['@babel/preset-env', { modules: false }],
+          '@babel/preset-react',
+        ],
+      },
+    },
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sizes",
-  "version": "1.0.4",
+  "version": "2.0.0-alpha.1",
   "description": "Hoc to easily map window sizes to props.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,33 +52,35 @@
     "prop-types": "^15.6.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^8.0.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-export-extensions": "^6.22.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "@storybook/react": "^4.1.11",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
     "chokidar-cli": "^1.2.0",
-    "cross-env": "^5.0.5",
-    "del-cli": "^0.2.1",
-    "eslint": "^4.6.1",
+    "cross-env": "^5.2.0",
+    "del-cli": "^1.1.0",
+    "eslint": "^4.0.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-react": "^7.3.0",
-    "jest": "^21.2.1",
-    "np": "^2.13.1",
-    "react": "^15.6.1",
-    "react-dom": "^15.5.3",
-    "react-syntax-highlighter": "^5.3.0",
-    "rollup": "^0.52.0",
-    "rollup-plugin-babel": "^3.0.2",
-    "rollup-plugin-commonjs": "^8.2.6",
-    "rollup-plugin-node-resolve": "^3.0.0",
+    "jest": "^24.0.0",
+    "np": "^4.0.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-syntax-highlighter": "^10.1.2",
+    "rollup": "^1.1.2",
+    "rollup-plugin-babel": "^4.3.2",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-uglify": "^2.0.1"
+    "rollup-plugin-terser": "^4.0.3",
+    "rollup-plugin-uglify": "^6.0.2",
+    "webpack": "^4.29.0"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0"
   }
 }

rollup.config.js

@@ -2,20 +2,21 @@ import nodeResolve from 'rollup-plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
 import replace from 'rollup-plugin-replace'
 import commonjs from 'rollup-plugin-commonjs'
-import uglify from 'rollup-plugin-uglify'
+import { terser } from 'rollup-plugin-terser'
 
 const env = process.env.NODE_ENV
 
 const config = {
   input: 'src/index.js',
   output: {
     format: 'umd',
+    name: 'ReactSizes',
+    exports: 'named',
+    globals: {
+      react: 'React',
+    },
   },
   external: ['react'],
-  globals: {
-    react: 'React',
-  },
-  name: 'ReactSizes',
   plugins: [
     nodeResolve(),
     babel({
@@ -29,16 +30,7 @@ const config = {
 }
 
 if (env === 'production') {
-  config.plugins.push(
-    uglify({
-      compress: {
-        pure_getters: true,
-        unsafe: true,
-        unsafe_comps: true,
-        warnings: false,
-      },
-    })
-  )
+  config.plugins.push(terser())
 }
 
 export default config

src/SizesContext.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+const SizesContext = React.createContext({
+  fallbackWidth: null,
+  fallbackHeight: null,
+  forceFallback: false,
+  throttle: 200,
+})
+
+SizesContext.displayName = 'SizesContext'
+
+export default SizesContext

src/SizesProvider.js

@@ -1,24 +1,8 @@
-import { Component } from 'react'
-import contextTypes, { contextKey } from './contextTypes'
+import React from 'react'
+import SizesContext from './SizesContext'
 
-class SizesProvider extends Component {
-  static childContextTypes = contextTypes
-
-  getChildContext() {
-    const { config = {} } = this.props
-
-    return {
-      [contextKey]: {
-        fallbackWidth: config.fallbackWidth || null,
-        fallbackHeight: config.fallbackHeight || null,
-        throttle: config.throttle || 200,
-      },
-    }
-  }
-
-  render() {
-    return this.props.children
-  }
-}
+const SizesProvider = ({ config, children }) => (
+  <SizesContext.Provider value={config}>{children}</SizesContext.Provider>
+)
 
 export default SizesProvider

src/withSizes.js

@@ -1,43 +1,39 @@
 /* eslint-disable no-console */
 
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import throttle from 'lodash.throttle'
 
 import getDisplayName from './utils/getDisplayName'
 import shallowDiff from './utils/shallowDiff'
 import getWindowSizes from './utils/getWindowSizes'
-
-import contextTypes, { contextKey } from './contextTypes'
+import SizesContext from './SizesContext'
 import * as presets from './presets'
 
+const getWindowSizesWithFallback = props => {
+  const { fallbackHeight, fallbackWidth } = props
+  return getWindowSizes({ fallbackHeight, fallbackWidth })
+}
+
 const withSizes = (...mappedSizesToProps) => WrappedComponent => {
   const parseMappedSizesToProps = (dimensions, props) =>
     mappedSizesToProps
       .map(check => check(dimensions, props))
       .reduce((acc, props) => ({ ...acc, ...props }), {})
 
-  return class ComponentWithSizes extends Component {
+  class ComponentWithSizes extends PureComponent {
     static displayName = `withSizes(${getDisplayName(WrappedComponent)})`
-    static contextTypes = contextTypes
 
-    constructor(props, context) {
-      super(props, context)
-
-      this.getWindowSizesWithFallback = () => {
-        const config = this.context[contextKey] || {}
-        const { fallbackHeight = null, fallbackWidth = null } = config
-        return getWindowSizes({ fallbackHeight, fallbackWidth })
-      }
+    constructor(props) {
+      super(props)
 
       this.getPropsToPass = () => {
         return parseMappedSizesToProps(
-          this.getWindowSizesWithFallback(),
+          getWindowSizesWithFallback(this.props),
           this.props
         )
       }
 
       this.state = {
-        initialSizes: this.getWindowSizesWithFallback(),
         propsToPass: this.getPropsToPass(),
       }
     }
@@ -52,15 +48,19 @@ const withSizes = (...mappedSizesToProps) => WrappedComponent => {
       }
     }
 
-    throttledDispatchSizes = throttle(
-      this.dispatchSizes,
-      (this.context[contextKey] || {}).throttle || 200
-    )
+    throttledDispatchSizes = throttle(this.dispatchSizes, this.props.throttle)
 
     /* Lifecycles */
+    static getDerivedStateFromProps(props, state) {
+      const propsToPass = parseMappedSizesToProps(
+        getWindowSizesWithFallback(props),
+        props
+      )
+      if (shallowDiff(propsToPass, state.propsToPass)) {
+        return { propsToPass }
+      }
 
-    componentWillReceiveProps() {
-      this.dispatchSizes()
+      return null
     }
 
     componentDidMount() {
@@ -73,9 +73,23 @@ const withSizes = (...mappedSizesToProps) => WrappedComponent => {
     }
 
     render() {
-      return <WrappedComponent {...this.props} {...this.state.propsToPass} />
+      const {
+        fallbackHeight,
+        fallbackWidth,
+        ...otherProps
+      } = this.props
+
+      return <WrappedComponent {...otherProps} {...this.state.propsToPass} />
     }
   }
+
+  const WithSizes = props => (
+    <SizesContext.Consumer>
+      {config => <ComponentWithSizes {...config} {...props} />}
+    </SizesContext.Consumer>
+  )
+
+  return WithSizes
 }
 
 export default Object.assign(withSizes, { ...presets })