Refactor

Author: geoffrich

README.md

@@ -4,10 +4,7 @@ SvelteKit version of the [Shared Element Transitions Google CodeLab](https://cod
 
 TODO:
 
-- optimize images
-- stretch goal: transition back from fruit page
-- remove React-isms (useX)
-- clean up console logs
 - 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

src/lib/utils/use-page-transition.js

@@ -1,8 +1,6 @@
 import { afterNavigate, beforeNavigate } from '$app/navigation';
 import { getTransitionContext } from '$lib/utils/resource-context';
 import { onDestroy } from 'svelte';
-import { get } from 'svelte/store';
-import { page as pageStore } from '$app/stores';
 
 // Call this hook on this first page before you start the page transition.
 // For Shared Element Transitions, you need to call the transition.start()
@@ -16,7 +14,7 @@ export const prepareTransitionFromPage = () => {
 	beforeNavigate(({ to }) => {
 		// Feature detection
 		if (!document.createDocumentTransition) {
-			return null;
+			return;
 		}
 
 		const transitionKey = to.pathname;
@@ -28,6 +26,10 @@ export const prepareTransitionFromPage = () => {
 					[transitionKey]: { transition, resolver }
 				}));
 			});
+			transitionStore.update((current) => ({
+				...current,
+				[transitionKey]: null
+			}));
 		});
 	});
 };
@@ -39,11 +41,10 @@ export const prepareTransitionFromPage = () => {
 // shared elements.
 export const prepareTransitionToPage = () => {
 	const transitionStore = getTransitionContext();
-	const page = get(pageStore);
-	const transitionKey = page.url.pathname;
 	let unsub;
 
-	afterNavigate(() => {
+	afterNavigate(({ to }) => {
+		const transitionKey = to.pathname;
 		unsub = transitionStore.subscribe((transitions) => {
 			const transition = transitions[transitionKey];
 			if (!transition) {
@@ -56,9 +57,5 @@ export const prepareTransitionToPage = () => {
 
 	onDestroy(() => {
 		unsub?.();
-		transitionStore.update((current) => ({
-			...current,
-			[transitionKey]: null
-		}));
 	});
 };

src/routes/__layout.svelte

@@ -7,10 +7,6 @@
 	initTransitionContext();
 </script>
 
-<svelte:head>
-	<title>Shared Element Transitions in SvelteKit</title>
-</svelte:head>
-
 <Navbar />
 <main class="text-slate-700 max-w-4xl m-auto">
 	<slot />

src/routes/index.svelte

@@ -1,10 +1,15 @@
+<svelte:head>
+	<title>Shared Element Transitions in SvelteKit</title>
+</svelte:head>
+
 <div class="flex-col items-center justify-center py-4 px-4">
 	<h1 class="text-4xl font-bold mt-4">Shared Element Transitions in SvelteKit</h1>
 
 	<p class="mt-4 text-xl">
-		SvelteKit version of the [Shared Element Transitions Google
-		CodeLab](https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5). Only
-		works in Chrome Canary with the documentTransition API flag enabled and may break at any time
-		due to the API changing.
+		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
+		>. Only works in Chrome Canary with the documentTransition API flag enabled and may break at any
+		time due to the API changing.
 	</p>
 </div>