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
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
let key = $state();
let keyCode = $state();
function handleKeydown(event) {
key = event.key;
keyCode = event.keyCode;
}
</script>
<svelte:window onkeydown={handleKeydown} />
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>
<style>
div {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
kbd {
background-color: #eee;
border-radius: 4px;
font-size: 6em;
padding: 0.2em 0.5em;
border-top: 5px solid rgba(255, 255, 255, 0.5);
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_1 = $.template(`<kbd class="svelte-17uh762"> </kbd> <p> </p>`, 1);
var root_2 = $.template(`<p>Focus this window and press any key</p>`);
var root = $.template(`<div style="text-align: center" class="svelte-17uh762"><!></div>`);
export default function App($$anchor) {
let key = $.state(undefined);
let keyCode = $.state(undefined);
function handleKeydown(event) {
$.set(key, $.proxy(event.key));
$.set(keyCode, $.proxy(event.keyCode));
}
var div = root();
$.event('keydown', $.window, handleKeydown);
var node = $.child(div);
{
var consequent = ($$anchor) => {
var fragment = root_1();
var kbd = $.first_child(fragment);
var text = $.child(kbd, true);
$.reset(kbd);
var p = $.sibling(kbd, 2);
var text_1 = $.child(p, true);
$.reset(p);
$.template_effect(() => {
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
›
div.svelte-17uh762 {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
flex-direction: column;
}
kbd.svelte-17uh762 {
background-color: #eee;
border-radius: 4px;
font-size: 6em;
padding: 0.2em 0.5em;
border-top: 5px solid rgba(255, 255, 255, 0.5);
border-left: 5px solid rgba(255, 255, 255, 0.5);
border-right: 5px solid rgba(0, 0, 0, 0.2);
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
color: #555;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 369
- end: 814
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 378
- end: 381
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 378
- end: 381
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "div"
- start: 378
- end: 381
}
]- start: 378
- end: 381
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 382
- end: 495
children: [...] (5)
Declaration {...}
- type: "Declaration"
- start: 386
- end: 399
- property: "display"
- value: "flex"
} Declaration {...}
- type: "Declaration"
- start: 403
- end: 415
- property: "height"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 419
- end: 438
- property: "align-items"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 442
- end: 465
- property: "justify-content"
- value: "center"
} Declaration {...}
- type: "Declaration"
- start: 469
- end: 491
- property: "flex-direction"
- value: "column"
}
]
}- start: 378
- end: 495
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 498
- end: 501
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 498
- end: 501
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "kbd"
- start: 498
- end: 501
}
]- start: 498
- end: 501
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 502
- end: 805
children: [...] (9)
Declaration {...}
- type: "Declaration"
- start: 506
- end: 528
- property: "background-color"
- value: "#eee"
} Declaration {...}
- type: "Declaration"
- start: 532
- end: 550
- property: "border-radius"
- value: "4px"
} Declaration {...}
- type: "Declaration"
- start: 554
- end: 568
- property: "font-size"
- value: "6em"
} Declaration {...}
- type: "Declaration"
- start: 572
- end: 592
- property: "padding"
- value: "0.2em 0.5em"
} Declaration {...}
- type: "Declaration"
- start: 596
- end: 642
- property: "border-top"
- value: "5px solid rgba(255, 255, 255, 0.5)"
} Declaration {...}
- type: "Declaration"
- start: 646
- end: 693
- property: "border-left"
- value: "5px solid rgba(255, 255, 255, 0.5)"
} Declaration {...}
- type: "Declaration"
- start: 697
- end: 739
- property: "border-right"
- value: "5px solid rgba(0, 0, 0, 0.2)"
} Declaration {...}
- type: "Declaration"
- start: 743
- end: 786
- property: "border-bottom"
- value: "5px solid rgba(0, 0, 0, 0.2)"
} Declaration {...}
- type: "Declaration"
- start: 790
- end: 801
- property: "color"
- value: "#555"
}
]
}- start: 498
- end: 805
}
]content: {...}
- start: 376
- end: 806
- styles: "\n\tdiv {\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex-direction: column;\n\t}\n\n\tkbd {\n\t\tbackground-color: #eee;\n\t\tborder-radius: 4px;\n\t\tfont-size: 6em;\n\t\tpadding: 0.2em 0.5em;\n\t\tborder-top: 5px solid rgba(255, 255, 255, 0.5);\n\t\tborder-left: 5px solid rgba(255, 255, 255, 0.5);\n\t\tborder-right: 5px solid rgba(0, 0, 0, 0.2);\n\t\tborder-bottom: 5px solid rgba(0, 0, 0, 0.2);\n\t\tcolor: #555;\n\t}\n"
- comment: null
}
}- js: []
- start: 149
- end: 367
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 147
- end: 149
- raw: "\n\n"
- data: "\n\n"
} SvelteWindow {...}
- type: "SvelteWindow"
- start: 149
- end: 192
- name: "svelte:window"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 164
- end: 189
- name: "onkeydown"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 174
- end: 189
expression: Identifier {...}
- type: "Identifier"
- start: 175
- end: 188
loc: {...}
start: {...}
- line: 11
- column: 26
}end: {...}
- line: 11
- column: 39
}
}- name: "handleKeydown"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 192
- end: 194
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 194
- end: 367
- name: "div"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 199
- end: 225
- name: "style"
value: [...] (1)
Text {...}
- start: 206
- end: 224
- type: "Text"
- raw: "text-align: center"
- data: "text-align: center"
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-17uh762"
- raw: "svelte-17uh762"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 226
- end: 228
- raw: "\n\t"
- data: "\n\t"
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 228
- end: 360
test: Identifier {...}
- type: "Identifier"
- start: 233
- end: 236
loc: {...}
start: {...}
- line: 14
- column: 6
}end: {...}
- line: 14
- column: 9
}
}- name: "key"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 237
- end: 240
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 240
- end: 280
- name: "kbd"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-17uh762"
- raw: "svelte-17uh762"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 245
- end: 274
expression: ConditionalExpression {...}
- type: "ConditionalExpression"
- start: 246
- end: 273
loc: {...}
start: {...}
- line: 15
- column: 8
}end: {...}
- line: 15
- column: 35
}
}test: BinaryExpression {...}
- type: "BinaryExpression"
- start: 246
- end: 257
loc: {...}
start: {...}
- line: 15
- column: 8
}end: {...}
- line: 15
- column: 19
}
}left: Identifier {...}
- type: "Identifier"
- start: 246
- end: 249
loc: {...}
start: {...}
- line: 15
- column: 8
}end: {...}
- line: 15
- column: 11
}
}- name: "key"
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 254
- end: 257
loc: {...}
start: {...}
- line: 15
- column: 16
}end: {...}
- line: 15
- column: 19
}
}- value: " "
- raw: "' '"
}
}consequent: Literal {...}
- type: "Literal"
- start: 260
- end: 267
loc: {...}
start: {...}
- line: 15
- column: 22
}end: {...}
- line: 15
- column: 29
}
}- value: "Space"
- raw: "'Space'"
}alternate: Identifier {...}
- type: "Identifier"
- start: 270
- end: 273
loc: {...}
start: {...}
- line: 15
- column: 32
}end: {...}
- line: 15
- column: 35
}
}- name: "key"
}
}
}
]
}
} Text {...}
- type: "Text"
- start: 280
- end: 283
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 283
- end: 299
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 286
- end: 295
expression: Identifier {...}
- type: "Identifier"
- start: 287
- end: 294
loc: {...}
start: {...}
- line: 16
- column: 6
}end: {...}
- line: 16
- column: 13
}
}- name: "keyCode"
}
}
]
}
} Text {...}
- type: "Text"
- start: 299
- end: 301
- raw: "\n\t"
- data: "\n\t"
}
]
}alternate: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 308
- end: 311
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 311
- end: 353
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 314
- end: 349
- raw: "Focus this window and press any key"
- data: "Focus this window and press any key"
}
]
}
} Text {...}
- type: "Text"
- start: 353
- end: 355
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 360
- end: 361
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 367
- end: 369
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 147
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 138
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 9
- column: 0
}
}body: [...] (3)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 29
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 20
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 19
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 17
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 8
}
}- name: "key"
}init: CallExpression {...}
- type: "CallExpression"
- start: 20
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 11
}end: {...}
- line: 2
- column: 19
}
}callee: Identifier {...}
- type: "Identifier"
- start: 20
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 11
}end: {...}
- line: 2
- column: 17
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 31
- end: 54
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 24
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 35
- end: 53
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 23
}
}id: Identifier {...}
- type: "Identifier"
- start: 35
- end: 42
loc: {...}
start: {...}
- line: 3
- column: 5
}end: {...}
- line: 3
- column: 12
}
}- name: "keyCode"
}init: CallExpression {...}
- type: "CallExpression"
- start: 45
- end: 53
loc: {...}
start: {...}
- line: 3
- column: 15
}end: {...}
- line: 3
- column: 23
}
}callee: Identifier {...}
- type: "Identifier"
- start: 45
- end: 51
loc: {...}
start: {...}
- line: 3
- column: 15
}end: {...}
- line: 3
- column: 21
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 57
- end: 137
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 8
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 66
- end: 79
loc: {...}
start: {...}
- line: 5
- column: 10
}end: {...}
- line: 5
- column: 23
}
}- name: "handleKeydown"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 80
- end: 85
loc: {...}
start: {...}
- line: 5
- column: 24
}end: {...}
- line: 5
- column: 29
}
}- name: "event"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 87
- end: 137
loc: {...}
start: {...}
- line: 5
- column: 31
}end: {...}
- line: 8
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 91
- end: 107
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 18
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 91
- end: 106
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 17
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 91
- end: 94
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 5
}
}- name: "key"
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 97
- end: 106
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 17
}
}object: Identifier {...}
- type: "Identifier"
- start: 97
- end: 102
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 13
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 103
- end: 106
loc: {...}
start: {...}
- line: 6
- column: 14
}end: {...}
- line: 6
- column: 17
}
}- name: "key"
}- computed: false
- optional: false
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 110
- end: 134
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 26
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 110
- end: 133
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 25
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 110
- end: 117
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 9
}
}- name: "keyCode"
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 120
- end: 133
loc: {...}
start: {...}
- line: 7
- column: 12
}end: {...}
- line: 7
- column: 25
}
}object: Identifier {...}
- type: "Identifier"
- start: 120
- end: 125
loc: {...}
start: {...}
- line: 7
- column: 12
}end: {...}
- line: 7
- column: 17
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 126
- end: 133
loc: {...}
start: {...}
- line: 7
- column: 18
}end: {...}
- line: 7
- column: 25
}
}- name: "keyCode"
}- computed: false
- optional: false
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time