trustcaptcha-svelte 0.0.7 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Frederic Lehmann
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,7 @@
 # TrustCaptcha for Svelte
 
+> **Note:** This is a community integration, not officially maintained by TrustCaptcha.
+
 A Svelte 5 component for integrating [TrustCaptcha](https://www.trustcomponent.com/) CAPTCHA widget into your Svelte applications.
 
 ## Features
@@ -63,6 +65,7 @@ yarn add trustcaptcha-svelte
 | `customTranslations` | `string \| CustomTranslation[]`                            | -                         | Custom text translations                                |
 | `customDesign`       | `string \| CustomDesign`                                   | -                         | Custom design configuration (requires license)          |
 | `privacyUrl`         | `string`                                                   | -                         | Link to your privacy policy (requires license)          |
+| `children`           | `Snippet`                                                  | -                         | Optional loading placeholder content                    |
 
 ## Events
 
@@ -103,6 +106,22 @@ You can call these methods using a component reference:
 - `startVerification()` - Manually start the CAPTCHA verification
 - `reset()` - Reset the CAPTCHA to initial state
 
+## Loading Placeholder
+
+You can provide custom loading UI that displays while the CAPTCHA script is loading:
+
+```svelte
+<script lang="ts">
+	import { TrustCaptcha } from 'trustcaptcha-svelte';
+</script>
+
+<TrustCaptcha sitekey="your_site_key_here">
+	<div>Loading CAPTCHA...</div>
+</TrustCaptcha>
+```
+
+The loading placeholder will be displayed until the TrustCaptcha script is fully loaded and the component is mounted. If no children are provided, nothing will render during the loading phase.
+
 ## TypeScript Support
 
 Full TypeScript definitions are included:

package/dist/captcha.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { TrustCaptchaProps } from './index.js';
 
 	let {
@@ -15,13 +16,13 @@
 		oncaptchaSolved,
 		oncaptchaFailed,
 		oncaptchaReset,
+		children,
 		...rest
 	}: TrustCaptchaProps = $props();
 
 	let captchaElement: HTMLElement | null = $state(null);
-	let scriptLoaded = $state(
-		typeof customElements !== 'undefined' && !!customElements.get('trustcaptcha-component')
-	);
+	let mounted = $state(false);
+	let scriptLoaded = $state(false);
 
 	const customTranslationsStr = $derived(
 		typeof customTranslations === 'object' ? JSON.stringify(customTranslations) : customTranslations
@@ -31,12 +32,31 @@
 		typeof customDesign === 'object' ? JSON.stringify(customDesign) : customDesign
 	);
 
-	function onScriptLoad() {
-		scriptLoaded = true;
-	}
+	onMount(() => {
+		mounted = true;
+
+		if (typeof customElements !== 'undefined' && customElements.get('trustcaptcha-component')) {
+			scriptLoaded = true;
+			return;
+		}
+
+		const script = document.createElement('script');
+		script.type = 'module';
+		script.src = 'https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.esm.min.js';
+		script.onload = () => {
+			scriptLoaded = true;
+		};
+		document.head.appendChild(script);
+
+		return () => {
+			if (script.parentNode) {
+				script.parentNode.removeChild(script);
+			}
+		};
+	});
 
 	$effect(() => {
-		if (!captchaElement || !scriptLoaded) return;
+		if (!captchaElement || !scriptLoaded || !mounted) return;
 
 		const handlers: Record<string, EventListener | undefined> = {
 			captchaStarted: oncaptchaStarted as EventListener | undefined,
@@ -69,26 +89,20 @@
 	}
 </script>
 
-<svelte:head>
-	<!-- eslint-disable svelte/no-useless-mustaches -->
-	<script
-		onload={onScriptLoad}
-		type={'module'}
-		src="https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.esm.min.js"
-	></script>
-	<!-- eslint-enable svelte/no-useless-mustaches -->
-</svelte:head>
-
-<trustcaptcha-component
-	bind:this={captchaElement}
-	autostart={autostart ? undefined : 'false'}
-	hide-branding={hideBranding ? 'true' : undefined}
-	invisible={invisible ? 'true' : undefined}
-	invisible-hint={invisibleHint}
-	bypass-token={bypassToken}
-	token-field-name={tokenFieldName}
-	custom-translations={customTranslationsStr}
-	custom-design={customDesignStr}
-	privacy-url={privacyUrl}
-	{...rest}
-></trustcaptcha-component>
+{#if mounted && scriptLoaded}
+	<trustcaptcha-component
+		bind:this={captchaElement}
+		autostart={autostart ? undefined : 'false'}
+		hide-branding={hideBranding ? 'true' : undefined}
+		invisible={invisible ? 'true' : undefined}
+		invisible-hint={invisibleHint}
+		bypass-token={bypassToken}
+		token-field-name={tokenFieldName}
+		custom-translations={customTranslationsStr}
+		custom-design={customDesignStr}
+		privacy-url={privacyUrl}
+		{...rest}
+	></trustcaptcha-component>
+{:else}
+	{@render children?.()}
+{/if}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as TrustCaptcha } from './captcha.svelte';
+import type { Snippet } from 'svelte';
 export interface TrustCaptchaProps {
     /** Sitekey of the TrustCaptcha. You can find this on the administration page of your TrustCaptcha. */
     sitekey: string;
@@ -40,6 +41,8 @@ export interface TrustCaptchaProps {
     oncaptchaReset?: (event: CustomEvent) => void;
     /** Custom CSS class for the TrustCaptcha component. */
     class?: string;
+    /** Optional loading placeholder content shown while the CAPTCHA script is loading. */
+    children?: Snippet;
 }
 export interface CaptchaError {
     errorCode: ErrorCode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trustcaptcha-svelte",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "license": "MIT",
   "description": "A Svelte 5 component for integrating TrustCaptcha CAPTCHA widget into your Svelte applications",
   "author": "Frederic Lehmann",
@@ -49,10 +49,10 @@
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "publint": "^0.3.17",
-    "svelte": "^5.48.1",
+    "svelte": "^5.48.3",
     "svelte-check": "^4.3.5",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
     "vitest": "^4.0.18",
     "vitest-browser-svelte": "^2.0.2"