make React 16 hyrdrate compatible using two-pass rendering / rm matchmedia

Author: albertstill

.eslintignore

@@ -0,0 +1 @@
+dist

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: 'airbnb',
+  rules: {
+    'react/jsx-filename-extension': 'off',
+  },
+  env: {
+    browser: true,
+  },
+};

README.md

@@ -1,13 +1,12 @@
 # react-media-query-hoc
-A dead simple React Higher Order Component (HOC) that uses context for matching media queries
+A dead simple React Higher Order Component (HOC) that uses context for matching media queries.
 
 
 ## Why use this?
 - A simple API which doesnt require you to put `MediaQuery` components all over your code base
 - More performant (you only need 1 parent `MediaQueryProvider` that listens to media events you wish to configure)
 - Easier to test than other react media query libraries
-- Uses [matchmedia](https://github.com/iceddev/matchmedia) for media queries for client and server
-- Abstracted away React context which is experimental (and subject to change for <= React 15)
+- Uses [css-mediaquery](https://github.com/ericf/css-mediaquery) for server side rendering
 
 ## Why not use this?
 We always recommend using vanilla CSS media queries to build responsive websites, this is simpler and provides a smoother UX, also it mitigates having to guess the screen width during [server side rendering](#server-side-rendering). At Domain we needed to use this component for legacy ad tech and advise against it's use for general responsive website design.
@@ -31,7 +30,7 @@ This library is designed so that you have 1 `MediaQueryProvider` parent and 1-ma
 
 ### `MediaQueryProvider`
 
-This component will listen to media events you want to configure, it should be used once as a parent component
+This component will listen to media events you want to configure, it should be used once as a parent component.
 
 **Usage:**
 
@@ -71,7 +70,6 @@ const App = (props) => {
 ### `withMedia`
 
 This is a HOC to provide media match props to your component.
-This abstracts away context so that if there is any changes to the API in the future its easier to upgrade (see: [React Context](https://facebook.github.io/react/docs/context.html))
 
 **Usage:**
 ```javascript

dist/media-query-provider.js

@@ -4,16 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _matchmedia = require('matchmedia');
-
-var _matchmedia2 = _interopRequireDefault(_matchmedia);
-
 var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -22,20 +20,21 @@ var _shallowequal = require('shallowequal');
 
 var _shallowequal2 = _interopRequireDefault(_shallowequal);
 
+var _cssMediaquery = require('css-mediaquery');
+
+var _cssMediaquery2 = _interopRequireDefault(_cssMediaquery);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-var defaultQueries = {
-  mobile: 'screen and (max-width: 623px)',
-  tablet: 'screen and (min-width: 624px) and (max-width: 1020px)',
-  desktop: 'screen and (min-width: 1021px) and (max-width: 1440px)',
-  largeDesktop: 'screen and (min-width: 1441px)'
-};
+var isServer = typeof process !== 'undefined';
 
 var MediaQueryProvider = function (_React$Component) {
   _inherits(MediaQueryProvider, _React$Component);
@@ -45,28 +44,49 @@ var MediaQueryProvider = function (_React$Component) {
 
     var _this = _possibleConstructorReturn(this, (MediaQueryProvider.__proto__ || Object.getPrototypeOf(MediaQueryProvider)).call(this, props));
 
-    _this.queryMedia = function (queries, values) {
-      return Object.keys(queries).reduce(function (result, key) {
-        var _matchMedia = (0, _matchmedia2.default)(queries[key], values),
-            matches = _matchMedia.matches;
+    var media = void 0;
 
-        result[key] = matches; // eslint-disable-line no-param-reassign
-        return result;
+    if (_this.props.values) {
+      media = Object.entries(_this.props.queries).reduce(function (acc, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            queryName = _ref2[0],
+            query = _ref2[1];
+
+        // see README.md's "React 16 ReactDOM.hydrate" for info on why we use staticMatch
+        // even in the browser
+        acc[queryName] = _cssMediaquery2.default.match(query, _this.props.values);
+        return acc;
       }, {});
-    };
+    } else {
+      media = Object.entries(_this.props.queries).reduce(function (acc, _ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            queryName = _ref4[0],
+            query = _ref4[1];
+
+        // if the user has not set `values` and is server rendering, default to false
+        // because we don't know the screen size
+        acc[queryName] = isServer ? false : window.matchMedia(query).matches;
+        return acc;
+      }, {});
+    }
 
-    _this.clientMatch = function () {
-      var media = _this.queryMedia(_this.props.queries, {});
+    // this is for the mediaQueryListener to be able to find the queryName from it's event arg
+    _this.reverseQueries = Object.entries(_this.props.queries).reduce(function (acc, _ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          queryName = _ref6[0],
+          query = _ref6[1];
 
-      // no need to set state when it hasnt changed
-      if (!(0, _shallowequal2.default)(media, _this.state.media)) {
-        _this.setState({ media: media });
-      }
-    };
+      acc[query] = queryName;
+      return acc;
+    }, {});
+
+    _this.mediaQueryListInstanceArray = [];
 
     _this.state = {
-      media: _this.queryMedia(props.queries, props.values)
+      media: media
     };
+
+    _this.mediaQueryListener = _this.mediaQueryListener.bind(_this);
     return _this;
   }
 
@@ -80,34 +100,63 @@ var MediaQueryProvider = function (_React$Component) {
     value: function componentDidMount() {
       var _this2 = this;
 
-      // even if we supplied values for SSR, they may not have matched up with client screen
-      // so need to requery with client browser values
-      this.clientMatch();
+      var media = Object.entries(this.props.queries).reduce(function (acc, _ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+            queryName = _ref8[0],
+            query = _ref8[1];
 
-      Object.keys(this.props.queries).forEach(function (key) {
-        (0, _matchmedia2.default)(_this2.props.queries[key], _this2.props.values).addListener(_this2.clientMatch);
-      });
+        var mediaQueryListInstance = window.matchMedia(query);
+
+        mediaQueryListInstance.addListener(_this2.mediaQueryListener);
+
+        _this2.mediaQueryListInstanceArray.push(mediaQueryListInstance);
+
+        acc[queryName] = mediaQueryListInstance.matches;
+        return acc;
+      }, {});
+
+      if (!(0, _shallowequal2.default)(media, this.state.media)) {
+        this.setState({ media: media }); // eslint-disable-line react/no-did-mount-set-state
+      }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       var _this3 = this;
 
-      Object.keys(this.props.queries).forEach(function (key) {
-        (0, _matchmedia2.default)(_this3.props.queries[key], _this3.props.values).removeListener(_this3.clientMatch);
+      this.mediaQueryListInstanceArray.forEach(function (mediaQueryListInstance) {
+        mediaQueryListInstance.removeListener(_this3.mediaQueryListener);
       });
     }
+  }, {
+    key: 'mediaQueryListener',
+    value: function mediaQueryListener(_ref9) {
+      var matches = _ref9.matches,
+          media = _ref9.media;
 
-    // check for matches on client mount
+      var queryName = this.reverseQueries[media];
+      var newMedia = Object.assign({}, this.state.media, _defineProperty({}, queryName, matches));
 
+      if (!(0, _shallowequal2.default)(newMedia, this.state.media)) {
+        this.setState({ media: newMedia });
+      }
+    }
   }, {
     key: 'render',
     value: function render() {
-      return _react2.default.Fragment ? _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        this.props.children
-      ) : _react2.default.createElement(
+      if (_react2.default.Fragment) {
+        return _react2.default.createElement(
+          _react2.default.Fragment,
+          null,
+          this.props.children
+        );
+      }
+
+      if (_react2.default.Children.count(this.props.children) > 1) {
+        return this.props.children;
+      }
+
+      return _react2.default.createElement(
         'div',
         null,
         this.props.children
@@ -123,13 +172,18 @@ MediaQueryProvider.childContextTypes = {
 };
 
 MediaQueryProvider.propTypes = {
-  queries: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
   children: _propTypes2.default.node.isRequired,
+  queries: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
   values: _propTypes2.default.object // eslint-disable-line react/forbid-prop-types
 };
 
 MediaQueryProvider.defaultProps = {
-  queries: defaultQueries,
+  queries: {
+    mobile: 'screen and (max-width: 623px)',
+    tablet: 'screen and (min-width: 624px) and (max-width: 1020px)',
+    desktop: 'screen and (min-width: 1021px) and (max-width: 1440px)',
+    largeDesktop: 'screen and (min-width: 1441px)'
+  },
   values: {}
 };
 

dist/with-media.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 var _propTypes = require('prop-types');
@@ -51,7 +49,7 @@ var withMedia = function withMedia(WrappedComponent) {
             wrappedRef = _props.wrappedRef,
             otherProps = _objectWithoutProperties(_props, ['wrappedRef']);
 
-        return _react2.default.createElement(WrappedComponent, _extends({}, otherProps, this.state, {
+        return _react2.default.createElement(WrappedComponent, Object.assign({}, otherProps, {
           media: this.context.media,
           ref: wrappedRef
         }));
@@ -70,10 +68,11 @@ var withMedia = function withMedia(WrappedComponent) {
   };
 
   MediaQueryWrapper.defaultProps = {
-    wrappedRef: function wrappedRef() {}
+    wrappedRef: undefined
   };
 
-  MediaQueryWrapper.displayName = 'MediaQuery(' + getDisplayName(WrappedComponent) + ')';
+  MediaQueryWrapper.displayName = 'withMedia(' + getDisplayName(WrappedComponent) + ')';
+
   return (0, _hoistNonReactStatics2.default)(MediaQueryWrapper, WrappedComponent);
 };
 

package.json

@@ -5,9 +5,10 @@
   "main": "dist/index.js",
   "scripts": {
     "prepublish": "npm run build",
-    "build": "mkdir -p dist && babel src --out-dir dist",
-    "test": "mocha test",
-    "lint": "eslint ./src"
+    "build": "NODE_ENV=production babel --out-dir dist srcy",
+    "test": "NODE_ENV=test mocha test",
+    "tdd": "NODE_ENV=test mocha --watch test",
+    "lint": "eslint ."
   },
   "keywords": [
     "react",
@@ -28,48 +29,45 @@
     "url": "https://github.com/DomainGroupOSS/react-media-query-hoc/issues"
   },
   "homepage": "https://github.com/DomainGroupOSS/react-media-query-hoc#readme",
-  "eslintConfig": {
-    "extends": "airbnb",
-    "rules": {
-      "react/jsx-filename-extension": "off"
-    }
-  },
   "babel": {
     "presets": [
-      "es2015",
-      "stage-0",
-      "react"
+      "react-app"
+    ],
+    "plugins": [
+      "transform-es2015-modules-commonjs"
     ]
   },
   "peerDependencies": {
-    "react": "^15.1.0"
+    "react": "^15.1.0 || ^16.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",
-    "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-react-app": "^3.1.1",
     "babel-register": "^6.9.0",
     "chai": "^4.1.2",
     "enzyme": "^2.3.0",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.0.1",
-    "eslint-plugin-import": "^2.3.0",
-    "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.8.2",
     "jsdom": "^11.0.0",
     "match-media-mock": "^0.1.0",
     "mocha": "^2.5.3",
-    "proxyquire": "^1.8.0",
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
     "react-dom": "^15.1.0",
-    "sinon": "^3.2.1"
+    "sinon": "^5.0.7"
   },
   "dependencies": {
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "css-mediaquery": "^0.1.2",
     "hoist-non-react-statics": "^1.2.0",
-    "matchmedia": "^0.1.2",
     "prop-types": "^15.5.10",
     "shallowequal": "^1.0.2"
-  }
+  },
+  "browserslist": [
+    "> 1%",
+    "IE 10"
+  ]
 }