tutorial: In the onDestroy example, explicitly show the memory leak (#5515)

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte

@@ -1,10 +1,20 @@
 <script>
-	import { onDestroy } from 'svelte';
+	import Timer from './Timer.svelte';
 
+	let open = false;
 	let seconds = 0;
+
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
 </script>
 
-<p>
-	The page has been open for
-	{seconds} {seconds === 1 ? 'second' : 'seconds'}
-</p>
+<div>
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
+	{/if}
+</div>

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component executes a callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+		padding: 5px;
+	}
+</style>

site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js

@@ -1,5 +1,9 @@
 import { onDestroy } from 'svelte';
 
 export function onInterval(callback, milliseconds) {
-	// implementation goes here
+	const interval = setInterval(callback, milliseconds);
+
+	onDestroy(() => {
+		// Fix the memory leak here
+	});
 }

site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte

@@ -1,11 +1,20 @@
 <script>
-	import { onInterval } from './utils.js';
+	import Timer from './Timer.svelte';
 
+	let open = true;
 	let seconds = 0;
-	onInterval(() => seconds += 1, 1000);
+
+	const toggle = () => (open = !open);
+	const handleTick = () => (seconds += 1);
 </script>
 
-<p>
-	The page has been open for
-	{seconds} {seconds === 1 ? 'second' : 'seconds'}
-</p>
+<div>
+	<button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button>
+	<p>
+		The Timer component has been open for
+		{seconds} {seconds === 1 ? 'second' : 'seconds'}
+	</p>
+	{#if open}
+	<Timer callback={handleTick} />
+	{/if}
+</div>

site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte

@@ -0,0 +1,20 @@
+<script>
+	import { onInterval } from './utils.js';
+
+	export let callback;
+	export let interval = 1000;
+
+	onInterval(callback, interval);
+</script>
+
+<p>
+	This component executes a callback every 
+	{interval} millisecond{interval === 1 ? '' : 's'}
+</p>
+
+<style>
+	p { 
+		border: 1px solid blue;
+		padding: 5px;
+	}
+</style>

site/content/tutorial/07-lifecycle/02-ondestroy/text.md

@@ -10,8 +10,8 @@ For example, we can add a `setInterval` function when our component initialises,
 <script>
 	import { onDestroy } from 'svelte';
 
-	let seconds = 0;
-	const interval = setInterval(() => seconds += 1, 1000);
+	let counter = 0;
+	const interval = setInterval(() => counter += 1, 1000);
 
 	onDestroy(() => clearInterval(interval));
 </script>
@@ -37,7 +37,9 @@ export function onInterval(callback, milliseconds) {
 <script>
 	import { onInterval } from './utils.js';
 
-	let seconds = 0;
-	onInterval(() => seconds += 1, 1000);
+	let counter = 0;
+	onInterval(() => counter += 1, 1000);
 </script>
-```
+```
+
+Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example.