Skip to content

Commit 4c275ca

Browse files
vnphanquangvnphanquang
committed
chore(cloudflare-turnstile): migrate to Svelte 5
1 parent 01b0897 commit 4c275ca

8 files changed

Lines changed: 56 additions & 50 deletions

File tree

‎.changeset/twenty-donkeys-serve.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@svelte-put/cloudflare-turnstile': major
3+
---
4+
5+
drop support for Svelte 4 and below. Event name is now all lowercase, without colon (e.g `onturnstilebeforeinteractive`)

‎packages/cloudflare-turnstile/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"@internals/tsconfig": "workspace:*"
5252
},
5353
"peerDependencies": {
54-
"svelte": "^3.55.0 || ^4.0.0 || ^5.0.0"
54+
"svelte": "^5.0.0-next.1"
5555
},
5656
"volta": {
5757
"extends": "../../package.json"

‎packages/cloudflare-turnstile/src/public.d.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,16 +69,16 @@ export type TurnstileEventDetail<T extends Record<string, any> = Record<string,
6969
* @package
7070
*/
7171
export type TurnstileEventAttributes = {
72-
'on:turnstile'?: (event: CustomEvent<TurnstileEventDetail<{ token: string }>>) => void;
73-
'on:turnstile:error'?: (event: CustomEvent<TurnstileEventDetail<{ code: string }>>) => void;
74-
'on:turnstile:expired'?: (event: CustomEvent<TurnstileEventDetail>) => void;
75-
'on:turnstile:before-interactive'?: (event: CustomEvent<TurnstileEventDetail>) => void;
76-
'on:turnstile:after-interactive'?: (event: CustomEvent<TurnstileEventDetail>) => void;
77-
'on:turnstile:unsupported'?: (event: CustomEvent<TurnstileEventDetail>) => void;
78-
'on:turnstile:timeout'?: (event: CustomEvent<TurnstileEventDetail>) => void;
72+
'onturnstile'?: (event: CustomEvent<TurnstileEventDetail<{ token: string }>>) => void;
73+
'onturnstileerror'?: (event: CustomEvent<TurnstileEventDetail<{ code: string }>>) => void;
74+
'onturnstileexpired'?: (event: CustomEvent<TurnstileEventDetail>) => void;
75+
'onturnstilebeforeinteractive'?: (event: CustomEvent<TurnstileEventDetail>) => void;
76+
'onturnstileafterinteractive'?: (event: CustomEvent<TurnstileEventDetail>) => void;
77+
'onturnstileunsupported'?: (event: CustomEvent<TurnstileEventDetail>) => void;
78+
'onturnstiletimeout'?: (event: CustomEvent<TurnstileEventDetail>) => void;
7979
};
8080

81-
export type TurnstileCustomEventName = keyof TurnstileEventAttributes extends `on:${infer K}` ? K : never;
81+
export type TurnstileCustomEventName = keyof TurnstileEventAttributes extends `on${infer K}` ? K : never;
8282

8383
/**
8484
* @see {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations | Cloudflare Turnstile Docs}

‎packages/cloudflare-turnstile/src/turnstile.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function turnstile(node) {
2121

2222
/**
2323
* @template {import('./public').TurnstileCustomEventName} E
24-
* @template [D=Parameters<NonNullable<import('./public').TurnstileEventAttributes[`on:${E}`]>>[0]['detail'] extends import('./public').TurnstileEventDetail<infer T extends Record<string, any>> ? T : never]
24+
* @template [D=Parameters<NonNullable<import('./public').TurnstileEventAttributes[`on${E}`]>>[0]['detail'] extends import('./public').TurnstileEventDetail<infer T extends Record<string, any>> ? T : never]
2525
* @param {E} event
2626
* @param {D} detail
2727
*/
@@ -86,25 +86,25 @@ export function turnstile(node) {
8686
node.toggleAttribute('turnstile-rendered', true);
8787
},
8888
'error-callback': (code) => {
89-
dispatchEvent('turnstile:error', { code });
89+
dispatchEvent('turnstileerror', { code });
9090
},
9191
'expired-callback': (...params) => {
9292
// TODO: requires testing
93-
dispatchEvent('turnstile:expired', { ...(params.length ? { params } : {}) });
93+
dispatchEvent('turnstileexpired', { ...(params.length ? { params } : {}) });
9494
},
9595
'before-interactive-callback': () => {
96-
dispatchEvent('turnstile:before-interactive', {});
96+
dispatchEvent('turnstilebeforeinteractive', {});
9797
},
9898
'after-interactive-callback': () => {
99-
dispatchEvent('turnstile:after-interactive', {});
99+
dispatchEvent('turnstileafterinteractive', {});
100100
},
101101
'unsupported-callback': (...params) => {
102102
// TODO: requires testing
103-
dispatchEvent('turnstile:unsupported', { ...(params.length ? { params } : {}) });
103+
dispatchEvent('turnstileunsupported', { ...(params.length ? { params } : {}) });
104104
},
105105
'timeout-callback': (...params) => {
106106
// TODO: requires testing
107-
dispatchEvent('turnstile:timeout', { ...(params.length ? { params } : {}) });
107+
dispatchEvent('turnstiletimeout', { ...(params.length ? { params } : {}) });
108108
},
109109
};
110110

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sites/docs/src/routes/docs/(package)/cloudflare-turnstile/_page/content.md.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
const { packageManager } = getSettingsContext();
66
</script>
77

8+
<!--
9+
TODO add migration docs
10+
- drop support for v4 and below
11+
- event name is now different (no colon, all lowercase), see https://github.com/sveltejs/svelte/issues/1004410044
12+
-->
13+
814
## Introduction
915

1016
This implementation of [Cloudflare Turnstile] utilizes [Svelte action]. If you are looking for a component-oriented solution, check out [ghostdevv/svelte-turnstile](https://github.com/ghostdevv/svelte-turnstile) instead.

‎sites/v5-playground/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"devDependencies": {
1818
"@playwright/test": "^1.28.1",
1919
"@svelte-put/avatar": "workspace:*",
20+
"@svelte-put/cloudflare-turnstile": "workspace:*",
2021
"@svelte-put/preprocess-auto-slug": "workspace:*",
2122
"@svelte-put/preprocess-inline-svg": "workspace:*",
2223
"@sveltejs/adapter-auto": "^3.0.0",

‎sites/v5-playground/src/routes/+page.svelte‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
1-
<script>
2-
import Avatar from '@svelte-put/avatar/Avatar.svelte';
3-
/** passed from parent */
4-
export let color = 'blue';
5-
</script>
1+
<script lang="ts">
2+
import { turnstile } from '@svelte-put/cloudflare-turnstile';
3+
4+
import { PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY } from '$env/static/public';
65
7-
<main style:padding="200px">
8-
<Avatar
9-
src="https://img.freepik.com/free-photo/adorable-jack-russell-retriever-puppy-portrait_53876-64825.jpg?w=2000"
10-
uiAvatar="Jim+Hopper"
11-
size={50}
12-
class="custom-avatar rounded-full"
13-
--border-color={color}
14-
/>
6+
let token = $state('');
7+
$inspect('Token', token);
8+
</script>
159

16-
<div style:margin-top="40px">
17-
<Avatar
18-
size={50}
19-
gravatar="billy.hargrove@domain.com"
20-
uiAvatar="Billy+Hargrove"
21-
>
22-
{#snippet img({ alt, size, sources, src })}
23-
<img {src} {alt} width={size} height={size} data-sources={sources} />
24-
{/snippet}
25-
</Avatar>
26-
</div>
27-
</main>
10+
<div
11+
use:turnstile
12+
turnstile-sitekey={PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY}
13+
turnstile-theme="auto"
14+
turnstile-size="normal"
15+
turnstile-language="en"
16+
turnstile-response-field-name="turnstile"
17+
turnstile-response-field
18+
onturnstile={(e) => (token = e.detail.token)}
19+
onturnstileerror={(e) => console.error('Turnstile Error', e.detail)}
20+
onturnstilebeforeinteractive={(e) => console.log('Turnstile Before Interactive', e.detail)}
21+
onturnstileafterinteractive={(e) => console.log('Turnstile after Interactive', e.detail)}
22+
></div>
23+
<p class="text-center" ontimeupdate={() => {}}>
24+
Captured Token: <span class="bg-success-surface text-success-text px-2">{token ?? 'pending'}</span>
25+
</p>
2826

29-
<style lang="postcss">
30-
:global(.custom-avatar) {
31-
border: 2px var(--border-color) solid;
32-
box-shadow: 0 0 0 10px hsl(0deg 0% 50%), 0 0 0 15px hsl(0deg 0% 60%),
33-
0 0 0 20px hsl(0deg 0% 70%), 0 0 0 25px hsl(0deg 0% 80%), 0 0 0 30px hsl(0deg 0% 90%);
34-
}
35-
</style>

0 commit comments

Comments
 (0)
⚡