Merge branch 'main' into mt/css

martrapp · Jun 28, 2024 · 68e2a2d · 68e2a2d
2 parents e8da603 + d779ab9
commit 68e2a2d
Show file tree

Hide file tree

Showing 8 changed files with 686 additions and 450 deletions.
diff --git a/.changeset/cuddly-knives-move.md b/.changeset/cuddly-knives-move.md
@@ -0,0 +1,5 @@
+---
+'astro-vtbot': patch
+---
+
+Restructures window.\_\_vtbot, where The Bag keeps some global state.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # The Bag of Tricks for View Transitions
 
+## 1.7.24 - 2024-06-013
+
+### Patch Changes
+
+- 1e6e93c: VtBotDebug: include new signal property in event properties.
+
 ## 1.7.23 - 2024-06-01
 
 ### Patch Changes

diff --git a/components/VtBotDebug.astro b/components/VtBotDebug.astro
@@ -40,7 +40,7 @@ const active = import.meta.env.DEV || production;
 
 	declare global {
 		interface Window {
-			_vtbot: {
+			__vtbot: {
 				debug: {
 					capture: Record<string, any>;
 					originalMap: Map<string, string>;
@@ -56,7 +56,7 @@ const active = import.meta.env.DEV || production;
 	prefix.init('[vtbot-debug]', COLORED);
 	const enabled_out = () => !!document.querySelector('meta[name="vtbot-debug"]');
 
-	const enabled_in = () => window._vtbot?.debug?.closing ?? 0 > 0;
+	const enabled_in = () => window.__vtbot?.debug?.closing ?? 0 > 0;
 
 	let beginning = 0;
 
@@ -99,11 +99,12 @@ const active = import.meta.env.DEV || production;
 	 * log a property of the event
 	 */
 	async function delta(e: Record<string, any>, prop: string, deltaOnly = false) {
-		const vtbot_debug = window._vtbot.debug;
+
+		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;
@@ -114,6 +115,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]));
@@ -134,7 +143,7 @@ const active = import.meta.env.DEV || production;
 	 * Capture the event properties
 	 */
 	const doCapture = (e: Event) => {
-		window._vtbot.debug.capture = {
+		window.__vtbot.debug.capture = {
 			...e,
 			type: e.type,
 			cancelable: e.cancelable,
@@ -159,6 +168,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);
@@ -450,7 +460,7 @@ const active = import.meta.env.DEV || production;
 
 	function afterPreparation(e: Event) {
 		if (enabled_out()) {
-			logProperties(window._vtbot.debug.capture.event, true);
+			logProperties(window.__vtbot.debug.capture.event, true);
 			prefix.log(`Event handler for ${e.type}`);
 		}
 	}
@@ -466,17 +476,17 @@ const active = import.meta.env.DEV || production;
 					const map = elementsWithStyleProperty(document, 'view-transition-name');
 					[...map.values()].filter((set) => set.has(document.documentElement)).length === 0 &&
 						map.set('root', (map.get('root') ?? new Set()).add(document.documentElement));
-					window._vtbot.debug.originalMap = toCSSSelectorMap(map, 'old');
+					window.__vtbot.debug.originalMap = toCSSSelectorMap(map, 'old');
 				}
 				activateMutationObserver();
 				const originalSwap = swapEvent.swap;
 				swapEvent.swap = async () => {
 					prefix.log(`before execution of swap()`);
 					originalSwap();
-					logProperties(window._vtbot.debug.capture.event, true);
+					logProperties(window.__vtbot.debug.capture.event, true);
 					prefix.log(`after execution of swap()`);
 					prefix.log(`%o`, document.documentElement);
-					window._vtbot.debug.savedSwapEvent = swapEvent;
+					window.__vtbot.debug.savedSwapEvent = swapEvent;
 				};
 				doCapture(swapEvent);
 				swapEvent.viewTransition.updateCallbackDone
@@ -495,7 +505,7 @@ const active = import.meta.env.DEV || production;
 					})
 					.finally(() => {
 						logAnimations();
-						window._vtbot.debug.closing--;
+						window.__vtbot.debug.closing--;
 					});
 			} else {
 				prefix.slog('not a TransitionBeforeSwapEvent');
@@ -506,9 +516,9 @@ const active = import.meta.env.DEV || production;
 	const afterSwap = (e: Event) => {
 		if (enabled_in()) {
 			prefix.log(`Event handler for ${e.type}`);
-			const event = window._vtbot.debug.capture.event;
+			const event = window.__vtbot.debug.capture.event;
 			logProperties(event, true);
-			const vtbot_debug = window._vtbot.debug;
+			const vtbot_debug = window.__vtbot.debug;
 			if (supportsViewTransitions) {
 				logTransitions(vtbot_debug.originalMap, vtbot_debug.savedSwapEvent);
 			} else {
@@ -523,9 +533,9 @@ const active = import.meta.env.DEV || production;
 
 	function pageLoad(e: Event) {
 		if (enabled_in()) {
-			logProperties(window._vtbot.debug.capture.event, true);
+			logProperties(window.__vtbot.debug.capture.event, true);
 			prefix.log(`Event handler for ${e.type}`);
-			window._vtbot.debug.closing--;
+			window.__vtbot.debug.closing--;
 		}
 	}
 

diff --git a/components/VtBotDebug1.astro b/components/VtBotDebug1.astro
@@ -11,7 +11,7 @@
 		 * capture the original data of the eventsls
 		 */
 		const doCapture = (e) => {
-			window._vtbot.debug.capture = {
+			window.__vtbot.debug.capture = {
 				...e,
 				type: e.type,
 				cancelable: e.cancelable,
@@ -27,18 +27,18 @@
 			doCapture(e);
 			if (enabled()) {
 				console.log(`%c${PREFIX}%c Event handler for ${e.type}`, 'color:#48f', '');
-				window._vtbot.debug.closing = 2;
+				window.__vtbot.debug.closing = 2;
 			}
 		};
 
 		/*
 		 * Register the two "early" handlers
 		 */
-		if (window._vtbot?.debug === undefined) {
-			if (window._vtbot === undefined) {
-				window._vtbot = Object.create(null);
+		if (window.__vtbot?.debug === undefined) {
+			if (window.__vtbot === undefined) {
+				window.__vtbot = Object.create(null);
 			}
-			window._vtbot.debug = { listeningScripts: Object.create(null) };
+			window.__vtbot.debug = { listeningScripts: Object.create(null) };
 			document.addEventListener('astro:before-preparation', startProcessing);
 			document.addEventListener('astro:before-swap', startProcessing);
 		}