@hcaptcha/react-hcaptcha 1.4.1 → 1.4.2

package/dist/esm/index.js

@@ -1,34 +1,44 @@
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
-import { generateQuery } from "./utils.js"; // Create script to init hCaptcha
+import { generateQuery } from "./utils.js";
+var SCRIPT_ID = 'hcaptcha-api-script-id';
+var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
 
-var onLoadListeners = [];
-var apiScriptRequested = false; // Generate hCaptcha API Script
+var resolveFn;
+var rejectFn;
+var mountPromise = new Promise(function (resolve, reject) {
+  resolveFn = resolve;
+  rejectFn = reject;
+}); // Generate hCaptcha API script
 
 var mountCaptchaScript = function mountCaptchaScript(params) {
   if (params === void 0) {
     params = {};
   }
 
-  apiScriptRequested = true; // Create global onload callback
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  } // Create global onload callback
 
-  window.hcaptchaOnLoad = function () {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(function (listener) {
-      listener();
-      return false;
-    });
-  };
 
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
   var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
   var script = document.createElement("script");
-  script.src = domain + "/1/api.js?render=explicit&onload=hcaptchaOnLoad";
+  script.id = SCRIPT_ID;
+  script.src = domain + "/1/api.js?render=explicit&onload=" + HCAPTCHA_LOAD_FN_NAME;
   script.async = true;
+
+  script.onerror = function (event) {
+    return rejectFn('script-error');
+  };
+
   var query = generateQuery(params);
   script.src += query !== "" ? "&" + query : "";
   document.head.appendChild(script);
+  return mountPromise;
 };
 
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
@@ -65,7 +75,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   var _proto = HCaptcha.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
-    //Once captcha is mounted intialize hCaptcha - hCaptcha
+    // Once captcha is mounted intialize hCaptcha - hCaptcha
     var _this$props = this.props,
         apihost = _this$props.apihost,
         assethost = _this$props.assethost,
@@ -80,13 +90,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var isApiReady = this.state.isApiReady;
 
     if (!isApiReady) {
-      //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-      if (apiScriptRequested) {
-        return;
-      } // Only create the script tag once, use a global variable to track
-
-
-      mountCaptchaScript({
+      // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
+      var mountParams = {
         apihost: apihost,
         assethost: assethost,
         endpoint: endpoint,
@@ -97,9 +102,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         reportapi: reportapi,
         sentry: sentry,
         custom: custom
-      }); // Add onload callback to global onload listeners
+      }; // Only create the script tag once, use a global promise to track
 
-      onLoadListeners.push(this.handleOnLoad);
+      mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
     } else {
       this.renderCaptcha();
     }
@@ -238,12 +243,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     var onError = this.props.onError;
     var captchaId = this.state.captchaId;
 
-    if (!this.isReady()) {
-      return;
+    if (this.isReady()) {
+      // If hCaptcha runs into error, reset captcha - hCaptcha
+      hcaptcha.reset(captchaId);
     }
 
-    hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
-
     if (onError) onError(event);
   };
 

package/dist/index.js

@@ -31,30 +31,41 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 
-// Create script to init hCaptcha
-var onLoadListeners = [];
-var apiScriptRequested = false; // Generate hCaptcha API Script
+var SCRIPT_ID = 'hcaptcha-api-script-id';
+var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
+
+var resolveFn;
+var rejectFn;
+var mountPromise = new Promise(function (resolve, reject) {
+  resolveFn = resolve;
+  rejectFn = reject;
+}); // Generate hCaptcha API script
 
 var mountCaptchaScript = function mountCaptchaScript() {
   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  apiScriptRequested = true; // Create global onload callback
-
-  window.hcaptchaOnLoad = function () {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(function (listener) {
-      listener();
-      return false;
-    });
-  };
 
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  } // Create global onload callback
+
+
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
   var domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
   var script = document.createElement("script");
-  script.src = "".concat(domain, "/1/api.js?render=explicit&onload=hcaptchaOnLoad");
+  script.id = SCRIPT_ID;
+  script.src = "".concat(domain, "/1/api.js?render=explicit&onload=").concat(HCAPTCHA_LOAD_FN_NAME);
   script.async = true;
+
+  script.onerror = function (event) {
+    return rejectFn('script-error');
+  };
+
   var query = (0, _utils.generateQuery)(params);
   script.src += query !== "" ? "&".concat(query) : "";
   document.head.appendChild(script);
+  return mountPromise;
 };
 
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
@@ -94,7 +105,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2["default"])(HCaptcha, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      //Once captcha is mounted intialize hCaptcha - hCaptcha
+      // Once captcha is mounted intialize hCaptcha - hCaptcha
       var _this$props = this.props,
           apihost = _this$props.apihost,
           assethost = _this$props.assethost,
@@ -109,13 +120,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var isApiReady = this.state.isApiReady;
 
       if (!isApiReady) {
-        //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        if (apiScriptRequested) {
-          return;
-        } // Only create the script tag once, use a global variable to track
-
-
-        mountCaptchaScript({
+        // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
+        var mountParams = {
           apihost: apihost,
           assethost: assethost,
           endpoint: endpoint,
@@ -126,9 +132,9 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
           reportapi: reportapi,
           sentry: sentry,
           custom: custom
-        }); // Add onload callback to global onload listeners
+        }; // Only create the script tag once, use a global promise to track
 
-        onLoadListeners.push(this.handleOnLoad);
+        mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
       } else {
         this.renderCaptcha();
       }
@@ -277,12 +283,11 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var onError = this.props.onError;
       var captchaId = this.state.captchaId;
 
-      if (!this.isReady()) {
-        return;
+      if (this.isReady()) {
+        // If hCaptcha runs into error, reset captcha - hCaptcha
+        hcaptcha.reset(captchaId);
       }
 
-      hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
-
       if (onError) onError(event);
     }
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",

package/src/index.js

@@ -1,34 +1,42 @@
 import * as React from 'react';
 import { generateQuery } from "./utils.js";
 
- // Create script to init hCaptcha
-let onLoadListeners = [];
-let apiScriptRequested = false;
-
-// Generate hCaptcha API Script
+const SCRIPT_ID = 'hcaptcha-api-script-id';
+const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
+
+// Prevent loading API script multiple times
+let resolveFn;
+let rejectFn;
+const mountPromise = new Promise((resolve, reject) => {
+  resolveFn = resolve;
+  rejectFn = reject;
+});
+
+// Generate hCaptcha API script
 const mountCaptchaScript = (params={}) => {
-  apiScriptRequested = true;
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  }
+
   // Create global onload callback
-  window.hcaptchaOnLoad = () => {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(listener => {
-      listener();
-      return false;
-    });
-  };
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
 
   const domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
 
   const script = document.createElement("script");
-  script.src = `${domain}/1/api.js?render=explicit&onload=hcaptchaOnLoad`;
+  script.id = SCRIPT_ID;
+  script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
   script.async = true;
+  script.onerror = (event) => rejectFn('script-error');
 
   const query = generateQuery(params);
   script.src += query !== ""? `&${query}` : "";
 
   document.head.appendChild(script);
-}
+  return mountPromise;
+};
 
 
 class HCaptcha extends React.Component {
@@ -62,17 +70,12 @@ class HCaptcha extends React.Component {
       }
     }
 
-    componentDidMount () { //Once captcha is mounted intialize hCaptcha - hCaptcha
+    componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
       const { apihost, assethost, endpoint, host, imghost, languageOverride:hl, reCaptchaCompat, reportapi, sentry, custom } = this.props;
       const { isApiReady } = this.state;
 
-      if (!isApiReady) {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        if (apiScriptRequested) {
-          return;
-        }
-
-        // Only create the script tag once, use a global variable to track
-        mountCaptchaScript({
+      if (!isApiReady) {  // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
+        const mountParams = {
           apihost,
           assethost,
           endpoint,
@@ -83,10 +86,12 @@ class HCaptcha extends React.Component {
           reportapi,
           sentry,
           custom
-        });
+        };
 
-        // Add onload callback to global onload listeners
-        onLoadListeners.push(this.handleOnLoad);
+        // Only create the script tag once, use a global promise to track
+        mountCaptchaScript(mountParams)
+          .then(this.handleOnLoad)
+          .catch(this.handleError);
       } else {
         this.renderCaptcha();
       }
@@ -214,11 +219,11 @@ class HCaptcha extends React.Component {
       const { onError } = this.props;
       const { captchaId } = this.state;
 
-      if (!this.isReady()) {
-        return;
+      if (this.isReady()) {
+        // If hCaptcha runs into error, reset captcha - hCaptcha
+        hcaptcha.reset(captchaId);
       }
 
-      hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
       if (onError) onError(event);
     }