@prosopo/client-bundle-example 2.11.0 → 2.11.2

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

@@ -1,5 +1,5 @@
 
-> @prosopo/client-bundle-example@2.11.0 build:cjs
+> @prosopo/client-bundle-example@2.11.2 build:cjs
 > NODE_ENV=${NODE_ENV:-development}; vite build --config vite.cjs.config.ts --mode $NODE_ENV
 
 ViteCommonJSConfig: .
@@ -16,6 +16,7 @@ ViteCommonJSConfig: .
 {
   externals: [
     '@prosopo/dotenv',
+The plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig paths resolution natively via the resolve.tsconfigPaths option. You can remove the plugin and set resolve.tsconfigPaths: true in your Vite config instead.
     '@prosopo/logger',
     '@prosopo/util',
     '@prosopo/locale',
@@ -23,7 +24,6 @@ ViteCommonJSConfig: .
     '@prosopo/util-crypto'
   ]
 }
-The plugin "vite-tsconfig-paths" is detected. Vite now supports tsconfig paths resolution natively via the resolve.tsconfigPaths option. You can remove the plugin and set resolve.tsconfigPaths: true in your Vite config instead.
 vite v8.1.5 building ssr environment for production...
 Bundle build started
 
@@ -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 55ms
+✓ built in 60ms

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

@@ -1,8 +1,8 @@
 
-> @prosopo/client-bundle-example@2.11.0 build:tsc
+> @prosopo/client-bundle-example@2.11.2 build:tsc
 > tsc --build --verbose
 
-2:42:19 PM - Projects in this build: 
+9:56:19 AM - 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
 
-2:42:19 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'
+9:56:19 AM - Project '../../dev/config/tsconfig.json' is up to date because newest input '../../dev/config/src/vite/vite.frontend.config.ts' is older than output '../../dev/config/tsconfig.tsbuildinfo'
 
-2:42:19 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'
+9:56:19 AM - Project '../../packages/util/tsconfig.json' is up to date because newest input '../../packages/util/src/verifyRecency.ts' is older than output '../../packages/util/tsconfig.tsbuildinfo'
 
-2:42:19 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'
+9:56:19 AM - Project '../../packages/logger/tsconfig.json' is up to date because newest input '../../packages/logger/src/tests/loggerBrowser.unit.test.ts' is older than output '../../packages/logger/tsconfig.tsbuildinfo'
 
-2:42:19 PM - Project '../../packages/dotenv/tsconfig.json' is up to date because newest input '../../packages/dotenv/src/tests/env.unit.test.ts' is older than output '../../packages/dotenv/tsconfig.tsbuildinfo'
+9:56:19 AM - 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'
 
-2:42:19 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'
+9:56:19 AM - Project '../../packages/locale/tsconfig.json' is up to date because newest input '../../packages/locale/src/util.ts' is older than output '../../packages/locale/tsconfig.tsbuildinfo'
 
-2:42:19 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'
+9:56:19 AM - 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'
 
-2:42:19 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'
+9:56:20 AM - 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'
 
-2:42:19 PM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
+9:56:20 AM - Project 'tsconfig.json' is out of date because output file 'tsconfig.tsbuildinfo' does not exist
 
-2:42:19 PM - Building project '/home/runner/work/captcha/captcha/demos/client-bundle-example/tsconfig.json'...
+9:56:20 AM - 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.0 build
+> @prosopo/client-bundle-example@2.11.2 build
 > npm run build:cross-env -- --mode ${NODE_ENV:-development}
 
 
-> @prosopo/client-bundle-example@2.11.0 build:cross-env
+> @prosopo/client-bundle-example@2.11.2 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 151ms
+✓ built in 59ms

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @prosopo/client-bundle-example
 
+## 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
+
+- 495c016: The public demo at demo.prosopo.io now reports page views to Plausible under the `demo.prosopo.io` site, so we can see who uses it. The tracker only loads on that exact host, so local runs, staging and the Cypress suite send nothing.
+
 ## 2.11.0
 ### Minor 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.0",
+	"version": "2.11.2",
 	"devDependencies": {
 		"@emotion/cache": "11.14.0",
-		"@prosopo/config": "3.3.17",
-		"@prosopo/dotenv": "3.0.56",
-		"@prosopo/locale": "3.4.3",
-		"@prosopo/types": "5.9.0",
+		"@prosopo/config": "3.4.2",
+		"@prosopo/dotenv": "3.0.58",
+		"@prosopo/locale": "3.6.1",
+		"@prosopo/types": "5.11.0",
 		"@types/node": "22.5.5",
 		"@vitest/coverage-v8": "4.1.11",
 		"concurrently": "9.0.1",

package/src/plugins/layout-injector.ts

@@ -40,13 +40,31 @@ const DOCS_URL = "https://docs.prosopo.io/";
 const ariaCurrent = (isCurrent: boolean): string =>
 	isCurrent ? ' aria-current="page"' : "";
 
+export const DEMO_HOSTNAME = "demo.prosopo.io";
+const PLAUSIBLE_SCRIPT_URL =
+	"https://prosopo.io/js/script.kairee5buy1chae8eit0so8ahphae9Oo.js";
+
+// Only the public demo reports to Plausible: local runs and the Cypress suite
+// serve these same pages.
+const analyticsTag = `
+    <script>
+      (function () {
+        if (location.hostname !== "${DEMO_HOSTNAME}") return;
+        var tracker = document.createElement("script");
+        tracker.defer = true;
+        tracker.setAttribute("data-domain", "${DEMO_HOSTNAME}");
+        tracker.src = "${PLAUSIBLE_SCRIPT_URL}";
+        document.head.appendChild(tracker);
+      })();
+    </script>`;
+
 const headTags = (prefix: string): string => `
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap">
-    <link rel="stylesheet" href="${prefix}styles/demo.css">`;
+    <link rel="stylesheet" href="${prefix}styles/demo.css">${analyticsTag}`;
 
 const header = `
 <header class="demo-header">

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/tests/plugins.unit.test.ts

@@ -24,7 +24,7 @@ import codeSnippetInjector, {
 	snippetFor,
 } from "../plugins/code-snippet-injector.js";
 import formFillerInjector from "../plugins/form-filler-injector.js";
-import layoutInjector from "../plugins/layout-injector.js";
+import layoutInjector, { DEMO_HOSTNAME } from "../plugins/layout-injector.js";
 import {
 	type DemoRendering,
 	demoPages,
@@ -161,6 +161,47 @@ describe("layoutInjector", () => {
 		);
 	});
 
+	it("loads Plausible only when served from the public demo host", () => {
+		const html = handler(page(), ctx(`${cwd}/src/pow-explicit.html`));
+		const inlineScript = html.match(
+			/<script>\s*\(function \(\) \{([\s\S]*?)\}\)\(\);\s*<\/script>/,
+		)?.[1];
+		expect(inlineScript).toBeDefined();
+
+		type FakeElement = Record<string, unknown>;
+		const loadedFrom = (hostname: string): FakeElement[] => {
+			const appended: FakeElement[] = [];
+			const fakeDocument = {
+				createElement: (): FakeElement => {
+					const element: FakeElement = {};
+					element.setAttribute = (name: string, value: string): void => {
+						element[name] = value;
+					};
+					return element;
+				},
+				head: {
+					appendChild: (element: FakeElement): void => {
+						appended.push(element);
+					},
+				},
+			};
+			new Function("location", "document", inlineScript ?? "")(
+				{ hostname },
+				fakeDocument,
+			);
+			return appended;
+		};
+
+		expect(loadedFrom("localhost")).toHaveLength(0);
+		expect(loadedFrom(`staging.${DEMO_HOSTNAME}`)).toHaveLength(0);
+		const [tracker] = loadedFrom(DEMO_HOSTNAME);
+		expect(tracker).toMatchObject({
+			defer: true,
+			"data-domain": DEMO_HOSTNAME,
+			src: "https://prosopo.io/js/script.kairee5buy1chae8eit0so8ahphae9Oo.js",
+		});
+	});
+
 	it("marks the current type, mode and rendering", () => {
 		const html = handler(page(), ctx(`${cwd}/src/pow-explicit.html`));
 
@@ -290,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")}`),