Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Push to array inside SvelteMap not reactive #14409

Closed
tinnyw opened this issue Nov 23, 2024 · 2 comments
Closed

Push to array inside SvelteMap not reactive #14409

tinnyw opened this issue Nov 23, 2024 · 2 comments

Comments

@tinnyw
Copy link

tinnyw commented Nov 23, 2024

Describe the bug

Hi friends, hope you are well! I am working on an app that deals with complex objects to store state. In one of these objects I modify a map with one of the entries in the map yielding an array for the value which I push to. Updating this array does not cause a reactive state change in the UI that depends on it. This seems unintuitive to me since I thought that objects were deeply reactive with recursive monitoring for state change.

To make this reactive I have to delete the SvelteMap entry of the key that contains the array value and set it back again with the array.

Reproduction

App.svelte

<script>
	import {bob} from "./bob.svelte.js"
	
	let name = $state('world');
	let newKid = 1
</script>

<button onclick={
	() => bob.attribs.set('type', 'friend')}
	>Bob type: {bob.attribs.get('type')}
</button>
<br/>
<br/>
<button onclick={() => {
	// Expecting just the next line that's commented to work
	/*bob.attribs.get('kids').push(newKid)*/
	const kids = bob.attribs.get('kids')
	kids.push(newKid++)
	bob.updateKids()
}}>
	Kids are: 
	{#each bob.attribs.get('kids') as kid}
		<li>{kid}</li>
	{/each}
</button>

bob.svelte.js

import {SvelteMap} from 'svelte/reactivity';

class Bob {
	attribs = $state(new SvelteMap([['type', 'employee'],
																 ['kids', ['a', 'b', 'c']]]));

	updateKids() {
		const kids = this.attribs.get('kids')
		this.attribs.delete('kids')
		this.attribs.set('kids', kids)
	}
}

export const bob = new Bob();

Logs

No response

System Info

Able to replicate this on the Svelte playground and in Ubuntu WSL.

Severity

blocking an upgrade

@brunnerh
Copy link
Member

@paoloricciuti
Copy link
Member

Duplicate of:

As pointed out we already have a issue for it (which probably is more a doc issue anyway...closing this but thanks for reporting

@paoloricciuti paoloricciuti closed this as not planned Won't fix, can't repro, duplicate, stale Nov 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants