trustcaptcha-svelte 0.0.1

package/README.md

@@ -0,0 +1,125 @@
+# TrustCaptcha for Svelte
+
+A Svelte 5 component for integrating [TrustCaptcha](https://www.trustcomponent.com/) CAPTCHA widget into your Svelte applications.
+
+## Features
+
+- ✅ Full Svelte 5 support with runes
+- ✅ TypeScript support with complete type definitions
+- ✅ All TrustCaptcha widget properties, methods, and events
+- ✅ SSR compatible
+- ✅ Customizable themes (light, dark, media)
+- ✅ Custom translations and design
+- ✅ Invisible CAPTCHA mode
+- ✅ Autostart configuration
+- ✅ License-based premium features
+
+## Installation
+
+```bash
+npm install trustcaptcha-svelte
+```
+
+or
+
+```bash
+pnpm add trustcaptcha-svelte
+```
+
+or
+
+```bash
+yarn add trustcaptcha-svelte
+```
+
+## Basic Usage
+
+```svelte
+<script lang="ts">
+	import { TrustCaptcha } from 'trustcaptcha-svelte';
+</script>
+
+<form>
+	<TrustCaptcha sitekey="your_site_key_here" />
+</form>
+```
+
+## Properties
+
+| Property             | Type                                                       | Default                   | Description                                             |
+| -------------------- | ---------------------------------------------------------- | ------------------------- | ------------------------------------------------------- |
+| `sitekey`            | `string`                                                   | **required**              | Your CAPTCHA site key from the TrustCaptcha admin panel |
+| `width`              | `'fixed' \| 'full'`                                        | `'fixed'`                 | Width of the component                                  |
+| `language`           | `string`                                                   | `'auto'`                  | Display language (auto, en, de, fr, es, etc.)           |
+| `theme`              | `'light' \| 'dark' \| 'media'`                             | `'light'`                 | Visual theme                                            |
+| `autostart`          | `boolean`                                                  | `true`                    | Start verification automatically on form interaction    |
+| `license`            | `string`                                                   | -                         | License key for premium features                        |
+| `hideBranding`       | `boolean`                                                  | `false`                   | Hide TrustCaptcha logo (requires license)               |
+| `invisible`          | `boolean`                                                  | `false`                   | Enable invisible mode (requires license)                |
+| `invisibleHint`      | `'inline' \| 'right-border' \| 'right-bottom' \| 'hidden'` | `'right-border'`          | Position of invisible mode hint                         |
+| `bypassToken`        | `string`                                                   | -                         | Bypass token for automated testing                      |
+| `mode`               | `'standard' \| 'minimal'`                                  | `'standard'`              | Data mode of the CAPTCHA                                |
+| `tokenFieldName`     | `string`                                                   | `'tc-verification-token'` | Name of hidden input field for token                    |
+| `customTranslations` | `string \| CustomTranslation[]`                            | -                         | Custom text translations                                |
+| `customDesign`       | `string \| CustomDesign`                                   | -                         | Custom design configuration (requires license)          |
+| `privacyUrl`         | `string`                                                   | -                         | Link to your privacy policy (requires license)          |
+
+## Events
+
+| Event              | Description                               | Detail Type                                |
+| ------------------ | ----------------------------------------- | ------------------------------------------ |
+| `oncaptchaStarted` | Fired when CAPTCHA verification starts    | `CustomEvent`                              |
+| `oncaptchaSolved`  | Fired when CAPTCHA is successfully solved | `CustomEvent<string>` (verification token) |
+| `oncaptchaFailed`  | Fired when CAPTCHA verification fails     | `CustomEvent<CaptchaError>`                |
+| `oncaptchaReset`   | Fired when CAPTCHA is reset               | `CustomEvent`                              |
+
+## Methods
+
+You can call these methods using a component reference:
+
+```svelte
+<script lang="ts">
+	import { TrustCaptcha } from 'trustcaptcha-svelte';
+
+	let captchaRef: { startVerification: () => void; reset: () => void } | undefined;
+
+	function manualStart() {
+		captchaRef?.startVerification();
+	}
+
+	function resetCaptcha() {
+		captchaRef?.reset();
+	}
+</script>
+
+<TrustCaptcha bind:this={captchaRef} sitekey="your_site_key_here" />
+
+<button onclick={manualStart}>Start CAPTCHA</button>
+<button onclick={resetCaptcha}>Reset CAPTCHA</button>
+```
+
+### Available Methods
+
+- `startVerification()` - Manually start the CAPTCHA verification
+- `reset()` - Reset the CAPTCHA to initial state
+
+## TypeScript Support
+
+Full TypeScript definitions are included:
+
+```typescript
+import type {
+	TrustCaptchaProps,
+	CaptchaError,
+	ErrorCode,
+	CustomTranslation,
+	CustomDesign,
+	ThemeColors
+} from 'trustcaptcha-svelte';
+```
+
+## Links
+
+- [TrustCaptcha Official Documentation](https://docs.trustcomponent.com/captcha/widget/overview/)
+- [TrustCaptcha Website](https://www.trustcomponent.com/)
+- [Get your Site Key](https://admin.trustcomponent.com/)

package/dist/captcha.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { TrustCaptchaProps } from './index.js';
+
+	let {
+		autostart,
+		hideBranding,
+		invisible,
+		invisibleHint,
+		bypassToken,
+		tokenFieldName,
+		customTranslations,
+		customDesign,
+		privacyUrl,
+		oncaptchaStarted,
+		oncaptchaSolved,
+		oncaptchaFailed,
+		oncaptchaReset,
+		...rest
+	}: TrustCaptchaProps = $props();
+
+	let captchaElement: HTMLElement | null = $state(null);
+	let scriptLoaded = $state(
+		typeof customElements !== 'undefined' && !!customElements.get('trustcaptcha-component')
+	);
+
+	const customTranslationsStr = $derived(
+		typeof customTranslations === 'object' ? JSON.stringify(customTranslations) : customTranslations
+	);
+
+	const customDesignStr = $derived(
+		typeof customDesign === 'object' ? JSON.stringify(customDesign) : customDesign
+	);
+
+	function onScriptLoad() {
+		scriptLoaded = true;
+	}
+
+	$effect(() => {
+		if (!captchaElement || !scriptLoaded) return;
+
+		const handlers: Record<string, EventListener | undefined> = {
+			captchaStarted: oncaptchaStarted as EventListener | undefined,
+			captchaSolved: oncaptchaSolved as EventListener | undefined,
+			captchaFailed: oncaptchaFailed as EventListener | undefined,
+			captchaReset: oncaptchaReset as EventListener | undefined
+		};
+
+		for (const [event, handler] of Object.entries(handlers)) {
+			if (handler) {
+				captchaElement.addEventListener(event, handler);
+			}
+		}
+
+		return () => {
+			for (const [event, handler] of Object.entries(handlers)) {
+				if (handler) {
+					captchaElement!.removeEventListener(event, handler);
+				}
+			}
+		};
+	});
+
+	export function startVerification(): void {
+		(captchaElement as HTMLElement & { startVerification: () => void })?.startVerification();
+	}
+
+	export function reset(): void {
+		(captchaElement as HTMLElement & { reset: () => void })?.reset();
+	}
+</script>
+
+<svelte:head>
+	<script
+		onload={onScriptLoad}
+	
+		src="https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.esm.min.js"
+	></script>
+</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>

package/dist/captcha.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TrustCaptchaProps } from './index.js';
+declare const Captcha: import("svelte").Component<TrustCaptchaProps, {
+    startVerification: () => void;
+    reset: () => void;
+}, "">;
+type Captcha = ReturnType<typeof Captcha>;
+export default Captcha;

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+export { default as TrustCaptcha } from './captcha.svelte';
+export interface TrustCaptchaProps {
+    /** Sitekey of the TrustCaptcha. You can find this on the administration page of your TrustCaptcha. */
+    sitekey: string;
+    /** Width of the TrustCaptcha component. @default 'fixed' */
+    width?: 'fixed' | 'full';
+    /** Display language of the TrustCaptcha component. @default 'auto' */
+    language?: 'auto' | 'ar' | 'be' | 'bg' | 'bs' | 'ca' | 'cs' | 'da' | 'de' | 'el' | 'en' | 'es' | 'et' | 'fi' | 'fr' | 'hi' | 'hr' | 'hu' | 'it' | 'ko' | 'lb' | 'lt' | 'lv' | 'mk' | 'nl' | 'no' | 'pl' | 'pt' | 'ro' | 'ru' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'tr' | 'uk' | 'zh';
+    /** Display mode of the TrustCaptcha component. @default 'light' */
+    theme?: 'light' | 'dark' | 'media';
+    /** Setting whether the CAPTCHA should start automatically. @default true */
+    autostart?: boolean;
+    /** License key for special features such as privacyUrl, hideBranding, customDesign or invisible. */
+    license?: string;
+    /** Setting to hide the TrustCaptcha logo. License key required. @default false */
+    hideBranding?: boolean;
+    /** Setting to make the CAPTCHA invisible. License key required. @default false */
+    invisible?: boolean;
+    /** Shows a small message when the CAPTCHA runs invisibly. License key required. @default 'right-border' */
+    invisibleHint?: 'inline' | 'right-border' | 'right-bottom' | 'hidden';
+    /** For automated tests, bypass keys can be created in the settings to always pass the CAPTCHA. */
+    bypassToken?: string;
+    /** Set the data mode of the captcha. Must match the settings of the captcha. @default 'standard' */
+    mode?: 'standard' | 'minimal';
+    /** Name of the hidden field within the form in which the verification token is provided after a successful verification. @default 'tc-verification-token' */
+    tokenFieldName?: string;
+    /** Overwrite existing translations and/or add additional languages. JSON array as a string or object. */
+    customTranslations?: string | CustomTranslation[];
+    /** Custom design adjustments for the TrustCaptcha component. License key required. JSON as a string or object. */
+    customDesign?: string | CustomDesign;
+    /** Link to your privacy policy. License key required. */
+    privacyUrl?: string;
+    /** Triggered when the CAPTCHA is started. */
+    oncaptchaStarted?: (event: CustomEvent) => void;
+    /** Triggered when the CAPTCHA has been successfully solved. */
+    oncaptchaSolved?: (event: CustomEvent<string>) => void;
+    /** Triggered when solving the CAPTCHA has failed. */
+    oncaptchaFailed?: (event: CustomEvent<CaptchaError>) => void;
+    /** Triggered when the CAPTCHA is reset to the start setting. */
+    oncaptchaReset?: (event: CustomEvent) => void;
+}
+export interface CaptchaError {
+    errorCode: ErrorCode;
+    message: string;
+}
+export type ErrorCode = 'UNKNOWN_ERROR' | 'NO_FORM_FOUND' | 'COMMUNICATION_FAILURE' | 'NO_SITE_KEY_SPECIFIED' | 'UNAUTHORIZED' | 'SITE_KEY_NOT_VALID' | 'MODES_NOT_MATCHING' | 'CAPTCHA_NOT_ACCESSIBLE' | 'POW_FAILURE' | 'PAYMENT_REQUIRED' | 'LOCKED' | 'LICENSE_INVALID' | 'OPTION_NOT_AVAILABLE';
+export interface CustomTranslation {
+    language: string;
+    boxStart?: string;
+    boxInProgress?: string;
+    boxCompleted?: string;
+    endPrivacyPolicy?: string;
+    ariaLabelStart?: string;
+    ariaLabelRunning?: string;
+    ariaLabelDone?: string;
+    srRunning?: string;
+    srDone?: string;
+    srFailed?: string;
+    srTrustcaptcha?: string;
+    srPrivacy?: string;
+}
+export interface CustomDesign {
+    rounding?: {
+        box?: string;
+        checkbox?: string;
+        invisibleHint?: string;
+    };
+    theme?: {
+        light?: ThemeColors;
+        dark?: ThemeColors;
+    };
+}
+export interface ThemeColors {
+    boxDefaultBackground?: string;
+    boxDefaultText?: string;
+    boxDefaultBorder?: string;
+    boxCheckboxBackground?: string;
+    boxCheckboxBorder?: string;
+    boxSuccessBackground?: string;
+    boxSuccessBorder?: string;
+    invisibleHintBackground?: string;
+}

package/dist/index.js

@@ -0,0 +1 @@
+export { default as TrustCaptcha } from './captcha.svelte';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "trustcaptcha-svelte",
+  "version": "0.0.1",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.1",
+    "@eslint/js": "^9.39.2",
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^25.0.9",
+    "@vitest/browser-playwright": "^4.0.17",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.14.0",
+    "globals": "^17.0.0",
+    "playwright": "^1.57.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.4.1",
+    "publint": "^0.3.17",
+    "svelte": "^5.47.1",
+    "svelte-check": "^4.3.5",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17",
+    "vitest-browser-svelte": "^2.0.1"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run"
+  }
+}