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.

Sign up for GitHub

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

Jump to bottom

feat: add $state.opaque rune #14639

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

feat: add $state.opaque rune #14639

wants to merge 14 commits into from
+282 −12

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Dec 9, 2024 •
edited
Loading

This PR adds the $state.opaque rune. This is a special kind of rune designed to solve problems with handling and managing state from external sources/libraries.

Specifically, for cases where Svelte is not involved in understanding that of the reactivity of the thing you're passing in – thus being opaque to Svelte. In order to let Svelte 5 know that something has changed, an invalidate function is provided so you can manually control letting Svelte know it should invalidate any reactive dependencies on this piece of state:

<script>
  let [count, invalidate_count] = $state.opaque(0);
</script>

<button onclick={() => count++ }>+</button>

<button onclick={() => invalidate_count() }>invalidate</button>

<div>{count}</div>

This means that reassignments and mutations to opaque state will not trigger reactive updates. You always need to invoke the invalidate function. Furthermore, this means that you will likely need to adopt the recent function bindings feature if you intend to use opaque state with bind:something.

Closes #14520.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Dec 9, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 21b0865

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

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

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

@Rich-Harris
Copy link
Member

preview: https://svelte-dev-git-preview-svelte-14639-svelte.vercel.app/

this is an automated message

@trueadm trueadm changed the title feat: add $state.opqaue rune feat: add $state.opaque rune Dec 9, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 9, 2024

Playground

pnpm add https://pkg.pr.new/svelte@14639

@trueadm
Copy link
Contributor Author

trueadm commented Dec 9, 2024

TODO: when we land $inspect.trace we need to add a call-site to this state so it's name is traced too.

@Rich-Harris
Copy link
Member

Given the syntactical requirements, I assume there's no way to make this work with classes?

@trueadm
Copy link
Contributor Author

trueadm commented Dec 11, 2024

Given the syntactical requirements, I assume there's no way to make this work with classes?

Nope. I think that’s fine though

@Ocean-OS
Copy link
Contributor

Ocean-OS commented Dec 12, 2024 •
edited
Loading

Given the syntactical requirements, I assume there's no way to make this work with classes?

Nope. I think that’s fine though

Couldn't something like this be done? (apologies for the terrible spacing)

class Thing{
    constructor() {
        ([this.stuff, this.invalidate] = $state.opaque(stuff)); 
    }
	}

Couldn't the private property for the $state object be added in compile time?
There could be a separate internal opaque_state function that specifically works with classes.

@dummdidumm
Copy link
Member

Theoretically there are ways to get it onto a class, but it's fugly

@trueadm
Copy link
Contributor Author

trueadm commented Dec 12, 2024

I don't think we should optimise for the usage of $state.opaque on classes, as long as there are ways to make it work (even if fugly) then that's fine IMO.

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

@trueadm trueadm

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

add a way to force update a state variable
4 participants
@trueadm @Rich-Harris @Ocean-OS @dummdidumm