react-simple-image - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGES.md

 # The Revision History
 
+## v0.1.2 - 2017/01/04
+
+* Change `src` props interface to required from optional
+* Change `srcSet` props interface to Object from Array<Object>
+* Fix `srcSet` props validation logic
+* Add test-coverage tool (istanbul) for CI
+
 ## v0.1.1 - 2016/12/28
@@ -4,0 +11,0 @@

lib/image.js

@@ -9,10 +9,8 @@ 'use strict';
 
-var _react = require('/Users/kenjuwagatsuma/bitjourney/react-simple-image/node_modules/react');
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _matcher = require('./matcher');
+var _matcher = require('../src/matcher');
 
-var _matcher2 = _interopRequireDefault(_matcher);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,4 +33,5 @@
         className: _react2.default.PropTypes.string,
-        srcSet: _react2.default.PropTypes.arrayOf(function (props, propName, componentName) {
-          if (!_matcher2.default.matchDescriptor(propName)) {
+        src: _react2.default.PropTypes.string.isRequired,
+        srcSet: _react2.default.PropTypes.objectOf(function (props, propName, componentName) {
+          if (!(0, _matcher.matchDescriptor)(propName)) {
             return new Error('Invalid prop \'' + propName + '\' supplied to \'' + componentName + '\'. Validation failed.');
@@ -56,6 +55,4 @@ }
     _this.state = {
-      widthDescriptorOnly: _this.props.srcSet.every(function (srcSet) {
-        return Object.keys(srcSet).every(function (descriptor) {
-          return _matcher2.default.matchWidthDescriptor(descriptor);
-        });
+      widthDescriptorOnly: Object.keys(_this.props.srcSet).every(function (descriptor) {
+        return (0, _matcher.matchWidthDescriptor)(descriptor);
       })
@@ -67,9 +64,2 @@ };
   _createClass(Image, [{
-    key: 'getSrc',
-    value: function getSrc() {
-      var firstSrcSet = this.props.srcSet[0];
-      var key = Object.keys(firstSrcSet)[0];
-      return firstSrcSet[key];
-    }
-  }, {
     key: 'buildSrcSet',
@@ -79,11 +69,5 @@ value: function buildSrcSet() {
 
-      var matcher = this.state.widthDescriptorOnly ? _matcher2.default.matchWidthDescriptor : _matcher2.default.matchPixelDescriptor;
-      return this.props.srcSet.filter(function (srcSet) {
-        return Object.keys(srcSet).every(function (descriptor) {
-          return matcher.call(_this2, descriptor);
-        });
-      }).map(function (srcSet) {
-        return Object.keys(srcSet).map(function (descriptor) {
-          return srcSet[descriptor] + ' ' + descriptor;
-        });
+      var matcher = this.state.widthDescriptorOnly ? _matcher.matchWidthDescriptor : _matcher.matchPixelDescriptor;
+      return Object.keys(this.props.srcSet).filter(matcher).map(function (descriptor) {
+        return _this2.props.srcSet[descriptor] + ' ' + descriptor;
       });
@@ -110,3 +94,3 @@ }
         className: this.props.className,
-        src: this.getSrc(),
+        src: this.props.src,
         srcSet: this.buildSrcSet(),
@@ -121,2 +105,3 @@ sizes: this.buildSizes()
 
-exports.default = Image;
+exports.default = Image;
+//# sourceMappingURL=image.js.map

lib/matcher.js

@@ -6,7 +6,5 @@ "use strict";
 });
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
+exports.matchWidthDescriptor = matchWidthDescriptor;
+exports.matchPixelDescriptor = matchPixelDescriptor;
+exports.matchDescriptor = matchDescriptor;
 var REGEXP_DECIMAL_NUMBER = /\d+(?:\.\d+)?/;
@@ -17,27 +15,13 @@ var REGEXP_DESCRIPTOR_WIDTH = new RegExp("^" + REGEXP_DECIMAL_NUMBER.source + "w$");
 
-var Matcher = function () {
-  function Matcher() {
-    _classCallCheck(this, Matcher);
-  }
+function matchWidthDescriptor(str) {
+  return REGEXP_DESCRIPTOR_WIDTH.test(str);
+}
 
-  _createClass(Matcher, null, [{
-    key: "matchWidthDescriptor",
-    value: function matchWidthDescriptor(str) {
-      return REGEXP_DESCRIPTOR_WIDTH.test(str);
-    }
-  }, {
-    key: "matchPixelDescriptor",
-    value: function matchPixelDescriptor(str) {
-      return REGEXP_DESCRIPTOR_PIXEL.test(str);
-    }
-  }, {
-    key: "matchDescriptor",
-    value: function matchDescriptor(str) {
-      return REGEXP_DESCRIPTOR_WIDTH_AND_PIXEL.test(str);
-    }
-  }]);
+function matchPixelDescriptor(str) {
+  return REGEXP_DESCRIPTOR_PIXEL.test(str);
+}
 
-  return Matcher;
-}();
-
-exports.default = Matcher;
+function matchDescriptor(str) {
+  return REGEXP_DESCRIPTOR_WIDTH_AND_PIXEL.test(str);
+}
+//# sourceMappingURL=matcher.js.map

package.json

 {
   "name": "react-simple-image",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "responsive <img> tag with cleaner srcset/sizes interface.",
   "main": "lib/image.js",
   "scripts": {
-    "test": "$(npm bin)/mocha --opts spec/mocha.opts  spec/**/*.spec.jsx",
-    "lint": "$(npm bin)/eslint src/**/*.{js,jsx} spec/**/*.{js,jsx}",
-    "build": "babel src --out-dir lib --source-map"
+    "lint": "eslint src/**/*.{js,jsx} spec/**/*.{js,jsx}",
+    "build": "babel src --out-dir lib --source-maps",
+    "test": "nyc mocha --opts spec/mocha.opts spec/**/*.spec.jsx",
+    "coveralls": "nyc report --reporter=text-lcov | $(npm bin)/coveralls"
   },
-  "files" : [
+  "files": [
     "lib",
@@ -17,3 +18,3 @@ "src"
     "type": "git",
-    "url": "git+https://github.com/bitjourney/react-responsive-img.git"
+    "url": "git+https://github.com/bitjourney/react-simple-image.git"
   },
@@ -26,8 +27,8 @@ "keywords": [
   "bugs": {
-    "url": "https://github.com/bitjourney/react-responsive-img/issues"
+    "url": "https://github.com/bitjourney/react-simple-image/issues"
   },
-  "homepage": "https://github.com/bitjourney/react-responsive-img#readme",
+  "homepage": "https://github.com/bitjourney/react-simple-image#readme",
   "devDependencies": {
     "babel-cli": "^6.14.0",
-    "babel-plugin-resolver": "^1.1.0",
+    "babel-plugin-istanbul": "^3.0.0",
     "babel-preset-es2015": "^6.18.0",
@@ -37,2 +38,3 @@ "babel-preset-power-assert": "^1.0.0",
     "babel-register": "^6.18.0",
+    "coveralls": "^2.11.15",
     "eslint": "^3.12.2",
@@ -44,9 +46,36 @@ "eslint-config-airbnb": "^13.0.0",
     "mocha": "^3.2.0",
+    "nyc": "^10.0.0",
     "power-assert": "^1.4.2",
-    "react-dom": "^15.4.1",
-    "react": "^15.4.1"
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
   },
   "peerDependencies": {
     "react": "^15.4.1"
+  },
+  "nyc": {
+    "lines": 90,
+    "statements": 90,
+    "functions": 90,
+    "branches": 90,
+    "include": [
+      "src/**/*.{js,jsx}"
+    ],
+    "exclude": [
+      "lib/**/*.{js,jsx}",
+      "spec/**/*.spec.{js,jsx}"
+    ],
+    "require": [
+      "babel-register"
+    ],
+    "extension": [
+      ".jsx"
+    ],
+    "reporter": [
+      "text"
+    ],
+    "sourceMap": false,
+    "instrument": false,
+    "all": true,
+    "check-coverage": true
   }
 }

README.md

@@ -23,9 +23,10 @@ # react-simple-image [![CircleCI](https://circleci.com/gh/bitjourney/react-simple-image/tree/master.svg?style=svg)](https://circleci.com/gh/bitjourney/react-simple-image/tree/master)
 - `className - String` : (Optional) additional className
-- `srcSet - Array` : (Required) src set
+- `src - String` : (Required) src attribute
+- `srcSet - Object` : (Required) src set
+  - `key: descriptor - Regexp`: width descriptor (e.g. 360w, 720w) or pixel descriptor (e.g. 1x, 1.5x, or 2x)
+  - `value: src - String`: image paths/urls
+- `sizes - Array` : (Optional) sizez set for width descriptor
   - `Object`
-    - `key: descriptor - Regexp`: width descriptor (e.g. 360w, 720w) or pixel descriptor (e.g. 1x, 1.5x, or 2x)
-    - `value: src - String`: image paths/urls
-- `sizes - Array` : (Optional) sizez set for width descriptor
-  - `size - String`: image size
-  - `mediaCondition - String`: to apply on the image size
+    - `size - String`: image size
+    - `mediaCondition - String`: to apply on the image size
 
@@ -47,7 +48,8 @@ Here are some tips:
   className='additional-className'
-  srcSet={[
-    {'360w', 'example-small.svg'},
-    {'720w', 'example-middle.svg'},
-    {'1200w', 'example-large.svg'},
-  ]},
+  src='example-small.png',
+  srcSet={{
+    '360w': 'example-small.png',
+    '720w': 'example-middle.png',
+    '1200w': 'example-large.png',
+  }},
   sizes={[
@@ -70,7 +72,8 @@ {size: '100vw', mediaCondition: '(max-width: 30em)'},
   alt='example'
-  srcSet={[
-    {'360w', 'example-small.svg'},
-    {'720w', 'example-middle.svg'},
-    {'1200w', 'example-large.svg'},
-  ]},
+  src='example-small.png',
+  srcSet={{
+    '360w': 'example-small.png',
+    '720w': 'example-middle.png',
+    '1200w': 'example-large.png',
+  }},
   sizes={[
@@ -87,9 +90,9 @@ {size: '100vw', mediaCondition: '(max-width: 30em)'},
 ```html
-<img 
-  alt="example" 
-  src="example-small.png" 
-  srcset="example-small.png 360w,example-middle.png 720w,example-large.png 1200w" 
-  sizes="(max-width: 30em) 100vw,(max-width: 50em) 50vw,calc(33vw - 100px)" 
-  data-reactroot="" 
-  data-reactid="1" 
+<img
+  alt="example"
+  src="example-small.png"
+  srcset="example-small.png 360w,example-middle.png 720w,example-large.png 1200w"
+  sizes="(max-width: 30em) 100vw,(max-width: 50em) 50vw,calc(33vw - 100px)"
+  data-reactroot=""
+  data-reactid="1"
   data-react-checksum="1197296813"/>
@@ -106,6 +109,7 @@ ```
   className='additional-className'
-  srcSet={[
-    {'1x', 'example.svg'},
-    {'2x', '[e-mail]'},
-  ]},
+  src='example.png',
+  srcSet={{
+    '1x': 'example.png',
+    '2x': '[e-mail]',
+  }},
   />
@@ -117,9 +121,9 @@ ```
 ```html
-<img 
-  alt="example" 
-  class="additional-className" 
-  src="example.png" 
-  srcset="example.png 1x,[e-mail] 2x" 
-  data-reactroot="" 
-  data-reactid="1" 
+<img
+  alt="example"
+  class="additional-className"
+  src="example.png"
+  srcset="example.png 1x,[e-mail] 2x"
+  data-reactroot=""
+  data-reactid="1"
   data-react-checksum="1897738717"/>
@@ -126,0 +130,0 @@ ```

src/image.jsx

 import React from 'react';
-import Matcher from './matcher';
+import { matchDescriptor, matchWidthDescriptor, matchPixelDescriptor } from '../src/matcher';
 
@@ -9,4 +9,5 @@ export default class Image extends React.Component {
       className: React.PropTypes.string,
-      srcSet: React.PropTypes.arrayOf((props, propName, componentName) => {
-        if (!Matcher.matchDescriptor(propName)) {
+      src: React.PropTypes.string.isRequired,
+      srcSet: React.PropTypes.objectOf((props, propName, componentName) => {
+        if (!matchDescriptor(propName)) {
           return new Error(`Invalid prop '${propName}' supplied to '${componentName}'. Validation failed.`);
@@ -26,6 +27,4 @@ }
     this.state = {
-      widthDescriptorOnly: this.props.srcSet.every((srcSet) => {
-        return Object.keys(srcSet).every((descriptor) => {
-          return Matcher.matchWidthDescriptor(descriptor);
-        });
+      widthDescriptorOnly: Object.keys(this.props.srcSet).every((descriptor) => {
+        return matchWidthDescriptor(descriptor);
       }),
@@ -35,21 +34,7 @@ };
 
-  getSrc() {
-    const firstSrcSet = this.props.srcSet[0];
-    const key = Object.keys(firstSrcSet)[0];
-    return firstSrcSet[key];
-  }
-
   buildSrcSet() {
-    const matcher = this.state.widthDescriptorOnly
-          ? Matcher.matchWidthDescriptor : Matcher.matchPixelDescriptor;
-    return this.props.srcSet
-                .filter((srcSet) => {
-                  return Object.keys(srcSet).every((descriptor) => {
-                    return matcher.call(this, descriptor);
-                  });
-                }).map((srcSet) => {
-                  return Object.keys(srcSet).map((descriptor) => {
-                    return `${srcSet[descriptor]} ${descriptor}`;
-                  });
-                });
+    const matcher = this.state.widthDescriptorOnly ? matchWidthDescriptor : matchPixelDescriptor;
+    return Object.keys(this.props.srcSet)
+      .filter(matcher)
+      .map(descriptor => `${this.props.srcSet[descriptor]} ${descriptor}`);
   }
@@ -74,3 +59,3 @@
         className={this.props.className}
-        src={this.getSrc()}
+        src={this.props.src}
         srcSet={this.buildSrcSet()}
@@ -77,0 +62,0 @@ sizes={this.buildSizes()}

src/matcher.jsx

@@ -6,14 +6,12 @@ const REGEXP_DECIMAL_NUMBER = /\d+(?:\.\d+)?/;
 
-export default class Matcher {
-  static matchWidthDescriptor(str) {
-    return REGEXP_DESCRIPTOR_WIDTH.test(str);
-  }
+export function matchWidthDescriptor(str) {
+  return REGEXP_DESCRIPTOR_WIDTH.test(str);
+}
 
-  static matchPixelDescriptor(str) {
-    return REGEXP_DESCRIPTOR_PIXEL.test(str);
-  }
+export function matchPixelDescriptor(str) {
+  return REGEXP_DESCRIPTOR_PIXEL.test(str);
+}
 
-  static matchDescriptor(str) {
-    return REGEXP_DESCRIPTOR_WIDTH_AND_PIXEL.test(str);
-  }
+export function matchDescriptor(str) {
+  return REGEXP_DESCRIPTOR_WIDTH_AND_PIXEL.test(str);
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29037

increased by17.46%

Number of package files

10

increased by25%

Number of lines in readme file

141

increased by2.92%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

17

increased by13.33%

Lines of code

173

decreased by-19.91%

No dependency changes