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
›
⌄
⌄
⌄
⌄
<script>
import { fly } from 'svelte/transition';
let visible = $state(true);
let status = $state('waiting...');
</script>
<p>status: {status}</p>
<label>
<input type="checkbox" bind:checked={visible} />
visible
</label>
{#if visible}
<p
transition:fly={{ y: 200, duration: 2000 }}
onintrostart={() => (status = 'intro started')}
onoutrostart={() => (status = 'outro started')}
onintroend={() => (status = 'intro ended')}
onoutroend={() => (status = 'outro ended')}
>
Flies in and out
</p>
{/if}
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 { fly } from 'svelte/transition';
var root_1 = $.template(`<p>Flies in and out</p>`);
var root = $.template(`<p> </p> <label><input type="checkbox"> visible</label> <!>`, 1);
export default function App($$anchor) {
let visible = $.state(true);
let status = $.state('waiting...');
var fragment = root();
var p = $.first_child(fragment);
var text = $.child(p);
$.reset(p);
var label = $.sibling(p, 2);
var input = $.child(label);
$.remove_input_defaults(input);
$.next();
$.reset(label);
var node = $.sibling(label, 2);
{
var consequent = ($$anchor) => {
var p_1 = root_1();
$.event('introstart', p_1, () => $.set(status, 'intro started'));
$.event('outrostart', p_1, () => $.set(status, 'outro started'));
$.event('introend', p_1, () => $.set(status, 'intro ended'));
$.event('outroend', p_1, () => $.set(status, 'outro ended'));
$.transition(3, p_1, () => fly, () => ({ y: 200, duration: 2000 }));
$.append($$anchor, p_1);
};
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 128
- end: 519
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (6)
Text {...}
- type: "Text"
- start: 126
- end: 128
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 128
- end: 151
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 131
- end: 139
- raw: "status: "
- data: "status: "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 139
- end: 147
expression: Identifier {...}
- type: "Identifier"
- start: 140
- end: 146
loc: {...}
start: {...}
- line: 8
- column: 12
}end: {...}
- line: 8
- column: 18
}
}- name: "status"
}
}
]
}
} Text {...}
- type: "Text"
- start: 151
- end: 153
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 153
- end: 228
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 160
- end: 162
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 162
- end: 210
- name: "input"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 169
- end: 184
- name: "type"
value: [...] (1)
Text {...}
- start: 175
- end: 183
- type: "Text"
- raw: "checkbox"
- data: "checkbox"
}
]
} BindDirective {...}
- start: 185
- end: 207
- type: "BindDirective"
- name: "checked"
expression: Identifier {...}
- type: "Identifier"
- start: 199
- end: 206
loc: {...}
start: {...}
- line: 11
- column: 38
}end: {...}
- line: 11
- column: 45
}
}- name: "visible"
}- modifiers: []
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 210
- end: 220
- raw: " visible"
- data: " visible"
}
]
}
} Text {...}
- type: "Text"
- start: 228
- end: 230
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 230
- end: 519
test: Identifier {...}
- type: "Identifier"
- start: 235
- end: 242
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 12
}
}- name: "visible"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 243
- end: 245
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 245
- end: 513
- name: "p"
attributes: [...] (5)
TransitionDirective {...}
- start: 250
- end: 293
- type: "TransitionDirective"
- name: "fly"
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 266
- end: 292
loc: {...}
start: {...}
- line: 17
- column: 18
}end: {...}
- line: 17
- column: 44
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 268
- end: 274
loc: {...}
start: {...}
- line: 17
- column: 20
}end: {...}
- line: 17
- column: 26
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 268
- end: 269
loc: {...}
start: {...}
- line: 17
- column: 20
}end: {...}
- line: 17
- column: 21
}
}- name: "y"
}value: Literal {...}
- type: "Literal"
- start: 271
- end: 274
loc: {...}
start: {...}
- line: 17
- column: 23
}end: {...}
- line: 17
- column: 26
}
}- value: 200
- raw: "200"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 276
- end: 290
loc: {...}
start: {...}
- line: 17
- column: 28
}end: {...}
- line: 17
- column: 42
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 276
- end: 284
loc: {...}
start: {...}
- line: 17
- column: 28
}end: {...}
- line: 17
- column: 36
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 286
- end: 290
loc: {...}
start: {...}
- line: 17
- column: 38
}end: {...}
- line: 17
- column: 42
}
}- value: 2000
- raw: "2000"
}- kind: "init"
}
]
}- modifiers: []
- intro: true
- outro: true
} Attribute {...}
- type: "Attribute"
- start: 296
- end: 343
- name: "onintrostart"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 309
- end: 343
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 310
- end: 342
loc: {...}
start: {...}
- line: 18
- column: 16
}end: {...}
- line: 18
- column: 48
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 317
- end: 341
loc: {...}
start: {...}
- line: 18
- column: 23
}end: {...}
- line: 18
- column: 47
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 317
- end: 323
loc: {...}
start: {...}
- line: 18
- column: 23
}end: {...}
- line: 18
- column: 29
}
}- name: "status"
}right: Literal {...}
- type: "Literal"
- start: 326
- end: 341
loc: {...}
start: {...}
- line: 18
- column: 32
}end: {...}
- line: 18
- column: 47
}
}- value: "intro started"
- raw: "'intro started'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 346
- end: 393
- name: "onoutrostart"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 359
- end: 393
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 360
- end: 392
loc: {...}
start: {...}
- line: 19
- column: 16
}end: {...}
- line: 19
- column: 48
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 367
- end: 391
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 47
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 367
- end: 373
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 29
}
}- name: "status"
}right: Literal {...}
- type: "Literal"
- start: 376
- end: 391
loc: {...}
start: {...}
- line: 19
- column: 32
}end: {...}
- line: 19
- column: 47
}
}- value: "outro started"
- raw: "'outro started'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 396
- end: 439
- name: "onintroend"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 407
- end: 439
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 408
- end: 438
loc: {...}
start: {...}
- line: 20
- column: 14
}end: {...}
- line: 20
- column: 44
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 415
- end: 437
loc: {...}
start: {...}
- line: 20
- column: 21
}end: {...}
- line: 20
- column: 43
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 415
- end: 421
loc: {...}
start: {...}
- line: 20
- column: 21
}end: {...}
- line: 20
- column: 27
}
}- name: "status"
}right: Literal {...}
- type: "Literal"
- start: 424
- end: 437
loc: {...}
start: {...}
- line: 20
- column: 30
}end: {...}
- line: 20
- column: 43
}
}- value: "intro ended"
- raw: "'intro ended'"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 442
- end: 485
- name: "onoutroend"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 453
- end: 485
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 454
- end: 484
loc: {...}
start: {...}
- line: 21
- column: 14
}end: {...}
- line: 21
- column: 44
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 461
- end: 483
loc: {...}
start: {...}
- line: 21
- column: 21
}end: {...}
- line: 21
- column: 43
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 461
- end: 467
loc: {...}
start: {...}
- line: 21
- column: 21
}end: {...}
- line: 21
- column: 27
}
}- name: "status"
}right: Literal {...}
- type: "Literal"
- start: 470
- end: 483
loc: {...}
start: {...}
- line: 21
- column: 30
}end: {...}
- line: 21
- column: 43
}
}- value: "outro ended"
- raw: "'outro ended'"
}
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 488
- end: 509
- raw: "Flies in and out"
- data: "Flies in and out"
}
]
}
} Text {...}
- type: "Text"
- start: 513
- end: 514
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 126
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 117
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 6
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 41
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 13
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 13
}
}- name: "fly"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 22
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 13
}
}- name: "fly"
}
}
]source: Literal {...}
- type: "Literal"
- start: 30
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 40
}
}- value: "svelte/transition"
- raw: "'svelte/transition'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 53
- end: 80
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 28
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 57
- end: 79
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 27
}
}id: Identifier {...}
- type: "Identifier"
- start: 57
- end: 64
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 12
}
}- name: "visible"
}init: CallExpression {...}
- type: "CallExpression"
- start: 67
- end: 79
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 27
}
}callee: Identifier {...}
- type: "Identifier"
- start: 67
- end: 73
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 74
- end: 78
loc: {...}
start: {...}
- line: 4
- column: 22
}end: {...}
- line: 4
- column: 26
}
}- value: true
- raw: "true"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 82
- end: 116
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 35
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 86
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 34
}
}id: Identifier {...}
- type: "Identifier"
- start: 86
- end: 92
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 11
}
}- name: "status"
}init: CallExpression {...}
- type: "CallExpression"
- start: 95
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 14
}end: {...}
- line: 5
- column: 34
}
}callee: Identifier {...}
- type: "Identifier"
- start: 95
- end: 101
loc: {...}
start: {...}
- line: 5
- column: 14
}end: {...}
- line: 5
- column: 20
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 102
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 21
}end: {...}
- line: 5
- column: 33
}
}- value: "waiting..."
- raw: "'waiting...'"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time