Prepare for 0.2.0

- add eslint
- optimize rerenders with shallowDiff in propsToPass
- remove unnecessary dependencies
- others

Author: renatorib

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "valid-jsdoc": 2,
+    "react/prop-types": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-no-undef": 2,
+    "import/no-unresolved": ["error", { "ignore": ["^react$"] }],
+    "comma-dangle": ["error", "always-multiline"],
+    "semi": ["error", "never"],
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }]
+  },
+  "plugins": [
+    "import",
+    "react"
+  ]
+}

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 lib
 .DS_Store
+*.log
+.vscode

.storybook/components/MobileBreakpoint.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import withSizes from '../../lib/withSizes';
+import withSizes from '../../src/withSizes';
 
 const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
   <div>

.storybook/stories/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf, action, linkTo } from '@kadira/storybook';
 import { Code, Result } from '../components';
 import MobileBreakpoint from '../components/MobileBreakpoint';
-import withSizes from '../../lib/withSizes';
+import withSizes from '../../src/withSizes';
 
 const mapSizesToProps = sizes => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',

package.json

@@ -2,19 +2,23 @@
   "name": "react-sizes",
   "version": "0.1.2",
   "description": "Hoc to easily map window sizes to props.",
-  "main": "index.js",
+  "main": "lib/index.js",
   "scripts": {
-    "clear": "del lib",
-    "build": "yarn clear && babel src -d lib --source-maps",
-    "dev": "chokidar 'src/**/*' -c 'yarn build'",
+    "clean": "rimraf lib",
+    "lint": "eslint src",
+    "build": "cross-env NODE_ENV=production npm run lint && npm run clear && babel src -d lib --source-maps",
+    "prepublish": "npm run lint && npm run clean && npm run build",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "pub": "npm run build && np"
+    "build-storybook": "build-storybook"
   },
   "repository": {
     "type": "git",
     "url": "git+ssh://[email protected]/renatorib/react-sizes.git"
   },
+  "files": [
+    "lib",
+    "src"
+  ],
   "keywords": [
     "react",
     "hoc",
@@ -36,23 +40,28 @@
   "dependencies": {
     "lodash.keys": "^4.2.0",
     "lodash.throttle": "^4.1.1",
-    "react-display-name": "^0.2.0",
     "uuid": "^3.0.1"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
     "babel-cli": "^6.24.1",
+    "babel-eslint": "^8.0.0",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "chokidar-cli": "^1.2.0",
+    "cross-env": "^5.0.5",
     "del-cli": "^0.2.1",
+    "eslint": "^4.6.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-react": "^7.3.0",
     "np": "^2.13.1",
+    "react": "^15.6.1",
+    "react-dom": "^15.5.3",
     "react-syntax-highlighter": "^5.3.0"
   },
   "peerDependencies": {
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
   }
 }

src/presets.js

@@ -0,0 +1,13 @@
+export const isMobile = ({ width }) => width < 480
+export const isTablet = ({ width }) => width >= 480 && width < 1024
+export const isDesktop = ({ width }) => width >= 1024
+
+export const isGtMobile = (sizes) => !isMobile(sizes)
+export const isGtTablet = (sizes) => isDesktop(sizes)
+
+export const isStTablet = (sizes) => isMobile(sizes)
+export const isStDesktop = (sizes) => !isStDesktop(sizes)
+
+export const isTabletAndGreater = (sizes) => !isMobile(sizes)
+export const isTabletAndSmaller = (sizes) => !isStDesktop(sizes)
+

src/utils/getDisplayName.js

@@ -0,0 +1,9 @@
+const getDisplayName = (Component) => (
+  Component.displayName ||
+  Component.name ||
+  (typeof Component === 'string' && Component.length > 0
+    ? Component
+    : 'Unknown')
+)
+
+export default getDisplayName

src/utils/getWindowSizes.js

@@ -0,0 +1,11 @@
+const getSizes = (window) => {
+  const canUseDOM = typeof window !== 'undefined'
+
+  return {
+    width: canUseDOM ? window.innerWidth : null,
+    height: canUseDOM ? window.innerHeight : null,
+    canUseDOM,
+  }
+}
+
+export default getSizes

src/utils/shallowDiff.js

@@ -0,0 +1,13 @@
+const shallowDiff = (a, b) => {
+  for (let i in a) {
+    if (!(i in b)) return true
+  }
+
+  for (let i in b) {
+    if (a[i] !== b[i]) return true
+  }
+
+  return false
+}
+
+export default shallowDiff

src/withSizes.js

@@ -1,86 +1,83 @@
-import React, { Component } from 'react';
-import { v4 } from 'uuid';
-import keys from 'lodash.keys';
-import throttle from 'lodash.throttle';
-import getDisplayName from 'react-display-name';
+/* eslint-disable no-console */
 
-let resizeListener;
-const listeners = {};
+import React, { Component } from 'react'
+import { v4 } from 'uuid'
+import keys from 'lodash.keys'
+import throttle from 'lodash.throttle'
 
-const getSizes = (window) => ({
-  width: typeof window !== 'undefined' && window.innerWidth,
-  height: typeof window !== 'undefined' && window.innerHeight,
-  canUseDOM: typeof window !== 'undefined',
-});
+import * as presets from './presets'
+
+import getDisplayName from './utils/getDisplayName'
+import shallowDiff from './utils/shallowDiff'
+import getWindowSizes from './utils/getWindowSizes'
+
+const debug = process.env.NODE_ENV !== 'production'
+
+let resizeListener
+const listeners = {}
 
 const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
   const parseMappedSizesToProps = (dimensions, props) => {
     const propsToPass = mappedSizesToProps
       .map(check => check(dimensions, props))
-      .reduce((acc, props) => ({...acc, ...props}), {});
+      .reduce((acc, props) => ({...acc, ...props}), {})
 
-    return propsToPass;
+    return propsToPass
   }
 
   return class extends Component {
     static displayName = `withSizes(${getDisplayName(WrappedComponent)})`;
 
     state = {
       id: `A${v4()}`,
-      propsToPass: parseMappedSizesToProps(getSizes(window), this.props),
+      propsToPass: parseMappedSizesToProps(getWindowSizes(window), this.props),
     };
 
     componentDidMount() {
       if (!resizeListener) {
-        resizeListener = window.addEventListener('resize', this.throttledWindowResize);
+        resizeListener = window.addEventListener('resize', this.throttledWindowResize)
       }
 
-      listeners[this.state.id] = (sizes) => this.setState({
-        propsToPass: parseMappedSizesToProps(sizes, this.props)
-      });
+      listeners[this.state.id] = this.listenerCallback
 
-      this.dispatchSizes();
+      this.dispatchSizes()
     }
 
     componentWillUnmount() {
-      delete listeners[this.state.id];
+      delete listeners[this.state.id]
       if (keys(listeners).length < 1) {
-        window.removeEventListener('resize', this.throttledWindowResize);
-        resizeListener = null;
+        window.removeEventListener('resize', this.throttledWindowResize)
+        resizeListener = null
+      }
+    }
+
+    listenerCallback = (sizes) => {
+      const propsToPass = parseMappedSizesToProps(sizes, this.props)
+
+      if (shallowDiff(propsToPass, this.state.propsToPass)) {
+        this.setState({ propsToPass })
       }
     }
 
     dispatchSizes = () => {
       keys(listeners).forEach(key => {
-        const callback = listeners[key];
+        const callback = listeners[key]
 
         if (typeof callback === 'function') {
-          callback(getSizes(window));
+          callback(getWindowSizes(window))
         }
-      });
+      })
     };
 
     throttledWindowResize = (
       throttle(this.dispatchSizes, 200)
     );
 
     render() {
-      return <WrappedComponent {...this.props} {...this.state.propsToPass} />;
+      if (debug) console.log('render', this.state.propsToPass)
+      return <WrappedComponent {...this.props} {...this.state.propsToPass} />
     }
-  };
-};
-
-withSizes.isMobile = ({ width }) => width < 480;
-withSizes.isTablet = ({ width }) => width >= 480 && width < 1024;
-withSizes.isDesktop = ({ width }) => width >= 1024;
-
-withSizes.isGtMobile = (sizes) => !withSizes.isMobile(sizes);
-withSizes.isGtTablet = (sizes) => withSizes.isDesktop(sizes);
-
-withSizes.isStTablet = (sizes) => withSizes.isMobile(sizes);
-withSizes.isStDesktop = (sizes) => !withSizes.isStDesktop(sizes);
-
-withSizes.isTabletAndGreater = (sizes) => !withSizes.isMobile(sizes);
-withSizes.isTabletAndSmaller = (sizes) => !withSizes.isStDesktop(sizes);
+  }
+}
 
-export default withSizes;
+export default Object.assign(withSizes, presets)