Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Hoverable.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
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Hoverable from './Hoverable.svelte';
</script>
<Hoverable>
{#snippet children(active)}
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
{/snippet}
</Hoverable>
<Hoverable>
{#snippet children(active)}
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
</div>
{/snippet}
</Hoverable>
<Hoverable>
{#snippet children(active)}
<div class:active>
{#if active}
<p>I am being hovered upon.</p>
{:else}
<p>Hover over me!</p>
{/if}
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
999
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 Hoverable from './Hoverable.svelte';
var root_2 = $.template(`<p class="svelte-uxebyk">I am being hovered upon.</p>`);
var root_3 = $.template(`<p class="svelte-uxebyk">Hover over me!</p>`);
var root_1 = $.template(`<div class="svelte-uxebyk"><!></div>`);
var root_5 = $.template(`<p class="svelte-uxebyk">I am being hovered upon.</p>`);
var root_6 = $.template(`<p class="svelte-uxebyk">Hover over me!</p>`);
var root_4 = $.template(`<div class="svelte-uxebyk"><!></div>`);
var root_8 = $.template(`<p class="svelte-uxebyk">I am being hovered upon.</p>`);
var root_9 = $.template(`<p class="svelte-uxebyk">Hover over me!</p>`);
var root_7 = $.template(`<div class="svelte-uxebyk"><!></div>`);
var root = $.template(`<!> <!> <!>`, 1);
export default function App($$anchor) {
var fragment = root();
var node = $.first_child(fragment);
{
const children = ($$anchor, active = $.noop) => {
var div = root_1();
var node_1 = $.child(div);
{
var consequent = ($$anchor) => {
var p = root_2();
$.append($$anchor, p);
};
var alternate = ($$anchor) => {
var p_1 = root_3();
$.append($$anchor, p_1);
result = svelte.compile(source, {
generate: ,
});99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
›
div.svelte-uxebyk {
padding: 1em;
margin: 0 0 1em 0;
background-color: #eee;
}
.active.svelte-uxebyk {
background-color: #ff3e00;
color: white;
}
p.svelte-uxebyk {
pointer-events: none;
color: black;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 650
- end: 848
- attributes: []
children: [...] (3)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 659
- end: 662
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 659
- end: 662
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "div"
- start: 659
- end: 662
}
]- start: 659
- end: 662
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 663
- end: 730
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 667
- end: 679
- property: "padding"
- value: "1em"
} Declaration {...}
- type: "Declaration"
- start: 683
- end: 700
- property: "margin"
- value: "0 0 1em 0"
} Declaration {...}
- type: "Declaration"
- start: 704
- end: 726
- property: "background-color"
- value: "#eee"
}
]
}- start: 659
- end: 730
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 733
- end: 740
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 733
- end: 740
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
ClassSelector {...}
- type: "ClassSelector"
- name: "active"
- start: 733
- end: 740
}
]- start: 733
- end: 740
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 741
- end: 790
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 745
- end: 770
- property: "background-color"
- value: "#ff3e00"
} Declaration {...}
- type: "Declaration"
- start: 774
- end: 786
- property: "color"
- value: "white"
}
]
}- start: 733
- end: 790
} Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 793
- end: 794
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 793
- end: 794
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "p"
- start: 793
- end: 794
}
]- start: 793
- end: 794
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 795
- end: 839
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 799
- end: 819
- property: "pointer-events"
- value: "none"
} Declaration {...}
- type: "Declaration"
- start: 823
- end: 835
- property: "color"
- value: "black"
}
]
}- start: 793
- end: 839
}
]content: {...}
- start: 657
- end: 840
- styles: "\n\tdiv {\n\t\tpadding: 1em;\n\t\tmargin: 0 0 1em 0;\n\t\tbackground-color: #eee;\n\t}\n\n\t.active {\n\t\tbackground-color: #ff3e00;\n\t\tcolor: white;\n\t}\n\n\tp {\n\t\tpointer-events: none;\n\t\tcolor: black;\n\t}\n"
- comment: null
}
}- js: []
- start: 65
- end: 648
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (7)
Text {...}
- type: "Text"
- start: 63
- end: 65
- raw: "\n\n"
- data: "\n\n"
} Component {...}
- type: "Component"
- start: 65
- end: 258
- name: "Hoverable"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 76
- end: 78
- raw: "\n\t"
- data: "\n\t"
} SnippetBlock {...}
- type: "SnippetBlock"
- start: 78
- end: 245
expression: Identifier {...}
- type: "Identifier"
- start: 88
- end: 96
- name: "children"
}parameters: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 97
- end: 103
loc: {...}
start: {...}
- line: 6
- column: 20
}end: {...}
- line: 6
- column: 26
}
}- name: "active"
}
]body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 105
- end: 108
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 108
- end: 233
- name: "div"
attributes: [...] (2)
ClassDirective {...}
- start: 113
- end: 125
- type: "ClassDirective"
- name: "active"
expression: Identifier {...}
- start: 119
- end: 125
- type: "Identifier"
- name: "active"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 126
- end: 130
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 130
- end: 224
test: Identifier {...}
- type: "Identifier"
- start: 135
- end: 141
loc: {...}
start: {...}
- line: 8
- column: 8
}end: {...}
- line: 8
- column: 14
}
}- name: "active"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 142
- end: 147
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 147
- end: 178
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 150
- end: 174
- raw: "I am being hovered upon."
- data: "I am being hovered upon."
}
]
}
} Text {...}
- type: "Text"
- start: 178
- end: 182
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}alternate: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 189
- end: 194
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 194
- end: 215
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 197
- end: 211
- raw: "Hover over me!"
- data: "Hover over me!"
}
]
}
} Text {...}
- type: "Text"
- start: 215
- end: 219
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 224
- end: 227
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 233
- end: 235
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 245
- end: 246
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 258
- end: 260
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 260
- end: 453
- name: "Hoverable"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 271
- end: 273
- raw: "\n\t"
- data: "\n\t"
} SnippetBlock {...}
- type: "SnippetBlock"
- start: 273
- end: 440
expression: Identifier {...}
- type: "Identifier"
- start: 283
- end: 291
- name: "children"
}parameters: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 292
- end: 298
loc: {...}
start: {...}
- line: 18
- column: 20
}end: {...}
- line: 18
- column: 26
}
}- name: "active"
}
]body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 300
- end: 303
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 303
- end: 428
- name: "div"
attributes: [...] (2)
ClassDirective {...}
- start: 308
- end: 320
- type: "ClassDirective"
- name: "active"
expression: Identifier {...}
- start: 314
- end: 320
- type: "Identifier"
- name: "active"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 321
- end: 325
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 325
- end: 419
test: Identifier {...}
- type: "Identifier"
- start: 330
- end: 336
loc: {...}
start: {...}
- line: 20
- column: 8
}end: {...}
- line: 20
- column: 14
}
}- name: "active"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 337
- end: 342
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 342
- end: 373
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 345
- end: 369
- raw: "I am being hovered upon."
- data: "I am being hovered upon."
}
]
}
} Text {...}
- type: "Text"
- start: 373
- end: 377
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}alternate: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 384
- end: 389
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 389
- end: 410
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 392
- end: 406
- raw: "Hover over me!"
- data: "Hover over me!"
}
]
}
} Text {...}
- type: "Text"
- start: 410
- end: 414
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 419
- end: 422
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 428
- end: 430
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 440
- end: 441
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 453
- end: 455
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 455
- end: 648
- name: "Hoverable"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 466
- end: 468
- raw: "\n\t"
- data: "\n\t"
} SnippetBlock {...}
- type: "SnippetBlock"
- start: 468
- end: 635
expression: Identifier {...}
- type: "Identifier"
- start: 478
- end: 486
- name: "children"
}parameters: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 487
- end: 493
loc: {...}
start: {...}
- line: 30
- column: 20
}end: {...}
- line: 30
- column: 26
}
}- name: "active"
}
]body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 495
- end: 498
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 498
- end: 623
- name: "div"
attributes: [...] (2)
ClassDirective {...}
- start: 503
- end: 515
- type: "ClassDirective"
- name: "active"
expression: Identifier {...}
- start: 509
- end: 515
- type: "Identifier"
- name: "active"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 516
- end: 520
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 520
- end: 614
test: Identifier {...}
- type: "Identifier"
- start: 525
- end: 531
loc: {...}
start: {...}
- line: 32
- column: 8
}end: {...}
- line: 32
- column: 14
}
}- name: "active"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 532
- end: 537
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 537
- end: 568
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 540
- end: 564
- raw: "I am being hovered upon."
- data: "I am being hovered upon."
}
]
}
} Text {...}
- type: "Text"
- start: 568
- end: 572
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}alternate: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 579
- end: 584
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 584
- end: 605
- name: "p"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-uxebyk"
- raw: "svelte-uxebyk"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 587
- end: 601
- raw: "Hover over me!"
- data: "Hover over me!"
}
]
}
} Text {...}
- type: "Text"
- start: 605
- end: 609
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 614
- end: 617
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 623
- end: 625
- raw: "\n\t"
- data: "\n\t"
}
]
}
} Text {...}
- type: "Text"
- start: 635
- end: 636
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 648
- end: 650
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 63
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 54
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 3
- column: 0
}
}body: [...] (1)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 53
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 44
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 17
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 17
}
}- name: "Hoverable"
}
}
]source: Literal {...}
- type: "Literal"
- start: 32
- end: 52
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 43
}
}- value: "./Hoverable.svelte"
- raw: "'./Hoverable.svelte'"
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time