Refactor into single transition method

Author: geoffrich

README.md

@@ -6,5 +6,5 @@ TODO:
 
 - layout shifting during transition
 - instead of shared-element class, data- attributes?
-- better way instead of having to register per-page -- possibly call prepare functions with {from, to} allowlist
-- update comments on transition hooks
+- reduced motion
+- sveltekit:prefetch messing things up

src/lib/utils/use-page-transition.js src/lib/utils/page-transition.jssrc/lib/utils/use-page-transition.js renamed to src/lib/utils/page-transition.js

@@ -1,5 +1,20 @@
 import { afterNavigate, beforeNavigate } from '$app/navigation';
-import { getTransitionContext } from '$lib/utils/resource-context';
+import { setContext, getContext, hasContext } from 'svelte';
+import { writable } from 'svelte/store';
+
+const contextKey = 'transition';
+
+export function initTransitionContext() {
+	if (hasContext(contextKey)) return getContext(contextKey);
+	return setContext(contextKey, writable({}));
+}
+
+export function getTransitionContext() {
+	if (!hasContext(contextKey)) {
+		return initTransitionContext();
+	}
+	return getContext(contextKey);
+}
 
 // Call this hook on this first page before you start the page transition.
 // For Shared Element Transitions, you need to call the transition.start()
@@ -11,9 +26,16 @@ export const preparePageTransition = () => {
 	const transitionStore = getTransitionContext();
 	let unsub;
 
+	function updateStore(key, value) {
+		transitionStore.update((current) => ({
+			...current,
+			[key]: value
+		}));
+	}
+
 	// before navigating, start a new transition
 	beforeNavigate(({ to }) => {
-		unsub?.();
+		unsub?.(); // clean up previous subscription
 
 		// Feature detection
 		if (!document.createDocumentTransition) {
@@ -23,16 +45,11 @@ export const preparePageTransition = () => {
 		const transitionKey = to.pathname;
 		const transition = document.createDocumentTransition();
 		transition.start(async () => {
+			// set transition data for afterNavigate hook to pick up
 			await new Promise((resolver) => {
-				transitionStore.update((current) => ({
-					...current,
-					[transitionKey]: { transition, resolver }
-				}));
+				updateStore(transitionKey, { transition, resolver });
 			});
-			transitionStore.update((current) => ({
-				...current,
-				[transitionKey]: null
-			}));
+			updateStore(transitionKey, null);
 		});
 	});
 

src/lib/utils/resource-context.js

@@ -2,8 +2,7 @@
 	import '../app.css';
 	import Navbar from '$lib/Navbar.svelte';
 	import Footer from '$lib/Footer.svelte';
-	import { initTransitionContext } from '$lib/utils/resource-context';
-	import { preparePageTransition } from '$lib/utils/use-page-transition';
+	import { initTransitionContext, preparePageTransition } from '$lib/utils/page-transition';
 
 	initTransitionContext();
 	preparePageTransition();

src/routes/__layout.svelte

@@ -8,7 +8,7 @@
 	<p class="mt-4 text-xl">
 		SvelteKit version of the <a
 			href="https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5"
-			>Shared Element Transitions Google CodeLab</a
+			class="underline">Shared Element Transitions Google CodeLab</a
 		>. Only works in Chrome Canary with the documentTransition API flag enabled and may break at any
 		time due to the API changing.
 	</p>