@prosopo/client-bundle-example 2.11.1 → 2.11.3

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

@@ -1,5 +1,5 @@
 
-> @prosopo/client-bundle-example@2.11.1 build:cjs
+> @prosopo/client-bundle-example@2.11.3 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -33,4 +33,4 @@ computing gzip size...
 dist/cjs/index.cjs          0.71 kB │ gzip: 0.27 kB
 dist/cjs/plugins/pages.cjs  4.63 kB │ gzip: 1.20 kB
 
-✓ built in 66ms
+✓ built in 52ms

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

@@ -1,8 +1,8 @@
 
-> @prosopo/client-bundle-example@2.11.1 build:tsc
+> @prosopo/client-bundle-example@2.11.3 build:tsc
 > tsc --build --verbose
 
-3:36:52 PM - Projects in this build: 
+12:38:23 PM - Projects in this build: 
     * ../../dev/config/tsconfig.json
     * ../../packages/util/tsconfig.json
     * ../../packages/logger/tsconfig.json
@@ -12,21 +12,21 @@
     * ../../packages/types/tsconfig.json
     * tsconfig.json
 
-3:36:52 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'
+12:38:23 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'
 
-3:36:52 PM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/url.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/index.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/index.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/index.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/env.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/translationKey.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/util-crypto/tsconfig.json' is up to date because newest input '../../packages/util-crypto/src/types.ts' is older than output '../../packages/util-crypto/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/types.test-d.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
+12:38:23 PM - Project '../../packages/types/tsconfig.json' is up to date because newest input '../../packages/types/src/types.test-d.ts' is older than output '../../packages/types/tsconfig.tsbuildinfo'
 
-3:36:52 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+12:38:23 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-3:36:52 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
+12:38:23 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
 

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @prosopo/client-bundle-example@2.11.1 build
+> @prosopo/client-bundle-example@2.11.3 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/client-bundle-example@2.11.1 build:cross-env
+> @prosopo/client-bundle-example@2.11.3 build:cross-env
 > vite build --config vite.esm.config.ts --mode production
 
 ViteEsmConfig: .
@@ -38,4 +38,4 @@ dist/_virtual/_rolldown/runtime.js  0.04 kB │ gzip: 0.06 kB
 dist/index.js                       0.42 kB │ gzip: 0.19 kB
 dist/plugins/pages.js               4.04 kB │ gzip: 1.15 kB
 
-✓ built in 67ms
+✓ built in 124ms

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @prosopo/client-bundle-example
 
+## 2.11.3
+### Patch Changes
+
+- 8178ab2: The explicit-render demo pages now wait for `render()` before logging, so they show the real widget id instead of `widget ID: [object Promise]`. The two frictionless explicit pages log the id as well. A test checks that every demo page waits for `render()`.
+
+## 2.11.2
+### Patch Changes
+
+- d4c1fa2: Make the explicit-render demo pages show a widget again. The status-log helper was defined in a module script that Vite placed after the page's own entry module, so `window.updateCaptchaStatus(...)` threw at the top of frictionless-, image-, puzzle- and puzzle-bind-explicit before `render()` was called. The helper is now defined by a classic script at the start of `<head>`, and only the callback wrapping stays in a module after the entry.
+
 ## 2.11.1
 ### Patch Changes
 

package/package.json

@@ -25,13 +25,13 @@
 		"start": "NODE_ENV=${NODE_ENV:-development}; vite serve ./src --port 9232 --config vite.config.ts --mode=$NODE_ENV",
 		"test": "NODE_ENV=${NODE_ENV:-test}; npx vitest run --config ./vite.test.config.ts"
 	},
-	"version": "2.11.1",
+	"version": "2.11.3",
 	"devDependencies": {
 		"@emotion/cache": "11.14.0",
-		"@prosopo/config": "3.4.1",
-		"@prosopo/dotenv": "3.0.57",
-		"@prosopo/locale": "3.6.0",
-		"@prosopo/types": "5.10.2",
+		"@prosopo/config": "3.4.2",
+		"@prosopo/dotenv": "3.0.59",
+		"@prosopo/locale": "3.6.2",
+		"@prosopo/types": "5.12.0",
 		"@types/node": "22.5.5",
 		"@vitest/coverage-v8": "4.1.11",
 		"concurrently": "9.0.1",

package/src/frictionless-explicit-web3.html

@@ -219,7 +219,7 @@
             const captchaContainer = document.getElementById('procaptcha-container');
 
             // Render the CAPTCHA
-            const widgetId = render(captchaContainer, {
+            const widgetId = await render(captchaContainer, {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
                 callback: onCaptchaVerified,
                 "failed-callback": function () {
@@ -229,6 +229,7 @@
                 web3: true,
                 userAccountAddress: account
             });
+            window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
         })
 
 </script>

package/src/frictionless-explicit.html

@@ -189,7 +189,7 @@
     window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
 
     // Render the CAPTCHA
-    const widgetId = render(captchaContainer, {
+    const widgetId = await render(captchaContainer, {
         siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
         placement,
         callback: onCaptchaVerified,
@@ -198,6 +198,7 @@
             window.updateCaptchaStatus('Challenge failed - CAPTCHA verification could not be completed', 'error');
         }
     });
+    window.updateCaptchaStatus('CAPTCHA render function called with widget ID: ' + widgetId, 'info');
 
 </script>
 </body>

package/src/image-explicit-web3.html

@@ -157,7 +157,7 @@
 
             // Render the CAPTCHA
 
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/image-explicit.html

@@ -116,7 +116,7 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
@@ -127,7 +127,7 @@
                     : "popup";
             window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
 
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
                 placement,
                 callback: handleCaptchaResponse,

package/src/invisible-frictionless-explicit.html

@@ -93,11 +93,11 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_FRICTIONLESS,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/invisible-image-explicit.html

@@ -117,11 +117,11 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_IMAGE,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/invisible-pow-explicit.html

@@ -117,11 +117,11 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/invisible-puzzle-explicit.html

@@ -116,11 +116,11 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_PUZZLE,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/plugins/status-log-injector.ts

@@ -17,9 +17,18 @@
 import type { IndexHtmlTransformContext, Plugin } from "vite";
 import { fillSlot } from "./slots.js";
 
+// Opening tag of <head>, attributes and all.
+const HEAD_OPEN = /<head(\s[^>]*)?>/i;
+
 export default function statusLogInjector(): Plugin {
-	const statusLogJs = `
-	<script type="module">
+	// A classic script at the very start of <head>, so it runs during parsing,
+	// before any module script. By the time this plugin runs ("post"), Vite has
+	// already hoisted the page's own entry module into <head>, and module
+	// scripts run in document order: defined in the module below, the helper
+	// did not exist yet when the explicit-render pages called it at top level,
+	// so they threw before render() and never showed a widget.
+	const updateStatusJs = `
+	<script>
 		function updateCaptchaStatus(message, type = 'info') {
 			const statusContainer = document.getElementById('captcha-status');
 			if (!statusContainer) return;
@@ -43,6 +52,14 @@ export default function statusLogInjector(): Plugin {
 		}
 
 		window.updateCaptchaStatus = updateCaptchaStatus;
+	</script>
+  `;
+
+	// A module, after the page's entry module, because it wraps the callbacks
+	// that module defines.
+	const statusLogJs = `
+	<script type="module">
+		const updateCaptchaStatus = window.updateCaptchaStatus;
 
 		// Wrap the page's own callbacks so every page logs the same events.
 		const originalOnCaptchaFailed = window.onCaptchaFailed;
@@ -104,7 +121,13 @@ export default function statusLogInjector(): Plugin {
 					return html;
 				}
 
-				const withJs = html.replace("</head>", () => `${statusLogJs}</head>`);
+				const withHelper = HEAD_OPEN.test(html)
+					? html.replace(HEAD_OPEN, (open) => `${open}${updateStatusJs}`)
+					: html;
+				const withJs = withHelper.replace(
+					"</head>",
+					() => `${statusLogJs}</head>`,
+				);
 
 				const inSlot = fillSlot(withJs, "events", statusLogHtml);
 				if (inSlot) {

package/src/pow-explicit-web3.html

@@ -154,7 +154,7 @@
             // Render the CAPTCHA
             const account = document.getElementById('account-select') ? document.getElementById('account-select').value : null;
             window.updateCaptchaStatus(`Rendering the CAPTCHA for account ${account}`, 'info');
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed,

package/src/pow-explicit.html

@@ -116,11 +116,11 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_POW,
                 callback: handleCaptchaResponse,
                 "failed-callback": handleCaptchaFailed

package/src/puzzle-explicit.html

@@ -116,7 +116,7 @@
         }
 
         // Wait for DOM content to be loaded
-        document.addEventListener('DOMContentLoaded', function() {
+        document.addEventListener('DOMContentLoaded', async function() {
             window.updateCaptchaStatus('Initializing CAPTCHA with explicit render call', 'info');
 
             // Render the CAPTCHA
@@ -127,7 +127,7 @@
                     : "popup";
             window.updateCaptchaStatus('Challenge placement: ' + placement, 'info');
 
-            const widgetId = render(document.getElementById('procaptcha-container'), {
+            const widgetId = await render(document.getElementById('procaptcha-container'), {
                 siteKey: import.meta.env.PROSOPO_SITE_KEY_PUZZLE,
                 placement,
                 callback: handleCaptchaResponse,

package/src/tests/explicitRender.unit.test.ts

@@ -0,0 +1,49 @@
+// 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 fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+// `render()` resolves to the widget id; a demo that uses its return value
+// without awaiting it prints "[object Promise]" instead of the id.
+const srcDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+
+const pagesCallingRender: string[] = fs
+	.readdirSync(srcDir)
+	.filter((file: string) => file.endsWith(".html"))
+	.filter((file: string) =>
+		/\brender\(/.test(fs.readFileSync(path.join(srcDir, file), "utf8")),
+	);
+
+describe("explicit-render demo pages", () => {
+	it("finds pages to check", () => {
+		expect(pagesCallingRender.length).toBeGreaterThan(0);
+	});
+
+	it.each(pagesCallingRender)("%s awaits render()", (file: string) => {
+		const html = fs.readFileSync(path.join(srcDir, file), "utf8");
+		const unawaited: string[] = html
+			.split("\n")
+			.filter(
+				(line: string) =>
+					/(?<![.\w])render\(/.test(line) &&
+					!/await\s+render\(/.test(line) &&
+					!/function\s+render\(/.test(line),
+			)
+			.map((line: string) => line.trim());
+		expect(unawaited).toEqual([]);
+	});
+});

package/src/tests/plugins.unit.test.ts

@@ -331,6 +331,32 @@ describe("statusLogInjector", () => {
 		expect(html).toContain("updateCaptchaStatus");
 	});
 
+	it("defines updateCaptchaStatus before the page's entry module runs", () => {
+		// What Vite hands a "post" transform: the entry module already hoisted
+		// into <head>. Module scripts run in document order, so the helper must
+		// be defined by a classic script ahead of it.
+		const built =
+			'<html><head><title>demo</title><script type="module" crossorigin src="/assets/entry.js"></script></head><body><p>hi</p></body></html>';
+		const html = handler(built, ctx("src/frictionless-explicit.html"));
+
+		const definedAt = html.indexOf("window.updateCaptchaStatus = ");
+		const entryAt = html.indexOf('src="/assets/entry.js"');
+		expect(definedAt).toBeGreaterThan(-1);
+		expect(definedAt).toBeLessThan(entryAt);
+		const definingScript = html.lastIndexOf("<script", definedAt);
+		expect(html.slice(definingScript, definedAt)).not.toContain("module");
+	});
+
+	it("wraps the page callbacks after the page's entry module", () => {
+		const built =
+			'<html><head><script type="module" src="/assets/entry.js"></script></head><body></body></html>';
+		const html = handler(built, ctx("src/image-explicit.html"));
+
+		expect(html.indexOf("window.onCaptchaFailed = ")).toBeGreaterThan(
+			html.indexOf('src="/assets/entry.js"'),
+		);
+	});
+
 	it("fills the events slot when the layout provides one", () => {
 		const html = handler(
 			page(`<form></form>${slotMarkup("events")}`),