include signal in event properties

.changeset/long-fireants-itch.md

@@ -0,0 +1,5 @@
+---
+"astro-vtbot": patch
+---
+
+VtBotDebug: include new signal property in event properties.

components/VtBotDebug.astro

@@ -99,9 +99,9 @@ const active = import.meta.env.DEV || production;
 	async function delta(e: Record<string, any>, prop: string, deltaOnly = false) {
 		const _vtbot_debug = window._vtbot_debug;
 		let bold = (s: string) => `**${s}**`;
-		let deref = (x: any) => x;
-		let print = (x: any) => x;
-		let value = (x: any) => x;
+		let deref = (x: any) => x; // map value from properties
+		let print = (x: any) => x; // pretty print value
+		let value = (x: any) => x; // comaprison for difference
 
 		if (prop === 'to' || prop === 'from') {
 			deref = (x) => x?.href;
@@ -112,6 +112,14 @@ const active = import.meta.env.DEV || production;
 		} else if (prop === 'swap' || prop === 'loader') {
 			print = (x) => (x ? x.toString() : '(null)');
 			bold = (x) => x + '\n';
+		} else if (prop === 'signal') {
+			print = (x) => {
+				if (x.aborted) {
+					return `aborted${x.reason ? ' (' + x.reason + ')' : ''}${x.onabort ? ': ' + x.onabort.toString + '\n' : ''}`;
+				}
+				return `not aborted ${x.onabort ? ': ' + x.onabort.toString + '\n' : ''}`;
+			};
+			deref = print;
 		}
 
 		let different = () => value(deref(_vtbot_debug.capture[prop])) !== value(deref(e[prop]));
@@ -157,6 +165,7 @@ const active = import.meta.env.DEV || production;
 		delta(e, 'navigationType', deltaOnly);
 		delta(e, 'info', deltaOnly);
 		delta(e, 'newDocument', deltaOnly);
+		delta(e, 'signal', deltaOnly);
 		if (isTransitionBeforePreparationEvent(e)) {
 			delta(e, 'formData', deltaOnly);
 			delta(e, 'loader', deltaOnly);

test/fixture/src/pages/debug/debug1.astro

@@ -5,7 +5,7 @@ import VtBotDebug from 'astro-vtbot/components/VtBotDebug.astro';
 
 <Layout title="Debug1">
 	<VtBotDebug slot="head" />
-	<link rel="stylesheet" href="https://w3schools.com/lib/topnav/main.css" slot="head" />
+	<link rel="stylesheet" href="http://127.0.0.1:4321/main.css" slot="head" />
 
 	<h1>Debug 1</h1>
 	<p><a id="debug2" href="/debug/debug2/">Goto Page 2</a></p>