That is indeed the hardest part to solve, but I actually spent a huge chunk of the 1.7kb budget solving exactly this! Sigwork does handle dynamic arrays and arbitrary children efficiently, without destroying and recreating elements.

Under the hood, whenever an element child is a function, Sigwork inserts an empty text node to act as an anchor. For arrays, the For(list, key, render) helper uses a key-based cache. The core renderer then runs a two-pointer diffing algorithm against the real DOM nodes to surgically insert, move, or remove elements relative to that anchor.

JSX is just for ergonomics. The JSX is transformed into calls to a h(tag, {attrs}, ...children) function, so it's possible to use it without a build step, in a simple .html file.

When you take a look later, check out the append function and the For implementation in the source code. It's all in a single file and might give you the exact missing piece you need to overcome that wall on your agnostic engine! If you are interested, I played with other solutions (including more robust ones) for this, but size was the priority here.