Привет. Есть такой кейс: App.svelte: <script lang="ts"> import Child from "./Child.svelte";

import Wrapper1 from "./Wrapper1.svelte";
import Wrapper2 from "./Wrapper2.svelte";

let place = 0;
function changePlace() {
place = (place + 1) % 2;
}
</script>

<main>
<button on:click={changePlace}>Поменять место компонента</button>
{#if place === 0}
<Wrapper1><Child /></Wrapper1>
{/if}

<div>
{#if place == 1}
<Wrapper2><Child /></Wrapper2>
{/if}
</div>
</main>

В этом компоненте мы можем поменять место в DOM, где Child будет находиться (есть два варианта положения)

Child.svelte

<script lang="ts">
let state = 0;
</script>

<button on:click={() => state++}>{state}</button>

В этом компоненте у нас счетчик, увеличивающийся при клике на него.

Собственно вопрос, как красиво сохранить состояние Child после смены положения?
В Child так же есть много подкомпонентов с состоянием, так что просто хранить всё состояние в App.svelte не выйдет

Не думаю, что это лучшее решение, но можно хранить состояние в сторе.

Нет, не получится, в child в реальности есть куча подкомпонентов )

Можно стор в контексте

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

Получается, вы не хотите разрушать компоненты?

Да )

У меня был велосипед на эту тему. Я делал контейнер с гридом и делал наложение на одну ячейку для всех детей. При переключении через пропс делал компонент прозрачным и ставил pointer events none. Но это прям совсем велосипед

Ну в принципе понятно как это сделать некрасиво

просто перетащить DOM, таскать за статические ноды

Да, это понятно

В враппере или чайлд есть постоянно исполняющийся код по типу интервалов?

да уже решили всё