feat(cloudflare-turnstile): add support for refresh-timeout & feedback-enabled config options

Author: vnphanquang

.changeset/sweet-tomatoes-drop.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/cloudflare-turnstile': minor
+---
+
+add support for `refresh-timeout`, `feedback-enabled` config options

packages/cloudflare-turnstile/src/turnstile.js

@@ -75,10 +75,15 @@ export function turnstile(node) {
 				/** @type {import('./types.public').TurnstileConfig['refresh-expired']} */ (
 					node.getAttribute('turnstile-refresh-expired')
 				) ?? undefined,
+			'refresh-timeout':
+				/** @type {import('./types.public').TurnstileConfig['refresh-timeout']} */ (
+					node.getAttribute('turnstile-refresh-timeout')
+				) ?? undefined,
 			appearance:
 				/** @type {import('./types.public').TurnstileConfig['appearance']} */ (
 					node.getAttribute('turnstile-appearance')
 				) ?? undefined,
+			'feedback-enabled': node.hasAttribute('turnstile-feedback-enabled'),
 
 			// events
 			callback: (token) => {

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

@@ -19,7 +19,7 @@ declare global {
 export type TurnstileConfig = TurnstileDataConfig & TurnstileEventConfig;
 
 /**
- * @package
+ * @see {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations | Cloudflare Turnstile Docs}
  */
 export type TurnstileDataConfig = {
 	sitekey: string;
@@ -34,12 +34,14 @@ export type TurnstileDataConfig = {
 	size?: 'normal' | 'compact';
 	retry?: 'auto' | 'never';
 	'retry-interval'?: number;
-	'refresh-expired'?: 'auto' | 'manual' | 'never' | 'auto';
+	'refresh-expired'?: 'auto' | 'manual' | 'never';
+	'refresh-timeout'?: 'auto' | 'manual' | 'never';
 	appearance?: 'always' | 'execute' | 'interaction-only';
+	'feedback-enabled': boolean;
 };
 
 /**
- * @package
+ * @see {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations | Cloudflare Turnstile Docs}
  */
 export type TurnstileEventConfig = {
 	callback?: (token: string) => void;
@@ -51,9 +53,6 @@ export type TurnstileEventConfig = {
 	'timeout-callback'?: () => void;
 };
 
-/**
- * @package
- */
 export type TurnstileDataAttributes = {
 	[K in keyof TurnstileDataConfig as K extends string
 		? `turnstile-${K}`
@@ -66,7 +65,7 @@ export type TurnstileEventDetail<T extends Record<string, any> = Record<string,
 } & T;
 
 /**
- * @package
+ * @see {@link https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#configurations}
  */
 export type TurnstileEventAttributes = {
 	onturnstile?: (event: CustomEvent<TurnstileEventDetail<{ token: string }>>) => void;

sites/docs/src/routes/(site)/docs/(package)/cloudflare-turnstile/+page.md.svelte

@@ -53,7 +53,7 @@ PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY="1x00000000000000000000AA"
 
 ## Configuration Attributes
 
-As seen in [Quick Start], `@svelte-put/cloudflare-turnstile` can be customized by adding `turnstile-*` attributes, where `*` are properties as described in [Cloudflare Turnstile's client configuration][turnstile.client.configurations] documentation, except for `*-callback` properties, which can be specified via Svelte event handler syntax `onturnstile:*` (more in [Events]).
+As seen in [Quick Start], `@svelte-put/cloudflare-turnstile` can be customized by adding `turnstile-*` attributes, where `*` are properties as described in [Cloudflare Turnstile's client configuration][turnstile.client.configurations] documentation, except for `*-callback` properties, which can be specified via Svelte event handler syntax `onturnstile*` (more in [Events]).
 
 If you have Typescript language server set up correctly, you should get autocomplete / intellisense for these `turnstile*` attributes.
 
@@ -81,7 +81,9 @@ The `turnstile-sitekey` is the only mandatory property. In [Quick Start], it is
   turnstile-retry="auto"
   turnstile-retry-interval="8000"
   turnstile-refresh-expired="auto"
+  turnstile-refresh-timeout="auto"
   turnstile-appearance="always"
+  turnstile-feedback-enabled
 ></div>
 ```
 

sites/docs/src/routes/(site)/docs/(package)/cloudflare-turnstile/_page/examples/quick-start.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { turnstile } from '@svelte-put/cloudflare-turnstile';
 
+	// assume using SvelteKit and the '$env/static/public' module is available
 	import { PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY } from '$env/static/public';
 
 	let token = $state('');
@@ -18,6 +19,6 @@
 	onturnstile={(e) => (token = e.detail.token)}
 ></div>
 <p>
-	Captured Token: <span class="bg-success-surface text-success-text px-2">{token ?? 'pending'}</span
+	Captured Token: <span class="bg-success-bg text-success-fg px-2">{token ?? 'pending'}</span
 	>
-</p>
+</p>