-
-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: @svelte-put/cloudflare-turnstile first dev version
- Loading branch information
1 parent
b988b59
commit 35196bf
Showing
18 changed files
with
525 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@svelte-put/cloudflare-turnstile': minor | ||
| --- | ||
|
|
||
| first release, extracted from sveltevietnam.dev |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| # Changelog |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <div align="center"> | ||
|
|
||
| # `@svelte-put/cloudflare-turnstile` | ||
|
|
||
| [![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl] | ||
|
|
||
| Svelte action `use:cloudflare-turnstile` - event for clicking outside a node | ||
|
|
||
| </div> | ||
|
|
||
| ## `svelte-put` | ||
|
|
||
| This package is part of the [@svelte-put][github.monorepo] family. For contributing guideline and more, refer to its [readme][github.monorepo]. | ||
|
|
||
| ## Usage & Documentation | ||
|
|
||
| [See the dedicated documentation page here][docs]. | ||
|
|
||
| ## Quick Start | ||
|
|
||
| ```html | ||
| <!-- component.svelte --> | ||
| <script lang="ts"> | ||
| import { turnstile } from '@svelte-put/cloudflare-turnstile'; | ||
| </script> | ||
|
|
||
| <div | ||
| use:turnstile | ||
| turnstile-sitekey="1x00000000000000000000AA" | ||
| turnstile-theme="dark" | ||
| turnstile-size="normal" | ||
| /> | ||
| ``` | ||
|
|
||
| ## [Changelog][github.changelog] | ||
|
|
||
| <!-- github specifics --> | ||
|
|
||
| [github.monorepo]: https://github.com/vnphanquang/svelte-put | ||
| [github.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/actions/cloudflare-turnstile/CHANGELOG.md | ||
| [github.issues]: https://github.com/vnphanquang/svelte-put/issues?q= | ||
|
|
||
| <!-- heading badge --> | ||
|
|
||
| [npm.badge]: https://img.shields.io/npm/v/@svelte-put/cloudflare-turnstile | ||
| [npm]: https://www.npmjs.com/package/@svelte-put/cloudflare-turnstile | ||
| [bundlephobia.badge]: https://img.shields.io/bundlephobia/minzip/@svelte-put/cloudflare-turnstile?label=minzipped | ||
| [bundlephobia]: https://bundlephobia.com/package/@svelte-put/cloudflare-turnstile | ||
| [repl]: https://svelte.dev/repl/9e5f9ee41c2c45aa8523993e357f6e78 | ||
| [repl.badge]: https://img.shields.io/static/v1?label=&message=Svelte+REPL&logo=svelte&logoColor=fff&color=ff3e00 | ||
| [docs]: https://svelte-put.vnphanquang.com/docs/cloudflare-turnstile | ||
| [docs.badge]: https://img.shields.io/badge/-Docs%20Site-blue |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| { | ||
| "name": "@svelte-put/cloudflare-turnstile", | ||
| "version": "0.0.0", | ||
| "description": "Action for rendering Cloudflare turnstile into HTML node", | ||
| "main": "src/index.js", | ||
| "module": "src/index.js", | ||
| "types": "types/index.d.ts", | ||
| "type": "module", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./types/index.d.ts", | ||
| "import": "./src/index.js" | ||
| } | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "files": [ | ||
| "src", | ||
| "types" | ||
| ], | ||
| "scripts": { | ||
| "lint": "eslint --ignore-path .gitignore \"./**/*/*{ts,js,cjs}\"", | ||
| "format": "prettier --check --ignore-path .gitignore \"./**/*.{ts,js,cjs}\"", | ||
| "dts": "dts-buddy && prettier types/index.d.ts --write && publint", | ||
| "prepublishOnly": "pnpm dts" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/vnphanquang/svelte-put.git" | ||
| }, | ||
| "keywords": [ | ||
| "svelte", | ||
| "action", | ||
| "turnstile", | ||
| "cloudflare", | ||
| "captcha" | ||
| ], | ||
| "author": "Quang Phan", | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/vnphanquang/svelte-put/issues" | ||
| }, | ||
| "homepage": "https://svelte-put.vnphanquang.com/docs/cloudflare-turnstile", | ||
| "devDependencies": { | ||
| "@svelte-put/tsconfig": "workspace:*", | ||
| "dts-buddy": "^0.4.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // Copyright (c) Quang Phan. All rights reserved. Licensed under the MIT license. | ||
|
|
||
| /** | ||
| * `use:turnstile` - svelte action that renders cloudflare turnstile into an HTML node. | ||
| * | ||
| * @packageDocumentation | ||
| */ | ||
|
|
||
| export * from './turnstile.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| import { ActionReturn, Action } from 'svelte/action'; | ||
|
|
||
| export type Turnstile = { | ||
| render: (element: string | HTMLElement, config: TurnstileConfig) => string; | ||
| reset: (widgetId: string) => void; | ||
| remove: (widgetId: string) => void; | ||
| getResponse: (widgetId: string) => string | undefined; | ||
| isExpired: (widgetId: string) => boolean; | ||
| execute: (container: string | HTMLElement, config?: TurnstileConfig) => void; | ||
| }; | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| turnstile?: Turnstile; | ||
| } | ||
| } | ||
|
|
||
| export type TurnstileConfig = TurnstileDataConfig & TurnstileEventConfig; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| export type TurnstileDataConfig = { | ||
| sitekey: string; | ||
| action?: string; | ||
| cData?: string; | ||
| execution?: string; | ||
| theme?: 'light' | 'dark' | 'auto'; | ||
| language?: string; | ||
| tabindex?: number; | ||
| 'response-field'?: boolean; | ||
| 'response-field-name'?: string; | ||
| size?: 'normal' | 'compact'; | ||
| retry?: 'auto' | 'never'; | ||
| 'retry-interval'?: number; | ||
| 'refresh-expired'?: 'auto' | 'manual' | 'never' | 'auto'; | ||
| appearance?: 'always' | 'execute' | 'interaction-only'; | ||
| }; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| export type TurnstileEventConfig = { | ||
| callback?: (token: string) => void; | ||
| 'error-callback'?: (code: string) => void; | ||
| 'expired-callback'?: () => void; | ||
| 'before-interactive-callback'?: () => void; | ||
| 'after-interactive-callback'?: () => void; | ||
| 'unsupported-callback'?: () => void; | ||
| 'timeout-callback'?: () => void; | ||
| }; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| export type TurnstileDataAttributes = { | ||
| [K in keyof TurnstileDataConfig as K extends string | ||
| ? `turnstile-${K}` | ||
| : never]: TurnstileDataConfig[K]; | ||
| }; | ||
|
|
||
| export type TurnstileEventDetail<T extends Record<string, any> = Record<string, never>> = { | ||
| widgetId: string; | ||
| turnstile: Turnstile; | ||
| } & T; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| export type TurnstileEventAttributes = { | ||
| 'on:turnstile'?: (event: CustomEvent<TurnstileEventDetail<{ token: string }>>) => void; | ||
| 'on:turnstile:error'?: (event: CustomEvent<TurnstileEventDetail<{ code: string }>>) => void; | ||
| 'on:turnstile:expired'?: (event: CustomEvent<TurnstileEventDetail>) => void; | ||
| 'on:turnstile:before-interactive'?: (event: CustomEvent<TurnstileEventDetail>) => void; | ||
| 'on:turnstile:after-interactive'?: (event: CustomEvent<TurnstileEventDetail>) => void; | ||
| 'on:turnstile:unsupported'?: (event: CustomEvent<TurnstileEventDetail>) => void; | ||
| 'on:turnstile:timeout'?: (event: CustomEvent<TurnstileEventDetail>) => void; | ||
| }; | ||
|
|
||
| /** | ||
| * @see {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations | Cloudflare Turnstile Docs} | ||
| * @public | ||
| */ | ||
| export type TurnstileAttributes = TurnstileDataAttributes & | ||
| TurnstileEventAttributes & { | ||
| /** | ||
| * default to `https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit` | ||
| */ | ||
| 'turnstile-script-src'?: string; | ||
| readonly 'turnstile-widget-id'?: string; | ||
| readonly 'turnstile-rendered'?: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * parameter received from action input | ||
| * @public | ||
| */ | ||
| export type TurnstileParameter = undefined; | ||
|
|
||
| /** @public */ | ||
| export type TurnstileAction = Action<HTMLElement, TurnstileParameter, TurnstileAttributes>; | ||
|
|
||
| /** @public */ | ||
| export type TurnstileActionReturn = ActionReturn<TurnstileParameter, TurnstileAttributes>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| /** | ||
| * @param {HTMLElement} node | ||
| * @returns {import('./public').TurnstileActionReturn} | ||
| */ | ||
| export function turnstile(node) { | ||
| /** @type {string | undefined} */ | ||
| let widgetId = undefined; | ||
|
|
||
| if (!window.turnstile) { | ||
| const script = document.createElement('script'); | ||
| const src = | ||
| node.getAttribute('turnstile-script-src') ?? | ||
| 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit'; | ||
|
|
||
| script.setAttribute('src', src); | ||
| document.head.appendChild(script); | ||
| script.addEventListener('load', load); | ||
| } else if (!widgetId) { | ||
| load(); | ||
| } | ||
|
|
||
| /** | ||
| * @template {keyof import('./public').TurnstileEventAttributes extends `on:${infer K}` ? K : never} E | ||
| * @template [D=Parameters<NonNullable<import('./public').TurnstileEventAttributes[`on:${E}`]>>[0]['detail'] extends import('./public').TurnstileEventDetail<infer T extends Record<string, any>> ? T : never] | ||
| * @param {E} event | ||
| * @param {D} detail | ||
| */ | ||
| function dispatchEvent(event, detail) { | ||
| /** @type {D} */ | ||
| detail = { | ||
| widgetId, | ||
| turnstile: window.turnstile, | ||
| ...detail, | ||
| }; | ||
| node.dispatchEvent(new CustomEvent(event, { detail })); | ||
| } | ||
|
|
||
| function load() { | ||
| const sitekey = node.getAttribute('turnstile-sitekey'); | ||
| if (!sitekey) throw new Error('Attribute `turnstile-sitekey` is required but not provided'); | ||
|
|
||
| /** @type {import('./public').TurnstileConfig} */ | ||
| const config = { | ||
| // data | ||
| sitekey, | ||
| action: node.getAttribute('turnstile-action') ?? undefined, | ||
| cData: node.getAttribute('turnstile-cData') ?? undefined, | ||
| execution: node.getAttribute('turnstile-execution') ?? undefined, | ||
| theme: | ||
| /** @type {import('./public').TurnstileConfig['theme']} */ ( | ||
| node.getAttribute('turnstile-theme') | ||
| ) ?? undefined, | ||
| language: node.getAttribute('turnstile-language') ?? undefined, | ||
| tabindex: parseInt(node.getAttribute('turnstile-tabindex') ?? '0'), | ||
| 'response-field': node.hasAttribute('turnstile-response-field'), | ||
| 'response-field-name': node.getAttribute('turnstile-response-field-name') ?? undefined, | ||
| size: | ||
| /** @type {import('./public').TurnstileConfig['size']} */ ( | ||
| node.getAttribute('turnstile-size') | ||
| ) ?? undefined, | ||
| retry: | ||
| /** @type {import('./public').TurnstileConfig['retry']} */ ( | ||
| node.getAttribute('turnstile-retry') | ||
| ) ?? undefined, | ||
| 'retry-interval': parseInt(node.getAttribute('turnstile-retry-interval') ?? '0'), | ||
| 'refresh-expired': | ||
| /** @type {import('./public').TurnstileConfig['refresh-expired']} */ ( | ||
| node.getAttribute('turnstile-refresh-expired') | ||
| ) ?? undefined, | ||
| appearance: | ||
| /** @type {import('./public').TurnstileConfig['appearance']} */ ( | ||
| node.getAttribute('turnstile-appearance') | ||
| ) ?? undefined, | ||
|
|
||
| // events | ||
| callback: (token) => { | ||
| dispatchEvent('turnstile', { token }); | ||
| node.toggleAttribute('turnstile-rendered', true); | ||
| }, | ||
| 'error-callback': (code) => { | ||
| dispatchEvent('turnstile:error', { code }); | ||
| }, | ||
| 'expired-callback': (...params) => { | ||
| // TODO: requires testing | ||
| dispatchEvent('turnstile:expired', { ...(params.length ? { params } : {}) }); | ||
| }, | ||
| 'before-interactive-callback': () => { | ||
| dispatchEvent('turnstile:before-interactive', {}); | ||
| }, | ||
| 'after-interactive-callback': () => { | ||
| dispatchEvent('turnstile:after-interactive', {}); | ||
| }, | ||
| 'unsupported-callback': (...params) => { | ||
| // TODO: requires testing | ||
| dispatchEvent('turnstile:unsupported', { ...(params.length ? { params } : {}) }); | ||
| }, | ||
| 'timeout-callback': (...params) => { | ||
| // TODO: requires testing | ||
| dispatchEvent('turnstile:timeout', { ...(params.length ? { params } : {}) }); | ||
| }, | ||
| }; | ||
|
|
||
| widgetId = window.turnstile?.render(node, config); | ||
| if (widgetId) { | ||
| node.setAttribute('turnstile-widget-id', widgetId); | ||
| } | ||
| } | ||
|
|
||
| return { | ||
| destroy() { | ||
| if (widgetId) { | ||
| window.turnstile?.remove(widgetId); | ||
| widgetId = undefined; | ||
| } | ||
| }, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "include": ["src/**/*"], | ||
| "extends": "@svelte-put/tsconfig/base.package.js.json" | ||
| } |
Oops, something went wrong.