@prosopo/procaptcha-puzzle 2.13.2 → 2.14.0

package/.turbo/turbo-build$colon$cjs.log

@@ -1,5 +1,5 @@
 
-> @prosopo/procaptcha-puzzle@2.13.2 build:cjs
+> @prosopo/procaptcha-puzzle@2.14.0 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -46,10 +46,10 @@ Bundle build started
 ✓ 6 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/cjs/index.cjs                         0.22 kB │ gzip: 0.15 kB
-dist/cjs/components/ProcaptchaPuzzle.cjs   0.52 kB │ gzip: 0.27 kB
-dist/cjs/components/ProcaptchaWidget.cjs   7.61 kB │ gzip: 2.11 kB
+dist/cjs/index.cjs                         0.60 kB │ gzip: 0.21 kB
+dist/cjs/components/procaptchaPuzzle.cjs   0.74 kB │ gzip: 0.38 kB
+dist/cjs/components/procaptchaWidget.cjs   7.49 kB │ gzip: 2.10 kB
 dist/cjs/services/Manager.cjs              9.03 kB │ gzip: 2.48 kB
-dist/cjs/components/PuzzleCanvas.cjs      15.24 kB │ gzip: 4.29 kB
+dist/cjs/components/puzzleCanvas.cjs      13.76 kB │ gzip: 4.12 kB
 
-✓ built in 82ms
+✓ built in 70ms

package/.turbo/turbo-build$colon$tsc.log

@@ -1,8 +1,8 @@
 
-> @prosopo/procaptcha-puzzle@2.13.2 build:tsc
+> @prosopo/procaptcha-puzzle@2.14.0 build:tsc
 > tsc --build --verbose
 
-10:46:02 PM - Projects in this build: 
+11:04:26 AM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../locale/tsconfig.json
     * ../util/tsconfig.json
@@ -20,37 +20,37 @@
     * ../procaptcha-common/tsconfig.json
     * tsconfig.json
 
-10:46:02 PM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/webpack/webpack.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
+11:04:26 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/NodejsPolarsDirnamePlugin.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
 
-10:46:02 PM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/translationKey.ts' is older than output '../locale/tsconfig.tsbuildinfo'
+11:04:26 AM - Project '../locale/tsconfig.json' is up to date because newest input '../locale/src/process.ts' is older than output '../locale/tsconfig.tsbuildinfo'
 
-10:46:02 PM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/url.ts' is older than output '../util/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../util/tsconfig.json' is up to date because newest input '../util/src/ofLen.ts' is older than output '../util/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../util-crypto/tsconfig.json' is up to date because newest input '../util-crypto/src/types.ts' is older than output '../util-crypto/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../types/tsconfig.json' is up to date because newest input '../types/src/types.test-d.ts' is older than output '../types/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../api/tsconfig.json' is up to date because newest input '../api/src/index.ts' is older than output '../api/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../logger/tsconfig.json' is up to date because newest input '../logger/src/index.ts' is older than output '../logger/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/error.ts' is older than output '../common/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../common/tsconfig.json' is up to date because newest input '../common/src/utils/batches.ts' is older than output '../common/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/developmentProviderUrl.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../load-balancer/tsconfig.json' is up to date because newest input '../load-balancer/src/balancer.ts' is older than output '../load-balancer/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/theme.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../widget-skeleton/tsconfig.json' is up to date because newest input '../widget-skeleton/src/index.ts' is older than output '../widget-skeleton/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/browser.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../fingerprintjs/tsconfig.json' is up to date because newest input '../fingerprintjs/src/utils/async.ts' is older than output '../fingerprintjs/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../fingerprint/tsconfig.json' is up to date because newest input '../fingerprint/src/index.ts' is older than output '../fingerprint/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/index.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../keyring/tsconfig.json' is up to date because newest input '../keyring/src/keyring/keyring.test.ts' is older than output '../keyring/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../account/tsconfig.json' is up to date because newest input '../account/src/custom.d.ts' is older than output '../account/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/clientMetaData.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
+11:04:27 AM - Project '../procaptcha-common/tsconfig.json' is up to date because newest input '../procaptcha-common/src/tests/challengeSurfaceRender.unit.test.ts' is older than output '../procaptcha-common/tsconfig.tsbuildinfo'
 
-10:46:03 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+11:04:27 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-10:46:03 PM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-puzzle/tsconfig.json'...
+11:04:27 AM - Building project '/home/runner/work/captcha/captcha/packages/procaptcha-puzzle/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @prosopo/procaptcha-puzzle@2.13.2 build
+> @prosopo/procaptcha-puzzle@2.14.0 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/procaptcha-puzzle@2.13.2 build:cross-env
+> @prosopo/procaptcha-puzzle@2.14.0 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -51,10 +51,10 @@ Bundle build started
 rendering chunks...
 computing gzip size...
 dist/_virtual/_rolldown/runtime.js    0.04 kB │ gzip: 0.06 kB
-dist/index.js                         0.14 kB │ gzip: 0.11 kB
-dist/components/ProcaptchaPuzzle.js   0.38 kB │ gzip: 0.24 kB
-dist/components/ProcaptchaWidget.js   7.08 kB │ gzip: 2.09 kB
+dist/index.js                         0.38 kB │ gzip: 0.16 kB
+dist/components/procaptchaPuzzle.js   0.65 kB │ gzip: 0.36 kB
+dist/components/procaptchaWidget.js   7.16 kB │ gzip: 2.09 kB
 dist/services/Manager.js              8.49 kB │ gzip: 2.44 kB
-dist/components/PuzzleCanvas.js      14.47 kB │ gzip: 4.25 kB
+dist/components/puzzleCanvas.js      13.18 kB │ gzip: 4.10 kB
 
-✓ built in 79ms
+✓ built in 58ms

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @prosopo/procaptcha-puzzle
 
+## 2.14.0
+### Minor Changes
+
+- 59c02da: Replace React with vanilla TS/DOM in the widget.
+  
+  The widget packages no longer depend on react, react-dom, @emotion or
+  react-i18next: every component is now a `mount*` function returning a handle
+  with `update`/`destroy`. `useTranslation` is replaced by `createTranslator`,
+  which exposes i18next's `t` plus the events that used to trigger a re-render.
+  The rendered markup, styling and behaviour are unchanged — only the
+  implementation is.
+  
+  Everything the widget has gained since this rewrite started is carried over,
+  so nothing is lost by dropping React: the shared challenge surface (popup and
+  float placement, escape/outside-click dismissal and the dialog focus trap),
+  the image-tile and puzzle-piece keyboard paths, the checkbox's focus handover
+  across the loading swap, the server-rendered puzzle imagery, `startMode:
+  "manual"` with `window.procaptcha.start()`, `data-bind` / targeted
+  `execute(widgetId)`, the Web Bot Auth "authenticated" badge, the client
+  session id, and the bounded session re-mint and reload handling in the
+  frictionless wrapper.
+
+### Patch Changes
+
+- Updated dependencies [59c02da]
+  - @prosopo/procaptcha-common@2.16.0
+  - @prosopo/locale@3.5.0
+  - @prosopo/common@3.1.58
+  - @prosopo/types@5.9.2
+  - @prosopo/api@4.3.2
+
+## 2.13.4
+### Patch Changes
+
+- Updated dependencies [a22069d]
+  - @prosopo/types@5.9.1
+  - @prosopo/locale@3.4.4
+  - @prosopo/api@4.3.1
+  - @prosopo/common@3.1.57
+  - @prosopo/procaptcha-common@2.15.1
+
+## 2.13.3
+### Patch Changes
+
+- Updated dependencies [a606f54]
+- Updated dependencies [0f23010]
+  - @prosopo/types@5.9.0
+  - @prosopo/procaptcha-common@2.15.0
+  - @prosopo/api@4.3.0
+
 ## 2.13.2
 ### Patch Changes
 

package/dist/cjs/components/procaptchaPuzzle.cjs

@@ -0,0 +1,22 @@
+//#region src/components/procaptchaPuzzle.ts
+/**
+* Dynamic import so the puzzle widget lands in its own chunk, replacing the
+* `lazy()` + `<Suspense>` pair that used to provide the split.
+*/
+var loadProcaptchaPuzzle = async () => (await Promise.resolve().then(() => require("./procaptchaWidget.cjs"))).mountProcaptchaPuzzleWidget;
+var mountProcaptchaPuzzle = (container, props) => {
+	let destroyed = false;
+	let inner;
+	loadProcaptchaPuzzle().then((mount) => {
+		if (destroyed) return;
+		inner = mount(container, props);
+	});
+	return { destroy: () => {
+		destroyed = true;
+		inner?.destroy();
+		inner = void 0;
+	} };
+};
+//#endregion
+exports.loadProcaptchaPuzzle = loadProcaptchaPuzzle;
+exports.mountProcaptchaPuzzle = mountProcaptchaPuzzle;

package/dist/cjs/components/procaptchaWidget.cjs

@@ -0,0 +1,225 @@
+const require_Manager = require("../services/Manager.cjs");
+const require_puzzleCanvas = require("./puzzleCanvas.cjs");
+let _prosopo_locale = require("@prosopo/locale");
+let _prosopo_procaptcha_common = require("@prosopo/procaptcha-common");
+let _prosopo_types = require("@prosopo/types");
+let _prosopo_widget_skeleton = require("@prosopo/widget-skeleton");
+//#region src/components/procaptchaWidget.ts
+var PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+var mountProcaptchaPuzzleWidget = (container, props) => {
+	const teardown = new _prosopo_procaptcha_common.Teardown();
+	const config = props.config;
+	const i18n = props.i18n;
+	const frictionlessState = props.frictionlessState;
+	const callbacks = props.callbacks || {};
+	const translator = (0, _prosopo_locale.createTranslator)(i18n);
+	const isInvisible = _prosopo_types.ModeEnum.invisible === config.mode;
+	const store = (0, _prosopo_procaptcha_common.createProcaptchaState)();
+	let loading = false;
+	let puzzlePhase = "checkbox";
+	let challengeData = null;
+	let showRetry = false;
+	let lastError = store.state.error;
+	let lastCoords = null;
+	let sessionInvalidatedFired = false;
+	let honeypot;
+	let checkbox;
+	let puzzle;
+	const updateState = (0, _prosopo_procaptcha_common.buildUpdateState)(store.state, store.update);
+	const manager = require_Manager.Manager(config, store.state, updateState, callbacks, frictionlessState, () => honeypot?.getValue());
+	const root = (0, _prosopo_procaptcha_common.createElement)("div");
+	container.appendChild(root);
+	if (frictionlessState?.hp) honeypot = (0, _prosopo_procaptcha_common.mountHoneypot)(root, { encodedQuestion: frictionlessState.hp });
+	const handlePuzzleComplete = async (finalX, finalY, puzzleEvents) => {
+		puzzlePhase = "submitting";
+		scheduler.schedule();
+		let verified = false;
+		try {
+			verified = await manager.submitSolution(finalX, finalY, puzzleEvents);
+		} catch (error) {
+			callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+		}
+		if (verified) {
+			puzzlePhase = "checkbox";
+			challengeData = null;
+			showRetry = false;
+			loading = false;
+			scheduler.schedule();
+			return;
+		}
+		showRetry = true;
+		puzzlePhase = "dragging";
+		scheduler.schedule();
+		try {
+			const newChallenge = await manager.start();
+			if (newChallenge) challengeData = newChallenge;
+			else {
+				puzzlePhase = "checkbox";
+				challengeData = null;
+				showRetry = false;
+			}
+		} catch {
+			puzzlePhase = "checkbox";
+			challengeData = null;
+			showRetry = false;
+		}
+		loading = false;
+		scheduler.schedule();
+	};
+	const handleDismiss = () => {
+		puzzlePhase = "checkbox";
+		challengeData = null;
+		showRetry = false;
+		loading = false;
+		scheduler.schedule();
+	};
+	const puzzleProps = (challenge) => ({
+		originX: challenge.originX,
+		originY: challenge.originY,
+		background: challenge.background,
+		piece: challenge.piece,
+		pieceSize: challenge.pieceSize,
+		onComplete: (finalX, finalY, events) => {
+			handlePuzzleComplete(finalX, finalY, events);
+		},
+		showRetry,
+		submitting: "submitting" === puzzlePhase,
+		theme: "light" === config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme,
+		translator,
+		placement: config.placement,
+		anchor: props.container,
+		onDismiss: handleDismiss
+	});
+	const runErrorEffect = () => {
+		if (store.state.error === lastError) return;
+		lastError = store.state.error;
+		if (!store.state.error) return;
+		loading = false;
+		puzzlePhase = "checkbox";
+		challengeData = null;
+		showRetry = false;
+		if ("CAPTCHA.NO_SESSION_FOUND" !== store.state.error.key) return;
+		if (props.onSessionInvalidated && !sessionInvalidatedFired) {
+			sessionInvalidatedFired = true;
+			props.onSessionInvalidated(lastCoords?.x, lastCoords?.y);
+			return;
+		}
+		if (frictionlessState) {
+			const timer = setTimeout(() => {
+				frictionlessState.restart();
+			}, 100);
+			teardown.add(() => clearTimeout(timer));
+		}
+	};
+	const render = () => {
+		runErrorEffect();
+		if (("dragging" === puzzlePhase || "submitting" === puzzlePhase) && null !== challengeData && null !== challengeData) if (void 0 === puzzle) puzzle = require_puzzleCanvas.mountPuzzleCanvas(puzzleProps(challengeData));
+		else puzzle.update(puzzleProps(challengeData));
+		else {
+			puzzle?.destroy();
+			puzzle = void 0;
+		}
+		checkbox?.update(checkboxProps());
+	};
+	const scheduler = (0, _prosopo_procaptcha_common.createRenderScheduler)(render);
+	const checkboxProps = () => ({
+		checked: store.state.isHuman,
+		theme: "light" === config.theme ? _prosopo_widget_skeleton.lightTheme : _prosopo_widget_skeleton.darkTheme,
+		labelText: translator.isReady() ? translator.t("WIDGET.I_AM_HUMAN") : "",
+		error: store.state.error?.message,
+		loadingText: translator.t("WIDGET.CHECKING", { defaultValue: "Checking that you are human" }),
+		loading: loading || "submitting" === puzzlePhase,
+		onChange: async (event) => {
+			if (loading) return;
+			loading = true;
+			showRetry = false;
+			scheduler.schedule();
+			let x = 0;
+			let y = 0;
+			if (!(0, _prosopo_procaptcha_common.isEventTrusted)(event)) {} else if ("touches" in event && event.touches.length > 0) {
+				const touch = event.touches[0];
+				if (touch) {
+					x = touch.clientX;
+					y = touch.clientY;
+				}
+			} else if ("clientX" in event && "clientY" in event) {
+				x = event.clientX;
+				y = event.clientY;
+			}
+			lastCoords = {
+				x,
+				y
+			};
+			try {
+				const challenge = await manager.start(x, y);
+				if (challenge) {
+					challengeData = challenge;
+					puzzlePhase = "dragging";
+				}
+			} catch (error) {
+				callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+			} finally {
+				loading = false;
+				scheduler.schedule();
+			}
+		}
+	});
+	if (!isInvisible) checkbox = (0, _prosopo_procaptcha_common.mountCheckbox)(root, checkboxProps());
+	teardown.add(scheduler.cancel);
+	teardown.add(store.subscribe(scheduler.schedule));
+	teardown.add(translator.subscribe(scheduler.schedule));
+	const handleExecute = () => {
+		(async () => {
+			if (loading) return;
+			loading = true;
+			showRetry = false;
+			scheduler.schedule();
+			try {
+				const challenge = await manager.start();
+				if (challenge) {
+					challengeData = challenge;
+					puzzlePhase = "dragging";
+				}
+			} catch (error) {
+				callbacks.onError?.(error instanceof Error ? error : new Error(String(error)));
+			} finally {
+				loading = false;
+				scheduler.schedule();
+			}
+		})();
+	};
+	if (props.container) teardown.addEventListener(props.container, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (isInvisible) teardown.addEventListener(document, PROCAPTCHA_EXECUTE_EVENT, handleExecute);
+	if (config.language) if (i18n) {
+		if (i18n.language !== config.language) i18n.changeLanguage(config.language);
+	} else (0, _prosopo_locale.loadI18next)(false, config.language);
+	if (props.autoStart) {
+		loading = true;
+		showRetry = false;
+		const coords = props.startCoords;
+		lastCoords = coords ?? null;
+		scheduler.schedule();
+		manager.start(coords?.x ?? 0, coords?.y ?? 0).then((challenge) => {
+			if (challenge) {
+				challengeData = challenge;
+				puzzlePhase = "dragging";
+			}
+			loading = false;
+			scheduler.schedule();
+		}, () => {
+			loading = false;
+			scheduler.schedule();
+		});
+	}
+	render();
+	return { destroy: () => {
+		teardown.run();
+		puzzle?.destroy();
+		checkbox?.destroy();
+		honeypot?.destroy();
+		root.parentNode?.removeChild(root);
+	} };
+};
+//#endregion
+exports.default = mountProcaptchaPuzzleWidget;
+exports.mountProcaptchaPuzzleWidget = mountProcaptchaPuzzleWidget;