Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
›
⌄
⌄
⌄
<script>
let a = $state(1);
let b = $state(2);
</script>
<label>
<input type="number" bind:value={a} min="0" max="10" />
<input type="range" bind:value={a} min="0" max="10" />
</label>
<label>
<input type="number" bind:value={b} min="0" max="10" />
<input type="range" bind:value={b} min="0" max="10" />
</label>
<p>{a} + {b} = {a + b}</p>
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
var root = $.template(`<label><input type="number" min="0" max="10"> <input type="range" min="0" max="10"></label> <label><input type="number" min="0" max="10"> <input type="range" min="0" max="10"></label> <p> </p>`, 1);
export default function App($$anchor) {
let a = $.state(1);
let b = $.state(2);
var fragment = root();
var label = $.first_child(fragment);
var input = $.child(label);
$.remove_input_defaults(input);
var input_1 = $.sibling(input, 2);
$.remove_input_defaults(input_1);
$.reset(label);
var label_1 = $.sibling(label, 2);
var input_2 = $.child(label_1);
$.remove_input_defaults(input_2);
var input_3 = $.sibling(input_2, 2);
$.remove_input_defaults(input_3);
$.reset(label_1);
var p = $.sibling(label_1, 2);
var text = $.child(p);
$.reset(p);
$.template_effect(() => $.set_text(text, `${$.get(a) ?? ''} + ${$.get(b) ?? ''} = ${$.get(a) + $.get(b) ?? ''}`));
$.bind_value(input, () => $.get(a), ($$value) => $.set(a, $$value));
$.bind_value(input_1, () => $.get(a), ($$value) => $.set(a, $$value));
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 60
- end: 348
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (6)
Text {...}
- type: "Text"
- start: 58
- end: 60
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 60
- end: 189
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 67
- end: 69
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 69
- end: 124
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 76
- end: 89
- name: "type"
value: [...] (1)
Text {...}
- start: 82
- end: 88
- type: "Text"
- raw: "number"
- data: "number"
}
]
} BindDirective {...}
- start: 90
- end: 104
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 102
- end: 103
loc: {...}
start: {...}
- line: 7
- column: 34
}end: {...}
- line: 7
- column: 35
}
}- name: "a"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 105
- end: 112
- name: "min"
value: [...] (1)
Text {...}
- start: 110
- end: 111
- type: "Text"
- raw: "0"
- data: "0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 113
- end: 121
- name: "max"
value: [...] (1)
Text {...}
- start: 118
- end: 120
- type: "Text"
- raw: "10"
- data: "10"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 124
- end: 126
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 126
- end: 180
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 133
- end: 145
- name: "type"
value: [...] (1)
Text {...}
- start: 139
- end: 144
- type: "Text"
- raw: "range"
- data: "range"
}
]
} BindDirective {...}
- start: 146
- end: 160
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 158
- end: 159
loc: {...}
start: {...}
- line: 8
- column: 33
}end: {...}
- line: 8
- column: 34
}
}- name: "a"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 161
- end: 168
- name: "min"
value: [...] (1)
Text {...}
- start: 166
- end: 167
- type: "Text"
- raw: "0"
- data: "0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 169
- end: 177
- name: "max"
value: [...] (1)
Text {...}
- start: 174
- end: 176
- type: "Text"
- raw: "10"
- data: "10"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 180
- end: 181
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 189
- end: 191
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 191
- end: 320
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 198
- end: 200
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 200
- end: 255
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 207
- end: 220
- name: "type"
value: [...] (1)
Text {...}
- start: 213
- end: 219
- type: "Text"
- raw: "number"
- data: "number"
}
]
} BindDirective {...}
- start: 221
- end: 235
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 233
- end: 234
loc: {...}
start: {...}
- line: 12
- column: 34
}end: {...}
- line: 12
- column: 35
}
}- name: "b"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 236
- end: 243
- name: "min"
value: [...] (1)
Text {...}
- start: 241
- end: 242
- type: "Text"
- raw: "0"
- data: "0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 244
- end: 252
- name: "max"
value: [...] (1)
Text {...}
- start: 249
- end: 251
- type: "Text"
- raw: "10"
- data: "10"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 255
- end: 257
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 257
- end: 311
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 264
- end: 276
- name: "type"
value: [...] (1)
Text {...}
- start: 270
- end: 275
- type: "Text"
- raw: "range"
- data: "range"
}
]
} BindDirective {...}
- start: 277
- end: 291
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 289
- end: 290
loc: {...}
start: {...}
- line: 13
- column: 33
}end: {...}
- line: 13
- column: 34
}
}- name: "b"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 292
- end: 299
- name: "min"
value: [...] (1)
Text {...}
- start: 297
- end: 298
- type: "Text"
- raw: "0"
- data: "0"
}
]
} Attribute {...}
- type: "Attribute"
- start: 300
- end: 308
- name: "max"
value: [...] (1)
Text {...}
- start: 305
- end: 307
- type: "Text"
- raw: "10"
- data: "10"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 311
- end: 312
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 320
- end: 322
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 322
- end: 348
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 325
- end: 328
expression: Identifier {...}
- type: "Identifier"
- start: 326
- end: 327
loc: {...}
start: {...}
- line: 16
- column: 4
}end: {...}
- line: 16
- column: 5
}
}- name: "a"
}
} Text {...}
- type: "Text"
- start: 328
- end: 331
- raw: " + "
- data: " + "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 331
- end: 334
expression: Identifier {...}
- type: "Identifier"
- start: 332
- end: 333
loc: {...}
start: {...}
- line: 16
- column: 10
}end: {...}
- line: 16
- column: 11
}
}- name: "b"
}
} Text {...}
- type: "Text"
- start: 334
- end: 337
- raw: " = "
- data: " = "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 337
- end: 344
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 338
- end: 343
loc: {...}
start: {...}
- line: 16
- column: 16
}end: {...}
- line: 16
- column: 21
}
}left: Identifier {...}
- type: "Identifier"
- start: 338
- end: 339
loc: {...}
start: {...}
- line: 16
- column: 16
}end: {...}
- line: 16
- column: 17
}
}- name: "a"
}- operator: "+"
right: Identifier {...}
- type: "Identifier"
- start: 342
- end: 343
loc: {...}
start: {...}
- line: 16
- column: 20
}end: {...}
- line: 16
- column: 21
}
}- name: "b"
}
}
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 58
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 49
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 4
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 19
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 18
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 15
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 6
}
}- name: "a"
}init: CallExpression {...}
- type: "CallExpression"
- start: 18
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 18
}
}callee: Identifier {...}
- type: "Identifier"
- start: 18
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 15
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 25
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 17
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 30
- end: 48
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 19
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 34
- end: 47
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 18
}
}id: Identifier {...}
- type: "Identifier"
- start: 34
- end: 35
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 6
}
}- name: "b"
}init: CallExpression {...}
- type: "CallExpression"
- start: 38
- end: 47
loc: {...}
start: {...}
- line: 3
- column: 9
}end: {...}
- line: 3
- column: 18
}
}callee: Identifier {...}
- type: "Identifier"
- start: 38
- end: 44
loc: {...}
start: {...}
- line: 3
- column: 9
}end: {...}
- line: 3
- column: 15
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 45
- end: 46
loc: {...}
start: {...}
- line: 3
- column: 16
}end: {...}
- line: 3
- column: 17
}
}- value: 2
- raw: "2"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time