vanilla-hcaptcha - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

package.json

 {
   "name": "vanilla-hcaptcha",
   "description": "Vanilla Web Component for hCaptcha. 0 dependencies. <1kb gzipped.",
-  "version": "1.0.0-alpha.2",
-  "main": "dist/hcaptcha-component.min.js",
+  "version": "1.0.0-alpha.3",
+  "main": "dist/index.min.js",
+  "types": "dist/hcaptcha.d.ts",
   "author": {
@@ -10,2 +11,7 @@ "name": "Sergiu Danalachi <[e-mail]>",
   },
+  "files": [
+    "dist",
+    "src",
+    "demo.html"
+  ],
   "homepage": "https://github.com/DSergiu/vanilla-hcaptcha",
@@ -20,6 +26,13 @@ "private": false,
   "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.18.0",
+    "@hcaptcha/types": "^1.0.1",
     "@rollup/plugin-typescript": "^8.3.2",
     "jest": "^26.6.3",
     "rollup": "^2.74.1",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup-plugin-filesize": "^9.1.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4"
   },
@@ -38,3 +51,4 @@ "keywords": [
     "react.js"
-  ]
+  ],
+  "gitHead": "bcf0fa7bca98b88d1e334fb4f92535aed70c6bd2"
 }

README.md

@@ -1,2 +0,4 @@
-# hCaptcha - Vanilla Web Component 
+# hCaptcha - Vanilla Web Component
+A Vanilla Web Component wrapper for [hCaptcha](https://docs.hcaptcha.com/).
+It allows for easy integration with hCaptcha in many modern web frameworks.
 
@@ -7,6 +9,16 @@ <img width="300px" src="https://assets-global.website-files.com/5c73e7ea3f8bb2a85d2781db/5c73e7ea3f8bb23b4c278261_hcaptcha-logo-landscape.svg" alt="hCaptcha logo" title="hCaptcha logo" />
 
+[Install](#install) | [Usage](#usage) | [Attributes](#attributes) | [Events](#events) | [Methods](#methods)
+
 ## Install
+
+Use your favorite package manager:
 ```bash
 yarn add vanilla-hcaptcha
 ```
+
+```bash
+npm install vanilla-hcaptcha
+```
+
+Or via cdn:
 ```html
@@ -18,13 +30,14 @@ <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
 
-Being a vanilla web component, it is relatively [easy](https://custom-elements-everywhere.com) to integrate in mainstream web frameworks such as: React, Vue.js, Angular, Stencil.js, etc. See below some examples.
+Being a vanilla web component, it is relatively [easy](https://custom-elements-everywhere.com) to integrate in
+mainstream web frameworks such as: React, Vue.js, Angular, Stencil.js, etc. See below some examples.
 
+* [Vue.JS](#vuejs)
+* [React](#reactjs)
+* [Angular 2+](#angular)
+* [Angular.JS](#angularjs)
+* [Vanilla](#vanillajs)
+* You can find more examples in the `<root>/examples/cdn` directory.
 
-* [Vue.JS](#vuejs)  
-* [React](#reactjs)  
-* [Angular 2+](#angular)  
-* [Angular.JS](#angularjs)  
-* [Vanilla](#vanillajs)  
+### Vue.JS
 
-
-### Vue.JS
 > Example: display invisible hCaptcha and render programmatically.
@@ -43,12 +56,11 @@
     methods: {
-        onCaptchaLoaded(e) {
-          console.log("Captcha is loaded");
-          e.target.render(); // Show captcha programmatically
+        onError(e) {
+          console.log('hCaptcha error: ', e);
         },
         onCaptchaVerified(e) {
-          console.log("Captcha is verified", { key: e.key });
+          console.log("Captcha is verified", { token: e.token, eKey: e.eKey });
         }
     }
     ```
-   
+
 3. Integrate in your vue component
@@ -58,5 +70,5 @@ ```html
         ...
-        <h-captcha site-key="10000000-ffff-ffff-ffff-000000000001"
+        <h-captcha site-key="781559eb-513a-4bae-8d29-d4af340e3624"
                    size="invisible"
-                   @loaded="onCaptchaLoaded"
+                   @error="onError"
                    @verified="onCaptchaVerified"></h-captcha>
@@ -68,2 +80,3 @@ ...
 ### React.JS
+
 > Example: display normal size hCaptcha with dark theme.
@@ -81,3 +94,3 @@
        signupCaptcha.addEventListener('verified', (e) => {
-         console.log('verified event', { key: e.key });
+         console.log('verified event', { token: e.token });
        });
@@ -90,9 +103,9 @@ }
     <h-captcha id="signupCaptcha"
-               site-key="10000000-ffff-ffff-ffff-000000000001"
+               site-key="781559eb-513a-4bae-8d29-d4af340e3624"
                size="normal"
-               theme="dark"
-               onVerified="onCaptchaVerified"></h-captcha>
+               theme="dark"></h-captcha>
    ```
 
 ### Angular
+
 > Example: display default hCaptcha.
@@ -114,115 +127,132 @@
 ### Angular.JS
+
 > Example: display compact hCaptcha with dark theme.
 
-1.
-   ```html
-   <!doctype html>
-   <html ng-app="angularjsApp">
-   <head>
-      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-      <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
-   
-      <script>
-         angular.module('angularjsApp', [])
-                 .controller('ExampleController', function () {
-                    this.siteKey = "10000000-ffff-ffff-ffff-000000000001";
+```html
+<!doctype html>
+<html ng-app="angularjsApp">
+<head>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
+
+    <script>
+        angular.module('angularjsApp', [])
+                .controller('ExampleController', function () {
+                    this.siteKey = "781559eb-513a-4bae-8d29-d4af340e3624";
                     this.onCaptchaVerified = function (e) {
-                       console.log('verified event', { key: e.key });
+                        console.log('verified event', {token: e.token});
                     };
                     this.onCaptchaError = function (e) {
-                       console.log('error event', { error: e.error });
+                        console.log('error event', {error: e.error});
                     };
-                 });
-      </script>
-   </head>
-   <body>
-   <div ng-controller="ExampleController as ctrl">
-      <h-captcha site-key="{{ctrl.siteKey}}"
-                 size="compact"
-                 theme="dark"
-                 ng-on-verified="ctrl.onCaptchaVerified($event)"
-                 ng-on-error="ctrl.onCaptchaError($event)"
-      ></h-captcha>
-   </div>
-   </body>
-   </html>
-   ```
+                });
+    </script>
+</head>
+<body>
+<div ng-controller="ExampleController as ctrl">
+    <h-captcha site-key="{{ctrl.siteKey}}"
+               size="compact"
+               theme="dark"
+               ng-on-verified="ctrl.onCaptchaVerified($event)"
+               ng-on-error="ctrl.onCaptchaError($event)"
+    ></h-captcha>
+</div>
+</body>
+</html>
+```
 
 ### Vanilla.JS
-> Example: display normal size hCaptcha accessible by keyboard (see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)). 
 
-1. 
-    ```html
-    <script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
+> Example: display normal size hCaptcha accessible by keyboard (see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)).
 
-    <h-captcha id="signupCaptcha"
-               site-key="10000000-ffff-ffff-ffff-000000000001"
-               size="normal"
-               tabindex="0"></h-captcha>
-    
-    <script>
-        const signupCaptcha = document.getElementById('signupCaptcha');
-        
-        signupCaptcha.addEventListener('verified', (e) => {
-            console.log('verified event', { key: e.key });
-        });
-        signupCaptcha.addEventListener('error', (e) => {
-            console.log('error event', { error: e.error });
-        });
-    </script>
-    ```
+```html
 
-## Docs
+<script src="https://cdn.jsdelivr.net/npm/vanilla-hcaptcha"></script>
 
-#### Attributes
+<h-captcha id="signupCaptcha"
+           site-key="781559eb-513a-4bae-8d29-d4af340e3624"
+           size="normal"
+           tabindex="0"></h-captcha>
 
-|Attribute|Values/Type|Required|Default|Description|
-|---|---|---|---|---|
-|`sitekey`|String|**Yes**|`-`|Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey.|
-|`size`|String (normal, compact, invisible)|No|`normal`|This specifies the "size" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal.|
-|`theme`|String (light, dark)|No|`light`|hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.|
-|`tabindex`|Integer|No|`0`|Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.|
-|`language`|String (ISO 639-2 code)|No|`auto`|hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.|
-|`reCaptchaCompat`|Boolean|No|`true`|Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha.|
-|`challengeContainer`|String|No|`-`|A custom element ID to render the hCaptcha challenge.|
-|`rqdata`|String|No|-|See Enterprise docs.|
-|`sentry`|Boolean|No|-|See Enterprise docs.|
-|`apiendpoint`|String|No|-|See Enterprise docs.|
-|`endpoint`|String|No|-|See Enterprise docs.|
-|`reportapi`|String|No|-|See Enterprise docs.|
-|`assethost`|String|No|-|See Enterprise docs.|
-|`imghost`|String|No|-|See Enterprise docs.|
+<script>
+    const signupCaptcha = document.getElementById('signupCaptcha');
 
-#### Events
+    signupCaptcha.addEventListener('verified', (e) => {
+        console.log('verified event', {token: e.token});
+    });
+    signupCaptcha.addEventListener('error', (e) => {
+        console.log('error event', {error: e.error});
+    });
+</script>
+```
 
-|Event|Params|Description|
-|---|---|---|
-|`error`|`err`|When an error occurs. Component will reset immediately after an error.|
-|`verified`|`token, eKey`|When challenge is completed. The `token` and an `eKey` are passed along.|
-|`expired`|-|When the current token expires.|
-|`challengeExpired`|-|When the unfinished challenge expires.|
-|`opened`|-|When the challenge is opened.|
-|`closed`|-|When the challenge is closed.|
-|`reset`|-|When the challenge is reset.|
-|`rendered`|-|When the challenge is rendered.|
-|`executed`|-|When the challenge is executed.|
+## Attributes
 
-#### Methods
+The web component allows specifying attributes. These are split into two categories: render and api attributes.
 
-|Method|Description|
-|---|---|
-|`execute()`|Programmatically trigger a challenge request.|
-|`reset()`|Resets the hCaptcha which requires user to fill captcha again.|
-|`remove()`|Removes the component from DOM.|
+### Render Attributes
 
+Conveniently you can set the render properties as attributes to the web component.
+If you would like to programmatically call the `render()` method, you can set `auto-render="false"` property.
 
-## Develop & Test
+| Attribute             | Values/Type                         | Default  | Description                                                                                                                               |
+|-----------------------|-------------------------------------|----------|-------------------------------------------------------------------------------------------------------------------------------------------|
+| `auto-render`         | Boolean                             | `true`   | When "false" it prevents automatic rendering of the checkbox.                                                                             |
+| `sitekey` (required)  | String                              | -        | Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey.                                             |
+| `size`                | String (normal, compact, invisible) | `normal` | This specifies the "size" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal. |
+| `theme`               | String (light, dark)                | `light`  | hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.                                         |
+| `tabindex`            | Integer                             | `0`      | Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.                         |
+| `hl`                  | String (ISO 639-2 code)             | -        | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.                                  |
+| `challenge-container` | String                              | -        | A custom element ID to render the hCaptcha challenge.                                                                                     |
+| `rqdata`              | String                              | -        | See Enterprise docs.                                                                                                                      |
 
+### API Attributes
+
+These attributes are optional.
+
+| Attribute         | Values/Type                | Default | Description                                                                                                        |
+|-------------------|----------------------------|---------|--------------------------------------------------------------------------------------------------------------------|
+| `reCaptchaCompat` | Boolean                    | `true`  | Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha.  |
+| `hl`              | String (ISO 639-2 code)    | -       | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.           |
+| `jsapi`           | String                     | -       | See Enterprise docs.                                                                                               |
+| `endpoint`        | String                     | -       | See Enterprise docs.                                                                                               |
+| `reportapi`       | String                     | -       | See Enterprise docs.                                                                                               |
+| `assethost`       | String                     | -       | See Enterprise docs.                                                                                               |
+| `imghost`         | String                     | -       | See Enterprise docs.                                                                                               |
+| `sentry`          | Boolean                    | -       | See Enterprise docs.                                                                                               |
+
+
+## Events
+
+Depending on the use case, you can or not listen to the following events.
+
+| Event                | Params         | Description                                                               |
+|----------------------|----------------|---------------------------------------------------------------------------|
+| `error`              | `err`          | When an error occurs. Component will reset immediately after an error.    |
+| `verified`           | `token, eKey`  | When challenge is completed. The `token` and the `eKey` are passed along. |
+| `expired`            | -              | When the current token expires.                                           |
+| `challenge-expired`  | -              | When the unfinished challenge expires.                                    |
+| `opened`             | -              | When the challenge is opened.                                             |
+| `closed`             | -              | When the challenge is closed.                                             |
+
+## Methods
+
+The following methods allow for programmatic control, necessary only in case of a custom hCaptcha verification flow.
+
+| Method           | Description                                                                                                              |
+|------------------|--------------------------------------------------------------------------------------------------------------------------|
+| `render(config)` | Renders the checkbox. Must pass the full render config, no attributes are injected.                                      |
+| `execute()`      | Triggers a verification request.                                                                                         |
+| `executeAsync()` | Triggers a verification request and receive a Promise which resolved with the token results or throws in case of errors. |
+| `reset()`        | Resets the hCaptcha which requires user to fill captcha again.                                                           |
+
+## Commands
+
 * `yarn build`
   > Build a production version of the component.
-  
+
 * `yarn dev`
   > Build dev version with hot reload.
 
-* `yarn build`
+* `yarn test`
   > Runs unit tests.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33734

increased by32.78%

Lines of code

355

increased by17.94%

Number of lines in readme file

251

increased by13.57%

Worsened metrics

Dev dependency count

11

increased by175%

Number of package files

9

decreased by-10%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes