Getting the current order of renderless components

[TeyKey1]

Describe the problem

Various ways of how to iterate/get all children of a Svelte component have been discussed in #5381 or #4455. However, there does not seem to be a way to determine the current order of the children in svelte if the children are renderless. In case of children which render stuff to the DOM you can simply use the DOM-tree to infer the ordering. The same goes for virtual DOM frameworks, where you just use the virtual DOM.

The reason I need this information is that I'm currently converting an imperative HTML 5 2D canvas library into a declarative svelte component library using renderless components. The resulting usage would roughly look like this:

<Stage>
  <Layer>
    <Rectangle />

    {#each circles as circle}
      <Circle />
    {/each}

    {#if showLine}
      <Line />
    {/if}
  </Layer>
  <Layer>
    <Star />
  </Layer>
</Stage>

Ideally, the actual component order of the shapes in svelte would match the draw order on the canvas, so the user does not have to worry about doing the ordering manually but simply rely on the svelte-native way of ordering components. To achieve this, I need to be able to not only know the children of the Layer component but also their current order.

Describe the proposed solution

It would be nice if there was a way to determine the current order of components. I understand that this is very much a niche use case, but this is also the first time I truly ran into a limitation of Svelte. I've tried various things in the past days to achieve this but looking at the Svelte source I don't think it is currently possible to do any of this. If it is, please let me know how :)

Alternatives considered

A considered way to infer the order of components was to listen to the before/afterUpdate hooks and notify the parent component on each call (using stores). The parent component then saves the order of the incoming child notifications, which corresponds to the current child order. This works well enough for stuff inside each blocks apart from #7001 which I also observed. This way of inferring the order fails in more complex cases where if blocks are used. In cases where this if block's condition initializes to false, there is no way of knowing where it belongs in the current order once it gets mounted.

In my use case, the alternative is that the user has to manage ordering of the shapes manually and simply ignore svelte ordering for most parts. This unfortunately complicates things for the user quite a bit compared to other libraries using vue or react which can directly rely on the order of the components.

Importance

nice to have

[7nik]

My attempt to make an workaround in Svelte 5. In based on the fact that order of firing effects reflects the current component tree (though it may be not true in case of custom elements).