feat: lib

README.md

@@ -0,0 +1,46 @@
+# Svelte Turnstile
+
+[Cloudflare's Turnstile](https://developers.cloudflare.com/turnstile/) is a new CAPTCHA alternative, this library allows you to easily integrate it into your svelte projects.
+
+# Installing
+
+```sh
+npm install svelte-turnstile -D
+```
+
+# Using
+
+The only required prop is the `siteKey` which you can get from [adding a site here](https://dash.cloudflare.com/?to=/:account/turnstile).
+
+```html
+<script>
+    import { Turnstile } from 'svelte-turnstile';
+</script>
+
+<Turnstile siteKey="0x4AAAAAAAAn8CCb_WenRWb-" />
+```
+
+## Props
+
+| Prop       | Type                          | Description                                                                   | Required |
+|------------|-------------------------------|-------------------------------------------------------------------------------|----------|
+| `siteKey`  | `string`                      | sitekey for your website                                                      | ✅       |
+| `theme`    | `'light' \| 'dark' \| 'auto'` | colour theme of the widget (defaults to auto)                                 | ❌       |
+| `action`   | `string`                      | A string that can be used to differentiate widgets, returned on validation    | ❌       |
+| `cData`    | `string`                      | A string that can attach customer data to a challange, returned on validation | ❌       |
+| `tabIndex` | `number`                      | Used for accessibility (defaults to 0)                                        | ❌       |
+
+For more information about some of the props [checkout the Cloudflare Documentation](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations).
+
+## Events
+
+| Event                | Data                | Description                                                                  |
+|----------------------|---------------------|------------------------------------------------------------------------------|
+| `turnstile-error`    | `{}`                | Emitted when a user fails verification                                       |
+| `turnstile-expired`  | `{}`                | Emitted when a challenge expires, this library will auto-renew the challenge |
+| `turnstile-callback` | `{ token: string }` | Emitted when a user passes a challenge                                       |
+
+# Support
+
+-   Join the [discord](https://discord.gg/2Vd4wAjJnm)<br>
+-   Create a issue on the [github](https://github.com/ghostdevv/svelte-turnstile)

src/lib/Turnstile.svelte

@@ -0,0 +1,104 @@
+<script context="module" lang="ts">
+    declare global {
+        interface Window {
+            onloadTurnstileCallback: () => void;
+            turnstile: {
+                render: (
+                    element: string | HTMLElement,
+                    options: TurnstileOptions,
+                ) => string;
+                reset: (widgetId: string) => void;
+                getResponse: (widgetId: string) => string | undefined;
+            };
+        }
+    }
+
+    interface TurnstileOptions {
+        sitekey: string;
+        action?: string;
+        cData?: string;
+        callback?: (token: string) => void;
+        'error-callback'?: () => void;
+        'expired-callback'?: () => void;
+        theme?: 'light' | 'dark' | 'auto';
+        tabindex?: number;
+    }
+</script>
+
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    let loaded = false;
+    let mounted = false;
+    let node: HTMLElement;
+
+    let widgetId: string;
+
+    export let siteKey: string;
+
+    export let theme: TurnstileOptions['theme'] = 'auto';
+    export let action: string | undefined = undefined;
+    export let cData: string | undefined = undefined;
+    export let tabIndex = 0;
+
+    onMount(() => {
+        mounted = true;
+
+        return () => {
+            mounted = false;
+            loaded = false;
+        };
+    });
+
+    function loadCallback() {
+        console.log('Turnstile loaded');
+        loaded = true;
+    }
+
+    function error() {
+        dispatch('turnstile-error', {});
+    }
+
+    function expired() {
+        dispatch('turnstile-expired', {});
+
+        if (widgetId) {
+            window.turnstile.reset(widgetId);
+        }
+    }
+
+    function callback(token: string) {
+        dispatch('turnstile-callback', { token });
+    }
+
+    $: if (loaded && node) {
+        console.log('Rendering Turnstile');
+
+        widgetId = window.turnstile.render(node, {
+            'expired-callback': expired,
+            'error-callback': error,
+            callback,
+
+            sitekey: siteKey,
+
+            tabindex: tabIndex,
+            action,
+            theme,
+            cData,
+        });
+    }
+</script>
+
+<svelte:head>
+    {#if mounted}
+        <script
+            src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+            on:load={loadCallback}
+            async></script>
+    {/if}
+</svelte:head>
+
+<div bind:this={node} />

src/lib/events.d.ts

@@ -0,0 +1,9 @@
+declare namespace svelte.JSX {
+    interface HTMLProps<T> {
+        'onturnstile-error'?: (event: CustomEvent<{}>) => void;
+        'onturnstile-expired'?: (event: CustomEvent<{}>) => void;
+        'onturnstile-callback'?: (
+            event: CustomEvent<{ token: string }>,
+        ) => void;
+    }
+}

src/lib/index.d.ts

@@ -0,0 +1,2 @@
+import './events';
+export { default as Turnstile } from './Turnstile.svelte';

src/lib/index.ts

@@ -0,0 +1 @@
+export { default as Turnstile } from './Turnstile.svelte';

src/routes/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Turnstile } from '$lib';
+</script>
+
+<Turnstile
+    siteKey="0x4AAAAAAAAn8CCb_WenRWb-"
+    on:turnstile-callback={(e) => alert(e.detail.token)}
+    on:turnstile-error={() => alert('error')}
+    on:turnstile-expired={() => alert('expire')} />