Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Santa.svelte
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
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>
import { mount, unmount } from 'svelte';
import Santa from './Santa.svelte';
let target;
let component;
</script>
<button
disabled={!!component}
onclick={() => {
component = mount(Santa, { target });
}}
>mount</button>
<button
disabled={!component}
onclick={async () => {
await unmount(component, { outro: true });
component = null;
}}
>unmount</button>
<div bind:this={target}></div>
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 "svelte/internal/flags/legacy";
import * as $ from "svelte/internal/client";
import { mount, unmount } from 'svelte';
import Santa from './Santa.svelte';
var on_click = (_, component, target) => {
$.set(component, mount(Santa, { target: $.get(target) }));
};
var on_click_1 = async (__1, component) => {
await unmount($.get(component), { outro: true });
$.set(component, null);
};
var root = $.template(`<button>mount</button> <button>unmount</button> <div></div>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, false);
let target = $.mutable_state();
let component = $.mutable_state();
$.init();
var fragment = root();
var button = $.first_child(fragment);
button.__click = [on_click, component, target];
var button_1 = $.sibling(button, 2);
button_1.__click = [on_click_1, component];
var div = $.sibling(button_1, 2);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 130
- end: 414
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (6)
Text {...}
- type: "Text"
- start: 128
- end: 130
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 130
- end: 239
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 139
- end: 161
- name: "disabled"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 148
- end: 161
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 149
- end: 160
loc: {...}
start: {...}
- line: 10
- column: 11
}end: {...}
- line: 10
- column: 22
}
}- operator: "!"
- prefix: true
argument: UnaryExpression {...}
- type: "UnaryExpression"
- start: 150
- end: 160
loc: {...}
start: {...}
- line: 10
- column: 12
}end: {...}
- line: 10
- column: 22
}
}- operator: "!"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 151
- end: 160
loc: {...}
start: {...}
- line: 10
- column: 13
}end: {...}
- line: 10
- column: 22
}
}- name: "component"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 163
- end: 223
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 171
- end: 223
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 172
- end: 222
loc: {...}
start: {...}
- line: 11
- column: 10
}end: {...}
- line: 13
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: false
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 178
- end: 222
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 13
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 182
- end: 219
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 39
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 182
- end: 218
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 38
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 182
- end: 191
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 11
}
}- name: "component"
}right: CallExpression {...}
- type: "CallExpression"
- start: 194
- end: 218
loc: {...}
start: {...}
- line: 12
- column: 14
}end: {...}
- line: 12
- column: 38
}
}callee: Identifier {...}
- type: "Identifier"
- start: 194
- end: 199
loc: {...}
start: {...}
- line: 12
- column: 14
}end: {...}
- line: 12
- column: 19
}
}- name: "mount"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 200
- end: 205
loc: {...}
start: {...}
- line: 12
- column: 20
}end: {...}
- line: 12
- column: 25
}
}- name: "Santa"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 207
- end: 217
loc: {...}
start: {...}
- line: 12
- column: 27
}end: {...}
- line: 12
- column: 37
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 209
- end: 215
loc: {...}
start: {...}
- line: 12
- column: 29
}end: {...}
- line: 12
- column: 35
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 209
- end: 215
loc: {...}
start: {...}
- line: 12
- column: 29
}end: {...}
- line: 12
- column: 35
}
}- name: "target"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 209
- end: 215
loc: {...}
start: {...}
- line: 12
- column: 29
}end: {...}
- line: 12
- column: 35
}
}- name: "target"
}
}
]
}
]- optional: false
}
}
}
]
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 225
- end: 230
- raw: "mount"
- data: "mount"
}
]
}
} Text {...}
- type: "Text"
- start: 239
- end: 241
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 241
- end: 382
- name: "button"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 250
- end: 271
- name: "disabled"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 259
- end: 271
expression: UnaryExpression {...}
- type: "UnaryExpression"
- start: 260
- end: 270
loc: {...}
start: {...}
- line: 17
- column: 11
}end: {...}
- line: 17
- column: 21
}
}- operator: "!"
- prefix: true
argument: Identifier {...}
- type: "Identifier"
- start: 261
- end: 270
loc: {...}
start: {...}
- line: 17
- column: 12
}end: {...}
- line: 17
- column: 21
}
}- name: "component"
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 273
- end: 364
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 281
- end: 364
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 282
- end: 363
loc: {...}
start: {...}
- line: 18
- column: 10
}end: {...}
- line: 21
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: true
- params: []
body: BlockStatement {...}
- type: "BlockStatement"
- start: 294
- end: 363
loc: {...}
start: {...}
- line: 18
- column: 22
}end: {...}
- line: 21
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 298
- end: 340
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 44
}
}expression: AwaitExpression {...}
- type: "AwaitExpression"
- start: 298
- end: 339
loc: {...}
start: {...}
- line: 19
- column: 2
}end: {...}
- line: 19
- column: 43
}
}argument: CallExpression {...}
- type: "CallExpression"
- start: 304
- end: 339
loc: {...}
start: {...}
- line: 19
- column: 8
}end: {...}
- line: 19
- column: 43
}
}callee: Identifier {...}
- type: "Identifier"
- start: 304
- end: 311
loc: {...}
start: {...}
- line: 19
- column: 8
}end: {...}
- line: 19
- column: 15
}
}- name: "unmount"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 312
- end: 321
loc: {...}
start: {...}
- line: 19
- column: 16
}end: {...}
- line: 19
- column: 25
}
}- name: "component"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 323
- end: 338
loc: {...}
start: {...}
- line: 19
- column: 27
}end: {...}
- line: 19
- column: 42
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 325
- end: 336
loc: {...}
start: {...}
- line: 19
- column: 29
}end: {...}
- line: 19
- column: 40
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 325
- end: 330
loc: {...}
start: {...}
- line: 19
- column: 29
}end: {...}
- line: 19
- column: 34
}
}- name: "outro"
}value: Literal {...}
- type: "Literal"
- start: 332
- end: 336
loc: {...}
start: {...}
- line: 19
- column: 36
}end: {...}
- line: 19
- column: 40
}
}- value: true
- raw: "true"
}- kind: "init"
}
]
}
]- optional: false
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 343
- end: 360
loc: {...}
start: {...}
- line: 20
- column: 2
}end: {...}
- line: 20
- column: 19
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 343
- end: 359
loc: {...}
start: {...}
- line: 20
- column: 2
}end: {...}
- line: 20
- column: 18
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 343
- end: 352
loc: {...}
start: {...}
- line: 20
- column: 2
}end: {...}
- line: 20
- column: 11
}
}- name: "component"
}right: Literal {...}
- type: "Literal"
- start: 355
- end: 359
loc: {...}
start: {...}
- line: 20
- column: 14
}end: {...}
- line: 20
- column: 18
}
}- value: null
- raw: "null"
}
}
}
]
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 366
- end: 373
- raw: "unmount"
- data: "unmount"
}
]
}
} Text {...}
- type: "Text"
- start: 382
- end: 384
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 384
- end: 414
- name: "div"
attributes: [...] (1)
BindDirective {...}
- start: 389
- end: 407
- type: "BindDirective"
- name: "this"
expression: Identifier {...}
- type: "Identifier"
- start: 400
- end: 406
loc: {...}
start: {...}
- line: 24
- column: 16
}end: {...}
- line: 24
- column: 22
}
}- name: "target"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 128
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 119
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 7
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 41
}
}specifiers: [...] (2)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 15
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 15
}
}- name: "mount"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 15
}
}- name: "mount"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 26
- end: 33
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 24
}
}imported: Identifier {...}
- type: "Identifier"
- start: 26
- end: 33
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 24
}
}- name: "unmount"
}local: Identifier {...}
- type: "Identifier"
- start: 26
- end: 33
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 24
}
}- name: "unmount"
}
}
]source: Literal {...}
- type: "Literal"
- start: 41
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 32
}end: {...}
- line: 2
- column: 40
}
}- value: "svelte"
- raw: "'svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 52
- end: 87
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 36
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 59
- end: 64
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 13
}
}local: Identifier {...}
- type: "Identifier"
- start: 59
- end: 64
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 13
}
}- name: "Santa"
}
}
]source: Literal {...}
- type: "Literal"
- start: 70
- end: 86
loc: {...}
start: {...}
- line: 3
- column: 19
}end: {...}
- line: 3
- column: 35
}
}- value: "./Santa.svelte"
- raw: "'./Santa.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 91
- end: 102
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 12
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 95
- end: 101
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 11
}
}id: Identifier {...}
- type: "Identifier"
- start: 95
- end: 101
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 11
}
}- name: "target"
}- init: null
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 104
- end: 118
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 15
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 108
- end: 117
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 14
}
}id: Identifier {...}
- type: "Identifier"
- start: 108
- end: 117
loc: {...}
start: {...}
- line: 6
- column: 5
}end: {...}
- line: 6
- column: 14
}
}- name: "component"
}- init: null
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time