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-7
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;
@@ -58,7 +58,7 @@ Update expressions (`count += 1`) and property assignments (`obj.x = y`) have th
58
58
59
59
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).
60
60
61
-
```html
61
+
```sv
62
62
<script>
63
63
let count = 0;
64
64
@@ -76,7 +76,7 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
76
76
77
77
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.
78
78
79
-
```html
79
+
```sv
80
80
<script>
81
81
export let title;
82
82
@@ -95,7 +95,7 @@ Any top-level statement (i.e. not inside a block or a function) can be made reac
95
95
96
96
If a statement consists entirely of an assignment to an undeclared variable, Svelte will inject a `let` declaration on your behalf.
97
97
98
-
```html
98
+
```sv
99
99
<script>
100
100
export let num;
101
101
@@ -116,7 +116,7 @@ Note that the store must be declared at the top level of the component — not i
116
116
117
117
Local variables (that do not represent store values) must *not* have a `$` prefix.
118
118
119
-
```html
119
+
```sv
120
120
<script>
121
121
import { writable } from 'svelte/store';
122
122
@@ -139,7 +139,7 @@ You can `export` bindings from this block, and they will become exports of the c
139
139
140
140
You cannot `export default`, since the default export is the component itself.
141
141
142
-
```html
142
+
```sv
143
143
<script context="module">
144
144
let totalComponents = 0;
145
145
@@ -178,7 +178,7 @@ This works by adding a class to affected elements, which is based on a hash of t
178
178
179
179
To apply styles to a selector globally, use the `:global(...)` modifier.
0 commit comments