Скажите, если у меня много одинаковых компонентов в Svelte, и я не хочу, чтобы в каждом из них создавался обработчик на клик, достаточно пробросить событие с помощью on:click в родительский элемент? Вот на примере:

{#each numbers as number}
   <Tile {number} on:click={clickHandler} on:keydown={keyDownHandler}/>
{/each}

Раньше обработчики были внутри компонента Tile, теперь я их перенёс в родительский, но меня смущает что они за #each. Они не создадутся снова для каждого компонента Tile? Может их надо переносить еще выше?

А потом два дня сидиш, придумываеш компонент для хранения настроек по всему приложению, доступный в каждом месте

Хотя мог бы взять просто синглтон

нет, когда ты присваиваешь хендлеру функцию - передается ссылка на функцию, а когда присваиваешь () => func(index), то создается эта функция со своим замыканием

Про два дня я утрирую, суть в том что зачем тратить время придумывая своё, если можно ознакомится с готовыми методологиями проектирования, и применять их если нужно?

Мы про js?) если да, то импорт конфига чем не подходит? Зачем перегружать простой объект каким то неведомым паттерном? В чем профит и как человек знающий паттерны поймёт, какой паттерн тут использован? Все разработчики - паттерн-сомелье?)

Чтобы код не давал даже сделать два экземпляра.

нет, когда ты присваиваешь хендлеру функцию - передается ссылка на функцию, а когда присваиваешь () => func(index), то создается эта функция со своим замыканием

Я попробовал так:

{#each numbers as number}
   <Tile {number} on:click={()=>console.log(number)} on:keydown={keyDownHandler}/>
{/each}

и кажется всё таки eventListent создаётся для каждого компонента. Не понятно только как работает сам принцип проброса событий от потомков к родителю. Это что-то типа всплытия или основано на событиях. Может нет смысла переносить всё выше, чтобы был только один обработчик для кликов.

https://svelte.dev/repl/41096c004e4e4d4d90685c1e2d103e59?version=3
открой вкладку JS output и посмотри
click_handler создается в функции create_each_block и присваивается из скоупа,
а функция keyDownHandler - одна на весь модуль

И каким же образом можно так сделать, чтобы при импорте файла нельзя было бы создать ещё экземпляр? Кажется, нет способа однозначно запретить сделать клон объекта, тут даже паттерн бессилен)

let Singleton = new function(){
   let instance = this;
   return function(){ return instance }
};

export default Singleton;

легко, собственно