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
18
19
20
21
22
23
24
25
›
⌄
⌄
⌄
⌄
⌄
<script>
let w = $state();
let h = $state();
let size = $state(42);
let text = $state('edit me');
</script>
<input type="range" bind:value={size} />
<input bind:value={text} />
<p>size: {w}px x {h}px</p>
<div bind:clientWidth={w} bind:clientHeight={h}>
<span style="font-size: {size}px">{text}</span>
</div>
<style>
input {
display: block;
}
div {
display: inline-block;
}
</style>
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(`<input type="range" class="svelte-1oqthja"> <input class="svelte-1oqthja"> <p> </p> <div class="svelte-1oqthja"><span> </span></div>`, 1);
export default function App($$anchor) {
let w = $.state(undefined);
let h = $.state(undefined);
let size = $.state(42);
let text = $.state('edit me');
var fragment = root();
var input = $.first_child(fragment);
$.remove_input_defaults(input);
var input_1 = $.sibling(input, 2);
$.remove_input_defaults(input_1);
var p = $.sibling(input_1, 2);
var text_1 = $.child(p);
$.reset(p);
var div = $.sibling(p, 2);
var span = $.child(div);
var text_2 = $.child(span, true);
$.reset(span);
$.reset(div);
$.template_effect(() => {
$.set_text(text_1, `size: ${$.get(w) ?? ''}px x ${$.get(h) ?? ''}px`);
$.set_attribute(span, 'style', `font-size: ${$.get(size) ?? ''}px`);
$.set_text(text_2, $.get(text));
});
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
7
8
›
input.svelte-1oqthja {
display: block;
}
div.svelte-1oqthja {
display: inline-block;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 317
- end: 398
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 326
- end: 331
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 326
- end: 331
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "input"
- start: 326
- end: 331
}
]- start: 326
- end: 331
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 332
- end: 354
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 336
- end: 350
- property: "display"
- value: "block"
}
]
}- start: 326
- end: 354
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 356
- end: 359
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 356
- end: 359
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "div"
- start: 356
- end: 359
}
]- start: 356
- end: 359
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 360
- end: 389
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 364
- end: 385
- property: "display"
- value: "inline-block"
}
]
}- start: 356
- end: 389
}
]content: {...}
- start: 324
- end: 390
- styles: "\n\tinput {\n\t\tdisplay: block;\n\t}\n\tdiv {\n\t\tdisplay: inline-block;\n\t}\n"
- comment: null
}
}- js: []
- start: 113
- end: 315
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (9)
Text {...}
- type: "Text"
- start: 111
- end: 113
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 113
- end: 153
- name: "input"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 120
- end: 132
- name: "type"
value: [...] (1)
Text {...}
- start: 126
- end: 131
- type: "Text"
- raw: "range"
- data: "range"
}
]
} BindDirective {...}
- start: 133
- end: 150
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 145
- end: 149
loc: {...}
start: {...}
- line: 8
- column: 32
}end: {...}
- line: 8
- column: 36
}
}- name: "size"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1oqthja"
- raw: "svelte-1oqthja"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 153
- end: 154
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 154
- end: 181
- name: "input"
attributes: [...] (2)
BindDirective {...}
- start: 161
- end: 178
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 173
- end: 177
loc: {...}
start: {...}
- line: 9
- column: 19
}end: {...}
- line: 9
- column: 23
}
}- name: "text"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1oqthja"
- raw: "svelte-1oqthja"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 181
- end: 183
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 183
- end: 209
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 186
- end: 192
- raw: "size: "
- data: "size: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 192
- end: 195
expression: Identifier {...}
- type: "Identifier"
- start: 193
- end: 194
loc: {...}
start: {...}
- line: 11
- column: 10
}end: {...}
- line: 11
- column: 11
}
}- name: "w"
}
} Text {...}
- type: "Text"
- start: 195
- end: 200
- raw: "px x "
- data: "px x "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 200
- end: 203
expression: Identifier {...}
- type: "Identifier"
- start: 201
- end: 202
loc: {...}
start: {...}
- line: 11
- column: 18
}end: {...}
- line: 11
- column: 19
}
}- name: "h"
}
} Text {...}
- type: "Text"
- start: 203
- end: 205
- raw: "px"
- data: "px"
}
]
}
} Text {...}
- type: "Text"
- start: 209
- end: 211
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 211
- end: 315
- name: "div"
attributes: [...] (3)
BindDirective {...}
- start: 216
- end: 236
- type: "BindDirective"
- name: "clientWidth"
expression: Identifier {...}
- type: "Identifier"
- start: 234
- end: 235
loc: {...}
start: {...}
- line: 13
- column: 23
}end: {...}
- line: 13
- column: 24
}
}- name: "w"
}- modifiers: []
} BindDirective {...}
- start: 237
- end: 258
- type: "BindDirective"
- name: "clientHeight"
expression: Identifier {...}
- type: "Identifier"
- start: 256
- end: 257
loc: {...}
start: {...}
- line: 13
- column: 45
}end: {...}
- line: 13
- column: 46
}
}- name: "h"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1oqthja"
- raw: "svelte-1oqthja"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 259
- end: 261
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 261
- end: 308
- name: "span"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 267
- end: 294
- name: "style"
value: [...] (3)
Text {...}
- start: 274
- end: 285
- type: "Text"
- raw: "font-size: "
- data: "font-size: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 285
- end: 291
expression: Identifier {...}
- type: "Identifier"
- start: 286
- end: 290
loc: {...}
start: {...}
- line: 14
- column: 26
}end: {...}
- line: 14
- column: 30
}
}- name: "size"
}
} Text {...}
- start: 291
- end: 293
- type: "Text"
- raw: "px"
- data: "px"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 295
- end: 301
expression: Identifier {...}
- type: "Identifier"
- start: 296
- end: 300
loc: {...}
start: {...}
- line: 14
- column: 36
}end: {...}
- line: 14
- column: 40
}
}- name: "text"
}
}
]
}
} Text {...}
- type: "Text"
- start: 308
- end: 309
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 315
- end: 317
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 111
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 102
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 6
- column: 0
}
}body: [...] (4)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 27
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 18
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 17
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 15
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 6
}
}- name: "w"
}init: CallExpression {...}
- type: "CallExpression"
- start: 18
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 17
}
}callee: Identifier {...}
- type: "Identifier"
- start: 18
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 15
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 29
- end: 46
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 18
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 33
- end: 45
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 17
}
}id: Identifier {...}
- type: "Identifier"
- start: 33
- end: 34
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 6
}
}- name: "h"
}init: CallExpression {...}
- type: "CallExpression"
- start: 37
- end: 45
loc: {...}
start: {...}
- line: 3
- column: 9
}end: {...}
- line: 3
- column: 17
}
}callee: Identifier {...}
- type: "Identifier"
- start: 37
- end: 43
loc: {...}
start: {...}
- line: 3
- column: 9
}end: {...}
- line: 3
- column: 15
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 48
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 23
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 52
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 22
}
}id: Identifier {...}
- type: "Identifier"
- start: 52
- end: 56
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 9
}
}- name: "size"
}init: CallExpression {...}
- type: "CallExpression"
- start: 59
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 12
}end: {...}
- line: 4
- column: 22
}
}callee: Identifier {...}
- type: "Identifier"
- start: 59
- end: 65
loc: {...}
start: {...}
- line: 4
- column: 12
}end: {...}
- line: 4
- column: 18
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 66
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 19
}end: {...}
- line: 4
- column: 21
}
}- value: 42
- raw: "42"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 72
- end: 101
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 30
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 76
- end: 100
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 29
}
}id: Identifier {...}
- type: "Identifier"
- start: 76
- end: 80
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 9
}
}- name: "text"
}init: CallExpression {...}
- type: "CallExpression"
- start: 83
- end: 100
loc: {...}
start: {...}
- line: 5
- column: 12
}end: {...}
- line: 5
- column: 29
}
}callee: Identifier {...}
- type: "Identifier"
- start: 83
- end: 89
loc: {...}
start: {...}
- line: 5
- column: 12
}end: {...}
- line: 5
- column: 18
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 90
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 19
}end: {...}
- line: 5
- column: 28
}
}- value: "edit me"
- raw: "'edit me'"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time