Merge pull request #9 from jokeyrhyme/post-mount-resize

after first browser render, check sizes again (fixes #8)

Author: joeybaker

.eslintrc renamed to .eslintrc.json

@@ -172,6 +172,7 @@
         "afterColon": true
       }
     ],
+    "keyword-spacing": 2,
     "max-nested-callbacks": [
       2,
       3
@@ -221,10 +222,6 @@
       "never"
     ],
     "sort-vars": 0,
-    "space-after-keywords": [
-      1,
-      "always"
-    ],
     "space-before-blocks": 0,
     "space-before-function-paren": [
       1,
@@ -243,7 +240,6 @@
       "never"
     ],
     "space-infix-ops": 2,
-    "space-return-throw-case": 2,
     "space-unary-ops": [
       1,
       {

.travis.yml

@@ -2,6 +2,7 @@ language: node_js
 node_js:
   - "4"
   - "5"
+  - "stable"
 
 script:
   - "npm run nsp && npm run lint && npm test"
@@ -13,3 +14,9 @@ sudo: false
 
 before_install:
  - "npm install -g npm@latest"
+
+# https://docs.travis-ci.com/user/gui-and-headless-browsers/#Using-xvfb-to-Run-Tests-That-Require-a-GUI
+before_script:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start

index.jsx

@@ -1,9 +1,9 @@
 import React, {PropTypes, Component, Children, cloneElement} from 'react'
 import {findDOMNode} from 'react-dom'
-import identity from 'lodash/utility/identity'
-import sortBy from 'lodash/collection/sortBy'
-import first from 'lodash/array/first'
-import isNumber from 'lodash/lang/isNumber'
+import identity from 'lodash.identity'
+import sortBy from 'lodash.sortby'
+import first from 'lodash.first'
+import isNumber from 'lodash.isnumber'
 import raf from 'raf'
 import pureRender from 'pure-render-decorator'
 
@@ -25,6 +25,7 @@ export default class ElementQuery extends Component {
           if (size === 0) {
             return new Error(`${componentName} received a width of \`${size}\` for \`${props.name}\`. Widths are min-widths, and should be treated as "mobile-first". The default state can be set with the \`default\` prop, or even better with the "default" styles in CSS.`)
           }
+          return null
         }
     })).isRequired
     , makeClassName: PropTypes.func
@@ -50,6 +51,10 @@ export default class ElementQuery extends Component {
 
   componentDidMount () {
     ElementQuery.sizeComponent(this, this.state.sizes)
+    // wait a few frames then check sizes again
+    raf(() => raf(() => {
+      ElementQuery.sizeComponent(this, this.state.sizes)
+    }))
   }
 
   componentWillReceiveProps (newProps) {
@@ -60,9 +65,9 @@ export default class ElementQuery extends Component {
     ElementQuery.unregister(this)
   }
 
-static _isListening = false
+  static _isListening = false
 
-static _componentMap = new Map()
+  static _componentMap = new Map()
 
   // use only one global listener … for perf!
   static listen () {
@@ -110,18 +115,18 @@ static _componentMap = new Map()
     let matchedSize = ''
     let matchedWidth = smallestSize.width
 
+    // use Array#some() here because #forEach() has no early exit
     sizes.some((test) => {
       // check for:
       // 1. the el width is greater or equal to the test width
       // 2. the el width is greater or equal to the min test width
       if (width >= test.width && width >= matchedWidth) {
         matchedSize = test.name
         matchedWidth = test.width
+        return false
       }
       // once that condition isn't true, we've found the correct match; bail
-      else {
-        return true
-      }
+      return true
     })
     component.setSize(matchedSize)
   }

package.json

@@ -54,7 +54,7 @@
   "browser": "index.es5",
   "devDependencies": {
     "babel": "^5.6.14",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^6.0.4",
     "babel-plugin-closure-elimination": "^0.0.2",
     "babel-plugin-undefined-to-void": "^1.1.6",
     "babel-runtime": "^5.6.15",
@@ -63,8 +63,8 @@
     "browserify": "^12.0.1",
     "dmn": "^1.0.5",
     "doctoc": "^0.15.0",
-    "eslint": "^1.7.3",
-    "eslint-plugin-react": "^3.6.3",
+    "eslint": "^2.8.0",
+    "eslint-plugin-react": "^5.0.1",
     "ghooks": "^0.3.2",
     "hihat": "^2.5.0",
     "in-publish": "^2.0.0",
@@ -87,8 +87,11 @@
     "react-dom": ">=0.14.1"
   },
   "dependencies": {
-    "lodash": "^3.10.1",
-    "pure-render-decorator": "^0.2.0",
+    "lodash.first": "^3.0.0",
+    "lodash.identity": "^3.0.0",
+    "lodash.isnumber": "^3.0.3",
+    "lodash.sortby": "^4.4.2",
+    "pure-render-decorator": "^1.1.0",
     "raf": "^3.0.0"
   }
 }

scripts.sh

@@ -4,7 +4,7 @@ set -euo pipefail
 IFS=$'\n\t'
 
 function lint(){
-  eslint --no-eslintrc --config .eslintrc "${@-.}" --ext .jsx --ext .js --ext .es6
+  eslint --no-eslintrc --config .eslintrc.json "${@-.}" --ext .jsx --ext .js --ext .es6
 }
 
 function git_require_clean_work_tree(){