Fix race condition when cleaning up polyfilled type attributes

Author: martrapp

.changeset/tasty-eggs-sing.md

@@ -0,0 +1,5 @@
+---
+'@vtbag/utensil-drawer': patch
+---
+
+Fixes a race condition where the wrong polyfill classes were removed when a transition was skipped.

README.md

@@ -12,13 +12,13 @@ Utensil Drawer: Pick the tools you need to craft the view transitions you want!
 The @vtbag website can be found at https://vtbag.dev/
 
 ## !!! News !!!
-
-> `mayStartViewTransition` can now also handle scoped view transitions on supporting browsers. Usage: add `scope: someElement` to the extension object. 
+Fixed a race condition that led to removal of the wrong polyfill classes during cleanup. 
 
 For details see https://vtbag.dev/tools/utensil-drawer/
 
 ## What happened before?
 
+> `mayStartViewTransition` can now also handle scoped view transitions on supporting browsers. Usage: add `scope: someElement` to the extension object. 
 
 > Do many of the elements you want to automatically add view-transition-names to fall outside the viewport? The declarative-names script now supports a new pseudo-class that you can add at the end of selectors. By using `:in-viewport`, only the elements overlapping with the current viewport will be named!
 

src/may-start-view-transition.ts

@@ -1,4 +1,4 @@
-import { getTypeAttributes, polyfilledTypes, root } from './polyfilled-types.js';
+import { polyfilledTypes, root } from './polyfilled-types.js';
 import {
 	createViewTransitionProxy,
 	SwitchableViewTransition,
@@ -135,22 +135,37 @@ export function mayStartViewTransition(
 	if (!scopeData.currentViewTransition || collisionBehavior === 'skipOld') {
 		scopeData.keepLast = !!scopeData.currentViewTransition && !!scopeData.open;
 		scopeData.open = requestAnimationFrame(() => close(scopeData));
-		scopeData.currentViewTransition = polyfilledTypes(
-			scope,
-			(scopeData.currentViewTransition = surrogate
-				? createViewTransitionSurrogate(unchainUpdates)
-				: scope.startViewTransition!(unchainUpdates)),
-			useTypesPolyfill === 'always' || (useTypesPolyfill !== 'never' && nativeSupport === 'partial')
-		);
+		scopeData.currentViewTransition = surrogate
+			? createViewTransitionSurrogate(unchainUpdates)
+			: scope.startViewTransition!(unchainUpdates);
+		if (
+			useTypesPolyfill === 'always' ||
+			(useTypesPolyfill !== 'never' && nativeSupport === 'partial')
+		)
+			scopeData.currentViewTransition = polyfilledTypes(scope, scopeData.currentViewTransition);
+
+		const localTransition = scopeData.currentViewTransition;
 		if (catchErrors) {
 			const error = (e: any) =>
 				(catchErrors as any) !== 'suppress' && (console.error(e), undefined);
 			scopeData.currentViewTransition.updateCallbackDone.catch(error);
 			scopeData.currentViewTransition.ready.catch(error);
 		}
+
 		scopeData.currentViewTransition.finished.finally(() => {
-			getTypeAttributes()?.forEach((t) => root(scope).classList.remove(t));
-			scopeData.currentViewTransition = undefined;
+			if (scopeData.currentViewTransition !== localTransition) {
+				[...(localTransition.types ?? [])].forEach(
+					(t) =>
+						scopeData.currentViewTransition?.types.has(t) ||
+						root(scope).classList.remove(`vtbag-vtt-${t}`)
+				);
+			} else {
+				[...(localTransition.types ?? [])].forEach((t) =>
+					root(scope).classList.remove(`vtbag-vtt-${t}`)
+				);
+				root(scope).classList.remove('vtbag-vtt-0');
+				scopeData.currentViewTransition = undefined;
+			}
 			scopeData.chained
 				.splice(0, scopeData.chained.length)
 				.forEach(({ update, extensions, proxy }) => {

src/polyfilled-types.ts

@@ -1,23 +1,17 @@
-let typeAttributes: Set<string>;
-export const getTypeAttributes = () => typeAttributes;
 
 export function root(scope: Document | HTMLElement): HTMLElement {
 	return 'documentElement' in scope ? scope.documentElement : scope;
 }
 
 export function polyfilledTypes(
 	scope: Document | Element,
-	viewTransition: ViewTransition,
-	proxied: boolean
+	viewTransition: ViewTransition
 ): ViewTransition {
-	if (!proxied) return viewTransition;
-	//@ts-ignore
 	const classList = ('documentElement' in scope ? scope.documentElement : scope).classList;
 	let types = undefined;
 
 	const typeAttr = 'vtbag-vtt-0'; // for :active-view-transition, postcss-active-view-transition-type
 	classList.add(typeAttr);
-	typeAttributes = new Set<string>([typeAttr]);
 
 	return new Proxy(viewTransition, {
 		get(target, prop: keyof ViewTransition) {
@@ -28,7 +22,6 @@ export function polyfilledTypes(
 							return (value: string) => {
 								typesTarget.add(value);
 								const typeAttr = 'vtbag-vtt-' + value;
-								typeAttributes.add(typeAttr);
 								classList.add(typeAttr);
 							};
 						} else if (typesProp === 'delete') {
@@ -42,7 +35,7 @@ export function polyfilledTypes(
 								typesTarget.clear();
 							};
 						} else if (typesProp === 'has') {
-							return (value: string) => typeAttributes.has(value);
+							return (value: string) => classList.contains('vtbag-vtt-' + value);
 						} else if (typesProp === Symbol.iterator) {
 							return () => typesTarget[Symbol.iterator]();
 						}