Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Keypad.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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Keypad from './Keypad.svelte';
let pin = $state('');
let view = $derived(pin ? pin.replace(/\d(?!$)/g, '•') : 'enter your pin');
function handleSubmit() {
alert(`submitted ${pin}`);
}
</script>
<h1 class:pin>{view}</h1>
<Keypad bind:value={pin} onSubmit={handleSubmit} />
<style>
h1 {
color: #ccc;
}
h1.pin {
color: #333;
}
:global(body.dark) h1 {
color: #444;
}
:global(body.dark) h1.pin {
color: #fff;
}
</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';
import Keypad from './Keypad.svelte';
var root = $.template(`<h1 class="svelte-1gw0kf"> </h1> <!>`, 1);
export default function App($$anchor) {
let pin = $.state('');
let view = $.derived(() => $.get(pin) ? $.get(pin).replace(/\d(?!$)/g, '•') : 'enter your pin');
function handleSubmit() {
alert(`submitted ${$.get(pin)}`);
}
var fragment = root();
var h1 = $.first_child(fragment);
var text = $.child(h1, true);
$.reset(h1);
var node = $.sibling(h1, 2);
Keypad(node, {
onSubmit: handleSubmit,
get value() {
return $.get(pin);
},
set value($$value) {
$.set(pin, $.proxy($$value));
}
});
$.template_effect(() => {
$.toggle_class(h1, 'pin', $.get(pin));
$.set_text(text, $.get(view));
});
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
›
h1.svelte-1gw0kf {
color: #ccc;
}
h1.pin.svelte-1gw0kf {
color: #333;
}
body.dark h1.svelte-1gw0kf {
color: #444;
}
body.dark h1.pin.svelte-1gw0kf {
color: #fff;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 300
- end: 458
- attributes: []
children: [...] (4)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 309
- end: 311
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 309
- end: 311
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 309
- end: 311
}
]- start: 309
- end: 311
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 312
- end: 331
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 316
- end: 327
- property: "color"
- value: "#ccc"
}
]
}- start: 309
- end: 331
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 333
- end: 339
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 333
- end: 339
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 333
- end: 335
} ClassSelector {...}
- type: "ClassSelector"
- name: "pin"
- start: 335
- end: 339
}
]- start: 333
- end: 339
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 340
- end: 359
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 344
- end: 355
- property: "color"
- value: "#333"
}
]
}- start: 333
- end: 359
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 361
- end: 382
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 361
- end: 382
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
args: SelectorList {...}
- type: "SelectorList"
- start: 369
- end: 378
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 369
- end: 378
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
TypeSelector {...}
- type: "TypeSelector"
- name: "body"
- start: 369
- end: 373
} ClassSelector {...}
- type: "ClassSelector"
- name: "dark"
- start: 373
- end: 378
}
]- start: 369
- end: 378
}
]
}
]
}- start: 361
- end: 379
}
]- start: 361
- end: 379
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 379
- end: 380
}selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 380
- end: 382
}
]- start: 379
- end: 382
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 383
- end: 402
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 387
- end: 398
- property: "color"
- value: "#444"
}
]
}- start: 361
- end: 402
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 404
- end: 429
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 404
- end: 429
children: [...] (2)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
args: SelectorList {...}
- type: "SelectorList"
- start: 412
- end: 421
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 412
- end: 421
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (2)
TypeSelector {...}
- type: "TypeSelector"
- name: "body"
- start: 412
- end: 416
} ClassSelector {...}
- type: "ClassSelector"
- name: "dark"
- start: 416
- end: 421
}
]- start: 412
- end: 421
}
]
}
]
}- start: 404
- end: 422
}
]- start: 404
- end: 422
} RelativeSelector {...}
- type: "RelativeSelector"
combinator: Combinator {...}
- type: "Combinator"
- name: " "
- start: 422
- end: 423
}selectors: [...] (2)
TypeSelector {...}
- type: "TypeSelector"
- name: "h1"
- start: 423
- end: 425
} ClassSelector {...}
- type: "ClassSelector"
- name: "pin"
- start: 425
- end: 429
}
]- start: 422
- end: 429
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 430
- end: 449
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 434
- end: 445
- property: "color"
- value: "#fff"
}
]
}- start: 404
- end: 449
}
]content: {...}
- start: 307
- end: 450
- styles: "\n\th1 {\n\t\tcolor: #ccc;\n\t}\n\th1.pin {\n\t\tcolor: #333;\n\t}\n\t:global(body.dark) h1 {\n\t\tcolor: #444;\n\t}\n\t:global(body.dark) h1.pin {\n\t\tcolor: #fff;\n\t}\n"
- comment: null
}
}- js: []
- start: 220
- end: 298
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 218
- end: 220
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 220
- end: 245
- name: "h1"
attributes: [...] (2)
ClassDirective {...}
- start: 224
- end: 233
- type: "ClassDirective"
- name: "pin"
expression: Identifier {...}
- start: 230
- end: 233
- type: "Identifier"
- name: "pin"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1gw0kf"
- raw: "svelte-1gw0kf"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
ExpressionTag {...}
- type: "ExpressionTag"
- start: 234
- end: 240
expression: Identifier {...}
- type: "Identifier"
- start: 235
- end: 239
loc: {...}
start: {...}
- line: 12
- column: 15
}end: {...}
- line: 12
- column: 19
}
}- name: "view"
}
}
]
}
} Text {...}
- type: "Text"
- start: 245
- end: 247
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 247
- end: 298
- name: "Keypad"
attributes: [...] (2)
BindDirective {...}
- start: 255
- end: 271
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 267
- end: 270
loc: {...}
start: {...}
- line: 14
- column: 20
}end: {...}
- line: 14
- column: 23
}
}- name: "pin"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 272
- end: 295
- name: "onSubmit"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 281
- end: 295
expression: Identifier {...}
- type: "Identifier"
- start: 282
- end: 294
loc: {...}
start: {...}
- line: 14
- column: 35
}end: {...}
- line: 14
- column: 47
}
}- name: "handleSubmit"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 298
- end: 300
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 218
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 209
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 47
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 38
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 14
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 14
}
}- name: "Keypad"
}
}
]source: Literal {...}
- type: "Literal"
- start: 29
- end: 46
loc: {...}
start: {...}
- line: 2
- column: 20
}end: {...}
- line: 2
- column: 37
}
}- value: "./Keypad.svelte"
- raw: "'./Keypad.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 50
- end: 71
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 22
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 54
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 21
}
}id: Identifier {...}
- type: "Identifier"
- start: 54
- end: 57
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 8
}
}- name: "pin"
}init: CallExpression {...}
- type: "CallExpression"
- start: 60
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 11
}end: {...}
- line: 4
- column: 21
}
}callee: Identifier {...}
- type: "Identifier"
- start: 60
- end: 66
loc: {...}
start: {...}
- line: 4
- column: 11
}end: {...}
- line: 4
- column: 17
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 67
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 18
}end: {...}
- line: 4
- column: 20
}
}- value: ""
- raw: "''"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 73
- end: 148
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 76
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 77
- end: 147
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 75
}
}id: Identifier {...}
- type: "Identifier"
- start: 77
- end: 81
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 9
}
}- name: "view"
}init: CallExpression {...}
- type: "CallExpression"
- start: 84
- end: 147
loc: {...}
start: {...}
- line: 5
- column: 12
}end: {...}
- line: 5
- column: 75
}
}callee: Identifier {...}
- type: "Identifier"
- start: 84
- end: 92
loc: {...}
start: {...}
- line: 5
- column: 12
}end: {...}
- line: 5
- column: 20
}
}- name: "$derived"
}arguments: [...] (1)
ConditionalExpression {...}
- type: "ConditionalExpression"
- start: 93
- end: 146
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 74
}
}test: Identifier {...}
- type: "Identifier"
- start: 93
- end: 96
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 24
}
}- name: "pin"
}consequent: CallExpression {...}
- type: "CallExpression"
- start: 99
- end: 127
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 55
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 99
- end: 110
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 38
}
}object: Identifier {...}
- type: "Identifier"
- start: 99
- end: 102
loc: {...}
start: {...}
- line: 5
- column: 27
}end: {...}
- line: 5
- column: 30
}
}- name: "pin"
}property: Identifier {...}
- type: "Identifier"
- start: 103
- end: 110
loc: {...}
start: {...}
- line: 5
- column: 31
}end: {...}
- line: 5
- column: 38
}
}- name: "replace"
}- computed: false
- optional: false
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 111
- end: 121
loc: {...}
start: {...}
- line: 5
- column: 39
}end: {...}
- line: 5
- column: 49
}
}value: {...}
}- raw: "/\\d(?!$)/g"
regex: {...}
- pattern: "\\d(?!$)"
- flags: "g"
}
} Literal {...}
- type: "Literal"
- start: 123
- end: 126
loc: {...}
start: {...}
- line: 5
- column: 51
}end: {...}
- line: 5
- column: 54
}
}- value: "•"
- raw: "'•'"
}
]- optional: false
}alternate: Literal {...}
- type: "Literal"
- start: 130
- end: 146
loc: {...}
start: {...}
- line: 5
- column: 58
}end: {...}
- line: 5
- column: 74
}
}- value: "enter your pin"
- raw: "'enter your pin'"
}
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 151
- end: 208
loc: {...}
start: {...}
- line: 7
- column: 1
}end: {...}
- line: 9
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 160
- end: 172
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 22
}
}- name: "handleSubmit"
}- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 175
- end: 208
loc: {...}
start: {...}
- line: 7
- column: 25
}end: {...}
- line: 9
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 179
- end: 205
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 28
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 179
- end: 204
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 27
}
}callee: Identifier {...}
- type: "Identifier"
- start: 179
- end: 184
loc: {...}
start: {...}
- line: 8
- column: 2
}end: {...}
- line: 8
- column: 7
}
}- name: "alert"
}arguments: [...] (1)
TemplateLiteral {...}
- type: "TemplateLiteral"
- start: 185
- end: 203
loc: {...}
start: {...}
- line: 8
- column: 8
}end: {...}
- line: 8
- column: 26
}
}expressions: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 198
- end: 201
loc: {...}
start: {...}
- line: 8
- column: 21
}end: {...}
- line: 8
- column: 24
}
}- name: "pin"
}
]quasis: [...] (2)
TemplateElement {...}
- type: "TemplateElement"
- start: 186
- end: 196
loc: {...}
start: {...}
- line: 8
- column: 9
}end: {...}
- line: 8
- column: 19
}
}value: {...}
- raw: "submitted "
- cooked: "submitted "
}- tail: false
} TemplateElement {...}
- type: "TemplateElement"
- start: 202
- end: 202
loc: {...}
start: {...}
- line: 8
- column: 25
}end: {...}
- line: 8
- column: 25
}
}value: {...}
- raw: ""
- cooked: ""
}- tail: true
}
]
}
]- optional: false
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time