Imports Updated

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.changeset/real-hats-push.md

@@ -0,0 +1,5 @@
+---
+"astro-turnstile": minor
+---
+
+Updated Imports

package.json

@@ -12,10 +12,10 @@
 		"ci:version": "pnpm changeset version",
 		"ci:publish": "pnpm changeset publish",
 		"lint": "biome check .",
-		"lint:fix": "biome check --apply ."
+		"lint:fix": "biome check --write ."
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.2",
 		"@changesets/cli": "^2.27.8"
 	}
-}
+}

package/README.md

@@ -136,10 +136,12 @@ These components can be accessed by either of the following methods:
 
 ```ts
 // Option 1: Runtime virtual module
-import { TurnstileWidget, TurnstileForm } from 'astro-turnstile:components';
+import TurnstileWidget from 'astro-turnstile:components/TurnstileWidget';
+import TurnstileForm from 'astro-turnstile:components/TurnstileForm';
 
 // Option 2: Direct package exports
-import { TurnstileWidget, TurnstileForm } from 'astro-turnstile/components';
+import TurnstileWidget from 'astro-turnstile/components/TurnstileWidget';
+import TurnstileForm from 'astro-turnstile/components/TurnstileForm';
 
 ```
 

package/lib/components/TurnstileForm.astro

@@ -1,7 +1,7 @@
 ---
+import config from "virtual:astro-turnstile/config";
 import type { HTMLAttributes } from "astro/types";
 import Widget, { type Props as WidgetProps } from "./TurnstileWidget.astro";
-import config from "virtual:astro-turnstile/config";
 
 interface Props extends WidgetProps, HTMLAttributes<"form"> {
 	enctype?:
@@ -24,105 +24,107 @@ const {
 const siteUrl = Astro.site;
 ---
 
-<form 
-    id="at-turnstile-captcha-form"
-    data-siteurl={siteUrl} 
-    data-captcha={config.endpointPath} 
-    action={action}
-    method={method}
-    enctype={enctype}
-    {...rest}
-    >
-
-    <slot name="header"></slot>
+<form
+	id="at-turnstile-captcha-form"
+	data-siteurl={siteUrl}
+	data-captcha={config.endpointPath}
+	action={action}
+	method={method}
+	enctype={enctype}
+	{...rest}
+>
+	<slot name="header" />
 
-    <slot></slot>
+	<slot />
 
-    <Widget theme={theme} size={size} margin={margin} />
+	<Widget theme={theme} size={size} margin={margin} />
 
-    <slot name="buttons">
-        <button type="submit" class="at-turnstile-submit-button">Submit</button>
-    </slot>
-
-    <slot name="footer"></slot>
+	<slot name="buttons">
+		<button type="submit" class="at-turnstile-submit-button">Submit</button>
+	</slot>
 
+	<slot name="footer" />
 </form>
 
 <script>
-    // Get the form element
-    const form = document.getElementById("at-turnstile-captcha-form") as HTMLFormElement;
-
-    const turnstileConfig = form.dataset;
-
-    // Add a submit event listener to the form
-    form.addEventListener("submit", async (event) => {
-        // Prevent the default form submission
-        event.preventDefault();
-
-        // Get the form data
-        const formData = new FormData(form); // "multipart/form-data"
-
-        const urlEncodedFormData = new URLSearchParams(); // "application/x-www-form-urlencoded"
-        formData.forEach((value, key) => {
-            if (typeof value === "string") {
-                urlEncodedFormData.append(key, value);
-            } else {
-                console.warn(`Invalid form data value for key: ${key}, Skipping...`);
-            }
-        });
-
-        if (!turnstileConfig.captcha) {
-            console.error("No Turnstile endpoint path provided.");
-            return;
-        }
-
-        // Send the form data to the Turnstile endpoint for verification
-        const baseUrlToUse = turnstileConfig.siteurl 
-            ? turnstileConfig.siteurl 
-            : window.location.origin;
-
-        const verificationUrl = new URL(turnstileConfig.captcha, baseUrlToUse);
-
-        const captchaResponse = await fetch(verificationUrl, {
-            method: "POST",
-            body: formData,
-        })
-
-        if (captchaResponse.status !== 200) {
-            console.error(captchaResponse.statusText);
-            form.reset();
-            return;
-        }
-
-        if (form.enctype === "application/x-www-form-urlencoded") {
-            fetch(form.action, {
-                method: form.method,
-                body: urlEncodedFormData,
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded",
-                },
-            })
-            form.reset();
-            return;
-        }
-
-        // If the captcha verification is successful, submit the form
-        if (form.enctype === "multipart/form-data") {
-            fetch(form.action, {
-                method: form.method,
-                body: formData,
-                headers: {
-                    "Content-Type": "multipart/form-data",
-                },
-            })
-            form.reset();
-            return;
-        }
-
-        if (form.enctype === "submit") {
-            form.submit();
-            form.reset();
-            return;
-        }
-})
-</script>
+	// Get the form element
+	const form = document.getElementById(
+		'at-turnstile-captcha-form',
+	) as HTMLFormElement;
+
+	const turnstileConfig = form.dataset;
+
+	// Add a submit event listener to the form
+	form.addEventListener('submit', async (event) => {
+		// Prevent the default form submission
+		event.preventDefault();
+
+		// Get the form data
+		const formData = new FormData(form); // "multipart/form-data"
+
+		const urlEncodedFormData = new URLSearchParams(); // "application/x-www-form-urlencoded"
+		formData.forEach((value, key) => {
+			if (typeof value === 'string') {
+				urlEncodedFormData.append(key, value);
+			} else {
+				console.warn(
+					`Invalid form data value for key: ${key}, Skipping...`,
+				);
+			}
+		});
+
+		if (!turnstileConfig.captcha) {
+			console.error('No Turnstile endpoint path provided.');
+			return;
+		}
+
+		// Send the form data to the Turnstile endpoint for verification
+		const baseUrlToUse = turnstileConfig.siteurl
+			? turnstileConfig.siteurl
+			: window.location.origin;
+
+		const verificationUrl = new URL(turnstileConfig.captcha, baseUrlToUse);
+
+		const captchaResponse = await fetch(verificationUrl, {
+			method: 'POST',
+			body: formData,
+		});
+
+		if (captchaResponse.status !== 200) {
+			console.error(captchaResponse.statusText);
+			form.reset();
+			return;
+		}
+
+		if (form.enctype === 'application/x-www-form-urlencoded') {
+			fetch(form.action, {
+				method: form.method,
+				body: urlEncodedFormData,
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+				},
+			});
+			form.reset();
+			return;
+		}
+
+		// If the captcha verification is successful, submit the form
+		if (form.enctype === 'multipart/form-data') {
+			fetch(form.action, {
+				method: form.method,
+				body: formData,
+				headers: {
+					'Content-Type': 'multipart/form-data',
+				},
+			});
+			form.reset();
+			return;
+		}
+
+		if (form.enctype === 'submit') {
+			form.submit();
+			form.reset();
+			return;
+		}
+	});
+</script>

package/lib/components/TurnstileWidget.astro

@@ -1,6 +1,6 @@
 ---
-import { AstroError } from "astro/errors";
 import { TURNSTILE_SITE_KEY } from "astro:env/client";
+import { AstroError } from "astro/errors";
 
 export interface Props {
 	/**
@@ -59,43 +59,46 @@ const {
 	minWidth: turnstileMinWidth,
 } = getStyleSettings(size);
 ---
-<div 
-    id="at-turnstile-captcha" 
-    data-sitekey={TURNSTILE_SITE_KEY}
-    data-theme={theme}
-    data-size={size}
-    >
+
+<div
+	id="at-turnstile-captcha"
+	data-sitekey={TURNSTILE_SITE_KEY}
+	data-theme={theme}
+	data-size={size}
+>
 </div>
 
-<style 
-    scoped 
-    define:vars={{ 
-        turnstileHeight,
-        turnstileWidth,
-        turnstileMinWidth,
-        turnstileMargin: margin,
-    }}>
-    #at-turnstile-captcha {
-        height: var(--turnstileHeight);
-        width: var(--turnstileWidth);
-        min-width: var(--turnstileMinWidth);
-        margin: var(--turnstileMargin);
-    }
+<style
+	scoped
+	define:vars={{
+		turnstileHeight,
+		turnstileWidth,
+		turnstileMinWidth,
+		turnstileMargin: margin,
+	}}
+>
+	#at-turnstile-captcha {
+		height: var(--turnstileHeight);
+		width: var(--turnstileWidth);
+		min-width: var(--turnstileMinWidth);
+		margin: var(--turnstileMargin);
+	}
 </style>
 
 <script is:inline>
-    // Define the onloadTurnstileCallback function as per the Turnstile documentation
-    // see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#explicitly-render-the-turnstile-widget
-    function onloadTurnstileCallback() {
-
-        // Get the Turnstile configuration from the Turnstile form element
-        const { dataset: TConfig} = document.getElementById('at-turnstile-captcha');
+	// Define the onloadTurnstileCallback function as per the Turnstile documentation
+	// see https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#explicitly-render-the-turnstile-widget
+	function onloadTurnstileCallback() {
+		// Get the Turnstile configuration from the Turnstile form element
+		const {dataset: TConfig} = document.getElementById(
+			'at-turnstile-captcha',
+		);
 
-        // Render the Turnstile widget with the configuration
-        turnstile.render('#at-turnstile-captcha', {
-            sitekey: TConfig.sitekey,
-            size: TConfig.size,
-            theme: TConfig.theme,
-        })
-    }
-</script>
+		// Render the Turnstile widget with the configuration
+		turnstile.render('#at-turnstile-captcha', {
+			sitekey: TConfig.sitekey,
+			size: TConfig.size,
+			theme: TConfig.theme,
+		});
+	}
+</script>

package/package.json

@@ -20,10 +20,7 @@
 		"access": "public"
 	},
 	"sideEffects": false,
-	"files": [
-		"src",
-		"lib"
-	],
+	"files": ["src", "lib"],
 	"exports": {
 		".": {
 			"types": "./src/index.d.ts",
@@ -32,7 +29,8 @@
 		"./schema": "./src/schema.ts",
 		"./client": "./lib/client.ts",
 		"./server": "./lib/server.ts",
-		"./components": "./lib/components/index.ts"
+		"./components/TurnstileWidget": "./lib/components/TurnstileWidget.astro",
+		"./components/TurnstileForm": "./lib/components/TurnstileForm.astro"
 	},
 	"scripts": {},
 	"type": "module",

package/src/integration.ts

@@ -1,15 +1,15 @@
 import {
-	createResolver,
 	addVirtualImports,
+	createResolver,
 	defineIntegration,
 } from "astro-integration-kit";
-import { AstroTurnstileOptionsSchema as optionsSchema } from "./schema.ts";
-import { name } from "../package.json";
 import { envField } from "astro/config";
-import Dts from "./stubs.ts";
-import { envDefaults, ErrorMessages, loggerStrings } from "./strings.ts";
-import { loadEnv } from "vite";
 import { AstroError } from "astro/errors";
+import { loadEnv } from "vite";
+import { name } from "../package.json";
+import { AstroTurnstileOptionsSchema as optionsSchema } from "./schema.ts";
+import { ErrorMessages, envDefaults, loggerStrings } from "./strings.ts";
+import Dts from "./stubs.ts";
 
 // Load the Turnstile environment variables for the Server runtime and Verification
 // that the environment variables are NOT set to Turnstile demo values during build.
@@ -148,7 +148,8 @@ export const astroTurnstile = defineIntegration({
 							"virtual:astro-turnstile/config": `export default ${JSON.stringify(
 								options,
 							)}`,
-							"astro-turnstile:components": `export * from '${name}/components';`,
+							"astro-turnstile:components/TurnstileWidget": `export * from '${name}/components';`,
+							"astro-turnstile:components/TurnstileForm": `export * from '${name}/components';`,
 						},
 					});