@hcaptcha/react-hcaptcha 1.8.0 → 1.9.0

package/README.md

@@ -138,6 +138,7 @@ return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} /
 |`imghost`|String|No|`-`|See enterprise docs.|
 |`reportapi`|String|No|`-`|See enterprise docs.|
 |`sentry`|String|No|`-`|See enterprise docs.|
+| `cleanup`         | Boolean     | No       | `true`          | Remove script tag after setup.|
 |`custom`|Boolean|No|`-`|See enterprise docs.|
 |`loadAsync`|Boolean|No|`true`|Set if the script should be loaded asynchronously.|
 |`scriptLocation`|Element|No|`document.head`| Location of where to append the script tag. Make sure to add it to an area that will persist to prevent loading multiple times in the same document view. Note: If `null` is provided, the `document.head` will be used.|

package/dist/constants.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breadcrumbMessages = exports.scopeTag = void 0;
+var scopeTag = {
+  key: 'source',
+  value: '@hCaptcha/react'
+};
+exports.scopeTag = scopeTag;
+var breadcrumbMessages = {
+  mounted: 'hCaptcha component mounted',
+  expired: 'hCaptcha expired',
+  unmounted: 'hCaptcha component unmounted',
+  reset: 'hCaptcha reset',
+  removed: 'hCaptcha removed'
+};
+exports.breadcrumbMessages = breadcrumbMessages;

package/dist/esm/constants.js

@@ -0,0 +1,11 @@
+export var scopeTag = {
+  key: 'source',
+  value: '@hCaptcha/react'
+};
+export var breadcrumbMessages = {
+  mounted: 'hCaptcha component mounted',
+  expired: 'hCaptcha expired',
+  unmounted: 'hCaptcha component unmounted',
+  reset: 'hCaptcha reset',
+  removed: 'hCaptcha removed'
+};

package/dist/esm/index.js

@@ -1,79 +1,30 @@
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from "./utils.js";
-var SCRIPT_ID = 'hcaptcha-api-script-id';
-var HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad'; // Prevent loading API script multiple times
-
-var scripts = []; // Generate hCaptcha API script
-
-var mountCaptchaScript = function mountCaptchaScript(params) {
-  if (params === void 0) {
-    params = {};
-  }
-
-  var element = getMountElement(params.scriptLocation);
-  delete params.scriptLocation;
-  var frame = getFrame(element);
-  var script = scripts.find(function (_ref) {
-    var scope = _ref.scope;
-    return scope === frame.window;
-  });
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  var promise = new Promise(function (resolve, reject) {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-    var domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-    var script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = domain + "/1/api.js?render=explicit&onload=" + HCAPTCHA_LOAD_FN_NAME;
-    script.async = params.loadAsync !== undefined ? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = function (event) {
-      return reject('script-error');
-    };
-
-    var query = generateQuery(params);
-    script.src += query !== "" ? "&" + query : "";
-    element.appendChild(script);
-  });
-  scripts.push({
-    promise: promise,
-    scope: frame.window
-  });
-  return promise;
-};
-
+import { hCaptchaLoader, initSentry } from '@hcaptcha/loader';
+import { getFrame, getMountElement } from './utils.js';
+import { breadcrumbMessages, scopeTag } from "./constants";
 var HCaptcha = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(HCaptcha, _React$Component);
-
   function HCaptcha(props) {
     var _this;
-
     _this = _React$Component.call(this, props) || this;
-    var element = getMountElement(_this.props.scriptLocation);
-    var frame = getFrame(element);
+
     /**
      * Internal reference to track hCaptcha API
      *
      * Required as window is relative to initialization in application
      * not where the script and iFrames have been loaded.
      */
+    _this._hcaptcha = undefined;
 
-    _this._hcaptcha = frame.window.hcaptcha || undefined; // API Methods
-
+    // API Methods
     _this.renderCaptcha = _this.renderCaptcha.bind(_assertThisInitialized(_this));
     _this.resetCaptcha = _this.resetCaptcha.bind(_assertThisInitialized(_this));
     _this.removeCaptcha = _this.removeCaptcha.bind(_assertThisInitialized(_this));
-    _this.isReady = _this.isReady.bind(_assertThisInitialized(_this)); // Event Handlers
+    _this.isReady = _this.isReady.bind(_assertThisInitialized(_this));
 
+    // Event Handlers
     _this.loadCaptcha = _this.loadCaptcha.bind(_assertThisInitialized(_this));
     _this.handleOnLoad = _this.handleOnLoad.bind(_assertThisInitialized(_this));
     _this.handleSubmit = _this.handleSubmit.bind(_assertThisInitialized(_this));
@@ -82,112 +33,122 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
     _this.handleOpen = _this.handleOpen.bind(_assertThisInitialized(_this));
     _this.handleClose = _this.handleClose.bind(_assertThisInitialized(_this));
     _this.handleChallengeExpired = _this.handleChallengeExpired.bind(_assertThisInitialized(_this));
-    var isApiReady = typeof _this._hcaptcha !== 'undefined';
     _this.ref = /*#__PURE__*/React.createRef();
     _this.apiScriptRequested = false;
+    _this.sentryHub = null;
     _this.state = {
-      isApiReady: isApiReady,
+      isApiReady: false,
       isRemoved: false,
       elementId: props.id,
       captchaId: ''
     };
     return _this;
   }
-
   var _proto = HCaptcha.prototype;
-
   _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this;
     // Once captcha is mounted intialize hCaptcha - hCaptcha
-    var isApiReady = this.state.isApiReady;
+    var element = getMountElement(this.props.scriptLocation);
+    var frame = getFrame(element);
+    this._hcaptcha = frame.window.hcaptcha || undefined;
+    var isApiReady = typeof this._hcaptcha !== 'undefined';
+    this.sentryHub = initSentry(this.props.sentry, scopeTag);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.mounted
+    });
+
     /*
      * Check if hCaptcha has already been loaded,
      * If Yes, render the captcha
      * If No, create script tag and wait to render the captcha
      */
-
     if (isApiReady) {
-      this.renderCaptcha();
+      this.setState({
+        isApiReady: true
+      }, function () {
+        _this2.renderCaptcha();
+      });
       return;
     }
-
     this.loadCaptcha();
   };
-
   _proto.componentWillUnmount = function componentWillUnmount() {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
-    } // Reset any stored variables / timers when unmounting
-
+    }
 
+    // Reset any stored variables / timers when unmounting
     hcaptcha.reset(captchaId);
     hcaptcha.remove(captchaId);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.unmounted
+    });
   };
-
   _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
     // Prevent component re-rendering when these internal state variables are updated
     if (this.state.isApiReady !== nextState.isApiReady || this.state.isRemoved !== nextState.isRemoved) {
       return false;
     }
-
     return true;
   };
-
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    var _this2 = this;
-
+    var _this3 = this;
     // Prop Keys that could change
-    var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint']; // See if any props changed during component update
-
+    var keys = ['sitekey', 'size', 'theme', 'tabindex', 'languageOverride', 'endpoint'];
+    // See if any props changed during component update
     var match = keys.every(function (key) {
-      return prevProps[key] === _this2.props[key];
-    }); // If they have changed, remove current captcha and render a new one
+      return prevProps[key] === _this3.props[key];
+    });
 
+    // If they have changed, remove current captcha and render a new one
     if (!match) {
       this.removeCaptcha(function () {
-        _this2.renderCaptcha();
+        _this3.renderCaptcha();
       });
     }
   };
-
   _proto.loadCaptcha = function loadCaptcha() {
     if (this.apiScriptRequested) {
       return;
     }
-
     var _this$props = this.props,
-        apihost = _this$props.apihost,
-        assethost = _this$props.assethost,
-        endpoint = _this$props.endpoint,
-        host = _this$props.host,
-        imghost = _this$props.imghost,
-        hl = _this$props.languageOverride,
-        reCaptchaCompat = _this$props.reCaptchaCompat,
-        reportapi = _this$props.reportapi,
-        sentry = _this$props.sentry,
-        custom = _this$props.custom,
-        loadAsync = _this$props.loadAsync,
-        scriptLocation = _this$props.scriptLocation;
+      apihost = _this$props.apihost,
+      assethost = _this$props.assethost,
+      endpoint = _this$props.endpoint,
+      host = _this$props.host,
+      imghost = _this$props.imghost,
+      hl = _this$props.languageOverride,
+      reCaptchaCompat = _this$props.reCaptchaCompat,
+      reportapi = _this$props.reportapi,
+      sentry = _this$props.sentry,
+      custom = _this$props.custom,
+      loadAsync = _this$props.loadAsync,
+      scriptLocation = _this$props.scriptLocation,
+      _this$props$cleanup = _this$props.cleanup,
+      cleanup = _this$props$cleanup === void 0 ? true : _this$props$cleanup;
     var mountParams = {
+      render: 'explicit',
       apihost: apihost,
       assethost: assethost,
       endpoint: endpoint,
       hl: hl,
       host: host,
       imghost: imghost,
-      recaptchacompat: reCaptchaCompat === false ? "off" : null,
+      recaptchacompat: reCaptchaCompat === false ? 'off' : null,
       reportapi: reportapi,
       sentry: sentry,
       custom: custom,
       loadAsync: loadAsync,
-      scriptLocation: scriptLocation
+      scriptLocation: scriptLocation,
+      cleanup: cleanup
     };
-    mountCaptchaScript(mountParams).then(this.handleOnLoad)["catch"](this.handleError);
+    hCaptchaLoader(mountParams).then(this.handleOnLoad, this.handleError)["catch"](this.handleError);
     this.apiScriptRequested = true;
   };
-
   _proto.renderCaptcha = function renderCaptcha(onReady) {
     var isApiReady = this.state.isApiReady;
     if (!isApiReady) return;
@@ -202,8 +163,8 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       hl: this.props.hl || this.props.languageOverride,
       languageOverride: undefined
     });
-    var hcaptcha = this._hcaptcha; //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-
+    var hcaptcha = this._hcaptcha;
+    //Render hCaptcha widget and provide necessary callbacks - hCaptcha
     var captchaId = hcaptcha.render(this.ref.current, renderParams);
     this.setState({
       isRemoved: false,
@@ -212,169 +173,154 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       onReady && onReady();
     });
   };
-
   _proto.resetCaptcha = function resetCaptcha() {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
-    } // Reset captcha state, removes stored token and unticks checkbox
-
-
+    }
+    // Reset captcha state, removes stored token and unticks checkbox
     hcaptcha.reset(captchaId);
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.reset
+    });
   };
-
   _proto.removeCaptcha = function removeCaptcha(callback) {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     this.setState({
       isRemoved: true
     }, function () {
       hcaptcha.remove(captchaId);
       callback && callback();
     });
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.removed
+    });
   };
-
   _proto.handleOnLoad = function handleOnLoad() {
-    var _this3 = this;
-
+    var _this4 = this;
     this.setState({
       isApiReady: true
     }, function () {
-      var element = getMountElement(_this3.props.scriptLocation);
-      var frame = getFrame(element);
-      _this3._hcaptcha = frame.window.hcaptcha; // render captcha and wait for captcha id
-
-      _this3.renderCaptcha(function () {
-        // trigger onLoad if it exists
-        var onLoad = _this3.props.onLoad;
-        if (onLoad) onLoad();
-      });
+      try {
+        var element = getMountElement(_this4.props.scriptLocation);
+        var frame = getFrame(element);
+        _this4._hcaptcha = frame.window.hcaptcha;
+
+        // render captcha and wait for captcha id
+        _this4.renderCaptcha(function () {
+          // trigger onLoad if it exists
+          var onLoad = _this4.props.onLoad;
+          if (onLoad) onLoad();
+        });
+      } catch (error) {
+        _this4.sentryHub.captureException(error);
+      }
     });
   };
-
   _proto.handleSubmit = function handleSubmit(event) {
     var onVerify = this.props.onVerify;
     var _this$state = this.state,
-        isRemoved = _this$state.isRemoved,
-        captchaId = _this$state.captchaId;
+      isRemoved = _this$state.isRemoved,
+      captchaId = _this$state.captchaId;
     var hcaptcha = this._hcaptcha;
     if (typeof hcaptcha === 'undefined' || isRemoved) return;
     var token = hcaptcha.getResponse(captchaId); //Get response token from hCaptcha widget
-
     var ekey = hcaptcha.getRespKey(captchaId); //Get current challenge session id from hCaptcha widget
-
     if (onVerify) onVerify(token, ekey); //Dispatch event to verify user response
   };
-
   _proto.handleExpire = function handleExpire() {
     var onExpire = this.props.onExpire;
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     hcaptcha.reset(captchaId); // If hCaptcha runs into error, reset captcha - hCaptcha
 
     if (onExpire) onExpire();
+    this.sentryHub.addBreadcrumb({
+      category: scopeTag.value,
+      message: breadcrumbMessages.expired
+    });
   };
-
   _proto.handleError = function handleError(event) {
     var onError = this.props.onError;
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (this.isReady()) {
       // If hCaptcha runs into error, reset captcha - hCaptcha
       hcaptcha.reset(captchaId);
     }
-
     if (onError) onError(event);
   };
-
   _proto.isReady = function isReady() {
     var _this$state2 = this.state,
-        isApiReady = _this$state2.isApiReady,
-        isRemoved = _this$state2.isRemoved;
+      isApiReady = _this$state2.isApiReady,
+      isRemoved = _this$state2.isRemoved;
     return isApiReady && !isRemoved;
   };
-
   _proto.handleOpen = function handleOpen() {
     if (!this.isReady() || !this.props.onOpen) {
       return;
     }
-
     this.props.onOpen();
   };
-
   _proto.handleClose = function handleClose() {
     if (!this.isReady() || !this.props.onClose) {
       return;
     }
-
     this.props.onClose();
   };
-
   _proto.handleChallengeExpired = function handleChallengeExpired() {
     if (!this.isReady() || !this.props.onChalExpired) {
       return;
     }
-
     this.props.onChalExpired();
   };
-
   _proto.execute = function execute(opts) {
     if (opts === void 0) {
       opts = null;
     }
-
-    var captchaId = this.state.captchaId;
-    var hcaptcha = this._hcaptcha;
-
-    if (!this.isReady()) {
-      return;
-    }
-
-    if (opts && typeof opts !== "object") {
-      opts = null;
+    try {
+      var captchaId = this.state.captchaId;
+      var hcaptcha = this._hcaptcha;
+      if (!this.isReady()) {
+        return;
+      }
+      if (opts && typeof opts !== "object") {
+        opts = null;
+      }
+      return hcaptcha.execute(captchaId, opts);
+    } catch (error) {
+      this.sentryHub.captureException(error);
     }
-
-    return hcaptcha.execute(captchaId, opts);
   };
-
   _proto.setData = function setData(data) {
     var captchaId = this.state.captchaId;
     var hcaptcha = this._hcaptcha;
-
     if (!this.isReady()) {
       return;
     }
-
     if (data && typeof data !== "object") {
       data = null;
     }
-
     hcaptcha.setData(captchaId, data);
   };
-
   _proto.getResponse = function getResponse() {
     var hcaptcha = this._hcaptcha;
     return hcaptcha.getResponse(this.state.captchaId);
   };
-
   _proto.getRespKey = function getRespKey() {
     var hcaptcha = this._hcaptcha;
     return hcaptcha.getRespKey(this.state.captchaId);
   };
-
   _proto.render = function render() {
     var elementId = this.state.elementId;
     return /*#__PURE__*/React.createElement("div", {
@@ -382,8 +328,6 @@ var HCaptcha = /*#__PURE__*/function (_React$Component) {
       id: elementId
     });
   };
-
   return HCaptcha;
 }(React.Component);
-
 export default HCaptcha;

package/dist/esm/utils.js

@@ -1,28 +1,12 @@
-function generateQuery(params) {
-  return Object.entries(params).filter(function (_ref) {
-    var key = _ref[0],
-        value = _ref[1];
-    return value || value === false;
-  }).map(function (_ref2) {
-    var key = _ref2[0],
-        value = _ref2[1];
-    return encodeURIComponent(key) + "=" + encodeURIComponent(value);
-  }).join("&");
-}
-
-;
-
 function getFrame(element) {
   var doc = element && element.ownerDocument || document;
-  var win = doc.defaultView || doc.parentWindow;
+  var win = doc.defaultView || doc.parentWindow || window;
   return {
     document: doc,
     window: win
   };
 }
-
 function getMountElement(element) {
   return element || document.head;
 }
-
-export { generateQuery, getFrame, getMountElement };
+export { getFrame, getMountElement };