trustcaptcha-svelte 0.0.5 → 0.0.8

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

package/dist/captcha.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { TrustCaptchaProps } from './index.js';
 
 	let {
@@ -19,9 +20,8 @@
 	}: 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 +31,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 +88,18 @@
 	}
 </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>
+{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trustcaptcha-svelte",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "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"