Upgrade dependencies

.prettierrc.js → .prettierrc.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	semi: false,
 	useTabs: true,
 	singleQuote: true,

demos/nextjs/.prettierrc.mjs

@@ -0,0 +1,6 @@
+import base from '../../.prettierrc.mjs'
+
+export default {
+	...base,
+	plugins: ['prettier-plugin-tailwindcss']
+}

demos/nextjs/next.config.js

@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-	experimental: {
-		appDir: true
-	},
 	async redirects() {
 		return [
 			{

demos/nextjs/package.json

@@ -6,37 +6,40 @@
 		"dev": "next dev --port 3333",
 		"build": "pnpm run --filter=@marsidev/react-turnstile build && next build",
 		"start": "next start",
-		"lint": "next lint",
-		"lint:fix": "next lint --fix",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
 		"type-check": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@kodingdotninja/use-tailwind-breakpoint": "0.0.5",
+		"@kodingdotninja/use-tailwind-breakpoint": "1.0.0",
 		"@marsidev/react-turnstile": "workspace:*",
-		"@radix-ui/react-select": "1.2.2",
+		"@radix-ui/react-select": "2.0.0",
 		"class-variance-authority": "0.7.0",
-		"classnames": "2.3.2",
-		"jotai": "2.4.1",
-		"lucide-react": "0.274.0",
-		"next": "13.4.19",
-		"next-themes": "0.2.1",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
-		"tailwind-merge": "1.14.0"
+		"classnames": "2.5.1",
+		"jotai": "2.8.0",
+		"lucide-react": "0.376.0",
+		"next": "14.2.3",
+		"next-themes": "0.3.0",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
+		"tailwind-merge": "2.3.0"
 	},
 	"devDependencies": {
-		"@tailwindcss/typography": "0.5.9",
-		"autoprefixer": "10.4.15",
+		"@tailwindcss/typography": "0.5.13",
+		"autoprefixer": "10.4.19",
 		"eslint-config-custom": "workspace:*",
-		"eslint-config-next": "13.4.19",
-		"postcss": "8.4.29",
-		"prettier-plugin-tailwindcss": "0.3.0",
-		"tailwindcss": "3.3.3"
+		"eslint-config-next": "14.2.3",
+		"postcss": "8.4.38",
+		"prettier-plugin-tailwindcss": "0.5.14",
+		"tailwindcss": "3.4.3"
 	},
 	"eslintConfig": {
 		"extends": [
 			"next/core-web-vitals",
 			"custom"
-		]
+		],
+		"rules": {
+			"import/no-unresolved": "off"
+		}
 	}
 }

demos/nextjs/src/app/manual-script-injection-with-custom-script-props/page.tsx

@@ -9,7 +9,7 @@ export default function Page() {
 	return (
 		<React.Fragment>
 			{/* We add a custom query param to the script URL to force a re-download of the script, since the manual script injection is also used in other demos. This is not needed if the script ID is the same. */}
-			<Script id="turnstile-script" src={`${SCRIPT_URL}?v=2`} strategy="afterInteractive" />
+			<Script id="turnstile-script" src={`${SCRIPT_URL}?v=2`} strategy="beforeInteractive" />
 
 			<h1>Manual script injection with custom script props</h1>
 

demos/nextjs/src/app/manual-script-injection/page.tsx

@@ -8,7 +8,7 @@ import DemoWidget from '~/components/demo-widget'
 export default function Page() {
 	return (
 		<React.Fragment>
-			<Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="afterInteractive" />
+			<Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="beforeInteractive" />
 
 			<h1>Manual script injection</h1>
 			<DemoWidget injectScript={false} />

demos/nextjs/src/app/multi-widgets-and-manual-injection/page.tsx

@@ -8,7 +8,7 @@ import DemoWidget from '~/components/demo-widget'
 export default function Page() {
 	return (
 		<React.Fragment>
-			<Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="afterInteractive" />
+			<Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="beforeInteractive" />
 
 			<h1>Multiple widgets with manual script injection</h1>
 

docs/manual-script-injection.mdx

@@ -24,7 +24,7 @@ The following example shows how to manually inject the Turnstile script into a N
         <Script
           id={DEFAULT_SCRIPT_ID}
           src={SCRIPT_URL}
-          strategy="afterInteractive"
+          strategy="beforeInteractive"
         />
 
         <Turnstile
@@ -51,7 +51,7 @@ The following example shows how to manually inject the Turnstile script into a N
         <Script
           id={DEFAULT_SCRIPT_ID}
           src={SCRIPT_URL}
-          strategy="afterInteractive"
+          strategy="beforeInteractive"
         />
 
         <Turnstile
@@ -77,7 +77,7 @@ If you want to use a custom script ID:
         <Script
           id="turnstile-script"
           src={SCRIPT_URL}
-          strategy="afterInteractive"
+          strategy="beforeInteractive"
         />
 
         <Turnstile
@@ -100,7 +100,7 @@ If you want to use a custom script ID:
         <Script
           id="turnstile-script"
           src={SCRIPT_URL}
-          strategy="afterInteractive"
+          strategy="beforeInteractive"
         />
 
         <Turnstile

docs/multiple-widgets.mdx

@@ -105,7 +105,7 @@ You even can add multiple widgets while manually injecting the Cloudflare script
   export default function Page() {
     return (
       <>
-        <Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="afterInteractive" />
+        <Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="beforeInteractive" />
         <Turnstile id='widget-1' injectScript={false} siteKey='{{ siteKey }}' />
         <Turnstile id='widget-2' injectScript={false} siteKey='{{ siteKey }}' />
       </>
@@ -120,7 +120,7 @@ You even can add multiple widgets while manually injecting the Cloudflare script
   export default function Page() {
     return (
       <>
-        <Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="afterInteractive" />
+        <Script id={DEFAULT_SCRIPT_ID} src={SCRIPT_URL} strategy="beforeInteractive" />
         <Turnstile id='widget-1' injectScript={false} siteKey='{{ siteKey }}' />
         <Turnstile id='widget-2' injectScript={false} siteKey='{{ siteKey }}' />
       </>

package.json

@@ -19,27 +19,27 @@
 		"type-check": "pnpm run --parallel type-check"
 	},
 	"devDependencies": {
-		"@antfu/ni": "0.21.8",
-		"@antfu/utils": "0.7.6",
+		"@antfu/ni": "0.21.12",
+		"@antfu/utils": "0.7.7",
 		"@playwright/test": "1.43.1",
-		"@types/node": "20.5.7",
-		"@types/react": "18.2.21",
-		"@types/react-dom": "18.2.7",
-		"concurrently": "8.2.1",
+		"@types/node": "20.12.7",
+		"@types/react": "18.3.0",
+		"@types/react-dom": "18.3.0",
+		"concurrently": "8.2.2",
 		"eslint-config-custom": "workspace:*",
-		"lint-staged": "14.0.1",
+		"lint-staged": "15.2.2",
 		"playwright": "1.43.1",
 		"pnpm": "9.0.6",
-		"prettier": "2.8.8",
-		"simple-git-hooks": "2.9.0",
-		"typescript": "5.2.2"
+		"prettier": "3.2.5",
+		"simple-git-hooks": "2.11.1",
+		"typescript": "5.4.5"
 	},
 	"simple-git-hooks": {
 		"pre-commit": "pnpm lint-staged"
 	},
 	"lint-staged": {
 		"**/*.{js,mjs,cjs,ts,tsx}": [
-			"eslint --cache --fix",
+			"eslint . --cache --fix",
 			"prettier --write --cache --ignore-unknown"
 		],
 		"**/*.json": [

packages/eslint-config-custom/package.json

@@ -4,18 +4,18 @@
 	"private": true,
 	"main": "index.js",
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "6.5.0",
-		"@typescript-eslint/parser": "6.5.0",
-		"eslint": "8.48.0",
+		"@typescript-eslint/eslint-plugin": "7.7.1",
+		"@typescript-eslint/parser": "7.7.1",
+		"eslint": "8.56.0",
 		"eslint-config-marsi": "1.2.1",
-		"eslint-config-prettier": "9.0.0",
+		"eslint-config-prettier": "9.1.0",
 		"eslint-config-standard": "17.1.0",
-		"eslint-import-resolver-typescript": "3.6.0",
-		"eslint-plugin-import": "2.28.1",
+		"eslint-import-resolver-typescript": "3.6.1",
+		"eslint-plugin-import": "2.29.1",
 		"eslint-plugin-n": "16.0.2",
 		"eslint-plugin-promise": "6.1.1",
-		"eslint-plugin-react": "7.33.2",
+		"eslint-plugin-react": "7.34.1",
 		"eslint-plugin-react-hooks": "5.0.0-canary-7118f5dd7-20230705",
-		"typescript": "5.2.2"
+		"typescript": "5.4.5"
 	}
 }

packages/lib/package.json

@@ -45,9 +45,9 @@
 		"@testing-library/jest-dom": "6.4.2",
 		"@testing-library/react": "15.0.5",
 		"@types/jest": "29.5.12",
-		"bumpp": "9.2.0",
+		"bumpp": "9.4.0",
 		"jsdom": "24.0.0",
-		"nodemon": "3.0.1",
+		"nodemon": "3.1.0",
 		"unbuild": "0.8.9",
 		"vitest": "1.5.2"
 	},

packages/lib/src/container.tsx

@@ -8,7 +8,7 @@ type Props<Tag extends ElementType> = {
 type ComponentProps<Tag extends ElementType = 'div'> = Tag extends keyof JSX.IntrinsicElements
 	? Props<Tag>
 	: // eslint-disable-next-line @typescript-eslint/no-explicit-any
-	  Props<any>
+		Props<any>
 
 const Component = <Tag extends ElementType = 'div'>(
 	{ as: Element = 'div', ...props }: ComponentProps<Tag>,

packages/lib/src/lib.tsx

@@ -45,8 +45,8 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 		options.execution === 'execute'
 			? CONTAINER_STYLE_SET.invisible
 			: options.appearance === 'interaction-only'
-			? CONTAINER_STYLE_SET.interactionOnly
-			: CONTAINER_STYLE_SET[widgetSize]
+				? CONTAINER_STYLE_SET.interactionOnly
+				: CONTAINER_STYLE_SET[widgetSize]
 	)
 	const containerRef = useRef<HTMLElement | null>(null)
 	const firstRendered = useRef(false)
@@ -328,8 +328,8 @@ export const Turnstile = forwardRef<TurnstileInstance | undefined, TurnstileProp
 			options.execution === 'execute'
 				? CONTAINER_STYLE_SET.invisible
 				: renderConfig.appearance === 'interaction-only'
-				? CONTAINER_STYLE_SET.interactionOnly
-				: CONTAINER_STYLE_SET[widgetSize]
+					? CONTAINER_STYLE_SET.interactionOnly
+					: CONTAINER_STYLE_SET[widgetSize]
 		)
 	}, [options.execution, widgetSize, renderConfig.appearance])