@prosopo/procaptcha-bundle 3.2.10 → 4.1.7

package/src/util/widgetFactory.ts

@@ -0,0 +1,145 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { loadI18next } from "@prosopo/locale";
+import type { Ti18n } from "@prosopo/locale";
+import {
+	getDefaultCallbacks,
+	setUserCallbacks,
+} from "@prosopo/procaptcha-common";
+import type { Callbacks, ProcaptchaRenderOptions } from "@prosopo/types";
+import {
+	createWidgetSkeleton,
+	darkTheme,
+	lightTheme,
+} from "@prosopo/widget-skeleton";
+import type { Root } from "react-dom/client";
+import type { CaptchaRenderer } from "./captcha/captchaRenderer.js";
+import type { WidgetThemeResolver } from "./widgetThemeResolver.js";
+
+class WidgetFactory {
+	private captchaRenderer: CaptchaRenderer | null = null;
+	private _i18n: Ti18n | null = null;
+
+	public constructor(
+		private readonly widgetThemeResolver: WidgetThemeResolver,
+	) {}
+
+	get i18n(): Ti18n {
+		if (this._i18n === null) {
+			throw new Error("I18n is not initialized");
+		}
+		return this._i18n;
+	}
+
+	public async createWidgets(
+		containers: Element[],
+		renderOptions: ProcaptchaRenderOptions,
+		isWeb2 = true,
+		invisible = false,
+	): Promise<Root[]> {
+		return Promise.all(
+			containers.map((container) => {
+				const callbacks = getDefaultCallbacks(container);
+				setUserCallbacks(renderOptions, callbacks, container);
+				return this.createWidget(
+					container,
+					renderOptions,
+					callbacks,
+					isWeb2,
+					invisible,
+				);
+			}),
+		);
+	}
+
+	public async createWidget(
+		container: Element,
+		renderOptions: ProcaptchaRenderOptions,
+		callbacks: Callbacks,
+		isWeb2 = true,
+		invisible = false,
+	): Promise<Root> {
+		renderOptions.theme = this.widgetThemeResolver.resolveWidgetTheme(
+			container,
+			renderOptions,
+		);
+
+		const widgetTheme =
+			"light" === renderOptions.theme ? lightTheme : darkTheme;
+
+		let widgetInteractiveArea: HTMLElement;
+		let widgetContainer: HTMLElement;
+
+		// Don't create the widget skeleton if the mode is invisible
+		if (invisible) {
+			//Create new div inside the container
+			const newDiv = document.createElement("div");
+			container.appendChild(newDiv);
+			widgetInteractiveArea = newDiv as HTMLElement;
+			widgetContainer = newDiv;
+		} else {
+			const widgetResult = createWidgetSkeleton(
+				container,
+				widgetTheme,
+				"prosopo-procaptcha",
+			);
+			widgetInteractiveArea = widgetResult.widgetInteractiveArea;
+			widgetContainer = widgetResult.webComponent;
+		}
+
+		// all the captcha-rendering logic is lazy-loaded, to avoid react & zod delay the initial widget creation.
+
+		const captchaRenderer = await this.getCaptchaRenderer();
+
+		const captchaRoot = captchaRenderer.renderCaptcha(
+			{
+				identifierPrefix: "procaptcha-",
+				emotionCacheKey: "procaptcha",
+				webComponentTag: "prosopo-procaptcha",
+			},
+			widgetInteractiveArea,
+			renderOptions,
+			callbacks,
+			isWeb2,
+			this.i18n,
+			invisible,
+			widgetContainer,
+			container,
+		);
+
+		return captchaRoot;
+	}
+
+	protected async getCaptchaRenderer(): Promise<CaptchaRenderer> {
+		if (this._i18n === null) {
+			this._i18n = await loadI18next(false);
+		}
+
+		if (this.captchaRenderer === null) {
+			this.captchaRenderer = await this.createCaptchaRenderer();
+		}
+
+		return this.captchaRenderer;
+	}
+
+	protected async createCaptchaRenderer(): Promise<CaptchaRenderer> {
+		const CaptchaRenderer = (await import("./captcha/captchaRenderer.js"))
+			.CaptchaRenderer;
+
+		return new CaptchaRenderer();
+	}
+}
+
+export { WidgetFactory };

package/src/util/widgetThemeResolver.ts

@@ -0,0 +1,40 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { ProcaptchaRenderOptions } from "@prosopo/types";
+
+class WidgetThemeResolver {
+	private readonly themesSet = new Set(["light", "dark"]);
+	private readonly defaultTheme = "light";
+
+	public resolveWidgetTheme(
+		element: Element,
+		renderOptions: ProcaptchaRenderOptions,
+	): "light" | "dark" {
+		const themeAttribute =
+			renderOptions.theme ||
+			element.getAttribute("data-theme") ||
+			this.defaultTheme;
+
+		return this.validateTheme(themeAttribute);
+	}
+
+	protected validateTheme(themeAttribute: string): "light" | "dark" {
+		return this.themesSet.has(themeAttribute)
+			? (themeAttribute as "light" | "dark")
+			: this.defaultTheme;
+	}
+}
+
+export { WidgetThemeResolver };

package/tsconfig.cjs.json

@@ -0,0 +1,35 @@
+{
+	"extends": "../../tsconfig.cjs.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist/cjs",
+		"lib": ["es6", "dom"]
+	},
+	"include": ["src/index.ts", "src/index.html"],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.cjs.json"
+		},
+		{
+			"path": "../dotenv/tsconfig.cjs.json"
+		},
+		{
+			"path": "../locale/tsconfig.cjs.json"
+		},
+		{
+			"path": "../procaptcha-frictionless/tsconfig.cjs.json"
+		},
+		{
+			"path": "../types/tsconfig.cjs.json"
+		},
+		{
+			"path": "../util/tsconfig.cjs.json"
+		},
+		{
+			"path": "../widget-skeleton/tsconfig.cjs.json"
+		},
+		{
+			"path": "../procaptcha-common/tsconfig.cjs.json"
+		}
+	]
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+	"extends": "../../tsconfig.esm.json",
+	"compilerOptions": {
+		"rootDir": "./src",
+		"outDir": "./dist",
+		"lib": ["es6", "dom"]
+	},
+	"include": [
+		"src",
+		"src/**/*.json",
+		"src/index.html",
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.d.ts"
+	],
+	"references": [
+		{
+			"path": "../../dev/config/tsconfig.json"
+		},
+		{
+			"path": "../dotenv"
+		},
+		{
+			"path": "../locale"
+		},
+		{
+			"path": "../procaptcha-frictionless"
+		},
+		{
+			"path": "../types"
+		},
+		{
+			"path": "../util"
+		},
+		{
+			"path": "../widget-skeleton"
+		},
+		{
+			"path": "../procaptcha-common"
+		}
+	]
+}