✳flâneur — a map of the web's best reading

Universal reactivity • Docs • Svelte 5 preview

svelte-5-preview.vercel.app · 212 words · saved by 1 readers

In Svelte 5, you can create reactive state anywhere in your app — not just at the top level of your components. Suppose we have a component like this: We can encapsulate this logic in a function, so that it can be used in multiple places: Note that we're using a get property in the returned object, so that counter.count always refers to the current value rather than the value at the time the createCounter function was called. We can also extract that function out into a separate .svelte.js or .svelte.ts module... ...and import it into our component: See this example in the playground. In Svelte 4, the way you'd do this is by creating a custom store, perhaps like this: Back in the component, we retrieve the store value by prefixing its name with $: The store approach has some significant drawbacks. A counter is just about the simplest custom store we could create, and yet we have to completely change how the code is written — importing writable, understanding its API, grabbing reference

Overview • Svelte Docs Skip to main content Tutorial Packages Playground Blog On this page Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript... App < script > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ button > < style > button { font-size : 2 em ; } </ style > < script lang = "ts" > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ b

Explore this link on the map →

related reading