react-responsive - npm Package Compare versions

Comparing version 1.2.1 to 1.2.3

package.json

 {
   "name": "react-responsive",
   "description": "Media queries in react for responsive design",
-  "version": "1.2.1",
-  "homepage": "http://github.com/wearefractal/react-responsive",
+  "version": "1.2.3",
+  "homepage": "http://github.com/contra/react-responsive",
   "repository": {
     "type": "git",
-    "url": "git://github.com/wearefractal/react-responsive.git"
+    "url": "git://github.com/contra/react-responsive.git"
   },
-  "author": "Fractal <[e-mail]> (http://wearefractal.com/)",
-  "main": "./src/index.js",
+  "author": "Contra <[e-mail]> (http://contra.io)",
+  "license": "MIT",
+  "main": "./dist/react-responsive.js",
+  "jsnext:main": "./src/index.js",
   "keywords": [
@@ -26,5 +28,5 @@ "css",
   "dependencies": {
+    "babel-runtime": "^6.18.0",
     "hyphenate-style-name": "^1.0.0",
-    "matchmedia": "^0.1.2",
-    "object-assign": "^4.0.1"
+    "matchmedia": "^0.1.2"
   },
@@ -35,16 +37,18 @@ "peerDependencies": {
   "devDependencies": {
-    "browserify": "^12.0.1",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.18.0",
+    "babel-eslint": "^7.1.0",
+    "babel-loader": "^6.2.7",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-es2015-loose": "^8.0.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-0": "^6.16.0",
+    "babel-register": "^6.18.0",
     "chai": "^3.5.0",
-    "ecstatic": "^1.4.0",
-    "gulp": "^3.9.0",
-    "gulp-autowatch": "1.0.2",
-    "gulp-cached": "^1.1.0",
-    "gulp-gh-pages": "^0.5.4",
-    "gulp-jshint": "^2.0.0",
-    "gulp-livereload": "^3.8.1",
-    "gulp-sourcemaps": "^1.6.0",
+    "eslint": "^3.9.0",
+    "eslint-config-rackt": "^1.1.1",
+    "github-changes": "^1.0.4",
     "jsdom": "^8.4.0",
-    "jshint": "^2.x",
-    "jshint-stylish": "^2.1.0",
-    "merge-stream": "^1.0.0",
     "mocha": "^2.4.5",
@@ -54,23 +58,54 @@ "react": "^15.0.1",
     "react-dom": "^0.14.0 || ^15.0.0",
-    "react-tools": "^0.13.3",
-    "reactify": "^1.1.1",
     "should": "^8.0.2",
     "sinon": "^1.17.3",
-    "vinyl-buffer": "1.0.0",
-    "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.6.1"
+    "webpack": "^1.13.3",
+    "webpack-dev-server": "^1.16.2"
   },
   "scripts": {
-    "lint": "jshint ./src --reporter=node_modules/jshint-stylish --exclude node_modules",
-    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R spec --compilers .:test/compiler.js --require ./test/setup.js test/*_test.js"
+    "preversion": "npm run clean && npm run build && npm docs",
+    "postversion": "npm run changelog",
+    "start": "$(npm bin)/webpack-dev-server --config webpack.config.samples.js  --content-base samples/sandbox/src --host 0.0.0.0 --hot --inline --port 3333",
+    "build": "$(npm bin)/webpack",
+    "build:watch": "npm run build -- --watch",
+    "clean": "rimraf dist",
+    "lint": "$(npm bin)/eslint src",
+    "test": "NODE_PATH=$NODE_PATH:$PWD/src $(npm bin)/mocha -R spec --compilers js:babel-register --require ./test/setup.js test/*_test.js",
+    "changelog": "github-changes -o contra -r react-responsive -b master -f ./CHANGELOG.md --order-semver --use-commit-body",
+    "docs": "npm run docs:pre && npm run docs:build && npm run docs:publish",
+    "docs:pre": "gitbook install && rimraf _book",
+    "docs:build": "gitbook build -g contra/react-responsive",
+    "docs:publish": "cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [e-mail]:contra/react-responsive gh-pages --force"
   },
+  "babel": {
+    "presets": [
+      "es2015",
+      "react",
+      "stage-0"
+    ],
+    "plugins": [
+      "transform-runtime",
+      "add-module-exports"
+    ]
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint",
+    "extends": "rackt",
+    "env": {
+      "browser": true,
+      "node": true,
+      "es6": true
+    },
+    "ecmaFeatures": {
+      "modules": true
+    },
+    "rules": {
+      "semi": [
+        2,
+        "never"
+      ]
+    }
+  },
   "engines": {
     "node": ">= 0.10"
-  },
-  "licenses": [
-    {
-      "type": "MIT",
-      "url": "http://github.com/wearefractal/react-responsive/raw/master/LICENSE"
-    }
-  ]
+  }
 }

src/index.js

@@ -1,61 +0,50 @@
-'use strict';
+import React from 'react'
+import matchMedia from 'matchmedia'
+import hyphenate  from 'hyphenate-style-name'
+import mediaQuery from './mediaQuery'
+import toQuery  from './toQuery'
 
-var React = require('react');
-var matchMedia = require('matchmedia');
-var hyphenate = require('hyphenate-style-name');
-var mediaQuery = require('./mediaQuery');
-var toQuery = require('./toQuery');
-var assign = require('object-assign');
 
-var defaultTypes = {
+const defaultTypes = {
   component: React.PropTypes.node,
   query: React.PropTypes.string,
   values: React.PropTypes.shape(mediaQuery.matchers),
-  children: React.PropTypes.oneOfType([React.PropTypes.node, React.PropTypes.function])
-};
-var mediaKeys = Object.keys(mediaQuery.all);
-var excludedQueryKeys = Object.keys(defaultTypes);
-var excludedPropKeys = excludedQueryKeys.concat(mediaKeys);
+  children: React.PropTypes.oneOfType([ React.PropTypes.node, React.PropTypes.function ])
+}
+const mediaKeys = Object.keys(mediaQuery.all)
+const excludedQueryKeys = Object.keys(defaultTypes)
+const excludedPropKeys = excludedQueryKeys.concat(mediaKeys)
 
-function omit(object, keys){
-  var newObject = assign({}, object);
-  keys.forEach(function(key){
-    delete newObject[key];
-  });
-  return newObject;
+function omit(object, keys) {
+  const newObject = { ...object }
+  keys.forEach(key => delete newObject[key])
+  return newObject
 }
 
-var mq = React.createClass({
-  displayName: 'MediaQuery',
+export default class MediaQuery extends React.Component {
+  static displayName = 'MediaQuery'
+  static defaultProps = {
+    values: {}
+  }
 
-  getDefaultProps: function(){
-    return {
-      values: {}
-    };
-  },
+  state = { matches: false }
 
-  getInitialState: function(){
-    return {
-      matches: false
-    };
-  },
+  componentWillMount() {
+    this.updateQuery(this.props)
+  }
 
-  componentWillMount: function(){
-    this.updateQuery(this.props);
-  },
+  componentWillReceiveProps(nextProps) {
+    this.updateQuery(nextProps)
+  }
 
-  componentWillReceiveProps: function(props){
-    this.updateQuery(props);
-  },
-
-  updateQuery: function(props){
-    var values;
+  updateQuery(props) {
+    let values
     if (props.query) {
-      this.query = props.query;
+      this.query = props.query
     } else {
-      this.query = toQuery(omit(props, excludedQueryKeys));
+      this.query = toQuery(omit(props, excludedQueryKeys))
     }
 
     if (!this.query) {
-      throw new Error('Invalid or missing MediaQuery!');
+      throw new Error('Invalid or missing MediaQuery!')
     }
@@ -65,45 +54,47 @@
       values = Object.keys(props.values)
-        .reduce(function(result, key){
-          result[hyphenate(key)] = props.values[key];
-          return result;
-        }, {});
+        .reduce(function (result, key) {
+          result[hyphenate(key)] = props.values[key]
+          return result
+        }, {})
     }
 
     if (this._mql) {
-      this._mql.removeListener(this.updateMatches);
+      this._mql.removeListener(this.updateMatches)
     }
 
-    this._mql = matchMedia(this.query, values);
-    this._mql.addListener(this.updateMatches);
-    this.updateMatches();
-  },
+    this._mql = matchMedia(this.query, values)
+    this._mql.addListener(this.updateMatches)
+    this.updateMatches()
+  }
 
-  componentWillUnmount: function(){
-    this._mql.removeListener(this.updateMatches);
-  },
 
-  updateMatches: function(){
+  componentWillUnmount() {
+    this._mql.removeListener(this.updateMatches)
+  }
+
+  updateMatches = () => {
     if (this._mql.matches === this.state.matches) {
-      return;
+      return
     }
     this.setState({
       matches: this._mql.matches
-    });
-  },
+    })
+  }
 
-  render: function(){
+  render() {
     if(typeof this.props.children === 'function') {
-      return this.props.children(this.state.matches);
+      return this.props.children(this.state.matches)
     }
 
     if (this.state.matches === false) {
-      return null;
+      return null
     }
-    var props = omit(this.props, excludedPropKeys);
-    var hasMergeProps = Object.keys(props).length > 0;
-    var childrenCount = React.Children.count(this.props.children);
-    var wrapChildren = this.props.component ||
+    const props = omit(this.props, excludedPropKeys)
+    const hasMergeProps = Object.keys(props).length > 0
+    const childrenCount = React.Children.count(this.props.children)
+    const wrapChildren = this.props.component ||
       childrenCount > 1 ||
       typeof this.props.children === 'string' ||
-      this.props.children === undefined;
+      Array.isArray(this.props.children) && childrenCount == 1 ||
+      this.props.children === undefined
     if (wrapChildren) {
@@ -114,3 +105,3 @@ return React.createElement(
         this.props.children
-      );
+      )
     } else if (hasMergeProps) {
@@ -120,12 +111,10 @@ return React.cloneElement(
         props
-      );
-    } else if (childrenCount){
-      return this.props.children;
+      )
+    } else if (childrenCount) {
+      return this.props.children
     }
     else {
-      return null;
+      return null
     }
   }
-});
-
-module.exports = mq;
+}

src/mediaQuery.js

@@ -1,11 +0,10 @@
-var PropTypes = require('react').PropTypes;
-var assign = require('object-assign');
+import { PropTypes } from 'react'
 
-var stringOrNumber = PropTypes.oneOfType([
+const stringOrNumber = PropTypes.oneOfType([
   PropTypes.string,
   PropTypes.number
-]);
+])
 
 // properties that match media queries
-var matchers = {
+const matchers = {
   orientation: PropTypes.oneOf([
@@ -36,6 +35,6 @@ 'portrait',
   resolution: stringOrNumber
-};
+}
 
 // media features
-var features = {
+const features = {
   minAspectRatio: PropTypes.string,
@@ -66,9 +65,9 @@ maxAspectRatio: PropTypes.string,
   minResolution: stringOrNumber,
-  maxResolution: stringOrNumber
-};
+  maxResolution: stringOrNumber,
 
-assign(features, matchers);
+  ...matchers
+}
 
 // media types
-var types = {
+const types = {
   all: PropTypes.bool,
@@ -85,12 +84,10 @@ grid: PropTypes.bool,
   embossed: PropTypes.bool
-};
+}
 
-var all = {};
-assign(all, types);
-assign(all, features);
+const all = { ...types, ...features }
 
 // add the type property
-assign(matchers, { type: Object.keys(types) });
+matchers.type = Object.keys(types)
 
-module.exports = {
+export default {
   all: all,
@@ -100,2 +97,2 @@ types: types,
   features: features
-};
+}

src/toQuery.js

@@ -1,39 +0,35 @@
-'use strict';
+import hyphenate from 'hyphenate-style-name'
+import mq from './mediaQuery'
 
-var hyphenate = require('hyphenate-style-name');
-var mq = require('./mediaQuery');
+const negate = cond => `not ${cond}`
 
-function negate(cond) {
-  return 'not ' + cond;
-}
-
 function keyVal(k, v) {
-  var realKey = hyphenate(k);
+  const realKey = hyphenate(k)
 
   // px shorthand
   if (typeof v === 'number') {
-    v = v+'px';
+    v = `${v}px`
   }
   if (v === true) {
-    return k;
+    return k
   }
   if (v === false) {
-    return negate(k);
+    return negate(k)
   }
-  return '('+realKey+': '+v+')';
+  return `(${realKey}: ${v})`
 }
 
 function join(conds) {
-  return conds.join(' and ');
+  return conds.join(' and ')
 }
 
-module.exports = function(obj){
-  var rules = [];
-  Object.keys(mq.all).forEach(function(k){
-    var v = obj[k];
+export default function (obj) {
+  const rules = []
+  Object.keys(mq.all).forEach(function (k) {
+    const v = obj[k]
     if (v != null) {
-      rules.push(keyVal(k, v));
+      rules.push(keyVal(k, v))
     }
-  });
-  return join(rules);
-};
+  })
+  return join(rules)
+}

test/index_test.js

@@ -66,2 +66,11 @@ var React = require('react');
     });
+    it('renders a div when children is a single-element array', function() {
+      const mq = (
+        <MediaQuery query="all">
+          {['single element'].map((content, index) => <span key={index}>{content}</span>)}
+        </MediaQuery>
+      );
+      const e = TestUtils.renderIntoDocument(mq);
+      assert.isNotFalse(TestUtils.findRenderedDOMComponentWithTag(e, 'div'));
+    });
     it('passes extra props', function() {
@@ -68,0 +77,0 @@ const mq = (

New alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

24

decreased by-4%

Number of package files

23

increased by9.52%

Number of low supply chain risk alerts

80

decreased by-50.31%

Worsened metrics

Total package byte prevSize

548766

decreased by-20.91%

Lines of code

6483

decreased by-24.81%

Dependency changes

• + Addedbabel-runtime@^6.18.0

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)

• - Removedobject-assign@^4.0.1