@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/esm/index.js

 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
 
@@ -14,20 +20,24 @@ var mountCaptchaScript = function mountCaptchaScript(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;
 };
@@ -69,3 +79,3 @@
   _proto.componentDidMount = function componentDidMount() {
-    //Once captcha is mounted intialize hCaptcha - hCaptcha
+    // Once captcha is mounted intialize hCaptcha - hCaptcha
     var _this$props = this.props,
@@ -85,9 +95,4 @@ apihost = _this$props.apihost,
     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,
@@ -103,5 +108,5 @@ assethost: assethost,
         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 {
@@ -245,8 +250,7 @@ this.renderCaptcha();
 
-    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);
@@ -253,0 +257,0 @@ };

dist/index.js

@@ -34,26 +34,37 @@ "use strict";
 
-// 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;
 };
@@ -98,3 +109,3 @@
     value: function componentDidMount() {
-      //Once captcha is mounted intialize hCaptcha - hCaptcha
+      // Once captcha is mounted intialize hCaptcha - hCaptcha
       var _this$props = this.props,
@@ -114,9 +125,4 @@ apihost = _this$props.apihost,
       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,
@@ -132,5 +138,5 @@ assethost: assethost,
           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 {
@@ -284,8 +290,7 @@ this.renderCaptcha();
 
-      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);
@@ -292,0 +297,0 @@ }

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "types": "types/index.d.ts",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

 import * as React from 'react';
 import { generateQuery } from "./utils.js";
 
- // Create script to init hCaptcha
-let onLoadListeners = [];
-let apiScriptRequested = false;
+const SCRIPT_ID = 'hcaptcha-api-script-id';
+const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
 
-// Generate hCaptcha API Script
+// 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;
 
@@ -24,4 +29,6 @@ const domain = params.apihost || "https://js.hcaptcha.com";
   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');
 
@@ -32,3 +39,4 @@ const query = generateQuery(params);
   document.head.appendChild(script);
-}
+  return mountPromise;
+};
 
@@ -67,13 +75,8 @@
 
-    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,
@@ -89,6 +92,8 @@ assethost,
           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 {
@@ -221,7 +226,7 @@ this.renderCaptcha();
 
-      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);
@@ -228,0 +233,0 @@ }

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

Improved metrics

Total package byte prevSize

44278

increased by1.04%

Lines of code

909

increased by1.45%

No dependency changes