You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: documentation/blog/2023-09-20-runes.md
+11-1Lines changed: 11 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -8,6 +8,7 @@ authorURL: /
8
8
In 2019, Svelte 3 turned JavaScript into a [reactive language](/blog/svelte-3-rethinking-reactivity). Svelte is a web UI framework that uses a compiler to turn declarative component code like this...
9
9
10
10
```svelte
11
+
<!--- file: App.svelte --->
11
12
<script>
12
13
let count = 0;
13
14
@@ -54,6 +55,7 @@ Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses
54
55
For example, to declare a piece of reactive state, we can use the `$state` rune:
55
56
56
57
```diff
58
+
<!--- file: App.svelte --->
57
59
<script>
58
60
- let count = 0;
59
61
+ let count = $state(0);
@@ -77,6 +79,7 @@ Well, no. The reality is that as applications grow in complexity, figuring out w
77
79
With runes, reactivity extends beyond the boundaries of your `.svelte` files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a [custom store](https://learn.svelte.dev/tutorial/custom-stores) in a `.js` or `.ts` file:
78
80
79
81
```js
82
+
/// file: counter.js
80
83
import { writable } from'svelte/store';
81
84
82
85
exportfunctioncreateCounter() {
@@ -92,7 +95,9 @@ export function createCounter() {
92
95
Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
93
96
94
97
```diff
98
+
<!--- file: App.svelte --->
95
99
<script>
100
+
/// file: App.svelte
96
101
+ import { createCounter } from './counter.js';
97
102
+
98
103
+ const counter = createCounter();
@@ -115,6 +120,7 @@ This works, but it's pretty weird! We've found that the store API can get rather
115
120
With runes, things get much simpler:
116
121
117
122
```diff
123
+
/// file: counter.svelte.js
118
124
-import { writable } from 'svelte/store';
119
125
120
126
export function createCounter() {
@@ -131,8 +137,10 @@ export function createCounter() {
131
137
```
132
138
133
139
```diff
140
+
<!--- file: App.svelte --->
134
141
<script>
135
-
import { createCounter } from './counter.js';
142
+
- import { createCounter } from './counter.js';
143
+
+ import { createCounter } from './counter.svelte.js';
136
144
137
145
const counter = createCounter();
138
146
</script>
@@ -143,6 +151,8 @@ export function createCounter() {
143
151
</button>
144
152
```
145
153
154
+
> Outside `.svelte` components, runes can only be used in `.svelte.js` and `.svelte.ts` modules.
155
+
146
156
Note that we're using a [get property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the function was called.
0 commit comments