From 0c9a37a95c459e54cf8aca9b106637ec5605d433 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Wed, 12 Feb 2025 22:43:50 -0500
Subject: [PATCH 1/2] =?UTF-8?q?build:=20=E2=AC=86=EF=B8=8F=20upgrade=20to?=
 =?UTF-8?q?=20svelte=205?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index b3593fd..1082250 100644
--- a/package.json
+++ b/package.json
@@ -9,21 +9,21 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "3.3.1",
-		"@sveltejs/kit": "2.7.3",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.17.1",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^3.1.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"ghostsui": "^1.6.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
 		"sass": "^1.83.1",
-		"svelte": "^4.2.19",
+		"svelte": "^5.20.0",
 		"svelte-check": "^4.1.1",
 		"sveltekit-superforms": "^2.22.1",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
-		"vite": "^5.4.11",
+		"vite": "^6.1.0",
 		"zod": "^3.24.1"
 	},
 	"peerDependencies": {

From 90c9960c58f59df463e38a68330621ff28690467 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Wed, 12 Feb 2025 22:44:13 -0500
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20update=20t?=
 =?UTF-8?q?o=20svelte=205=20syntax?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Turnstile.svelte           | 254 +++++++----------------------
 src/lib/index.ts                   |  10 +-
 src/lib/types.d.ts                 |  65 --------
 src/routes/+layout.svelte          |   4 +-
 src/routes/+page.svelte            |  20 ++-
 src/routes/superforms/+page.svelte |   6 +-
 6 files changed, 78 insertions(+), 281 deletions(-)
 delete mode 100644 src/lib/types.d.ts

diff --git a/src/lib/Turnstile.svelte b/src/lib/Turnstile.svelte
index e1f3461..2adcb99 100644
--- a/src/lib/Turnstile.svelte
+++ b/src/lib/Turnstile.svelte
@@ -1,193 +1,73 @@
+<script lang="ts" module>
+	let loadPromise: Promise<void> | undefined;
+
+	function addScript(): Promise<void> {
+		if (!(window && 'document' in window)) {
+			return new Promise(() => {});
+		}
+		if (loadPromise === undefined) {
+			loadPromise = new Promise((resolve) => {
+				const script = document.createElement('script');
+				script.src =
+					'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+				script.async = true;
+				script.addEventListener('load', () => resolve(), {
+					once: true,
+				});
+				document.head.appendChild(script);
+			});
+		}
+		return loadPromise;
+	}
+</script>
+
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
 	import type { Action } from 'svelte/action';
-	import type { Events } from './types';
 	import type {
 		RenderParameters,
 		TurnstileObject,
 		WidgetId,
 	} from 'turnstile-types';
 
-	const dispatch = createEventDispatcher<Events>();
-
-	let loaded = typeof window != 'undefined' && 'turnstile' in window;
-	let mounted = false;
-
-	/**
-	 * Represents a rendered Turnstile widget.  Used to identify a specific widget when calling
-	 * Turnstile methods.
-	 */
-	export let widgetId: WidgetId | null = null;
-
-	/**
-	 * Turnstile is Cloudflare’s smart CAPTCHA alternative. It can be embedded into any website
-	 * without sending traffic through Cloudflare and works without showing visitors a CAPTCHA.
-	 * @see https://developers.cloudflare.com/turnstile
-	 */
-	export let turnstile: TurnstileObject | null = null;
-	$: turnstile = (loaded && window.turnstile) || null;
-
-	/**
-	 * Every widget has a sitekey. This sitekey is associated with the corresponding
-	 * widget configuration and is created upon the widget creation.
-	 */
-	export let siteKey: RenderParameters['sitekey'];
-
-	/**
-	 * Controls when the widget is visible:
-	 * - `"always"` - The widget is visible at all times.
-	 * - `"execute"` - The widget is visible only after the challenge begins.
-	 * - `"interaction-only"` - The widget is visible only when an interaction is required.
-	 *
-	 * If a widget is visible, its appearance can be controlled via the `appearance` parameter.
-	 * @see
-	 * [appearance-modes](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#appearance-modes)
-	 */
-	export let appearance: RenderParameters['appearance'] = 'always';
-
-	/**
-	 * Language to display, either `"auto"` or an ISO 639-1 two-letter language code.
-	 * @see [language support FAQ](https://developers.cloudflare.com/turnstile/frequently-asked-questions/#what-languages-does-turnstile-support)
-	 */
-	export let language: RenderParameters['language'] = 'auto' as const;
-
-	/**
-	 * Execution controls when to obtain the token of the widget and can be on `"render"` (default) or on `"execute"`.
-	 * @default "render"
-	 * @see [Execution modes](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#execution-modes)
-	 */
-	export let execution: RenderParameters['execution'] = 'render';
-
-	/**
-	 * A customer value that can be used to differentiate widgets under the same
-	 * sitekey in analytics and which is returned upon validation. This can only
-	 * contain up to 32 alphanumeric characters including `_` and `-`.
-	 */
-	export let action: RenderParameters['action'] = undefined;
-
-	/**
-	 * A customer payload that can be used to attach customer data to the challenge
-	 * throughout its issuance and which is returned upon validation. This can only
-	 * contain up to 255 alphanumeric characters including `_` and `-`.
-	 */
-	export let cData: RenderParameters['cData'] = undefined;
-
-	/**
-	 * Time between retry attempts in milliseconds. Value must be between `0` and `900000`
-	 * (15 minutes). Only applies when `retry` is set to `auto`.
-	 * @default 8000
-	 */
-	export let retryInterval: RenderParameters['retry-interval'] = 8000;
-
-	/**
-	 * Automatically retry upon failure to obtain a token or never retry.
-	 * @default "auto"
-	 */
-	export let retry: RenderParameters['retry'] = 'auto';
-
-	/**
-	 * Controls the behavior when the token of a Turnstile widget has expired.
-	 * Can be 'auto', 'manual', or 'never'.
-	 * @default "auto"
-	 */
-	export let refreshExpired: RenderParameters['refresh-expired'] = 'auto';
-
-	/**
-	 * The widget theme. Can be `"light"`, `"dark"`, or `"auto"`.
-	 */
-	export let theme: RenderParameters['theme'] = 'auto';
-
-	/**
-	 * The widget size. Can be 'normal', 'flexible', 'invisible', or 'compact'.
-	 * @default "normal"
-	 */
-	export let size: RenderParameters['size'] = 'normal';
-
-	/**
-	 * The tabindex of Turnstile's iframe for accessibility purposes.
-	 * @default 0
-	 */
-	export let tabIndex = 0;
-
-	/**
-	 * @deprecated Use `responseField` instead.
-	 */
-	export let forms: RenderParameters['response-field'] = undefined;
-
-	/**
-	 * Controls if an input element with the response token is created.
-	 * @default true
-	 */
-	export let responseField: RenderParameters['response-field'] = undefined;
-
-	/**
-	 * @deprecated Use `responseFieldName` instead.
-	 */
-	export let formsField: RenderParameters['response-field-name'] = undefined;
-
-	/**
-	 * Name of the input element.
-	 * @default "cf-turnstile-response"
-	 */
-	export let responseFieldName: RenderParameters['response-field-name'] =
-		undefined;
-
-	/**
-	 * Classes to apply to the wrapper div around turnstile.
-	 * This won't work with Svelte scoped styles.
-	 */
-	let _class: string | undefined = undefined;
-	export { _class as class };
+	let {
+		widgetId = $bindable(null),
+		turnstile = $bindable(null),
+		class: _class,
+		...renderParams
+	}: {
+		/**
+		 * Represents a rendered Turnstile widget.  Used to identify a specific widget when calling
+		 * Turnstile methods.
+		 */
+		widgetId?: WidgetId | null;
+
+		/**
+		 * Turnstile is Cloudflare’s smart CAPTCHA alternative. It can be embedded into any website
+		 * without sending traffic through Cloudflare and works without showing visitors a CAPTCHA.
+		 * @see https://developers.cloudflare.com/turnstile
+		 */
+		turnstile?: TurnstileObject | null;
+
+		/**
+		 * Classes to apply to the wrapper div around turnstile.
+		 * This won't work with Svelte scoped styles.
+		 */
+		class?: string;
+	} & RenderParameters = $props();
+
+	const loadScript = addScript();
+
+	loadScript.then(() => {
+		turnstile = window.turnstile || null;
+	});
 
 	/**
 	 * Resets the widget.
-	 * @param widgetId - The ID of the widget.
 	 */
 	export const reset: TurnstileObject['reset'] = (): void => {
 		widgetId && window?.turnstile?.reset(widgetId);
 	};
 
-	$: renderParams = {
-		sitekey: siteKey,
-		callback: (token: string, preClearanceObtained: boolean) => {
-			dispatch('callback', { token, preClearanceObtained });
-			dispatch('turnstile-callback', { token, preClearanceObtained });
-		},
-		'error-callback': (code) => {
-			dispatch('error', { code });
-			dispatch('turnstile-error', { code });
-		},
-		'timeout-callback': () => {
-			dispatch('timeout', {});
-			dispatch('turnstile-timeout', {});
-		},
-		'expired-callback': () => {
-			dispatch('expired', {});
-			dispatch('turnstile-expired', {});
-		},
-		'before-interactive-callback': () => {
-			dispatch('before-interactive', {});
-		},
-		'after-interactive-callback': () => {
-			dispatch('after-interactive', {});
-		},
-		'unsupported-callback': () => dispatch('unsupported', {}),
-		'response-field-name':
-			responseFieldName ?? formsField ?? 'cf-turnstile-response',
-		'response-field': responseField ?? forms ?? true,
-		'refresh-expired': refreshExpired,
-		'retry-interval': retryInterval,
-		tabindex: tabIndex,
-		appearance,
-		execution,
-		language,
-		action,
-		retry,
-		theme,
-		cData,
-		size,
-	} satisfies RenderParameters;
-
 	const turnstileAction: Action<HTMLElement, RenderParameters> = (
 		node: HTMLElement,
 		renderParams: RenderParameters,
@@ -206,35 +86,15 @@
 			},
 		};
 	};
-
-	onMount(() => {
-		mounted = true;
-
-		if (!loaded) {
-			const script = document.createElement('script');
-			script.type = 'text/javascript';
-			script.src =
-				'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
-			script.async = true;
-			script.addEventListener('load', () => (loaded = true), {
-				once: true,
-			});
-			document.head.appendChild(script);
-		}
-
-		return () => {
-			mounted = false;
-		};
-	});
 </script>
 
-{#if loaded && mounted}
+{#await loadScript then}
 	<div
 		use:turnstileAction={renderParams}
-		class:flexible={size == 'flexible'}
+		class:flexible={renderParams.size == 'flexible'}
 		class={_class}>
 	</div>
-{/if}
+{/await}
 
 <style>
 	:where(.flexible) {
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 43f1767..ab0f4bb 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,11 +1,9 @@
-export type * from './types.d';
-
 // Export Turnstile component
 export { default as Turnstile } from './Turnstile.svelte';
 
-import type { TurnstileOptions } from 'turnstile-types';
+import type { RenderParameters } from 'turnstile-types';
 
 // Backwards compatibility (semver) for when we switched to turnstile-types
-export type TurnstileTheme = TurnstileOptions['theme'];
-export type TurnstileLanguage = TurnstileOptions['language'];
-export type TurnstileSize = TurnstileOptions['size'];
+export type TurnstileTheme = RenderParameters['theme'];
+export type TurnstileLanguage = RenderParameters['language'];
+export type TurnstileSize = RenderParameters['size'];
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
deleted file mode 100644
index 7c4516a..0000000
--- a/src/lib/types.d.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-export interface Events {
-	/**
-	 * Deprecated - use `callback` instead.
-	 * @deprecated
-	 */
-	'turnstile-callback': { token: string; preClearanceObtained: boolean };
-
-	/**
-	 * Callback function invoked upon successful challenge completion.
-	 * @param detail - An object containing details about the event.
-	 * @param detail.token - The token received upon successful challenge completion.
-	 * @param detail.preClearanceObtained - Boolean indicating if the clearance was obtained.
-	 */
-	callback: { token: string; preClearanceObtained: boolean };
-
-	/**
-	 * Deprecated - use `error-callback` instead.
-	 * @deprecated
-	 */
-	'turnstile-error': { code: string };
-
-	/**
-	 * Callback invoked when there is an error (e.g., network error, challenge failed).
-	 * @see [Client-side errors](https://developers.cloudflare.com/turnstile/reference/client-side-errors)
-	 * @param { code: string } - The error code passed upon an error.
-	 */
-	error: { code: string };
-
-	/**
-	 * Deprecated - use `expired` instead.
-	 * @deprecated
-	 */
-	'turnstile-expired': {};
-
-	/**
-	 * Callback invoked when the token expires and does not reset the widget.
-	 */
-	expired: {};
-
-	/**
-	 * Deprecated - use `timeout` instead.
-	 * @deprecated
-	 */
-	'turnstile-timeout': {};
-
-	/**
-	 * Callback invoked when the challenge expires.
-	 */
-	timeout: {};
-
-	/**
-	 * Callback invoked before the challenge enters interactive mode.
-	 */
-	'before-interactive': {};
-
-	/**
-	 * Callback invoked when the challenge has left interactive mode.
-	 */
-	'after-interactive': {};
-
-	/**
-	 * Callback invoked when a given client/browser is not supported.
-	 */
-	unsupported: {};
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cf98cf0..2162844 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import 'ghostsui';
+
+	const { children } = $props();
 </script>
 
 <main>
-	<slot />
+	{@render children()}
 </main>
 
 <style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e766894..c920a81 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,21 +3,21 @@
 	import { enhance } from '$app/forms';
 	import { Turnstile } from '$lib';
 
-	export let form;
+	const { form } = $props();
 
-	let secretKey = '1x0000000000000000000000000000000AA';
-	let siteKey = '1x00000000000000000000AA';
-	let theme: TurnstileTheme = 'auto';
-	let size: TurnstileSize = 'normal';
+	let secretKey = $state('1x0000000000000000000000000000000AA');
+	let sitekey = $state('1x00000000000000000000AA');
+	let theme: TurnstileTheme = $state('auto');
+	let size: TurnstileSize = $state('normal');
 
-	let reset: () => void | undefined;
+	let turnstile: Turnstile;
 </script>
 
 <section class="row">
 	<label>
 		Demo Site Key type
 
-		<select bind:value={siteKey}>
+		<select bind:value={sitekey}>
 			<option value="1x00000000000000000000AA">Always Pass</option>
 			<option value="2x00000000000000000000AB">Always Block</option>
 			<option value="3x00000000000000000000FF">
@@ -67,12 +67,14 @@
 
 <section>
 	<form method="POST" use:enhance>
-		<Turnstile {size} {theme} {siteKey} bind:reset />
+		<Turnstile {size} {theme} {sitekey} bind:this={turnstile} />
 		<input type="hidden" name="secret" bind:value={secretKey} />
 
 		<div class="row">
 			<button>Validate</button>
-			<button type="button" on:click={() => reset?.()}>Reset</button>
+			<button type="button" onclick={() => turnstile.reset()}>
+				Reset
+			</button>
 		</div>
 	</form>
 
diff --git a/src/routes/superforms/+page.svelte b/src/routes/superforms/+page.svelte
index fcc651c..1d608d8 100644
--- a/src/routes/superforms/+page.svelte
+++ b/src/routes/superforms/+page.svelte
@@ -6,14 +6,14 @@
 
 	export let data;
 
-	let reset: (() => void) | undefined = undefined;
+	let turnstile: Turnstile;
 
 	const { form, errors, constraints, message, enhance } = superForm(
 		data.form,
 		{
 			validators: zodClient(schema),
 			onUpdated() {
-				reset?.();
+				turnstile.reset();
 			},
 		},
 	);
@@ -33,7 +33,7 @@
 			<span class="invalid">{$errors.name}</span>
 		{/if}
 
-		<Turnstile siteKey="3x00000000000000000000FF" bind:reset />
+		<Turnstile sitekey="3x00000000000000000000FF" bind:this={turnstile} />
 
 		{#if $errors['cf-turnstile-response']}
 			<span class="invalid">{$errors['cf-turnstile-response']}</span>