Manny's questions

Tenho três arquivos:

App.svelte:

<script>
    import Component from "./Component.svelte"
    import { items } from "./store.js"
    
    $items.set("a", { name: "John", index: "a" })
    $items.set("b", { name: "Jack", index: "b" })
</script>

<h1>DIV each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div>Name: {item.name}</div>
    {/each}
{/if}

<h1>Component each:</h1>
{#if $items && $items.size > 0}
    {#each $items.values() as item}
        <div><Component index={item.index} /></div>
    {/each}
{/if}

Component.svelte:

<script>
    import { items } from "./store.js"
    let { index = null } = $props()
    
    let data = $state($items.get(index))
</script>

<div><input bind:value={data.name} /></div>

store.js:

import { writable } from "svelte/store";
import { SvelteMap } from "svelte/reactivity";

export let items = writable(new SvelteMap([]))

Gostaria de saber como manter a reatividade no SvelteMap items. Quando o valor de entrada é alterado, ele deve ser atualizado no SvelteMap (pois está vinculado). Não sei como trabalhar com esse tipo de reatividade.

Parque infantil aqui .

Tenho um armazenamento simples de new Map()e gosto de iterá-lo no componente Svelte. No bloco {#each}, posso ver que ele itera quantas vezes o Map tem elementos, mas não consigo ver valores.

<script>
    import {items} from "./store.js"

    $items.set("one", { name: "John", age: 50 })
    $items.set("two", { name: "Jack", age: 25 })
</script>

<h1>Hello!</h1>
{#each $items as item}
    <div>name: {item.name}</div>
{/each}

// store.js
import {writable, get} from "svelte/store"

export let items = writable(new Map())

Parque infantil .