First stab at backward compatibility of query prop

Author: edorivai

modules/Media.js

@@ -1,9 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import invariant from 'invariant';
-import json2mq from 'json2mq';
+import React from "react";
+import PropTypes from "prop-types";
+import invariant from "invariant";
+import json2mq from "json2mq";
 
-import MediaQueryList from './MediaQueryList';
+import MediaQueryListener from "./MediaQueryListener";
 
 const queryType = PropTypes.oneOfType([
   PropTypes.string,
@@ -16,8 +16,12 @@ const queryType = PropTypes.oneOfType([
  */
 class Media extends React.Component {
   static propTypes = {
-    defaultMatches: PropTypes.objectOf(PropTypes.bool),
-    queries: PropTypes.objectOf(queryType).isRequired,
+    defaultMatches: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.objectOf(PropTypes.bool)
+    ]),
+    query: queryType,
+    queries: PropTypes.objectOf(queryType),
     render: PropTypes.func,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     targetWindow: PropTypes.object,
@@ -29,63 +33,101 @@ class Media extends React.Component {
   constructor(props) {
     super(props);
 
+    invariant(
+      !(!props.query && !props.queries) || (props.query && props.queries),
+      '<Media> must be supplied with either "query" or "queries"'
+    );
+
+    invariant(
+      props.defaultMatches === undefined ||
+        !props.query ||
+        typeof props.defaultMatches === "boolean",
+      "<Media> when query is set, defaultMatches must be a boolean, received " +
+        typeof props.defaultMatches
+    );
+
+    invariant(
+      props.defaultMatches === undefined ||
+        !props.queries ||
+        typeof props.defaultMatches === "object",
+      "<Media> when queries is set, defaultMatches must be a object of booleans, received " +
+        typeof props.defaultMatches
+    );
+
     if (typeof window !== "object") {
-      // In case we're rendering on the server
+      // In case we're rendering on the server, apply the default matches
+      let matches;
+      if (props.defaultMatches) {
+        matches = props.defaultMatches;
+      } else if (props.query) {
+        matches = true;
+      } /* if (props.queries) */ else {
+        matches = Object.keys(this.props.queries).reduce(
+          (acc, key) => ({ ...acc, [key]: true }),
+          {}
+        );
+      }
       this.state = {
-        matches:
-          this.props.defaultMatches ||
-          Object.keys(this.props.queries).reduce(
-            (acc, key) => ({ ...acc, [key]: true }),
-            {}
-          )
+        matches
       };
       return;
     }
 
     this.initialize();
 
-    // Instead of calling this.updateMatches, we manually set the state to prevent
+    // Instead of calling this.updateMatches, we manually set the initial state to prevent
     // calling setState, which could trigger an unnecessary second render
     this.state = {
       matches:
         this.props.defaultMatches !== undefined
           ? this.props.defaultMatches
           : this.getMatches()
     };
+
     this.onChange();
   }
 
   getMatches = () => {
-    return this.queries.reduce(
-      (acc, { name, mqList }) => ({ ...acc, [name]: mqList.matches }),
+    const result = this.queries.reduce(
+      (acc, { name, mqListener }) => ({ ...acc, [name]: mqListener.matches }),
       {}
     );
+
+    // return result;
+    return unwrapSingleQuery(result);
   };
 
   updateMatches = () => {
     const newMatches = this.getMatches();
 
-    this.setState(() => ({
-      matches: newMatches
-    }), this.onChange);
+    this.setState(
+      () => ({
+        matches: newMatches
+      }),
+      this.onChange
+    );
   };
 
   initialize() {
     const targetWindow = this.props.targetWindow || window;
 
     invariant(
-      typeof targetWindow.matchMedia === 'function',
-      '<Media targetWindow> does not support `matchMedia`.'
+      typeof targetWindow.matchMedia === "function",
+      "<Media targetWindow> does not support `matchMedia`."
     );
 
-    const { queries } = this.props;
+    const queries = this.props.queries || wrapInQueryObject(this.props.query);
 
     this.queries = Object.keys(queries).map(name => {
       const query = queries[name];
       const qs = typeof query !== "string" ? json2mq(query) : query;
-      const mqList = new MediaQueryList(targetWindow, qs, this.updateMatches);
+      const mqListener = new MediaQueryListener(
+        targetWindow,
+        qs,
+        this.updateMatches
+      );
 
-      return { name, mqList };
+      return { name, mqListener };
     });
   }
 
@@ -107,35 +149,58 @@ class Media extends React.Component {
   }
 
   componentWillUnmount() {
-    this.queries.forEach(({ mqList }) => mqList.cancel());
+    this.queries.forEach(({ mqListener }) => mqListener.cancel());
   }
 
   render() {
     const { children, render } = this.props;
     const { matches } = this.state;
 
-    const isAnyMatches = Object.keys(matches).some(key => matches[key]);
+    const isAnyMatches =
+      typeof matches === "object"
+        ? Object.keys(matches).some(key => matches[key])
+        : matches;
 
     return render
       ? isAnyMatches
         ? render(matches)
         : null
       : children
-        ? typeof children === 'function'
-          ? children(matches)
-          : // Preact defaults to empty children array
-            !Array.isArray(children) || children.length
-            ? isAnyMatches
-              ? // We have to check whether child is a composite component or not to decide should we
-                // provide `matches` as a prop or not
-                React.Children.only(children) &&
-                typeof React.Children.only(children).type === "string"
-                ? React.Children.only(children)
-                : React.cloneElement(React.Children.only(children), { matches })
-              : null
-            : null
-        : null;
+      ? typeof children === "function"
+        ? children(matches)
+        : !Array.isArray(children) || children.length // Preact defaults to empty children array
+        ? isAnyMatches
+          ? // We have to check whether child is a composite component or not to decide should we
+            // provide `matches` as a prop or not
+            React.Children.only(children) &&
+            typeof React.Children.only(children).type === "string"
+            ? React.Children.only(children)
+            : React.cloneElement(React.Children.only(children), { matches })
+          : null
+        : null
+      : null;
+  }
+}
+
+/**
+ * Wraps a single query in an object. This is used to provide backward compatibility with
+ * the old `query` prop (as opposed to `queries`). If only a single query is passed, the object
+ * will be unpacked down the line, but this allows our internals to assume an object of queries
+ * at all times.
+ */
+function wrapInQueryObject(query) {
+  return { __DEFAULT__: query };
+}
+
+/**
+ * Unwraps an object of queries, if it was originally passed as a single query.
+ */
+function unwrapSingleQuery(queryObject) {
+  const queryNames = Object.keys(queryObject);
+  if (queryNames.length === 1 && queryNames[0] === "__DEFAULT__") {
+    return queryObject.__DEFAULT__;
   }
+  return queryObject;
 }
 
 export default Media;

modules/MediaQueryList.js renamed to modules/MediaQueryListener.js

@@ -1,4 +1,4 @@
-export default class MediaQueryList {
+export default class MediaQueryListener {
   constructor(targetWindow, query, listener) {
     this.nativeMediaQueryList = targetWindow.matchMedia(query);
     this.active = true;