<svelte:component this={page} /> adds a component instead of replacing it

[hcrohland]

Describe the bug

When using transitions and stores in a svelte component the directive <svelte:component this={page} /> does add the component to the bottom when 'page' changes.

Reproduction

https://svelte.dev/repl/4484e9f2c4214cc6a85e8371bac76dbc?version=3.43.0

Logs

No response

System Info

firefox and chrome...

Severity

annoyance

[Conduitry]

This sounds like a duplicate of #6763 or #6226.

[DanielSharkov]

I got a workaround for anybody having the same issue. Communicate with the viewport from the view components through events. The first event notifies the viewport that the current view has an outro transition which it should await and the second event tells the viewport that the outro has finished and that it may switch to the next component.

Example implementation: https://github.com/DanielSharkov/svelte-router/blob/master/src/Viewport.svelte
Upgraded REPL: https://svelte.dev/repl/0c31ad0d80144f43acecc6753a54b94a?version=3.43.0

I hope this will help someone! 😄

[dummdidumm]

Fixed in Svelte 5