@grovertb/react-skeletor - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.es.js

@@ -1,4 +0,88 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a 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);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
 function styleInject(css, ref) {
@@ -32,82 +116,33 @@ if ( ref === void 0 ) ref = {};
 var css = ".styles_skeletonClass__3--f2 {\n  background-color: var(--theme-base-color);\n  background-image: linear-gradient(90deg, var(--theme-base-color),var(--theme-highlight-color),var(--theme-base-color) );\n  background-size: 200px 100%;\n  background-repeat: no-repeat;\n  border-radius: 4px;\n  display: inline-block;\n  line-height: 1;\n  width: 100%;\n  animation: styles_loading__Z65VQ var(--theme-duration) ease-in-out infinite;\n  -webkit-animation: styles_loading__Z65VQ var(--theme-duration) ease-in-out infinite;\n}\n\n@keyframes styles_loading__Z65VQ {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}";
-var styles = { "skeletonClass": "styles_skeletonClass__3--f2", "loading": "styles_loading__Z65VQ" };
+var styles = {"skeletonClass":"styles_skeletonClass__3--f2","loading":"styles_loading__Z65VQ"};
 styleInject(css);
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+var Skeleton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(Skeleton, _Component);
 
-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);
-    }
-  }
+  function Skeleton() {
+    _classCallCheck(this, Skeleton);
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    return _possibleConstructorReturn(this, _getPrototypeOf(Skeleton).apply(this, arguments));
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var Skeleton = function (_Component) {
-  inherits(Skeleton, _Component);
-
-  function Skeleton() {
-    classCallCheck(this, Skeleton);
-    return possibleConstructorReturn(this, (Skeleton.__proto__ || Object.getPrototypeOf(Skeleton)).apply(this, arguments));
-  }
-
-  createClass(Skeleton, [{
-    key: 'render',
+  _createClass(Skeleton, [{
+    key: "render",
     value: function render() {
       var items = [];
-
-      var _props = this.props,
-          count = _props.count,
-          duration = _props.duration,
-          defaultBaseColor = _props.defaultBaseColor,
-          defaultHighlightColor = _props.defaultHighlightColor,
-          width = _props.width,
-          height = _props.height,
-          circle = _props.circle;
-
-
+      var _this$props = this.props,
+          count = _this$props.count,
+          duration = _this$props.duration,
+          defaultBaseColor = _this$props.defaultBaseColor,
+          defaultHighlightColor = _this$props.defaultHighlightColor,
+          width = _this$props.width,
+          height = _this$props.height,
+          circle = _this$props.circle;
       var styleItem = {
         '--theme-base-color': defaultBaseColor,
         '--theme-highlight-color': defaultHighlightColor,
-        '--theme-duration': duration + 's'
+        '--theme-duration': "".concat(duration, "s")
       };
-
       if (width != null) styleItem.width = width;
@@ -118,23 +153,17 @@ if (height != null) styleItem.height = height;
       for (var i = 0; i < count; i++) {
-        items.push(React.createElement(
-          'span',
-          {
-            key: i,
-            className: styles.skeletonClass,
-            style: styleItem },
-          '\u200C'
-        ));
+        items.push(React.createElement("span", {
+          key: i,
+          className: styles.skeletonClass,
+          style: styleItem
+        }, "\u200C"));
       }
 
-      return React.createElement(
-        Fragment,
-        null,
-        items
-      );
+      return React.createElement(Fragment, null, items);
     }
   }]);
+
   return Skeleton;
 }(Component);
 
-Skeleton.propTypes = {
+_defineProperty(Skeleton, "propTypes", {
   count: PropTypes.number,
@@ -147,4 +176,5 @@ duration: PropTypes.number,
   defaultHighlightColor: PropTypes.string
-};
-Skeleton.defaultProps = {
+});
+
+_defineProperty(Skeleton, "defaultProps", {
   count: 1,
@@ -157,5 +187,5 @@ duration: 1.2,
   defaultHighlightColor: '#f5f5f5'
-};
+});
 
 export default Skeleton;
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -9,2 +9,86 @@ 'use strict';
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a 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);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
 function styleInject(css, ref) {
@@ -38,82 +122,33 @@ if ( ref === void 0 ) ref = {};
 var css = ".styles_skeletonClass__3--f2 {\n  background-color: var(--theme-base-color);\n  background-image: linear-gradient(90deg, var(--theme-base-color),var(--theme-highlight-color),var(--theme-base-color) );\n  background-size: 200px 100%;\n  background-repeat: no-repeat;\n  border-radius: 4px;\n  display: inline-block;\n  line-height: 1;\n  width: 100%;\n  animation: styles_loading__Z65VQ var(--theme-duration) ease-in-out infinite;\n  -webkit-animation: styles_loading__Z65VQ var(--theme-duration) ease-in-out infinite;\n}\n\n@keyframes styles_loading__Z65VQ {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}";
-var styles = { "skeletonClass": "styles_skeletonClass__3--f2", "loading": "styles_loading__Z65VQ" };
+var styles = {"skeletonClass":"styles_skeletonClass__3--f2","loading":"styles_loading__Z65VQ"};
 styleInject(css);
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+var Skeleton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(Skeleton, _Component);
 
-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);
-    }
-  }
+  function Skeleton() {
+    _classCallCheck(this, Skeleton);
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
-  };
-}();
-
-var inherits = function (subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    return _possibleConstructorReturn(this, _getPrototypeOf(Skeleton).apply(this, arguments));
   }
 
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      enumerable: false,
-      writable: true,
-      configurable: true
-    }
-  });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
-
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
-
-var Skeleton = function (_Component) {
-  inherits(Skeleton, _Component);
-
-  function Skeleton() {
-    classCallCheck(this, Skeleton);
-    return possibleConstructorReturn(this, (Skeleton.__proto__ || Object.getPrototypeOf(Skeleton)).apply(this, arguments));
-  }
-
-  createClass(Skeleton, [{
-    key: 'render',
+  _createClass(Skeleton, [{
+    key: "render",
     value: function render() {
       var items = [];
-
-      var _props = this.props,
-          count = _props.count,
-          duration = _props.duration,
-          defaultBaseColor = _props.defaultBaseColor,
-          defaultHighlightColor = _props.defaultHighlightColor,
-          width = _props.width,
-          height = _props.height,
-          circle = _props.circle;
-
-
+      var _this$props = this.props,
+          count = _this$props.count,
+          duration = _this$props.duration,
+          defaultBaseColor = _this$props.defaultBaseColor,
+          defaultHighlightColor = _this$props.defaultHighlightColor,
+          width = _this$props.width,
+          height = _this$props.height,
+          circle = _this$props.circle;
       var styleItem = {
         '--theme-base-color': defaultBaseColor,
         '--theme-highlight-color': defaultHighlightColor,
-        '--theme-duration': duration + 's'
+        '--theme-duration': "".concat(duration, "s")
       };
-
       if (width != null) styleItem.width = width;
@@ -124,23 +159,17 @@ if (height != null) styleItem.height = height;
       for (var i = 0; i < count; i++) {
-        items.push(React__default.createElement(
-          'span',
-          {
-            key: i,
-            className: styles.skeletonClass,
-            style: styleItem },
-          '\u200C'
-        ));
+        items.push(React__default.createElement("span", {
+          key: i,
+          className: styles.skeletonClass,
+          style: styleItem
+        }, "\u200C"));
       }
 
-      return React__default.createElement(
-        React.Fragment,
-        null,
-        items
-      );
+      return React__default.createElement(React.Fragment, null, items);
     }
   }]);
+
   return Skeleton;
 }(React.Component);
 
-Skeleton.propTypes = {
+_defineProperty(Skeleton, "propTypes", {
   count: PropTypes.number,
@@ -153,4 +182,5 @@ duration: PropTypes.number,
   defaultHighlightColor: PropTypes.string
-};
-Skeleton.defaultProps = {
+});
+
+_defineProperty(Skeleton, "defaultProps", {
   count: 1,
@@ -163,5 +193,5 @@ duration: 1.2,
   defaultHighlightColor: '#f5f5f5'
-};
+});
 
 module.exports = Skeleton;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@grovertb/react-skeletor",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "react-skeletor",
   "author": "grovertb",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/grovertb/react-skeletor.git"
-  },
+  "repository": "grovertb/react-skeletor",
   "main": "dist/index.js",
@@ -33,29 +30,30 @@ "module": "dist/index.es.js",
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.5",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-external-helpers": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-stage-0": "^7.0.0",
+    "@svgr/rollup": "4.3.2",
+    "babel-eslint": "10.0.2",
     "cross-env": "^5.1.4",
-    "eslint": "^5.0.1",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
+    "eslint": "6.0.1",
+    "eslint-config-standard": "13.0.1",
+    "eslint-config-standard-react": "8.0.0",
     "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-node": "9.1.0",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.10.0",
-    "eslint-plugin-standard": "^3.1.0",
-    "gh-pages": "^1.2.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
+    "eslint-plugin-standard": "4.0.0",
+    "gh-pages": "2.0.1",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-scripts": "3.0.1",
+    "rollup": "1.17.0",
+    "rollup-plugin-babel": "4.3.3",
+    "rollup-plugin-commonjs": "10.0.1",
+    "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-url": "^1.4.0"
+    "rollup-plugin-postcss": "2.0.3",
+    "rollup-plugin-url": "2.2.2"
   },
@@ -65,18 +63,3 @@ "files": [
   ],
-  "bugs": {
-    "url": "https://github.com/grovertb/react-skeletor/issues"
-  },
-  "homepage": "https://github.com/grovertb/react-skeletor#readme",
-  "directories": {
-    "example": "example"
-  },
-  "keywords": [
-    "react-skeletor",
-    "react-skeleton",
-    "loading",
-    "loader",
-    "react",
-    "skeleton",
-    "skeletor"
-  ]
+  "dependencies": {}
 }

README.md

@@ -11,4 +11,11 @@ # @grovertb/react-skeletor
 npm install --save @grovertb/react-skeletor
+
+or
+
+yarn add @grovertb/react-skeletor
+
 ```
 
+## [Demo](https://grovertb.github.io/react-skeletor/)
+
 ## Usage
@@ -15,0 +22,0 @@

New alerts

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 bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23461

increased by7.19%

Lines of code

321

increased by17.58%

Number of lines in readme file

45

increased by18.42%

Worsened metrics

Dev dependency count

28

increased by3.7%

Number of low maintenance alerts

2

increased by100%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes