Не пойму где именно промисы находятся 😓

В каком хелпере

а flush уже делает пербор компонентов и проверки

Это в сурцах?

https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/render_dom/invalidate.ts

Я тут ничего асинхронного не нахожу

а после флуша вызывается второй евент

Или я не там ищу?🤔
Там такая запутанная стуктура

https://svelte.dev/repl/fd917e3f40af4aeba119e87221c79cda?version=3.25.0

открой консоль и кликни кнопку

А, ясненько

Это не я предлагал его. Вопрошающий сказал что драгула был бы идеален.

собственно все предсказуемо же. надо такие вещи делать afterUpdate. А вообще по-хорошему через #if

+1

если прям до невозможности хочется накостылять, вместо того чтобы юзать лайсайкл, то лучше уж не setTimeout, а встроенный tick

сморти, изменяя стейт (в данном случае active) зависимые от него изменения в DOM применяются асинхронно, то есть не сразу как ты изменил его. если быть точным, все изменения накатываются в конце тика, в фазе микротасков. чтобы сделать какое-то действие с DOM элементом, зависимым от стейта и быть уверенным, что DOM уже приведен в актуальное состояние (синхронизирован со стейтом), есть лайф-сайкл метод afterUpdate. Поэтому твоя реализация могла бы выглядеть например так:
https://svelte.dev/repl/844bf7458ec6451b8b5fca99efe8273c?version=3.25.0

В Svelte 2 рендеринг был синхронный, потому что стейт можно было применить сразу с помощью метода this.set({ foo, bar, baz })

в svelte 3 мы меняем переменные и поэтому мы должны ждать пока все изменения стейта накопятся, а потом разом применить их:

foo = 1;
bar = 2;
baz = 3;

если бы рендеринг в этом случае был бы синхронный, то DOM тригерился бы после каждого присвоения.

альтернативная реализация через tick: https://svelte.dev/repl/8ae932e3c3dd452aac4262d920abec13?version=3.25.0

я не понимаю почему эвенты не атомарно применяются =)

в смысле ты не понимаешь как работают микротаски или не понимаешь почему так сделано именно в свелт?