Comments (2)
The svelte/reactivity
classes allow for internal modifications (e.g. due to functions calls) to be detected, if you re-assign, you still need $state
. It works at the top level only because Svelte is not in runes mode and it falls back to top level let
declarations being reactive automatically (REPL with runes mode).
let modified_at = $state(new Date());
If you only ever re-assign, you don't need svelte/reactivity
.
Example making use of its reactivity:
<svelte:options runes />
<script>
import { Date } from 'svelte/reactivity';
const modified_at = new Date();
function update() {
console.log('update');
modified_at.setTime(Date.now());
}
</script>
<p>
<!-- Need to call a function instead of coercing a conversion -->
{modified_at.toString()}
</p>
<button onclick={update}> Update </button>
from svelte.
modified_at.setTime(Date.now());
Yes this is what I ended up with.
It works at the top level only because Svelte is not in runes mode and it falls back to top level let declarations being reactive automatically (REPL with runes mode).
I see, that make lots of sense. Thanks for explanation. It was confusing to me.
I suppose it will be documented later on how to use svelte/reactivity
classes, so I am closing this issue.
from svelte.
Related Issues (20)
- Svelte 5: Passing Date objects through `$state.snapshot()` turns it into a string
- HMR fails on next.179 and above HOT 8
- 🪲 sveltekit PROD bug with [email protected] using ternary in template HOT 1
- Svelte 5: state_unsafe_mutation Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state` HOT 2
- Svelte 5: Automatically implement toJSON so state and properties are serialized. HOT 3
- Ternary in html attributes doesn't compile for production HOT 2
- Svelte 5 bug when moving mouse HOT 4
- $state, $bindable without backup value become 'undefined' in $derived HOT 5
- Svelte 5: SSR breaks rendering of Select component when HMR is enabled HOT 19
- Data returned from load function is stateless HOT 2
- Svelte 5: Add `class:list` directive HOT 3
- Individual states seemingly working like a singleton? I don't even know how to caption this HOT 1
- Distinguish between properties and attributes on custom elements HOT 10
- [REPL] modifying file name to same value wipes contents HOT 1
- `$props` aliasing allows invalid names HOT 7
- Svelte5: unexpected `Component` type errors HOT 4
- Proposal: Include README as component documentation upon packaging HOT 5
- Ability to ignore svelte warnings other than a11y HOT 2
- Svelte 5: only block root tags are checked for being closed HOT 5
- svelte5: while binding this to none-existing property on desctructed object, svelte adds the property HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.