chore: use moveBefore on supported browsers

[adiguba]

Before submitting the PR, please make sure you do the following

• Closes Modal Dialog Backdrop lost on re-render #13543

The PR change the API used in {#each} block to move existing node.

Currently it use before(). Now it use the new API moveBefore() when the browser support it, or fallback to insertBefore().

moveBefore() allow to move a node without losing state.
The feature is stiff experimental but I don't think there a problem using it (with a fallback)

Sources :

• Chrome for Developers Blog
• Whatwg Introduce moveBefore() state-preserving atomic move API whatwg/dom#1307

Notes :

• I don't know how to create a test for this !
• Some functions in operations.js are annotated with /*@__NO_SIDE_EFFECTS__*/.
  I don't know what this does exactly or if I should put it on the function I added

---

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.
• If this PR changes code within packages/svelte/src, add a changeset (npx changeset).

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 555321f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Playground

pnpm add https://pkg.pr.new/svelte@15512

[dummdidumm]

Will this have any unwanted impact on transitions? (TBH I'm not even sure if we want to run transitions on moved within an array, or if they do right now)

[adiguba]

I don't think this will impact transitions, since they are executed before/after the node is deleted/added.
I made some stuff on playground without impact...

But, I also tested the demo-site : https://state-preserving-atomic-move.glitch.me/
And the "popover" scenario crashes Chrome... :/

Maybe it would be better to wait until it is a little more stable.

[trueadm]

We only want to use moveBefore on post mount operations. Otherwise, there are issues with web component FWIW where they don't fire the connected callback if used on mount. Context: facebook/react#32567

[Ocean-OS]

The "no side effects" comment is an indicator for bundlers that a function is pure.

[adiguba]

We only want to use moveBefore on post mount operations.

I think it's fine : if I'm not mistaken it's only used on the reconcille() of {#each}` blocks to move existing element.

The "no side effects" comment is an indicator for bundlers that a function is pure.

So I suppose this is not the case here, since the DOM is modified...

[Rich-Harris]

I'm going to close this because I'm quite certain we shouldn't do this. It will make bugs more likely, not less, because it means that people will see stuff working in Chrome and assume it works everywhere. It's much better if people are forced to solve these issues in a cross-browser way — Svelte should avoid having different behaviour between different browsers.