react-simple-image - npm Package Compare versions

Comparing version 0.3.0 to 1.0.0

lib/Image.d.ts

@@ -8,4 +8,4 @@ /// <reference types="react" />
 export interface Props {
-    alt: string;
     src: string;
+    alt?: string;
     className?: string;
@@ -15,17 +15,18 @@ srcSet?: any;
 }
-export interface State {
-    widthDescriptorOnly: boolean;
-}
-export default class Image extends React.Component<Props, State> {
+export default class Image extends React.PureComponent<Props> {
     static readonly propTypes: {
+        src: any;
         alt: any;
         className: any;
-        src: any;
         srcSet: any;
         sizes: any;
     };
+    static readonly defaultProps: {
+        alt: string;
+    };
+    readonly widthDescriptorOnly: boolean;
     constructor(props: any);
-    buildSrcSet(): string;
-    buildSizes(): string;
+    buildSrcSet(): string | undefined;
+    buildSizes(): string | undefined;
     render(): JSX.Element;
 }

lib/Image.js

@@ -16,42 +16,19 @@ "use strict";
 var matcher_1 = require("./matcher");
-var Image = (function (_super) {
+var Image = /** @class */ (function (_super) {
     __extends(Image, _super);
     function Image(props) {
         var _this = _super.call(this, props) || this;
-        _this.state = {
-            widthDescriptorOnly: Object.keys(_this.props.srcSet).every(function (descriptor) { return matcher_1.matchWidthDescriptor(descriptor); }),
-        };
+        _this.widthDescriptorOnly = Object.keys(props.srcSet).every(function (descriptor) { return matcher_1.matchWidthDescriptor(descriptor); });
         return _this;
     }
-    Object.defineProperty(Image, "propTypes", {
-        get: function () {
-            return {
-                alt: PropTypes.string.isRequired,
-                className: PropTypes.string,
-                src: PropTypes.string.isRequired,
-                srcSet: PropTypes.objectOf(function (props, propName, componentName) {
-                    if (!matcher_1.matchDescriptor(propName)) {
-                        return new Error("Invalid prop '" + propName + "' supplied to '" + componentName + "'. Validation failed.");
-                    }
-                    return null;
-                }),
-                sizes: PropTypes.arrayOf(PropTypes.shape({
-                    size: PropTypes.string.isRequired,
-                    mediaCondition: PropTypes.string,
-                })),
-            };
-        },
-        enumerable: true,
-        configurable: true
-    });
     Image.prototype.buildSrcSet = function () {
         var _this = this;
-        var matcher = this.state.widthDescriptorOnly ? matcher_1.matchWidthDescriptor : matcher_1.matchPixelDescriptor;
+        var matcher = this.widthDescriptorOnly ? matcher_1.matchWidthDescriptor : matcher_1.matchPixelDescriptor;
         return Object.keys(this.props.srcSet)
             .filter(matcher)
             .map(function (descriptor) { return _this.props.srcSet[descriptor] + " " + descriptor; })
-            .join(',');
+            .join(',') || undefined;
     };
     Image.prototype.buildSizes = function () {
-        if (this.props.sizes && this.state.widthDescriptorOnly) {
+        if (this.props.sizes && this.widthDescriptorOnly) {
             return this.props.sizes.map(function (size) {
@@ -62,5 +39,5 @@ if (size.mediaCondition) {
                 return "" + size.size;
-            }).join(',');
+            }).join(',') || undefined;
         }
-        return '';
+        return undefined;
     };
@@ -70,5 +47,23 @@ Image.prototype.render = function () {
     };
+    Image.propTypes = {
+        src: PropTypes.string.isRequired,
+        alt: PropTypes.string,
+        className: PropTypes.string,
+        srcSet: PropTypes.objectOf(function (props, propName, componentName) {
+            if (!matcher_1.matchDescriptor(propName)) {
+                return new Error("Invalid prop '" + propName + "' supplied to '" + componentName + "'. Validation failed.");
+            }
+            return null;
+        }),
+        sizes: PropTypes.arrayOf(PropTypes.shape({
+            size: PropTypes.string.isRequired,
+            mediaCondition: PropTypes.string,
+        })),
+    };
+    Image.defaultProps = {
+        alt: '',
+    };
     return Image;
-}(React.Component));
+}(React.PureComponent));
 exports.default = Image;
 //# sourceMappingURL=Image.js.map

package.json

 {
   "name": "react-simple-image",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "responsive <img> tag with cleaner srcset/sizes interface.",
@@ -9,9 +9,8 @@ "main": "lib/Image.js",
     "build": "tsc",
-    "test": "NODE_PATH=. NODE_ENV=test TS_NODE_PROJECT=test/tsconfig.json mocha",
-    "test:coverage": "NODE_PATH=. NODE_ENV=test TS_NODE_PROJECT=test/tsconfig.json nyc mocha",
+    "test": "NODE_ENV=test mocha",
+    "test:coverage": "NODE_ENV=test nyc mocha",
     "coveralls": "NODE_ENV=test nyc report --reporter=text-lcov | $(npm bin)/coveralls",
-    "story:start": "start-storybook -p 9001 -c .storybook",
-    "story:build": "build-storybook -c .storybook -o build",
     "prepublish": "npm run build",
-    "lint": "tslint --project tsconfig.json && tslint --project test/tsconfig.json"
+    "lint": "tslint --project tsconfig.json",
+    "lint:fix": "tslint --fix --project tsconfig.json"
   },
@@ -32,3 +31,7 @@ "engines": {
   ],
-  "author": "kenju",
+  "author": "Bit Journey, Inc. (https://bitjourney.com/)",
+  "contributors": [
+    "gfx",
+    "kenju"
+  ],
   "license": "Apache-2.0",
@@ -40,22 +43,23 @@ "bugs": {
   "devDependencies": {
-    "@kadira/storybook": "^2.35.2",
-    "@types/mocha": "^2.2.41",
-    "@types/node": "^7.0.18",
-    "@types/power-assert": "^1.4.29",
-    "@types/react": "^16.0.5",
+    "@types/mocha": ">= 2.2.41",
+    "@types/node": ">= 6.0.18",
+    "@types/power-assert": ">= 1.4.29",
+    "@types/react": ">= 16",
+    "@types/react-dom": ">= 16",
     "coveralls": "^2.11.15",
-    "mocha": "^3.2.0",
-    "nyc": "^10.0.0",
-    "power-assert": "^1.4.2",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "source-map-support": "^0.4.15",
-    "ts-node": "^3.0.4",
-    "tslint": "^5.7.0",
-    "tslint-react": "^3.2.0",
-    "typescript": "^2.3.2"
+    "mocha": ">= 3.2.0",
+    "nyc": ">= 10.0.0",
+    "power-assert": ">= 1.4.2",
+    "react": ">= 16",
+    "react-dom": ">= 16",
+    "source-map-support": ">= 0.4.15",
+    "ts-node": ">= 3.0.4",
+    "tslint": ">= 5.7.0",
+    "tslint-react": ">= 3.2.0",
+    "typescript": ">= 2.3.2"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.10",
-    "react": "^15.4.1"
+    "prop-types": ">= 15",
+    "react": ">= 15",
+    "react-dom": ">= 15"
   },
@@ -62,0 +66,0 @@ "nyc": {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

26686

decreased by-0.75%

Dependency count

3

increased by50%

Lines of code

197

decreased by-3.43%

No dependency changes