From 12a9acf5d6f7c67f05f5934b89a8fd735a6df14e Mon Sep 17 00:00:00 2001
From: fivemru <fivem@fivem.ru>
Date: Sun, 11 Oct 2020 04:07:54 +0300
Subject: [PATCH] tutorial: in the onDestroy example, explicitly show the
 memory leak

---
 .../02-ondestroy/app-a/App.svelte             | 19 ++++++++++++------
 .../02-ondestroy/app-a/Inner.svelte           | 10 ++++++++++
 .../07-lifecycle/02-ondestroy/app-a/utils.js  |  6 +++++-
 .../02-ondestroy/app-b/App.svelte             | 20 ++++++++++++-------
 .../02-ondestroy/app-b/Inner.svelte           | 10 ++++++++++
 .../07-lifecycle/02-ondestroy/text.md         |  8 ++++----
 6 files changed, 55 insertions(+), 18 deletions(-)
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte
 create mode 100644 site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte

diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
index 28cdb73d0d..9d1685b6a5 100644
--- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte
@@ -1,10 +1,17 @@
 <script>
-	import { onDestroy } from 'svelte';
+	import Inner from './Inner.svelte';
 
-	let seconds = 0;
+	let counter = 0;
+	let show = true;
+
+	const toggle = () => (show = !show);
+	const handleTick = () => (counter += 1);
 </script>
 
-<p>
-	The page has been open for
-	{seconds} {seconds === 1 ? 'second' : 'seconds'}
-</p>
\ No newline at end of file
+<div>
+	<button on:click={toggle}>{show ? 'Destroy' : 'Show'} Inner component</button>
+	<p>counter={counter}</p>
+	{#if show}
+		<Inner callback={handleTick} />
+	{/if}
+</div>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte
new file mode 100644
index 0000000000..2d62df4eef
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let callback;
+	export let interval = 1000;
+
+	import { onInterval } from './utils.js';
+
+	onInterval(callback, interval);
+</script>
+
+<p>This component will execute callback every {interval} milliseconds</p>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
index 7b65e75c8c..ea19d2b19e 100644
--- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js
+++ b/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(() => {
+		// After the component is destroyed, setInterval will continue to work, fix it here
+	});
 }
\ No newline at end of file
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
index 93a721ef44..9d1685b6a5 100644
--- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte
@@ -1,11 +1,17 @@
 <script>
-	import { onInterval } from './utils.js';
+	import Inner from './Inner.svelte';
 
-	let seconds = 0;
-	onInterval(() => seconds += 1, 1000);
+	let counter = 0;
+	let show = true;
+
+	const toggle = () => (show = !show);
+	const handleTick = () => (counter += 1);
 </script>
 
-<p>
-	The page has been open for
-	{seconds} {seconds === 1 ? 'second' : 'seconds'}
-</p>
\ No newline at end of file
+<div>
+	<button on:click={toggle}>{show ? 'Destroy' : 'Show'} Inner component</button>
+	<p>counter={counter}</p>
+	{#if show}
+		<Inner callback={handleTick} />
+	{/if}
+</div>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte
new file mode 100644
index 0000000000..2d62df4eef
--- /dev/null
+++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte
@@ -0,0 +1,10 @@
+<script>
+	export let callback;
+	export let interval = 1000;
+
+	import { onInterval } from './utils.js';
+
+	onInterval(callback, interval);
+</script>
+
+<p>This component will execute callback every {interval} milliseconds</p>
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md
index 647fbaa160..460f94de88 100644
--- a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md
+++ b/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,7 @@ 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>
 ```
\ No newline at end of file