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
›
⌄
⌄
⌄
⌄
⌄
<script>
let hereKitty = $state(false);
const handleMouseenter = () => (hereKitty = true);
const handleMouseleave = () => (hereKitty = false);
</script>
<svelte:body onmouseenter={handleMouseenter} onmouseleave={handleMouseleave} />
<!-- creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 -->
<img
class:curious={hereKitty}
alt="Kitten wants to know what's going on"
src="/tutorial/kitten.png"
/>
<style>
img {
position: absolute;
left: 0;
bottom: -60px;
transform: translate(-80%, 0) rotate(-30deg);
transform-origin: 100% 100%;
transition: transform 0.4s;
}
.curious {
transform: translate(-15%, 0) rotate(0deg);
}
:global(body) {
overflow: hidden;
}
</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
›
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
var root = $.template(`<img alt="Kitten wants to know what's going on" src="/tutorial/kitten.png" class="svelte-ilp3wu">`);
export default function App($$anchor) {
let hereKitty = $.state(false);
const handleMouseenter = () => $.set(hereKitty, true);
const handleMouseleave = () => $.set(hereKitty, false);
var img = root();
$.event('mouseenter', $.document.body, handleMouseenter);
$.event('mouseleave', $.document.body, handleMouseleave);
$.template_effect(() => $.toggle_class(img, 'curious', $.get(hereKitty)));
$.append($$anchor, img);
}
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
›
img.svelte-ilp3wu {
position: absolute;
left: 0;
bottom: -60px;
transform: translate(-80%, 0) rotate(-30deg);
transform-origin: 100% 100%;
transition: transform 0.4s;
}
.curious.svelte-ilp3wu {
transform: translate(-15%, 0) rotate(0deg);
}
body {
overflow: hidden;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 426
- end: 714
- attributes: []
children: [...] (3)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 435
- end: 438
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 435
- end: 438
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "img"
- start: 435
- end: 438
}
]- start: 435
- end: 438
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 439
- end: 602
children: [...] (6)
Declaration {...}
- type: "Declaration"
- start: 443
- end: 461
- property: "position"
- value: "absolute"
} Declaration {...}
- type: "Declaration"
- start: 465
- end: 472
- property: "left"
- value: "0"
} Declaration {...}
- type: "Declaration"
- start: 476
- end: 489
- property: "bottom"
- value: "-60px"
} Declaration {...}
- type: "Declaration"
- start: 493
- end: 537
- property: "transform"
- value: "translate(-80%, 0) rotate(-30deg)"
} Declaration {...}
- type: "Declaration"
- start: 541
- end: 568
- property: "transform-origin"
- value: "100% 100%"
} Declaration {...}
- type: "Declaration"
- start: 572
- end: 598
- property: "transition"
- value: "transform 0.4s"
}
]
}- start: 435
- end: 602
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 605
- end: 613
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 605
- end: 613
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "curious"
- start: 605
- end: 613
}
]- start: 605
- end: 613
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 614
- end: 664
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 618
- end: 660
- property: "transform"
- value: "translate(-15%, 0) rotate(0deg)"
}
]
}- start: 605
- end: 664
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 667
- end: 680
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 667
- end: 680
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
PseudoClassSelector {...}
- type: "PseudoClassSelector"
- name: "global"
args: SelectorList {...}
- type: "SelectorList"
- start: 675
- end: 679
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 675
- end: 679
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "body"
- start: 675
- end: 679
}
]- start: 675
- end: 679
}
]
}
]
}- start: 667
- end: 680
}
]- start: 667
- end: 680
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 681
- end: 705
children: [...] (1)
Declaration {...}
- type: "Declaration"
- start: 685
- end: 701
- property: "overflow"
- value: "hidden"
}
]
}- start: 667
- end: 705
}
]content: {...}
- start: 433
- end: 706
- styles: "\n\timg {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: -60px;\n\t\ttransform: translate(-80%, 0) rotate(-30deg);\n\t\ttransform-origin: 100% 100%;\n\t\ttransition: transform 0.4s;\n\t}\n\n\t.curious {\n\t\ttransform: translate(-15%, 0) rotate(0deg);\n\t}\n\n\t:global(body) {\n\t\toverflow: hidden;\n\t}\n"
- comment: null
}
}- js: []
- start: 158
- end: 424
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 156
- end: 158
- raw: "\n\n"
- data: "\n\n"
} SvelteBody {...}
- type: "SvelteBody"
- start: 158
- end: 237
- name: "svelte:body"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 171
- end: 202
- name: "onmouseenter"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 184
- end: 202
expression: Identifier {...}
- type: "Identifier"
- start: 185
- end: 201
loc: {...}
start: {...}
- line: 8
- column: 27
}end: {...}
- line: 8
- column: 43
}
}- name: "handleMouseenter"
}
}
} Attribute {...}
- type: "Attribute"
- start: 203
- end: 234
- name: "onmouseleave"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 216
- end: 234
expression: Identifier {...}
- type: "Identifier"
- start: 217
- end: 233
loc: {...}
start: {...}
- line: 8
- column: 59
}end: {...}
- line: 8
- column: 75
}
}- name: "handleMouseleave"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 237
- end: 239
- raw: "\n\n"
- data: "\n\n"
} Comment {...}
- type: "Comment"
- start: 239
- end: 317
- data: " creative commons BY-NC http://www.pngall.com/kitten-png/download/7247 "
} Text {...}
- type: "Text"
- start: 317
- end: 318
- raw: "\n"
- data: "\n"
} RegularElement {...}
- type: "RegularElement"
- start: 318
- end: 424
- name: "img"
attributes: [...] (4)
ClassDirective {...}
- start: 324
- end: 349
- type: "ClassDirective"
- name: "curious"
expression: Identifier {...}
- type: "Identifier"
- start: 339
- end: 348
loc: {...}
start: {...}
- line: 12
- column: 16
}end: {...}
- line: 12
- column: 25
}
}- name: "hereKitty"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 351
- end: 393
- name: "alt"
value: [...] (1)
Text {...}
- start: 356
- end: 392
- type: "Text"
- raw: "Kitten wants to know what's going on"
- data: "Kitten wants to know what's going on"
}
]
} Attribute {...}
- type: "Attribute"
- start: 395
- end: 421
- name: "src"
value: [...] (1)
Text {...}
- start: 400
- end: 420
- type: "Text"
- raw: "/tutorial/kitten.png"
- data: "/tutorial/kitten.png"
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-ilp3wu"
- raw: "svelte-ilp3wu"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 424
- end: 426
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 156
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 147
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 6
- column: 0
}
}body: [...] (3)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 31
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 30
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 14
}
}- name: "hereKitty"
}init: CallExpression {...}
- type: "CallExpression"
- start: 26
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 30
}
}callee: Identifier {...}
- type: "Identifier"
- start: 26
- end: 32
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 23
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 33
- end: 38
loc: {...}
start: {...}
- line: 2
- column: 24
}end: {...}
- line: 2
- column: 29
}
}- value: false
- raw: "false"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 43
- end: 93
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 51
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 49
- end: 92
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 4
- column: 50
}
}id: Identifier {...}
- type: "Identifier"
- start: 49
- end: 65
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 4
- column: 23
}
}- name: "handleMouseenter"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 68
- end: 92
loc: {...}
start: {...}
- line: 4
- column: 26
}end: {...}
- line: 4
- column: 50
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 75
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 33
}end: {...}
- line: 4
- column: 49
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 75
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 33
}end: {...}
- line: 4
- column: 42
}
}- name: "hereKitty"
}right: Literal {...}
- type: "Literal"
- start: 87
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 45
}end: {...}
- line: 4
- column: 49
}
}- value: true
- raw: "true"
}
}
}
}
]- kind: "const"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 95
- end: 146
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 52
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 101
- end: 145
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 51
}
}id: Identifier {...}
- type: "Identifier"
- start: 101
- end: 117
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 23
}
}- name: "handleMouseleave"
}init: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 120
- end: 145
loc: {...}
start: {...}
- line: 5
- column: 26
}end: {...}
- line: 5
- column: 51
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 127
- end: 144
loc: {...}
start: {...}
- line: 5
- column: 33
}end: {...}
- line: 5
- column: 50
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 127
- end: 136
loc: {...}
start: {...}
- line: 5
- column: 33
}end: {...}
- line: 5
- column: 42
}
}- name: "hereKitty"
}right: Literal {...}
- type: "Literal"
- start: 139
- end: 144
loc: {...}
start: {...}
- line: 5
- column: 45
}end: {...}
- line: 5
- column: 50
}
}- value: false
- raw: "false"
}
}
}
}
]- kind: "const"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time