@captchafox/react 1.5.1 → 1.7.0

package/dist/index.cjs

@@ -52,42 +52,70 @@ var __async = (__this, __arguments, generator) => {
 var src_exports = {};
 __export(src_exports, {
   CAPTCHA_RESPONSE_KEY: () => CAPTCHA_RESPONSE_KEY,
-  CaptchaFox: () => CaptchaFox
+  CaptchaFox: () => CaptchaFox,
+  RetryError: () => RetryError,
+  TimeoutError: () => TimeoutError
 });
 module.exports = __toCommonJS(src_exports);
 
 // ../internal/dist/index.mjs
-var resolveFn;
-var rejectFn;
-var mountInstance = new Promise((resolve, reject) => {
-  resolveFn = resolve;
-  rejectFn = reject;
+var RetryError = class extends Error {
+};
+var TimeoutError = class extends Error {
+};
+var backoff = (retryCount) => Math.exp(retryCount) * 150;
+var withRetry = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (callback, { attempts = 4 } = {}) {
+  var _a;
+  let error;
+  for (let i = 0; i < attempts; i++) {
+    try {
+      return yield callback();
+    } catch (err) {
+      error = err;
+      yield new Promise((r) => setTimeout(r, backoff(i)));
+    }
+  }
+  throw new RetryError((_a = error == null ? void 0 : error.message) != null ? _a : "Exhausted all retries");
 });
+var mountInstance;
 var LOAD_FUNC_KEY = "captchaFoxOnLoad";
 var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
-function loadCaptchaScript() {
+function loadScript() {
   return __async(this, arguments, function* ({ nonce } = {}) {
-    if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
+    if (mountInstance && document.querySelector(`script[src="${SCRIPT_SRC}"]`)) {
       return mountInstance;
-    window[LOAD_FUNC_KEY] = resolveFn;
-    const script = document.createElement("script");
-    script.src = SCRIPT_SRC;
-    script.async = true;
-    script.defer = true;
-    script.onerror = rejectFn;
-    if (nonce) {
-      script.nonce = nonce;
     }
-    document.body.appendChild(script);
+    mountInstance = new Promise((resolve, reject) => {
+      window[LOAD_FUNC_KEY] = resolve;
+      const script = document.createElement("script");
+      script.src = SCRIPT_SRC;
+      script.async = true;
+      script.defer = true;
+      script.onerror = (e) => {
+        script.remove();
+        mountInstance = void 0;
+        reject(e);
+      };
+      if (nonce) {
+        script.nonce = nonce;
+      }
+      document.body.appendChild(script);
+    });
     return mountInstance;
   });
 }
+function loadCaptchaScript() {
+  return __async(this, arguments, function* (props = {}) {
+    return withRetry(() => loadScript(props));
+  });
+}
 var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !== "undefined";
 
 // src/CaptchaFox.tsx
 var import_react = __toESM(require("react"), 1);
 var CaptchaFox = (0, import_react.forwardRef)(
   ({
+    executeTimeoutSeconds = 30,
     sitekey,
     lang,
     mode,
@@ -104,6 +132,8 @@ var CaptchaFox = (0, import_react.forwardRef)(
     const [containerRef, setContainerRef] = (0, import_react.useState)();
     const [widgetId, setWidgetId] = (0, import_react.useState)();
     const firstRendered = (0, import_react.useRef)(false);
+    const onReady = (0, import_react.useRef)();
+    const executeTimeout = (0, import_react.useRef)();
     (0, import_react.useImperativeHandle)(
       ref,
       () => {
@@ -132,7 +162,7 @@ var CaptchaFox = (0, import_react.forwardRef)(
           },
           execute: () => {
             if (!isApiReady() || !widgetId) {
-              return Promise.reject("[CaptchaFox] Widget has not been loaded");
+              return waitAndExecute();
             }
             return window.captchafox.execute(widgetId);
           }
@@ -145,27 +175,11 @@ var CaptchaFox = (0, import_react.forwardRef)(
         onLoad == null ? void 0 : onLoad();
       }
     }, [widgetId]);
-    const renderCaptcha = () => __async(void 0, null, function* () {
-      var _a, _b, _c;
-      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
-      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1)
-        return;
-      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
-        lang,
-        sitekey,
-        mode,
-        theme,
-        i18n,
-        onError,
-        onFail,
-        onClose,
-        onVerify
-      });
-      setWidgetId(newWidgetId);
-    });
     (0, import_react.useEffect)(() => {
-      if (!containerRef)
-        return;
+      return () => clearTimeout(executeTimeout.current);
+    }, []);
+    (0, import_react.useEffect)(() => {
+      if (!containerRef) return;
       if (firstRendered.current) {
         if (isApiReady()) {
           renderCaptcha();
@@ -182,6 +196,41 @@ var CaptchaFox = (0, import_react.forwardRef)(
         });
       }
     }, [containerRef, sitekey, lang, mode]);
+    const waitAndExecute = () => {
+      return new Promise((resolve, reject) => {
+        executeTimeout.current = setTimeout(() => {
+          reject(new TimeoutError("Execute timed out"));
+        }, executeTimeoutSeconds * 1e3);
+        onReady.current = (id) => {
+          clearTimeout(executeTimeout.current);
+          window.captchafox.execute(id).then(resolve).catch(reject);
+        };
+      });
+    };
+    const renderCaptcha = () => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
+      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1) return;
+      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
+        lang,
+        sitekey,
+        mode,
+        theme,
+        i18n,
+        onError,
+        onFail,
+        onClose,
+        onVerify
+      });
+      if (!newWidgetId) {
+        return;
+      }
+      setWidgetId(newWidgetId);
+      if (onReady.current) {
+        onReady.current(newWidgetId);
+        onReady.current = void 0;
+      }
+    });
     return /* @__PURE__ */ import_react.default.createElement("div", { ref: setContainerRef, id: widgetId, className });
   }
 );
@@ -192,5 +241,7 @@ var CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CAPTCHA_RESPONSE_KEY,
-  CaptchaFox
+  CaptchaFox,
+  RetryError,
+  TimeoutError
 });

package/dist/index.d.cts

@@ -1,14 +1,20 @@
 import { WidgetApi, WidgetOptions } from '@captchafox/types';
 import React from 'react';
 
+declare class RetryError extends Error {
+}
+declare class TimeoutError extends Error {
+}
+
 type CaptchaFoxInstance = Omit<WidgetApi, 'render'>;
 declare const CaptchaFox: React.ForwardRefExoticComponent<WidgetOptions & {
     /** Called after the widget has been loaded */
     onLoad?: (() => void) | undefined;
     className?: string | undefined;
     nonce?: string | undefined;
+    executeTimeoutSeconds?: number | undefined;
 } & React.RefAttributes<CaptchaFoxInstance>>;
 
 declare const CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
 
-export { CAPTCHA_RESPONSE_KEY, CaptchaFox, CaptchaFoxInstance };
+export { CAPTCHA_RESPONSE_KEY, CaptchaFox, type CaptchaFoxInstance, RetryError, TimeoutError };

package/dist/index.d.ts

@@ -1,14 +1,20 @@
 import { WidgetApi, WidgetOptions } from '@captchafox/types';
 import React from 'react';
 
+declare class RetryError extends Error {
+}
+declare class TimeoutError extends Error {
+}
+
 type CaptchaFoxInstance = Omit<WidgetApi, 'render'>;
 declare const CaptchaFox: React.ForwardRefExoticComponent<WidgetOptions & {
     /** Called after the widget has been loaded */
     onLoad?: (() => void) | undefined;
     className?: string | undefined;
     nonce?: string | undefined;
+    executeTimeoutSeconds?: number | undefined;
 } & React.RefAttributes<CaptchaFoxInstance>>;
 
 declare const CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
 
-export { CAPTCHA_RESPONSE_KEY, CaptchaFox, CaptchaFoxInstance };
+export { CAPTCHA_RESPONSE_KEY, CaptchaFox, type CaptchaFoxInstance, RetryError, TimeoutError };

package/dist/index.js

@@ -21,37 +21,63 @@ var __async = (__this, __arguments, generator) => {
 };
 
 // ../internal/dist/index.mjs
-var resolveFn;
-var rejectFn;
-var mountInstance = new Promise((resolve, reject) => {
-  resolveFn = resolve;
-  rejectFn = reject;
+var RetryError = class extends Error {
+};
+var TimeoutError = class extends Error {
+};
+var backoff = (retryCount) => Math.exp(retryCount) * 150;
+var withRetry = (_0, ..._1) => __async(void 0, [_0, ..._1], function* (callback, { attempts = 4 } = {}) {
+  var _a;
+  let error;
+  for (let i = 0; i < attempts; i++) {
+    try {
+      return yield callback();
+    } catch (err) {
+      error = err;
+      yield new Promise((r) => setTimeout(r, backoff(i)));
+    }
+  }
+  throw new RetryError((_a = error == null ? void 0 : error.message) != null ? _a : "Exhausted all retries");
 });
+var mountInstance;
 var LOAD_FUNC_KEY = "captchaFoxOnLoad";
 var SCRIPT_SRC = `https://cdn.captchafox.com/api.js?render=explicit&onload=${LOAD_FUNC_KEY}`;
-function loadCaptchaScript() {
+function loadScript() {
   return __async(this, arguments, function* ({ nonce } = {}) {
-    if (document.querySelector(`script[src="${SCRIPT_SRC}"]`))
+    if (mountInstance && document.querySelector(`script[src="${SCRIPT_SRC}"]`)) {
       return mountInstance;
-    window[LOAD_FUNC_KEY] = resolveFn;
-    const script = document.createElement("script");
-    script.src = SCRIPT_SRC;
-    script.async = true;
-    script.defer = true;
-    script.onerror = rejectFn;
-    if (nonce) {
-      script.nonce = nonce;
     }
-    document.body.appendChild(script);
+    mountInstance = new Promise((resolve, reject) => {
+      window[LOAD_FUNC_KEY] = resolve;
+      const script = document.createElement("script");
+      script.src = SCRIPT_SRC;
+      script.async = true;
+      script.defer = true;
+      script.onerror = (e) => {
+        script.remove();
+        mountInstance = void 0;
+        reject(e);
+      };
+      if (nonce) {
+        script.nonce = nonce;
+      }
+      document.body.appendChild(script);
+    });
     return mountInstance;
   });
 }
+function loadCaptchaScript() {
+  return __async(this, arguments, function* (props = {}) {
+    return withRetry(() => loadScript(props));
+  });
+}
 var isApiReady = () => typeof (window == null ? void 0 : window.captchafox) !== "undefined";
 
 // src/CaptchaFox.tsx
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 var CaptchaFox = forwardRef(
   ({
+    executeTimeoutSeconds = 30,
     sitekey,
     lang,
     mode,
@@ -68,6 +94,8 @@ var CaptchaFox = forwardRef(
     const [containerRef, setContainerRef] = useState();
     const [widgetId, setWidgetId] = useState();
     const firstRendered = useRef(false);
+    const onReady = useRef();
+    const executeTimeout = useRef();
     useImperativeHandle(
       ref,
       () => {
@@ -96,7 +124,7 @@ var CaptchaFox = forwardRef(
           },
           execute: () => {
             if (!isApiReady() || !widgetId) {
-              return Promise.reject("[CaptchaFox] Widget has not been loaded");
+              return waitAndExecute();
             }
             return window.captchafox.execute(widgetId);
           }
@@ -109,27 +137,11 @@ var CaptchaFox = forwardRef(
         onLoad == null ? void 0 : onLoad();
       }
     }, [widgetId]);
-    const renderCaptcha = () => __async(void 0, null, function* () {
-      var _a, _b, _c;
-      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
-      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1)
-        return;
-      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
-        lang,
-        sitekey,
-        mode,
-        theme,
-        i18n,
-        onError,
-        onFail,
-        onClose,
-        onVerify
-      });
-      setWidgetId(newWidgetId);
-    });
     useEffect(() => {
-      if (!containerRef)
-        return;
+      return () => clearTimeout(executeTimeout.current);
+    }, []);
+    useEffect(() => {
+      if (!containerRef) return;
       if (firstRendered.current) {
         if (isApiReady()) {
           renderCaptcha();
@@ -146,6 +158,41 @@ var CaptchaFox = forwardRef(
         });
       }
     }, [containerRef, sitekey, lang, mode]);
+    const waitAndExecute = () => {
+      return new Promise((resolve, reject) => {
+        executeTimeout.current = setTimeout(() => {
+          reject(new TimeoutError("Execute timed out"));
+        }, executeTimeoutSeconds * 1e3);
+        onReady.current = (id) => {
+          clearTimeout(executeTimeout.current);
+          window.captchafox.execute(id).then(resolve).catch(reject);
+        };
+      });
+    };
+    const renderCaptcha = () => __async(void 0, null, function* () {
+      var _a, _b, _c;
+      (_a = window.captchafox) == null ? void 0 : _a.remove(widgetId);
+      if (!containerRef || ((_b = containerRef == null ? void 0 : containerRef.children) == null ? void 0 : _b.length) === 1) return;
+      const newWidgetId = yield (_c = window.captchafox) == null ? void 0 : _c.render(containerRef, {
+        lang,
+        sitekey,
+        mode,
+        theme,
+        i18n,
+        onError,
+        onFail,
+        onClose,
+        onVerify
+      });
+      if (!newWidgetId) {
+        return;
+      }
+      setWidgetId(newWidgetId);
+      if (onReady.current) {
+        onReady.current(newWidgetId);
+        onReady.current = void 0;
+      }
+    });
     return /* @__PURE__ */ React.createElement("div", { ref: setContainerRef, id: widgetId, className });
   }
 );
@@ -155,5 +202,7 @@ CaptchaFox.displayName = "CaptchaFox";
 var CAPTCHA_RESPONSE_KEY = "cf-captcha-response";
 export {
   CAPTCHA_RESPONSE_KEY,
-  CaptchaFox
+  CaptchaFox,
+  RetryError,
+  TimeoutError
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@captchafox/react",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -50,7 +50,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react": "^18.2.0",
-    "tsup": "^7.2.0",
+    "tsup": "^8.3.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.0.2"
   },