Skip to content

Commit

Permalink
fix: add es5 build loader to window, ts readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@faris-imi
faris-imi committed Feb 15, 2024
1 parent 1e08dab commit a105eea
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 31 deletions.
74 changes: 46 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,24 +31,24 @@ const { response } = await hcaptcha.execute({ async: true });
```

### Props
| Name | Values/Type | Required | Default | Description |
|-------------------|-------------|----------|-----------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
| `loadAsync` | Boolean | No | `true` | Set if the script should be loaded asynchronously. |
| `cleanup` | Boolean | No | `true` | Remove script tag after setup. |
| `crossOrigin` | String | No | `-` | Set script cross origin attribute such as "anonymous". |
| `scriptSource` | String | No | `https://js.hcaptcha.com/1/api.js` | Set script source URI. Takes precedence over `secureApi`. |
| `scriptLocation` | HTMLElement | 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. |
| `secureApi` | Boolean | No | `false` | See enterprise docs. |
| `apihost` | String | No | `-` | See enterprise docs. |
| `assethost` | String | No | `-` | See enterprise docs. |
| `endpoint` | String | No | `-` | See enterprise docs. |
| `hl` | String | No | `-` | See enterprise docs. |
| `host` | String | No | `-` | See enterprise docs. |
| `imghost` | String | No | `-` | See enterprise docs. |
| `recaptchacompat` | String | No | `-` | See enterprise docs. |
| `reportapi` | String | No | `-` | See enterprise docs. |
| `sentry` | Boolean | No | `-` | See enterprise docs. |
| `custom` | Boolean | No | `-` | See enterprise docs. |
| Name | Values/Type | Required | Default | Description |
|-------------------|-------------|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
| `loadAsync` | Boolean | No | `true` | Set if the script should be loaded asynchronously. |
| `cleanup` | Boolean | No | `true` | Remove script tag after setup. |
| `crossOrigin` | String | No | `-` | Set script cross origin attribute such as "anonymous". |
| `scriptSource` | String | No | `https://js.hcaptcha.com/1/api.js` | Set script source URI. Takes precedence over `secureApi`. |
| `scriptLocation` | HTMLElement | 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. |
| `secureApi` | Boolean | No | `false` | See enterprise docs. |
| `apihost` | String | No | `-` | See enterprise docs. |
| `assethost` | String | No | `-` | See enterprise docs. |
| `endpoint` | String | No | `-` | See enterprise docs. |
| `hl` | String | No | `-` | See enterprise docs. |
| `host` | String | No | `-` | See enterprise docs. |
| `imghost` | String | No | `-` | See enterprise docs. |
| `recaptchacompat` | String | No | `-` | See enterprise docs. |
| `reportapi` | String | No | `-` | See enterprise docs. |
| `sentry` | Boolean | No | `-` | See enterprise docs. |
| `custom` | Boolean | No | `-` | See enterprise docs. |



Expand All @@ -67,7 +67,7 @@ import '@hCaptcha/loader/dist/polyfills.js';
// ES5 version of hCaptcha Loader
import '@hCaptcha/loader/dist/index.es5.js';

hCaptchaLoader.then(function() {
hCaptchaLoader().then(function(hcaptcha) {
var element = document.createElement('div');
// hCaptcha API is ready
hcaptcha.render(element, {
Expand All @@ -76,6 +76,24 @@ hCaptchaLoader.then(function() {
});
});

```
### TypeScript
To ensure compatibility with TypeScript environments, it is necessary to either override the type (`(window as any).hCaptchaLoader()`) or declare an interface:
```ts
declare global {
interface Window {
hCaptchaLoader: any;
}
}

window.hCaptchaLoader().then(function(hcaptcha) {
var element = document.createElement('div');
// hCaptcha API is ready
hcaptcha.render(element, {
sitekey: 'YOUR_SITE_KEY',
// Additional options here
});
});
```

### CDN
Expand All @@ -89,16 +107,16 @@ The hCaptcha Loader targeted for older browsers can also be imported via CDN by
<script type="text/javascript" src="https://unpkg.com/@hcaptcha/loader@latest/dist/index.es5.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
hCaptchaLoader().then(function(hcaptcha) {
// hCaptcha API is ready
hcaptcha.render('container', {
sitekey: 'YOUR_SITE_KEY',
// Additional options here
});
<div id="container"></div>
<script type="text/javascript">
hCaptchaLoader().then(function(hcaptcha) {
// hCaptcha API is ready
hcaptcha.render('container', {
sitekey: 'YOUR_SITE_KEY',
// Additional options here
});
</script>
});
</script>
</body>
</html>
```
2 changes: 1 addition & 1 deletion lib/esbuild.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ if (WATCH) {
},
outfile: resolve(DIST, 'index.es5.js'),
footer: {
js: 'var hCaptchaLoader = hCaptchaLoaderPkg.hCaptchaLoader;',
js: 'window.hCaptchaLoader = hCaptchaLoaderPkg.hCaptchaLoader;',
},
treeShaking: true,
target: [
Expand Down
4 changes: 2 additions & 2 deletions lib/src/loader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function hCaptchaApi(params: ILoaderParams = { cleanup: true }, sentry: S
export async function loadScript(params, retries = 0) {
const message = retries < MAX_RETRIES ? 'Retry loading hCaptcha Api' : 'Exceeded maximum retries';

const sentry = initSentry(params && params.sentry);
const sentry = initSentry(params.sentry);

try {

Expand All @@ -125,6 +125,6 @@ export async function loadScript(params, retries = 0) {
}


export async function hCaptchaLoader(params) {
export async function hCaptchaLoader(params = {}) {
return await loadScript(params);
}

0 comments on commit a105eea

Please sign in to comment.