Pass size props on initial render - my solution to renatorib#7. Also add .editorconfig and use react-display-name package instead of local implementation

Author: felthy

.editorconfig

@@ -0,0 +1,11 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

package.json

@@ -37,6 +37,7 @@
     "lodash.keys": "^4.2.0",
     "lodash.throttle": "^4.1.1",
     "react": "^15.5.3",
+    "react-display-name": "^0.2.0",
     "uuid": "^3.0.1"
   },
   "devDependencies": {

src/Sizes.js

@@ -3,12 +3,19 @@ import { v4 } from 'uuid';
 import keys from 'lodash.keys';
 import throttle from 'lodash.throttle';
 
-import { getDisplayName } from './utils';
+import getDisplayName from 'react-display-name';
 
 let resizeListener;
 const listeners = {};
 
 const Sizes = (...mappedSizesToProps) => (WrappedComponent) => {
+  const parseMappedSizesToProps = ({ width, height }) => {
+    const propsToPass = mappedSizesToProps
+      .map(check => check({width, height}))
+      .reduce((acc, props) => ({...acc, ...props}), {});
+    return propsToPass
+  }
+
   return class extends Component {
     static displayName = `Sizes(${getDisplayName(WrappedComponent)})`;
 
@@ -17,12 +24,20 @@ const Sizes = (...mappedSizesToProps) => (WrappedComponent) => {
       propsToPass: {},
     };
 
+    constructor(props) {
+      super(props)
+      this.state.propsToPass = parseMappedSizesToProps({
+        width: window && window.innerWidth,
+        height: window && window.innerHeight,
+      })
+    }
+
     componentDidMount() {
       if (!resizeListener) {
         resizeListener = window.addEventListener('resize', this.throttledWindowResize);
       }
 
-      listeners[this.state.id] = this.parseMappedSizesToProps;
+      listeners[this.state.id] = dimensions => this.setState({ propsToPass: parseMappedSizesToProps(dimensions) });
       this.dispatchSizes();
     }
 
@@ -51,14 +66,6 @@ const Sizes = (...mappedSizesToProps) => (WrappedComponent) => {
       throttle(this.dispatchSizes, 200)
     );
 
-    parseMappedSizesToProps = ({ width, height }) => {
-      const propsToPass = mappedSizesToProps
-        .map(check => check({ width, height }))
-        .reduce((acc, props) => ({ ...acc, ...props }), {});
-
-      this.setState({ propsToPass });
-    }
-
     render() {
       return <WrappedComponent {...this.props} {...this.state.propsToPass} />;
     }

src/utils/get-display-name.js

@@ -3863,6 +3863,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-display-name@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.0.tgz#0e1f7086e45a32d07764df35ed32ff16f1259790"
+
 react-docgen@^2.12.1:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.13.0.tgz#7fcc4a3104ea8d4fd428383ba38df11166837be9"