@hcaptcha/react-hcaptcha 1.13.1 → 1.15.0

package/dist/esm/index.js

@@ -37,6 +37,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
     _this.captchaId = '';
+
+    /**
+     * Tracks the currently pending async execute() promise.
+     * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+     */
+    _this._pendingExecute = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -71,6 +77,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _proto.componentWillUnmount = function componentWillUnmount() {
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('react-component-unmounted');
     if (!this.isReady()) {
       return;
     }
@@ -185,13 +192,16 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     if (!this.isReady()) {
       return;
     }
+
     // Reset captcha state, removes stored token and unticks checkbox
     hcaptcha.reset(captchaId);
+    this._cancelPendingExecute('hcaptcha-reset');
   };
   _proto.removeCaptcha = function removeCaptcha(callback) {
     var _this5 = this;
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('hcaptcha-removed');
     if (!this.isReady()) {
       return;
     }
@@ -257,6 +267,20 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       isApiReady = _this$state.isApiReady,
       isRemoved = _this$state.isRemoved;
     return isApiReady && !isRemoved;
+  }
+
+  /**
+   * Cancel any pending async execute() promise
+   * Called when the component unmounts, errors occur, resets, etc.
+   */;
+  _proto._cancelPendingExecute = function _cancelPendingExecute(reason) {
+    if (!this._pendingExecute) {
+      return;
+    }
+    var pending = this._pendingExecute;
+    this._pendingExecute = null;
+    var error = new Error(reason);
+    pending.reject(error);
   };
   _proto.handleOpen = function handleOpen() {
     if (!this.isReady() || !this.props.onOpen) {
@@ -285,25 +309,71 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     try {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+
+      // Is an async execute and there's already 1 pending, cancel the old one.
+      if (opts && opts.async && this._pendingExecute) {
+        this._cancelPendingExecute('hcaptcha-execute-replaced');
+      }
       if (!this.isReady()) {
-        var _opts;
-        var onReady = new Promise(function (resolve, reject) {
-          _this7._onReady = function (id) {
-            try {
-              var _hcaptcha = _this7._hcaptcha;
-              if (opts && opts.async) {
-                _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
-              } else {
-                resolve(_hcaptcha.execute(id, opts));
+        if (opts && opts.async) {
+          return new Promise(function (resolve, reject) {
+            _this7._pendingExecute = {
+              resolve: resolve,
+              reject: reject
+            };
+            _this7._onReady = function (id) {
+              if (!_this7._pendingExecute) {
+                return;
               }
-            } catch (e) {
-              reject(e);
-            }
+              try {
+                var _result = hcaptcha.execute(id, opts);
+                if (_result && typeof _result.then === 'function') {
+                  _result.then(function (val) {
+                    _this7._pendingExecute = null;
+                    resolve(val);
+                  })["catch"](function (err) {
+                    _this7._pendingExecute = null;
+                    reject(err);
+                  });
+                } else {
+                  _this7._pendingExecute = null;
+                  reject(new Error('hcaptcha-execute-no-promise'));
+                }
+              } catch (e) {
+                _this7._pendingExecute = null;
+                reject(e);
+              }
+            };
+          });
+        } else {
+          // Non-async: don't return a promise.
+          this._onReady = function (id) {
+            hcaptcha.execute(id, opts);
+          };
+          return null;
+        }
+      }
+
+      // hCaptcha is ready, execute directly.
+      var result = hcaptcha.execute(captchaId, opts);
+
+      // If it's async execute, track it.
+      if (opts && opts.async && result && typeof result.then === 'function') {
+        return new Promise(function (resolve, reject) {
+          _this7._pendingExecute = {
+            resolve: resolve,
+            reject: reject
           };
+          result.then(function (val) {
+            _this7._pendingExecute = null;
+            resolve(val);
+          })["catch"](function (err) {
+            _this7._pendingExecute = null;
+            reject(err);
+          });
         });
-        return (_opts = opts) != null && _opts.async ? onReady : null;
       }
-      return hcaptcha.execute(captchaId, opts);
+      return result;
     } catch (error) {
       if (opts && opts.async) {
         return Promise.reject(error);
@@ -314,6 +384,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _proto.close = function close() {
     var hcaptcha = this._hcaptcha;
     var captchaId = this.captchaId;
+    this._cancelPendingExecute('hcaptcha-closed');
     if (!this.isReady()) {
       return;
     }

package/dist/index.js

@@ -55,6 +55,12 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.apiScriptRequested = false;
     _this.sentryHub = null;
     _this.captchaId = '';
+
+    /**
+     * Tracks the currently pending async execute() promise.
+     * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+     */
+    _this._pendingExecute = null;
     _this.state = {
       isApiReady: false,
       isRemoved: false,
@@ -92,6 +98,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('react-component-unmounted');
       if (!this.isReady()) {
         return;
       }
@@ -216,8 +223,10 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       if (!this.isReady()) {
         return;
       }
+
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId);
+      this._cancelPendingExecute('hcaptcha-reset');
     }
   }, {
     key: "removeCaptcha",
@@ -225,6 +234,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       var _this5 = this;
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('hcaptcha-removed');
       if (!this.isReady()) {
         return;
       }
@@ -301,6 +311,22 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
         isRemoved = _this$state.isRemoved;
       return isApiReady && !isRemoved;
     }
+
+    /**
+     * Cancel any pending async execute() promise
+     * Called when the component unmounts, errors occur, resets, etc.
+     */
+  }, {
+    key: "_cancelPendingExecute",
+    value: function _cancelPendingExecute(reason) {
+      if (!this._pendingExecute) {
+        return;
+      }
+      var pending = this._pendingExecute;
+      this._pendingExecute = null;
+      var error = new Error(reason);
+      pending.reject(error);
+    }
   }, {
     key: "handleOpen",
     value: function handleOpen() {
@@ -334,25 +360,71 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       try {
         var hcaptcha = this._hcaptcha;
         var captchaId = this.captchaId;
+
+        // Is an async execute and there's already 1 pending, cancel the old one.
+        if (opts && opts.async && this._pendingExecute) {
+          this._cancelPendingExecute('hcaptcha-execute-replaced');
+        }
         if (!this.isReady()) {
-          var _opts;
-          var onReady = new Promise(function (resolve, reject) {
-            _this7._onReady = function (id) {
-              try {
-                var _hcaptcha = _this7._hcaptcha;
-                if (opts && opts.async) {
-                  _hcaptcha.execute(id, opts).then(resolve)["catch"](reject);
-                } else {
-                  resolve(_hcaptcha.execute(id, opts));
+          if (opts && opts.async) {
+            return new Promise(function (resolve, reject) {
+              _this7._pendingExecute = {
+                resolve: resolve,
+                reject: reject
+              };
+              _this7._onReady = function (id) {
+                if (!_this7._pendingExecute) {
+                  return;
+                }
+                try {
+                  var _result = hcaptcha.execute(id, opts);
+                  if (_result && typeof _result.then === 'function') {
+                    _result.then(function (val) {
+                      _this7._pendingExecute = null;
+                      resolve(val);
+                    })["catch"](function (err) {
+                      _this7._pendingExecute = null;
+                      reject(err);
+                    });
+                  } else {
+                    _this7._pendingExecute = null;
+                    reject(new Error('hcaptcha-execute-no-promise'));
+                  }
+                } catch (e) {
+                  _this7._pendingExecute = null;
+                  reject(e);
                 }
-              } catch (e) {
-                reject(e);
-              }
+              };
+            });
+          } else {
+            // Non-async: don't return a promise.
+            this._onReady = function (id) {
+              hcaptcha.execute(id, opts);
+            };
+            return null;
+          }
+        }
+
+        // hCaptcha is ready, execute directly.
+        var result = hcaptcha.execute(captchaId, opts);
+
+        // If it's async execute, track it.
+        if (opts && opts.async && result && typeof result.then === 'function') {
+          return new Promise(function (resolve, reject) {
+            _this7._pendingExecute = {
+              resolve: resolve,
+              reject: reject
             };
+            result.then(function (val) {
+              _this7._pendingExecute = null;
+              resolve(val);
+            })["catch"](function (err) {
+              _this7._pendingExecute = null;
+              reject(err);
+            });
           });
-          return (_opts = opts) !== null && _opts !== void 0 && _opts.async ? onReady : null;
         }
-        return hcaptcha.execute(captchaId, opts);
+        return result;
       } catch (error) {
         if (opts && opts.async) {
           return Promise.reject(error);
@@ -365,6 +437,7 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     value: function close() {
       var hcaptcha = this._hcaptcha;
       var captchaId = this.captchaId;
+      this._cancelPendingExecute('hcaptcha-closed');
       if (!this.isReady()) {
         return;
       }

package/package.json

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

package/src/index.js

@@ -38,6 +38,12 @@ class HCaptcha extends React.Component {
       this.sentryHub = null;
       this.captchaId = '';
 
+      /**
+       * Tracks the currently pending async execute() promise.
+       * Stores { resolve, reject } so we can cancel on unmount/errors/etc.
+       */
+      this._pendingExecute = null;
+
       this.state = {
         isApiReady: false,
         isRemoved: false,
@@ -77,6 +83,8 @@ class HCaptcha extends React.Component {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('react-component-unmounted');
+
       if (!this.isReady()) {
         return;
       }
@@ -201,14 +209,19 @@ class HCaptcha extends React.Component {
       if (!this.isReady()) {
         return;
       }
+
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId)
+
+      this._cancelPendingExecute('hcaptcha-reset');
     }
 
     removeCaptcha(callback) {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('hcaptcha-removed');
+
       if (!this.isReady()) {
         return;
       }
@@ -217,6 +230,7 @@ class HCaptcha extends React.Component {
         this.captchaId = '';
 
         hcaptcha.remove(captchaId);
+
         callback && callback()
       });
     }
@@ -285,6 +299,22 @@ class HCaptcha extends React.Component {
       return isApiReady && !isRemoved;
     }
 
+    /**
+     * Cancel any pending async execute() promise
+     * Called when the component unmounts, errors occur, resets, etc.
+     */
+    _cancelPendingExecute(reason) {
+      if (!this._pendingExecute) {
+        return;
+      }
+
+      const pending = this._pendingExecute;
+      this._pendingExecute = null;
+
+      const error = new Error(reason);
+      pending.reject(error);
+    }
+
     handleOpen () {
       if (!this.isReady() || !this.props.onOpen) {
         return;
@@ -309,7 +339,7 @@ class HCaptcha extends React.Component {
       this.props.onChalExpired();
     }
 
-    execute (opts = null) {
+    execute(opts = null) {
 
       opts = typeof opts === 'object' ? opts : null;
 
@@ -317,28 +347,75 @@ class HCaptcha extends React.Component {
         const hcaptcha = this._hcaptcha;
         const captchaId = this.captchaId;
 
+        // Is an async execute and there's already 1 pending, cancel the old one.
+        if (opts && opts.async && this._pendingExecute) {
+          this._cancelPendingExecute('hcaptcha-execute-replaced');
+        }
+
         if (!this.isReady()) {
-          const onReady = new Promise((resolve, reject) => {
+          if (opts && opts.async) {
+            return new Promise((resolve, reject) => {
+              this._pendingExecute = { resolve, reject };
 
-            this._onReady = (id) => {
-              try {
-                const hcaptcha = this._hcaptcha;
+              this._onReady = (id) => {
+                if (!this._pendingExecute) {
+                  return;
+                }
 
-                if (opts && opts.async) {
-                  hcaptcha.execute(id, opts).then(resolve).catch(reject);
-                } else {
-                  resolve(hcaptcha.execute(id, opts));
+                try {
+                  const result = hcaptcha.execute(id, opts);
+
+                  if (result && typeof result.then === 'function') {
+                    result
+                      .then((val) => {
+                        this._pendingExecute = null;
+                        resolve(val);
+                      })
+                      .catch((err) => {
+                        this._pendingExecute = null;
+                        reject(err);
+                      });
+                  } else {
+                    this._pendingExecute = null;
+                    reject(new Error('hcaptcha-execute-no-promise'));
+                  }
+                } catch (e) {
+                  this._pendingExecute = null;
+                  reject(e);
                 }
-              } catch (e) {
-                reject(e);
-              }
+              };
+            });
+          } else {
+            // Non-async: don't return a promise.
+            this._onReady = (id) => {
+              hcaptcha.execute(id, opts);
             };
-          });
+            
+            return null;
+          }
+        }
 
-          return opts?.async ? onReady : null;
+        // hCaptcha is ready, execute directly.
+        const result = hcaptcha.execute(captchaId, opts);
+
+        // If it's async execute, track it.
+        if (opts && opts.async && result && typeof result.then === 'function') {
+          return new Promise((resolve, reject) => {
+            this._pendingExecute = { resolve, reject };
+
+            result
+              .then((val) => {
+                this._pendingExecute = null;
+                resolve(val);
+              })
+              .catch((err) => {
+                this._pendingExecute = null;
+                reject(err);
+              });
+          });
         }
 
-        return hcaptcha.execute(captchaId, opts);
+        return result;
       } catch (error) {
         if (opts && opts.async) {
           return Promise.reject(error);
@@ -351,6 +428,8 @@ class HCaptcha extends React.Component {
       const hcaptcha = this._hcaptcha;
       const captchaId = this.captchaId;
 
+      this._cancelPendingExecute('hcaptcha-closed');
+
       if (!this.isReady()) {
         return;
       }

package/types/index.d.ts

@@ -21,6 +21,7 @@ interface HCaptchaProps {
   onError?: (event: string) => any;
   onVerify?: (token: string, ekey: string) => any;
   onLoad?: () => any;
+  onReady?: () => any;
   languageOverride?: string;
   sitekey: string;
   size?: "normal" | "compact" | "invisible";