From c5028a27c55112f942bcbd27f3d1d1d846aafddb Mon Sep 17 00:00:00 2001
From: sacrosanctic <sw@scottwu.ca>
Date: Mon, 23 Sep 2024 20:32:11 +0800
Subject: [PATCH] docs: Update 7guis-timer example to support SSR context
 (#13356)

* Update 7guis-timer

* remove window reference on variable init

* better still

* prettier

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../20-7guis/04-7guis-timer/App.svelte        | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/documentation/examples/20-7guis/04-7guis-timer/App.svelte b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
index dab2d6de44..14103e424b 100644
--- a/documentation/examples/20-7guis/04-7guis-timer/App.svelte
+++ b/documentation/examples/20-7guis/04-7guis-timer/App.svelte
@@ -1,31 +1,30 @@
 <!-- https://eugenkiss.github.io/7guis/tasks#timer -->
 
 <script>
-	import { onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 
 	let elapsed = 0;
 	let duration = 5000;
 
-	let last_time = window.performance.now();
-	let frame;
+	onMount(() => {
+		let last_time = performance.now();
 
-	(function update() {
-		frame = requestAnimationFrame(update);
+		let frame = requestAnimationFrame(function update(time) {
+			frame = requestAnimationFrame(update);
 
-		const time = window.performance.now();
-		elapsed += Math.min(time - last_time, duration - elapsed);
+			elapsed += Math.min(time - last_time, duration - elapsed);
+			last_time = time;
+		});
 
-		last_time = time;
-	})();
-
-	onDestroy(() => {
-		cancelAnimationFrame(frame);
+		return () => {
+			cancelAnimationFrame(frame);
+		};
 	});
 </script>
 
 <label>
 	elapsed time:
-	<progress value={elapsed / duration} />
+	<progress value={elapsed / duration}></progress>
 </label>
 
 <div>{(elapsed / 1000).toFixed(1)}s</div>