simplify example further

site/content/tutorial/17-module-context/01-sharing-code/app-a/AudioPlayer.svelte

@@ -1,6 +1,4 @@
 <script>
-	import { onMount } from 'svelte';
-
 	export let src;
 	export let title;
 	export let composer;
@@ -9,10 +7,6 @@
 	let audio;
 	let paused = true;
 
-	onMount(() => {
-		// TODO: register the audio element
-	});
-
 	function stopOthers() {
 		// TODO: implement stopOthers
 	}

site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte

@@ -1,10 +1,8 @@
 <script context="module">
-	const elements = new Set();
+	let current;
 </script>
 
 <script>
-	import { onMount } from 'svelte';
-
 	export let src;
 	export let title;
 	export let composer;
@@ -13,15 +11,9 @@
 	let audio;
 	let paused = true;
 
-	onMount(() => {
-		elements.add(audio);
-		return () => elements.delete(audio);
-	});
-
 	function stopOthers() {
-		elements.forEach(element => {
+		if (current && current !== audio) current.pause();
-			if (element !== audio) element.pause();
+		current = audio;
-		});
 	}
 </script>
 

site/content/tutorial/17-module-context/01-sharing-code/text.md

@@ -10,20 +10,15 @@ We can do that by declaring a `<script context="module">` block. Code contained
 
 ```html
 <script context="module">
-	let currentPlayer;
+	let current;
 </script>
 ```
 
 It's now possible for the components to 'talk' to each other without any state management:
 
 ```js
-onMount(() => {
-	currentPlayer = audio;
-	return () => currentPlayer = null;
-});
-
 function stopOthers() {
-	if (currentPlayer !== audio) currentPlayer.pause();
+	if (current && current !== audio) current.pause();
-	currentPlayer = audio;
+	current = audio;
 }
 ```