react-stripe-script-loader - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

index.js

@@ -8,7 +8,7 @@ "use strict";
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
@@ -19,75 +19,24 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-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 _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var StripeScriptLoader = function StripeScriptLoader(_ref) {
+  var children = _ref.children,
+      uniqueId = _ref.uniqueId,
+      script = _ref.script,
+      _ref$loader = _ref.loader,
+      loader = _ref$loader === void 0 ? 'Loading...' : _ref$loader;
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+  var _useState = (0, _react.useState)({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      stripeLoaded = _useState2[0],
+      setStripeLoaded = _useState2[1];
 
-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 _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var StripeScriptLoader =
-/*#__PURE__*/
-function (_React$Component) {
-  _inherits(StripeScriptLoader, _React$Component);
-
-  function StripeScriptLoader(props) {
-    var _this;
-
-    _classCallCheck(this, StripeScriptLoader);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(StripeScriptLoader).call(this, props));
-    _this.state = {
-      stripeLoaded: {}
-    };
-    _this.loadScript = _this.loadScript.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(StripeScriptLoader, [{
-    key: "componentWillMount",
-    value: function () {
-      var _componentWillMount = _asyncToGenerator(
-      /*#__PURE__*/
-      regeneratorRuntime.mark(function _callee() {
-        var _this$props, script, uniqueId, stripeLoaded;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _this$props = this.props, script = _this$props.script, uniqueId = _this$props.uniqueId;
-                _context.next = 3;
-                return this.loadScript(script, uniqueId);
-
-              case 3:
-                stripeLoaded = _context.sent;
-                this.setState({
-                  stripeLoaded: stripeLoaded
-                });
-
-              case 5:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, this);
-      }));
-
-      function componentWillMount() {
-        return _componentWillMount.apply(this, arguments);
-      }
-
-      return componentWillMount;
-    }()
-  }, {
-    key: "loadScript",
-    value: function loadScript(src, uniqueId) {
+  (0, _react.useEffect)(function () {
+    var loadScript = function loadScript(src, uniqueId) {
       return new Promise(function (resolve, reject) {
@@ -97,6 +46,7 @@ var scriptElement = document.getElementById(uniqueId);
         if (!scriptElement) {
-          var script = document.createElement('script');
-          script.src = src;
-          script.id = uniqueId;
+          var _script = document.createElement('script');
 
+          _script.src = src;
+          _script.id = uniqueId;
+
           var handleLoadScriptSuccess = function handleLoadScriptSuccess() {
@@ -114,9 +64,11 @@ return resolve({
 
-          script.addEventListener('load', handleLoadScriptSuccess, {
+          _script.addEventListener('load', handleLoadScriptSuccess, {
             once: true
           });
-          script.addEventListener('error', handleLoadScriptFail, {
+
+          _script.addEventListener('error', handleLoadScriptFail, {
             once: true
           });
-          document.head.appendChild(script);
+
+          document.head.appendChild(_script);
         } else {
@@ -128,23 +80,42 @@ resolve({
       });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var stripeLoaded = this.state.stripeLoaded;
-      var _this$props2 = this.props,
-          children = _this$props2.children,
-          loader = _this$props2.loader;
-      return _react["default"].createElement("div", null, stripeLoaded.successful ? children : loader);
-    }
-  }]);
+    };
 
-  return StripeScriptLoader;
-}(_react["default"].Component);
+    var fetchData =
+    /*#__PURE__*/
+    function () {
+      var _ref2 = _asyncToGenerator(
+      /*#__PURE__*/
+      regeneratorRuntime.mark(function _callee() {
+        var result;
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return loadScript(script, uniqueId);
 
-StripeScriptLoader.defaultProps = {
-  loader: 'Loading...',
-  uniqueId: 'myUniqueId',
-  script: 'https://js.stripe.com/v3/'
+              case 2:
+                result = _context.sent;
+                setStripeLoaded(result);
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function fetchData() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    fetchData();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return stripeLoaded.successful ? children : loader;
 };
+
 var _default = StripeScriptLoader;
 exports["default"] = _default;

package.json

 {
   "name": "react-stripe-script-loader",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React component that lets load Stripe script and shows React Stripe Elements",
@@ -21,4 +21,4 @@ "main": "index.js",
   "peerDependencies": {
-    "react": "15.0.0",
-    "react-dom": "15.0.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   },
@@ -39,5 +39,5 @@ "keywords": [
     "@babel/preset-react": "^7.0.0",
-    "react": "15.0.0",
-    "react-dom": "15.0.0"
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   }
 }

src/index.js

@@ -1,55 +0,41 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
-class StripeScriptLoader extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      stripeLoaded: {},
-    }
-    this.loadScript = this.loadScript.bind(this)
-  }
+const StripeScriptLoader = ({
+  children,
+  uniqueId,
+  script,
+  loader = 'Loading...',
+}) => {
+  const [stripeLoaded, setStripeLoaded] = useState({})
+  useEffect(() => {
+    const loadScript = (src, uniqueId) =>
+      new Promise((resolve, reject) => {
+        const scriptElement = document.getElementById(uniqueId)
 
-  async componentWillMount() {
-    const { script, uniqueId } = this.props
-    const stripeLoaded = await this.loadScript(script, uniqueId)
-    this.setState({ stripeLoaded })
-  }
+        if (!scriptElement) {
+          const script = document.createElement('script')
+          script.src = src
+          script.id = uniqueId
 
-  loadScript(src, uniqueId) {
-    return new Promise((resolve, reject) => {
-      const scriptElement = document.getElementById(uniqueId)
+          const handleLoadScriptSuccess = () => resolve({ successful: true })
+          const handleLoadScriptFail = event => reject({ error: event })
 
-      if (!scriptElement) {
-        const script = document.createElement('script')
-        script.src = src
-        script.id = uniqueId
+          script.addEventListener('load', handleLoadScriptSuccess, {
+            once: true,
+          })
+          script.addEventListener('error', handleLoadScriptFail, { once: true })
+          document.head.appendChild(script)
+        } else {
+          resolve({ successful: true })
+        }
+      })
+    const fetchData = async () => {
+      const result = await loadScript(script, uniqueId)
+      setStripeLoaded(result)
+    }
+    fetchData()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
-        const handleLoadScriptSuccess = () => resolve({ successful: true })
-        const handleLoadScriptFail = event => reject({ error: event })
-
-        script.addEventListener('load', handleLoadScriptSuccess, {
-          once: true,
-        })
-        script.addEventListener('error', handleLoadScriptFail, { once: true })
-        document.head.appendChild(script)
-      } else {
-        resolve({ successful: true })
-      }
-    })
-  }
-
-  render() {
-    const { stripeLoaded } = this.state
-    const { children, loader } = this.props
-
-    return <div>{stripeLoaded.successful ? children : loader}</div>
-  }
+  return stripeLoaded.successful ? children : loader
 }
-
-StripeScriptLoader.defaultProps = {
-  loader: 'Loading...',
-  uniqueId: 'myUniqueId',
-  script: 'https://js.stripe.com/v3/',
-}
-
 export default StripeScriptLoader

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

Worsened metrics

Total package byte prevSize

390722

decreased by-0.38%

Lines of code

129

decreased by-21.34%

No dependency changes