Skip to content

next.168 development mode and component snippets inside loop #12244

@vits

Description

@vits

Describe the bug

While next.168 fixed #12233, it introduced new problem in development mode.
Component's default snippet (haven't tried named snippets) keeps previous output and appends new one if component is inside loop and array is changed, and {#each} tag has key value. It works as expected without key value and in production mode.

Reproduction

Simple component with default children snippet.

<script>
  const { children } = $props();
</script>
{@render children()}

App code

<script>
import Component from "./Component.svelte";
const sample1 = [{name: "A"}, {name: "B"}];
const sample2 = [{name: "C"}, {name: "D"}];
let items = $state(sample1);

const replace = () => {
  items = $state.is(items, sample1) ? sample2 : sample1;
}
</script>

<button onclick={replace}>replace</button>

{#each items as item (item.name)}
  <Component>
    {item.name}
  </Component>
{/each}

Logs

No response

System Info

next.168

Severity

blocking all usage of svelte

Activity

trueadm

trueadm commented on Jul 1, 2024

@trueadm
Contributor

REPL

Looks to be a regression from #12215. Looking into it when we go to remove the each block entries, the anchor and end nodes are the same, even though they have content from the snippet.

Oddly the bug doesn't happen in the REPL, but does locally. So maybe it's related to the HMR bug. #12243

vits

vits commented on Jul 1, 2024

@vits
Author

Don't know whether this is related and helps, but some problem with loops and snippets was introduced in next.162. It was different - everything worked fine in development (HMR) but was broken in production. Don't have full example, but something like this

{#each data as row (row.id)}
  <Row>
    {#each columns as column (column.name)}
      <Cell>
        {column.name}
      </Cell>
    {/each}
  </Row>
{/each}

In production this ended with empty rows after changing data array, while everything was as expected locally. This was fixed in next.167 (works as expected both locally and in production) but introduced #12233. And now in next.168 it's still fixed in production but preserves all old rows (outer loop) in HMR. Didn't try changing inner loop array (columns) though.

Dudek-AMS

Dudek-AMS commented on Jul 1, 2024

@Dudek-AMS
Contributor

isnt loop or if related

#12247

dummdidumm

dummdidumm commented on Jul 1, 2024

@dummdidumm
Member

For everyone experiencing this: you can disable hot module reloading through the compilerOptions.hmr setting until this is fixed.

dummdidumm

dummdidumm commented on Jul 1, 2024

@dummdidumm
Member

closing as duplicate of #12243

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @vits@trueadm@dummdidumm@Dudek-AMS

        Issue actions

          next.168 development mode and component snippets inside loop · Issue #12244 · sveltejs/svelte