Skip to content

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

Closed as not planned
@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

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

    Issue actions