Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
solid-hcaptcha
Advanced tools
solid-hcaptcha - npm Package Compare versions
Comparing version 0.2.5 to 0.2.6
@@ -1,2 +0,2 @@ | ||
| import { effect, setAttribute, template } from 'solid-js/web'; | ||
| import { effect, setAttribute, template, use } from 'solid-js/web'; | ||
| import { createScriptLoader } from '@solid-primitives/script-loader'; | ||
@@ -10,9 +10,8 @@ import { onMount, onCleanup } from 'solid-js'; | ||
| url.pathname = "/1/api.js"; | ||
| for (const [key, value] of Object.entries(params)) { | ||
| if (!value) continue; | ||
| url.searchParams.set(encodeURIComponent(key), encodeURIComponent(value)); | ||
| } // Tell hCaptcha to not automatically render the widget. | ||
| } | ||
| // Tell hCaptcha to not automatically render the widget. | ||
| url.searchParams.set("render", "explicit"); | ||
@@ -24,6 +23,4 @@ url.searchParams.set("onload", onLoadFunctionName); | ||
| const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2); | ||
| /** The name of the function that will be triggered when hCaptcha is loaded. */ | ||
| const HCAPTCHA_ONLOAD_FUNCTION_NAME = "__hCaptchaOnLoad__"; | ||
| const HCaptcha = props => { | ||
@@ -42,8 +39,7 @@ const config = props.config || {}; | ||
| }, HCAPTCHA_ONLOAD_FUNCTION_NAME, config.apihost); | ||
| /** Whether the hCaptcha API (in `window`) is ready. */ | ||
| const isApiReady = () => typeof window.hcaptcha !== "undefined"; | ||
| const isApiReady = () => typeof window.hcaptcha !== "undefined"; | ||
| /** Whether the hCaptcha widget is ready (in `window` and not removed). */ | ||
| const isReady = () => { | ||
@@ -55,5 +51,4 @@ const { | ||
| }; | ||
| /** Reference of the hCaptcha widget element. */ | ||
| let captcha_ref; | ||
@@ -65,7 +60,6 @@ const [state, setState] = createStore({ | ||
| }); | ||
| const renderCaptcha = onReady => { | ||
| if (!captcha_ref) return; | ||
| /** Parameters for the hCaptcha widget. */ | ||
| const renderParams = Object.assign({ | ||
@@ -84,2 +78,3 @@ "open-callback": handleOpen, | ||
| }); | ||
| /** | ||
@@ -89,3 +84,2 @@ * Render hCaptcha widget and provide necessary callbacks | ||
| */ | ||
| const captchaId = hcaptcha.render(captcha_ref, renderParams); | ||
@@ -98,3 +92,2 @@ setState({ | ||
| }; | ||
| const resetCaptcha = () => { | ||
@@ -104,7 +97,7 @@ const { | ||
| } = state; | ||
| if (!isReady() || !captchaId) return; // Reset captcha state, removes stored token and unticks checkbox. | ||
| if (!isReady() || !captchaId) return; | ||
| // Reset captcha state, removes stored token and unticks checkbox. | ||
| hcaptcha.reset(captchaId); | ||
| }; | ||
| const removeCaptcha = callback => { | ||
@@ -121,3 +114,2 @@ const { | ||
| }; | ||
| const executeSync = () => { | ||
@@ -132,3 +124,2 @@ const { | ||
| }; | ||
| const execute = async () => { | ||
@@ -144,3 +135,2 @@ const { | ||
| }; | ||
| const setData = data => { | ||
@@ -153,3 +143,2 @@ const { | ||
| }; | ||
| const getResponse = () => { | ||
@@ -162,3 +151,2 @@ const { | ||
| }; | ||
| const getRespKey = () => { | ||
@@ -171,2 +159,3 @@ const { | ||
| }; | ||
| /** | ||
@@ -176,4 +165,2 @@ * Helpers to be returned on the `onLoad` callback. | ||
| */ | ||
| const hcaptcha_functions = { | ||
@@ -189,8 +176,7 @@ execute, | ||
| }; | ||
| /** Handle load with the `onLoad` prop. */ | ||
| const handleOnLoad = () => { | ||
| /** Remove the function when it has been loaded. */ | ||
| window[HCAPTCHA_ONLOAD_FUNCTION_NAME] = () => undefined; | ||
| renderCaptcha(() => { | ||
@@ -203,2 +189,3 @@ const { | ||
| }; | ||
| /** | ||
@@ -208,4 +195,2 @@ * Get response from the captcha | ||
| */ | ||
| const handleSubmit = () => { | ||
@@ -220,13 +205,14 @@ const { | ||
| } = props; | ||
| if (!onVerify) return; // Get response token from hCaptcha widget. | ||
| if (!onVerify) return; | ||
| const token = hcaptcha.getResponse(captchaId); // Get current challenge session ID from hCaptcha widget. | ||
| // Get response token from hCaptcha widget. | ||
| const token = hcaptcha.getResponse(captchaId); | ||
| // Get current challenge session ID from hCaptcha widget. | ||
| const ekey = hcaptcha.getRespKey(captchaId); | ||
| const ekey = hcaptcha.getRespKey(captchaId); // Dispatch event to verify user response. | ||
| // Dispatch event to verify user response. | ||
| onVerify(token, ekey); | ||
| }; | ||
| /** Handle expire with the `onExpire` prop. */ | ||
| const handleExpire = () => { | ||
@@ -239,10 +225,10 @@ const { | ||
| } = state; | ||
| if (!isReady() || !captchaId) return; // Reset captcha when running into error. | ||
| if (!isReady() || !captchaId) return; | ||
| // Reset captcha when running into error. | ||
| hcaptcha.reset(captchaId); | ||
| if (onExpire) onExpire(); | ||
| }; | ||
| /** Handle error with the `onError` prop. */ | ||
| const handleError = event => { | ||
@@ -255,10 +241,10 @@ const { | ||
| } = state; | ||
| if (!isReady() || !captchaId) return; // Reset captcha when running into error. | ||
| if (!isReady() || !captchaId) return; | ||
| // Reset captcha when running into error. | ||
| hcaptcha.reset(captchaId); | ||
| if (onError) onError(event); | ||
| }; | ||
| /** Handle open with the `onOpen` prop. */ | ||
| const handleOpen = () => { | ||
@@ -268,5 +254,4 @@ if (!isReady() || !props.onOpen) return; | ||
| }; | ||
| /** Handle close with the `onClose` prop. */ | ||
| const handleClose = () => { | ||
@@ -276,5 +261,4 @@ if (!isReady() || !props.onClose) return; | ||
| }; | ||
| /** Handle the expired challenge with the `onChallengeExpired` prop. */ | ||
| const handleChallengeExpired = () => { | ||
@@ -284,5 +268,4 @@ if (!isReady() || !props.onChallengeExpired) return; | ||
| }; | ||
| /** On mount, initialize and load the hCaptcha script. */ | ||
| onMount(() => { | ||
@@ -292,5 +275,4 @@ if (!isApiReady()) { | ||
| window[HCAPTCHA_ONLOAD_FUNCTION_NAME] = () => handleOnLoad(); | ||
| /** Insert the script in the `head` element. */ | ||
| createScriptLoader({ | ||
@@ -300,10 +282,10 @@ src: script_url | ||
| } | ||
| /** | ||
| * If the API is already ready (`window.hcaptcha` exists) | ||
| * render the captcha and trigger `onLoad` prop. | ||
| */ | ||
| else handleOnLoad(); | ||
| */else handleOnLoad(); | ||
| }); | ||
| /** On unmount, reset and remove the hCaptcha widget. */ | ||
| onCleanup(() => { | ||
@@ -313,6 +295,8 @@ const { | ||
| } = state; | ||
| if (!isReady() || !captchaId) return; // Reset any stored variables / timers when unmounting. | ||
| if (!isReady() || !captchaId) return; | ||
| // Reset any stored variables / timers when unmounting. | ||
| hcaptcha.reset(captchaId); | ||
| hcaptcha.remove(captchaId); | ||
| /** | ||
@@ -325,3 +309,2 @@ * We need to remove also the hCaptcha API on cleanup | ||
| */ | ||
| window.hcaptcha = undefined; | ||
@@ -331,8 +314,5 @@ }); | ||
| const _el$ = _tmpl$.cloneNode(true); | ||
| const _ref$ = captcha_ref; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : captcha_ref = _el$; | ||
| typeof _ref$ === "function" ? use(_ref$, _el$) : captcha_ref = _el$; | ||
| effect(() => setAttribute(_el$, "id", state.elementId)); | ||
| return _el$; | ||
@@ -339,0 +319,0 @@ })(); |
| { | ||
| "name": "solid-hcaptcha", | ||
| "description": "hCaptcha Component Library for Solid.", | ||
| "version": "0.2.5", | ||
| "version": "0.2.6", | ||
| "license": "MIT", | ||
| "type": "module", | ||
| "files": [ | ||
@@ -30,3 +31,3 @@ "dist" | ||
| "build": "rollup -c && rimraf ./dist/source ./dist/types && tsc", | ||
| "lint": "eslint ./src && tsc --noEmit", | ||
| "lint": "eslint src --fix && tsc --noEmit", | ||
| "release": "release-it" | ||
@@ -48,19 +49,19 @@ }, | ||
| "devDependencies": { | ||
| "@typescript-eslint/eslint-plugin": "^5.26.0", | ||
| "@typescript-eslint/parser": "^5.26.0", | ||
| "eslint": "^8.16.0", | ||
| "release-it": "^15.0.0", | ||
| "@typescript-eslint/eslint-plugin": "^5.46.1", | ||
| "@typescript-eslint/parser": "^5.46.1", | ||
| "eslint": "^8.29.0", | ||
| "release-it": "^15.5.1", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.74.1", | ||
| "rollup-preset-solid": "^1.4.0", | ||
| "solid-js": "^1.4.2", | ||
| "typescript": "^4.6.4" | ||
| "rollup": "^3.7.4", | ||
| "rollup-preset-solid": "^2.0.1", | ||
| "solid-js": "^1.6.5", | ||
| "typescript": "^4.9.4" | ||
| }, | ||
| "peerDependencies": { | ||
| "solid-js": "^1.4.2" | ||
| "solid-js": "^1.6.5" | ||
| }, | ||
| "dependencies": { | ||
| "@hcaptcha/types": "^1.0.2", | ||
| "@solid-primitives/script-loader": "^1.1.0" | ||
| "@hcaptcha/types": "^1.0.3", | ||
| "@solid-primitives/script-loader": "^1.1.2" | ||
| } | ||
| } |
@@ -5,8 +5,11 @@ # Solid hCaptcha Component Library | ||
| ## Description | ||
| [hCaptcha](https://www.hcaptcha.com) is a drop-replacement for reCAPTCHA that protects user privacy, rewards websites, and helps companies get their data labeled. | ||
| Sign up at [hCaptcha](https://www.hcaptcha.com) to get your sitekey today. You need a sitekey to use this library. | ||
| Sign up at [hCaptcha](https://www.hcaptcha.com) to get your sitekey today. **You need a sitekey to use this library.** | ||
| 1. [Installation](#installation) | ||
| 2. [Implementation](#implementation) | ||
| 3. [References](#references) | ||
| 4. [Debugging](#debugging) | ||
| ## Installation | ||
@@ -17,3 +20,3 @@ | ||
| ```bash | ||
| # NPM | ||
| # npm | ||
| npm install solid-hcaptcha --save | ||
@@ -24,11 +27,10 @@ | ||
| # PNPm | ||
| # pnpm | ||
| pnpm add solid-hcaptcha | ||
| ``` | ||
| ## Usage | ||
| ## Implementation | ||
| > You can see multiple use cases on the [example website](https://vexcited.github.io/solid-hcaptcha). | ||
| > You can see multiple demos on the [example website](https://vexcited.github.io/solid-hcaptcha). | ||
| ### Basic Usage | ||
@@ -99,3 +101,3 @@ | ||
| ## API | ||
| ## References | ||
@@ -111,5 +113,5 @@ ### Props | ||
| | `id` | `string` | No | `-` | Set an ID to the hCaptcha widget. Make sure each hCaptcha component generated on a single page has its own unique ID when using this prop. | | ||
| | `config` | [`HCaptchaConfig`](#advanced-configuration) | No | `{}` | Advanced configuration for the hCaptcha component. | | ||
| | `config` | [`HCaptchaConfig`](#advanced-configuration-hcaptchaconfig) | No | `{}` | Advanced configuration for the hCaptcha component. | | ||
| ### Advanced Configuration | ||
| ### Advanced Configuration (`HCaptchaConfig`) | ||
@@ -143,3 +145,3 @@ All the parameters are optional. | ||
| ### Methods from hCaptcha instance (type `HCaptchaFunctions`) | ||
| ### Methods from hCaptcha instance (`HCaptchaFunctions`) | ||
@@ -157,20 +159,13 @@ | Method | Description | | ||
| **NOTE**: Make sure to reset the hCaptcha state when you submit your form by calling the method `.resetCaptcha` on your hCaptcha Solid Component ! Passcodes are one-time use, so if your user submits the same passcode twice then it will be rejected by the server the second time. | ||
| > **Note** \ | ||
| > Make sure to reset the hCaptcha state when you submit your form by calling the method `.resetCaptcha` on your hCaptcha Solid Component! Passcodes are one-time use, so if your user submits the same passcode twice then it will be rejected by the server the second time. | ||
| Please note that "invisible" simply means that no hCaptcha button will be rendered. Whether a challenge shows up will depend on the sitekey difficulty level. Note to hCaptcha Enterprise ([BotStop](https://www.botstop.com)) users: select "Passive" or "99.9% Passive" modes to get this No-CAPTCHA behavior. | ||
| ## Development (for /package) | ||
| ## Debugging | ||
| > `git clone https://github.com/Vexcited/solid-hcaptcha` | ||
| 1. #### Make sure you don't double-import the api.js script | ||
| Importing the JS SDK twice can cause unpredictable behavior, so don't do a direct import separately if you are using solid-hcaptcha. | ||
| I use `pnpm` as the package manager, so run `pnpm install` to install the dependencies. | ||
| ### Scripts | ||
| * `pnpm build`: Lints and builds to the `dist` folder. | ||
| * `pnpm lint`: Checks if there's any TypeScript error. | ||
| * `pnpm release`: Runs `release-it` to release new versions. | ||
| ### Example Website | ||
| You can see how to contribute to the [example website](https://vexcited.github.io/solid-hcaptcha/) in the [`example` folder](/example/). | ||
| 2. #### Make sure you are using `recaptchacompat: false` if you have the reCAPTCHA JS loaded on the same page. | ||
| The hCaptcha "compatibility mode" will interfere with reCAPTCHA, as it adds properties with the same name. If for any reason you are running both hCaptcha and reCAPTCHA in parallel (they recommend only running hCaptcha) then please disable their compatibility mode. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.43%
47314
- Lines of code
- increased by1.1%
645
- Is type module
Yes
Worsened metrics
- Number of lines in readme file
- decreased by-2.94%
165