Update sveltegram example

paoloricciuti · Sep 28, 2023 · 26e29c3 · 26e29c3 · vercel · Sep 28, 2023
1 parent d03517f
commit 26e29c3
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/examples/sveltegram/package.json b/examples/sveltegram/package.json
@@ -24,7 +24,7 @@
 		"prettier-plugin-svelte": "^3.0.3",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
-		"sveltekit-view-transition": "^0.3.1",
+		"sveltekit-view-transition": "^0.5.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"

diff --git a/examples/sveltegram/pnpm-lock.yaml b/examples/sveltegram/pnpm-lock.yaml
diff --git a/examples/sveltegram/src/lib/Post.svelte b/examples/sveltegram/src/lib/Post.svelte
@@ -3,6 +3,7 @@
 	import type { Photo, User } from '$lib/fake-data';
 	import type { OnNavigate } from '@sveltejs/kit';
 	import { setupViewTransition } from 'sveltekit-view-transition';
+	import type { TransitionActionFunctions } from 'sveltekit-view-transition';
 
 	const { transition } = setupViewTransition();
 
@@ -13,12 +14,15 @@
 	export let user: User;
 	type $$Props = Photo;
 
-	function shouldApply({ navigation }: { navigation: OnNavigate }) {
+	const shouldApply: TransitionActionFunctions['shouldApply'] = ({ navigation }) => {
 		return navigation.to?.params?.id === id.toString();
-	}
-	function applyImmediately({ navigation }: { navigation: OnNavigate }) {
-		return navigation.from?.params?.id === id.toString();
-	}
+	};
+	const applyImmediately: TransitionActionFunctions['applyImmediately'] = ({
+		navigation,
+		isInViewport
+	}) => {
+		return isInViewport && navigation.from?.params?.id === id.toString();
+	};
 
 	$: comments_num = comments.filter((comment) => comment.photo_id === id).length;
 	$: comments_sentence = `comment${comments_num !== 1 ? 's' : ''}`;