Svelte: Reference to self for use in modules - svelte-3

Question

I have a simple popup component in Popup.svelte:
<script>
let hidden = true;
</script>
<button on:click={() => hidden = !hidden}> Pop </button>
<div class:hidden> Extra Content </div>
<style>
.hidden { display: none; }
</style>
and I have multiple of these shown in my app:
<script>
import Popup from './Popup.svelte';
</script>
<div> <Popup /> </div>
<div> <Popup /> </div>
<div> <Popup /> </div>
I would like to hide other popups at the component level when clicked, meaning only one popup can be visible at any time. I thought svelte module contexts would suit, but I am not able to add a reference to self using which I can call say setHidden function for others.
<script>
import {onMount} from 'svelte';
let hidden = true;
export const setHidden = value => hidden = value;
const toggleHidden = () => {
if (hidden === true) { // transition to false
hideOthers();
}
hidden = !hidden
}
onMount(() => elements.add(self);
</script>
<script context="module">
const elements = new Set();
const hideOthers = () => elements.forEach(e => e.setHidden(true))
</script>
Playground here

Answer 1

The context approach is a good one, but instead of adding self to the elements, you can add the component's setHidden function:
<script context="module">
const elements = new Set();
const hideOthers = () => elements.forEach(hide => hide())
</script>
<script>
onMount(() => elements.add(setHidden))
</script>

Answer 2

For simply hiding things, #Stephane's answer works just fine. But if there are multiple functions, you could add them inside an object and add that to the module context.
You can also check if you are with the current instance or not while looping through all the elements by using a Map instead of a set. I'm using object keys to get unique references to each instance.
<script context="module">
const elements = new Map();
const hideOthers = () => Array.from(elements.entries()).forEach(([k, funcs]) => {
funcs.setHidden(true)
// if (k === key)
// true for current instance
// do something in the current instance
});
</script>
<script>
let key = {};
let hidden = true; ​
​ const funcs = {
setHidden: value => hidden = value,
setSomething: value => something = value,
setElse: value => else = value
}
​onMount(() => elements.set(key, funcs))
</script>