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: site/content/docs/01-component-format.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ A `<script>` block contains JavaScript that runs when a component instance is cr
30
30
31
31
Svelte uses the `export` keyword to mark a variable declaration as a *property* or *prop*, which means it becomes accessible to consumers of the component:
32
32
33
-
```html
33
+
```sv
34
34
<script>
35
35
// these properties can be set externally
36
36
export let foo;
@@ -61,7 +61,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
61
61
62
62
Because Svelte's reactivity is based on assignments, using array methods like `.push()` and `.splice()` won't automatically trigger updates. Options for getting around this can be found in the [tutorial](tutorial/updating-arrays-and-objects).
63
63
64
-
```html
64
+
```sv
65
65
<script>
66
66
let count = 0;
67
67
@@ -79,7 +79,7 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
79
79
80
80
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` label. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
81
81
82
-
```html
82
+
```sv
83
83
<script>
84
84
export let title;
85
85
@@ -98,7 +98,7 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
98
98
99
99
If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
100
100
101
-
```html
101
+
```sv
102
102
<script>
103
103
export let num;
104
104
@@ -119,7 +119,7 @@ Note that the store must be declared at the top level of the component — not i
119
119
120
120
Local variables (that do not represent store values) must *not* have a `$` prefix.
121
121
122
-
```html
122
+
```sv
123
123
<script>
124
124
import { writable } from 'svelte/store';
125
125
@@ -142,7 +142,7 @@ You can `export` bindings from this block, and they will become exports of the c
142
142
143
143
You cannot `export default`, since the default export is the component itself.
144
144
145
-
```html
145
+
```sv
146
146
<script context="module">
147
147
let totalComponents = 0;
148
148
@@ -181,7 +181,7 @@ This works by adding a class to affected elements, which is based on a hash of t
181
181
182
182
To apply styles to a selector globally, use the `:global(...)` modifier.
0 commit comments