Sorting a keyed each block messes up the DOM

[pablote]

Describe the bug

I have a keyed each block displaying items. These items can be sorted by two different criterias, whenever I resort the items, the DOM of the individual items is changed in a strange way. Div elements within the items are displayed out of order (this seems to happen for conditionally renderer elements).

This only seems to happen using Vite and the vite-plugin-svelte plugin.

Reproduction

Here's a link reproducing the issue: https://svelte.dev/repl/e25e9d00d43e4d6eaadf5f3362c47f92?version=3.40.1

You can't see the error itself on the REPL. But the same code on a Vite project has the issue, here's how it looks:

Logs

No response

System Info

➜  web git:(develop) ✗ npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers
Need to install the following packages:
  envinfo
Ok to proceed? (y)

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 39.97 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 7.19.1 - /usr/local/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 92.0.4515.107
    Firefox Developer Edition: 91.0
    Safari: 14.1.1
  npmPackages:
    svelte: ^3.38.3 => 3.40.1

Severity

blocking an upgrade

[dominikg]

Hi, thanks for reporting this.

please update the system info in your report with the output of

npx envinfo --system --binaries --browsers --npmPackages "{svelte,svelte-hmr,@sveltejs/*,vite}"

so we can see which version of vite and vite-plugin-svelte you're using.

please also update the reproduction to include steps required, eg which command you used and a link to a repository with complete setup as that repl can't be cloned and is generally nof suitable to reproduce problems with vite-plugin-svelte

[pablote]

Here it goes:

➜  web git:(develop) ✗ npx envinfo --system --binaries --browsers --npmPackages "{svelte,svelte-hmr,@sveltejs/*,vite}"

  System:
    OS: macOS 11.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 276.23 MB / 16.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 7.19.1 - /usr/local/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 92.0.4515.107
    Firefox Developer Edition: 91.0
    Safari: 14.1.2
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.11 => 1.0.0-next.14 
    svelte: ~3.40.1 => 3.40.2 
    vite: ^2.3.8 => 2.4.3 

thanks

[pablote]

Here's a repro repo: https://github.com/pablote/test-bug

To test locally run: npm i && npm run dev

[bluwy]

Note: transferred from sveltejs/svelte#6561

[dominikg]

Thanks @bluwy for that pointer. @pablote please include original issues in your report. missing cross references cause extra work.

Initial observations:

• This also happens with npm run build && npm run preview
• removing the animation, still happening
• rewriting the sortItems function to return a sorted copy, still happening

export const sortItems = (items, sortByName) => {
  const copy = [...items];
  const sortProp = sortByName ? 'name' : 'value'
  copy.sort((a,b)=> {
    const aVal = a[sortProp], bVal = b[sortProp];
    return aVal < bVal ? -1 : (aVal === bVal ? 0 : 1);
  })
  return copy;
};

It works without animation if you remove the key from the each block.

[dominikg]

It also works with the keyed each when you remove the {#if item.name} in Item.svelte .

[GrygrFlzr]

We had a conversation on discord where @dominikg figured out the difference between the REPL and the Vite setup is that vite-plugin-svelte enables the hydration option by default. The rollup setup also replicates the issue when hydration is enabled, so it's likely that this is another hydration bug in Svelte core, rather than an issue with Vite / vite-plugin-svelte. I think it should continue to be tracked in sveltejs/svelte#6561 with this additional detail mentioned.

[dominikg]

here's a repo with default svelte template showing it: https://github.com/dominikg/svelte-hydration-reorder-bug

closing here, please add additional info in svelte repo