super-image - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

lib/index.js

@@ -27,3 +27,3 @@ 'use strict';
 
-var NOT_INHERITED_PROPS = ['sources', 'width', 'height', 'flexible', 'fit', 'fitFallback'];
+var UNKNOWN_PROPS = ['sources', 'width', 'height', 'flexible', 'fit', 'fitFallback'];
 var POSITIVE_INTEGER_PATTERN = /^\d+$/;
@@ -51,23 +51,23 @@
 
-      var styleAttr = {};
-      var extendsProps = {};
+      var style = {};
+      var props = {};
 
       if (this.props.fit) {
-        styleAttr.objectFit = this.props.fit;
+        style.objectFit = this.props.fit;
       }
 
       if (this.props.flexible) {
-        styleAttr.width = '100%';
-        styleAttr.height = '100%';
+        style.width = '100%';
+        style.height = '100%';
       } else {
         if (POSITIVE_INTEGER_PATTERN.test(this.props.width)) {
-          styleAttr.width = this.props.width + 'px';
+          style.width = this.props.width + 'px';
         } else if (this.props.width) {
-          styleAttr.width = this.props.width;
+          style.width = this.props.width;
         }
 
         if (POSITIVE_INTEGER_PATTERN.test(this.props.height)) {
-          styleAttr.height = this.props.height + 'px';
+          style.height = this.props.height + 'px';
         } else if (this.props.height) {
-          styleAttr.height = this.props.height;
+          style.height = this.props.height;
         }
@@ -78,5 +78,5 @@ }
       Object.keys(this.props).filter(function (key) {
-        return NOT_INHERITED_PROPS.indexOf(key) === -1;
+        return UNKNOWN_PROPS.indexOf(key) === -1;
       }).forEach(function (key) {
-        extendsProps[key] = _this2.props[key];
+        props[key] = _this2.props[key];
       });
@@ -86,22 +86,22 @@
       if (this.props.sources.length > 0) {
-        var styleAttrForPict = {};
+        var pictureStyle = this.props.flexible ? {
+          width: '100%',
+          height: '100%'
+        } : {};
 
-        if (this.props.flexible) {
-          styleAttrForPict.width = '100%';
-          styleAttrForPict.height = '100%';
-        }
+        /* eslint-disable react/no-array-index-key */
+        var sources = this.props.sources.map(function (source, i) {
+          return React.createElement('source', _extends({ key: i }, source));
+        });
+        /* eslint-disable react/no-array-index-key */
 
         return React.createElement(
           'picture',
-          { style: styleAttrForPict },
-          this.props.sources.map(function (source, i) {
-            /* eslint-disable react/no-array-index-key */
-            return React.createElement('source', _extends({ key: i }, source));
-            /* eslint-disable react/no-array-index-key */
-          }),
+          { style: pictureStyle },
+          sources,
           React.createElement('img', _extends({
             src: this.props.src,
             alt: this.props.alt,
-            style: styleAttr
-          }, extendsProps))
+            style: style
+          }, props))
         );
@@ -113,4 +113,4 @@ }
         alt: this.props.alt,
-        style: styleAttr
-      }, extendsProps));
+        style: style
+      }, props));
     }
@@ -120,3 +120,3 @@ }, {
     value: function renderImageWithObjectFitFallback() {
-      var styleAttr = {
+      var style = {
         display: 'inline-block',
@@ -129,15 +129,15 @@ backgroundImage: 'url(' + this.props.src + ')',
       if (this.props.flexible) {
-        styleAttr.width = '100%';
-        styleAttr.height = '100%';
+        style.width = '100%';
+        style.height = '100%';
       } else {
         if (POSITIVE_INTEGER_PATTERN.test(this.props.width)) {
-          styleAttr.width = this.props.width + 'px';
+          style.width = this.props.width + 'px';
         } else if (this.props.width) {
-          styleAttr.width = this.props.width;
+          style.width = this.props.width;
         }
 
         if (POSITIVE_INTEGER_PATTERN.test(this.props.height)) {
-          styleAttr.height = this.props.height + 'px';
+          style.height = this.props.height + 'px';
         } else if (this.props.height) {
-          styleAttr.height = this.props.height;
+          style.height = this.props.height;
         }
@@ -147,3 +147,3 @@ }
       if (this.props.fit) {
-        styleAttr.backgroundSize = this.props.fit;
+        style.backgroundSize = this.props.fit;
       }
@@ -155,3 +155,3 @@
         className: this.props.className,
-        style: styleAttr
+        style: style
       });
@@ -158,0 +158,0 @@ }

package.json

 {
   "name": "super-image",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React component that render a image with object-fit and its fallback",
@@ -24,5 +24,6 @@ "main": "lib/index.js",
   "homepage": "https://github.com/openfresh/super-image#readme",
+  "typings": "type/index.d.ts",
   "devDependencies": {
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.0.1",
     "babel-plugin-istanbul": "^4.1.5",
@@ -34,10 +35,10 @@ "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "babelify": "^7.3.0",
+    "babelify": "^8.0.0",
     "browserify": "^14.4.0",
-    "codecov": "^2.3.0",
-    "eslint": "^4.8.0",
-    "eslint-config-fresh": "^2.2.0",
-    "eslint-config-fresh-react": "^2.4.0",
-    "eslint-config-xo-react": "^0.13.0",
-    "eslint-config-xo-space": "^0.16.0",
+    "codecov": "^3.0.0",
+    "eslint": "^4.10.0",
+    "eslint-config-fresh": "^2.3.0",
+    "eslint-config-fresh-react": "^2.6.0",
+    "eslint-config-xo-react": "^0.14.0",
+    "eslint-config-xo-space": "^0.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
@@ -51,3 +52,3 @@ "eslint-plugin-react": "^7.4.0",
     "karma-mocha": "^1.3.0",
-    "mocha": "^3.5.3",
+    "mocha": "^4.0.1",
     "power-assert": "^1.4.4",
@@ -54,0 +55,0 @@ "prop-types": "^15.6.0",

README.md

@@ -29,3 +29,3 @@ # SuperImage
 
-// Use picture element
+// Use <picture> element
 <SuperImage
@@ -40,3 +40,3 @@ src="image.png"
 
-// Not supported object fit
+// Use fallback for object fit
 <SuperImage
@@ -57,10 +57,10 @@ fitFallback
 | src | String | Image url | - | Yes |
-| sources | Array | Array of objects with source element properties. "srcSet", "sizes", "media" and "type" supported | [] | No |
+| sources | Array<Object> | Sets of `<source>` element attributes: `srcSet`, `sizes`, `media` and `type` | `[]` | No |
 | width | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image width | - | No |
 | height | [`DOMString`](https://heycam.github.io/webidl/#idl-DOMString) | Image height | - | No |
-| alt | String | Alternate text for image| "" | No |
-| className | String | Custom className | "" | No |
-| flexible | Boolean |If this is true, A Component size is not fixed. | false | No |
-| fit | String | Value of the object-fit property. "contain", or "cover" | - | No |
-| fitFallback | Boolean | Force the component to use `background-image` | false | No |
+| alt | String | Alternative text for `<img>` element | `""` | No |
+| className | String | `className` property for component | `""` | No |
+| flexible | Boolean | If true, component size will not be fixed | `false` | No |
+| fit | String | Value for `object-fit` property: `contain` or `cover` | - | No |
+| fitFallback | Boolean | Force component to use `background-image` | `false` | No |
 
@@ -67,0 +67,0 @@ ## License

No alert changes

Improved metrics

Lines of code

219

increased by8.96%

Worsened metrics

Total package byte prevSize

14238

decreased by-0.97%

Number of package files

8

decreased by-11.11%

No dependency changes