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

feat: add $state.frozen rune #9851

Merged
merged 19 commits into from Dec 27, 2023
Merged

feat: add $state.frozen rune #9851

merged 19 commits into from Dec 27, 2023

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Dec 7, 2023

$state.frozen

Similar to $state, $state.frozen is also declared and can be used in many of the same ways (including on classes). However, the properties of any object and arrays are treated as read-only, and cannot be mutated. So if you intend to use objects as state and you want to mutate their properties and have reactivity work by default, it's recommended you use $state instead.

For the cases where you don't want Svelte's reactivity to apply deeply to state, and for those who might want to have more control over their data structures, you might find $state useful. Furthermore, $state.frozen is ideal for those who want to work with data using immutable patterns rather than mutable patterns.

<script>
	let items = $state.frozen([0]);

	const addItem = () => {
		items = [...items, items.length];
	};
</script>

<button on:click={addItem}>
	{items.join(', ')}
</button>

Objects and arrays passed to $state.frozen will be shallowly frozen using Object.freeze().

Copy link

changeset-bot bot commented Dec 7, 2023

🦋 Changeset detected

Latest commit: 34581f6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
svelte Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Dec 7, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
svelte-5-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Dec 27, 2023 7:25am

@Conduitry
Copy link
Member

Ref #9762.

Copy link
Member

@Rich-Harris Rich-Harris left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this mostly looks good but left some comments regarding testing.

do we want to use readonly in dev? presumably we don't want people mutating objects inside $state.raw, as it'll just fail confusingly

@trueadm
Copy link
Contributor Author

trueadm commented Dec 8, 2023

Addressed feedback, added more tests. I didn't get around to making the object readonly but hopefully I ticked off the other boxes.

@Rich-Harris

This comment was marked as outdated.

@MrHBS
Copy link

MrHBS commented Dec 8, 2023

Should this be called $state.shallow() instead?

@trueadm trueadm changed the title feat: add $state.raw rune feat: add $state.readonly rune Dec 12, 2023
@trueadm
Copy link
Contributor Author

trueadm commented Dec 12, 2023

Update the PR. This is now $state.readonly and we now Object.freeze the object shallowly that is passed in.

Rich-Harris and others added 2 commits December 26, 2023 16:57
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
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

Successfully merging this pull request may close these issues.

None yet

9 participants