Skip to main content

Anything exported from a module script block becomes an export from the module itself. Let’s export a stopAll function:

AudioPlayer
<script module>
	let current;

	export function stopAll() {
		current?.pause();
	}
</script>

We can now import stopAll in App.svelte...

App
<script>
	import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
	import { tracks } from './tracks.js';
</script>

...and use it in an event handler:

App
<div class="centered">
	{#each tracks as track}
		<AudioPlayer {...track} />
	{/each}

	<button onclick={stopAll}>
		stop all
	</button>
</div>

You can’t have a default export, because the component is the default export.

Edit this page on GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
	import AudioPlayer from './AudioPlayer.svelte';
	import { tracks } from './tracks.js';
</script>
 
<div class="centered">
	{#each tracks as track}
		<AudioPlayer {...track} />
	{/each}
</div>
 
<style>
	.centered {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		gap: 0.5em;
		max-width: 40em;
		margin: 0 auto;
	}
</style>