Smaller repro https://playground.solidjs.com/anonymous/e8cab030-93c5-44b5-8f26-f283547cc77e

We have talked about this with Fabio in the past, the conclusion IIRC was that before removing the element we should check if the parent is still the same.

It still breaks on this scenario, so I suppose that also won't help
https://playground.solidjs.com/anonymous/7c9fcf09-82a0-4131-a1ba-51a37d50dca0

I think it would be fine even if you had to explicitly tell the renderer that you want to reuse some element.

const el = createReusable(() => <div/>)

This is a rare case after all

It seems this is a duplicate of #2030 with almost the same repro as #2357 (comment)

Edit: nah, only the last comment #2030 (comment)

There's also ryansolid/dom-expressions#337

And cross posting Voby vobyjs/voby#39 for this very same issue

https://discord.com/channels/722131463138705510/1217034387938607145

Yes, but as soon as you put the components in a seperate div, it breaks.

This is exactly what's happening here. And the workaround (for now) is to simply group the nodes https://playground.solidjs.com/anonymous/dfea14d8-e6db-4b76-a3f2-12b3ce0335db

And here's a repro with (almost?) all the ways this can break.

We can solve this by tracking whether a node was moved then ignoring the removal of tracked nodes. (PR coming up)

And then in the case of multiple insertions, intuitively (and how it works currently), the last insertion wins and as a consequence, the internal rendering state is inconsistent with the actual DOM state. Although it's not breaking anything, there's the question whether we should keep this behavior or somehow keep the internal state consistent or keep only the first insertion.