Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
NavLink.svelte
NavLink2.svelte
hash.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.29.7.
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import NavLink from './NavLink.svelte'
import NavLink2 from './NavLink2.svelte'
import hash from './hash'
window.location.hash = '#/'
</script>
<nav>
<div>
<NavLink href="#/">Home</NavLink>
<NavLink href="#/long">A Very Long Name</NavLink>
<NavLink href="#/articles">Articles</NavLink>
</div>
<div>
<NavLink2 href="#/">Home</NavLink2>
<NavLink2 href="#/long">A Very Long Name</NavLink2>
<NavLink2 href="#/articles">Articles</NavLink2>
</div>
</nav>
{#if $hash === '#/articles'}
<p>Articles</p>
{:else if $hash === '#/long'}
<p>Long Indeed</p>
{:else}
<p>Home</p>
{/if}
<style>
nav {
text-align: center;
}
</style>
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
›
⌄
⌄
/* App.svelte generated by Svelte v3.29.7 */
import {
SvelteComponent,
append,
attr,
component_subscribe,
create_component,
destroy_component,
detach,
element,
empty,
init,
insert,
mount_component,
safe_not_equal,
space,
text,
transition_in,
transition_out
} from "svelte/internal";
import NavLink from "./NavLink.svelte";
import NavLink2 from "./NavLink2.svelte";
import hash from "./hash";
function add_css() {
var style = element("style");
style.id = "svelte-qxf0b-style";
style.textContent = "nav.svelte-qxf0b{text-align:center}";
append(document.head, style);
}
// (11:2) <NavLink href="#/">
function create_default_slot_5(ctx) {
let t;
result = svelte.compile(source, {
generate: ,
});9
1
›
nav.svelte-qxf0b{text-align:center}
{
html: Fragment {...}
- start: 159
- end: 603
- type: "Fragment"
children: [...] (5)
Text {...}
- start: 157
- end: 159
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Element {...}
- start: 159
- end: 479
- type: "Element"
- name: "nav"
- attributes: []
children: [...] (5)
Text {...}
- start: 164
- end: 166
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 166
- end: 315
- type: "Element"
- name: "div"
- attributes: []
children: [...] (7)
Text {...}
- start: 171
- end: 174
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 174
- end: 207
- type: "InlineComponent"
- name: "NavLink"
attributes: [...] (1)
Attribute {...}
- start: 183
- end: 192
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 189
- end: 191
- type: "Text"
- raw: "#/"
- data: "#/"
}
]
}
]children: [...] (1)
Text {...}
- start: 193
- end: 197
- type: "Text"
- raw: "Home"
- data: "Home"
}
]
} Text {...}
- start: 207
- end: 210
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 210
- end: 259
- type: "InlineComponent"
- name: "NavLink"
attributes: [...] (1)
Attribute {...}
- start: 219
- end: 232
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 225
- end: 231
- type: "Text"
- raw: "#/long"
- data: "#/long"
}
]
}
]children: [...] (1)
Text {...}
- start: 233
- end: 249
- type: "Text"
- raw: "A Very Long Name"
- data: "A Very Long Name"
}
]
} Text {...}
- start: 259
- end: 262
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 262
- end: 307
- type: "InlineComponent"
- name: "NavLink"
attributes: [...] (1)
Attribute {...}
- start: 271
- end: 288
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 277
- end: 287
- type: "Text"
- raw: "#/articles"
- data: "#/articles"
}
]
}
]children: [...] (1)
Text {...}
- start: 289
- end: 297
- type: "Text"
- raw: "Articles"
- data: "Articles"
}
]
} Text {...}
- start: 307
- end: 309
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 315
- end: 317
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 317
- end: 472
- type: "Element"
- name: "div"
- attributes: []
children: [...] (7)
Text {...}
- start: 322
- end: 325
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 325
- end: 360
- type: "InlineComponent"
- name: "NavLink2"
attributes: [...] (1)
Attribute {...}
- start: 335
- end: 344
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 341
- end: 343
- type: "Text"
- raw: "#/"
- data: "#/"
}
]
}
]children: [...] (1)
Text {...}
- start: 345
- end: 349
- type: "Text"
- raw: "Home"
- data: "Home"
}
]
} Text {...}
- start: 360
- end: 363
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 363
- end: 414
- type: "InlineComponent"
- name: "NavLink2"
attributes: [...] (1)
Attribute {...}
- start: 373
- end: 386
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 379
- end: 385
- type: "Text"
- raw: "#/long"
- data: "#/long"
}
]
}
]children: [...] (1)
Text {...}
- start: 387
- end: 403
- type: "Text"
- raw: "A Very Long Name"
- data: "A Very Long Name"
}
]
} Text {...}
- start: 414
- end: 417
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 417
- end: 464
- type: "InlineComponent"
- name: "NavLink2"
attributes: [...] (1)
Attribute {...}
- start: 427
- end: 444
- type: "Attribute"
- name: "href"
value: [...] (1)
Text {...}
- start: 433
- end: 443
- type: "Text"
- raw: "#/articles"
- data: "#/articles"
}
]
}
]children: [...] (1)
Text {...}
- start: 445
- end: 453
- type: "Text"
- raw: "Articles"
- data: "Articles"
}
]
} Text {...}
- start: 464
- end: 466
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 472
- end: 473
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
} Text {...}
- start: 479
- end: 481
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} IfBlock {...}
- start: 481
- end: 603
- type: "IfBlock"
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 486
- end: 508
loc: {...}
start: {...}
- line: 22
- column: 5
}end: {...}
- line: 22
- column: 27
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 22
- column: 5
}end: {...}
- line: 22
- column: 10
}
}
}property: Literal {...}
- type: "Literal"
- value: 0
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "$hash"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 496
- end: 508
loc: {...}
start: {...}
- line: 22
- column: 15
}end: {...}
- line: 22
- column: 27
}
}- value: "#/articles"
- raw: "'#/articles'"
}
}children: [...] (1)
Element {...}
- start: 511
- end: 526
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 514
- end: 522
- type: "Text"
- raw: "Articles"
- data: "Articles"
}
]
}
]else: ElseBlock {...}
- start: 556
- end: 598
- type: "ElseBlock"
children: [...] (1)
IfBlock {...}
- start: 556
- end: 603
- type: "IfBlock"
- elseif: true
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 537
- end: 555
loc: {...}
start: {...}
- line: 24
- column: 10
}end: {...}
- line: 24
- column: 28
}
}left: MemberExpression {...}
- type: "MemberExpression"
- start: 22
- end: 64
object: Identifier {...}
- type: "Identifier"
- start: 22
- end: 45
- name: "#ctx"
loc: {...}
start: {...}
- line: 24
- column: 10
}end: {...}
- line: 24
- column: 15
}
}
}property: Literal {...}
- type: "Literal"
- value: 0
}- computed: true
- optional: false
leadingComments: [...] (1)
Block {...}
- type: "Block"
- value: "$hash"
- start: 0
- end: 21
- has_trailing_newline: false
}
]
}- operator: "==="
right: Literal {...}
- type: "Literal"
- start: 547
- end: 555
loc: {...}
start: {...}
- line: 24
- column: 20
}end: {...}
- line: 24
- column: 28
}
}- value: "#/long"
- raw: "'#/long'"
}
}children: [...] (1)
Element {...}
- start: 558
- end: 576
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 561
- end: 572
- type: "Text"
- raw: "Long Indeed"
- data: "Long Indeed"
}
]
}
]else: ElseBlock {...}
- start: 584
- end: 598
- type: "ElseBlock"
children: [...] (1)
Element {...}
- start: 586
- end: 597
- type: "Element"
- name: "p"
- attributes: []
children: [...] (1)
Text {...}
- start: 589
- end: 593
- type: "Text"
- raw: "Home"
- data: "Home"
}
]
}
]
}
}
]
}
} Text {...}
- start: 603
- end: 605
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
}
]
}css: Style {...}
- type: "Style"
- start: 605
- end: 653
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "nav"
- start: 614
- end: 617
}
]- start: 614
- end: 617
}
]- start: 614
- end: 617
}block: Block {...}
- type: "Block"
children: [...] (1)
Declaration {...}
- type: "Declaration"
- important: false
- property: "text-align"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 634
- end: 640
}
]- start: 633
- end: 640
}- start: 622
- end: 640
}
]- start: 618
- end: 644
}- start: 614
- end: 644
}
]content: {...}
- start: 612
- end: 645
- styles: "\n\tnav {\n\t\ttext-align: center;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 157
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 148
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 7
- column: 0
}
}body: [...] (4)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 39
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 15
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 15
}
}- name: "NavLink"
}
}
]source: Literal {...}
- type: "Literal"
- start: 30
- end: 48
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 39
}
}- value: "./NavLink.svelte"
- raw: "'./NavLink.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 50
- end: 90
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 41
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 57
- end: 65
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 16
}
}local: Identifier {...}
- type: "Identifier"
- start: 57
- end: 65
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 16
}
}- name: "NavLink2"
}
}
]source: Literal {...}
- type: "Literal"
- start: 71
- end: 90
loc: {...}
start: {...}
- line: 3
- column: 22
}end: {...}
- line: 3
- column: 41
}
}- value: "./NavLink2.svelte"
- raw: "'./NavLink2.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 92
- end: 117
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 26
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 99
- end: 103
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 12
}
}local: Identifier {...}
- type: "Identifier"
- start: 99
- end: 103
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 12
}
}- name: "hash"
}
}
]source: Literal {...}
- type: "Literal"
- start: 109
- end: 117
loc: {...}
start: {...}
- line: 4
- column: 18
}end: {...}
- line: 4
- column: 26
}
}- value: "./hash"
- raw: "'./hash'"
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 120
- end: 147
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 28
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 120
- end: 147
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 28
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 120
- end: 140
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 21
}
}object: MemberExpression {...}
- type: "MemberExpression"
- start: 120
- end: 135
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 16
}
}object: Identifier {...}
- type: "Identifier"
- start: 120
- end: 126
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 7
}
}- name: "window"
}property: Identifier {...}
- type: "Identifier"
- start: 127
- end: 135
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 16
}
}- name: "location"
}- computed: false
- optional: false
}property: Identifier {...}
- type: "Identifier"
- start: 136
- end: 140
loc: {...}
start: {...}
- line: 6
- column: 17
}end: {...}
- line: 6
- column: 21
}
}- name: "hash"
}- computed: false
- optional: false
}right: Literal {...}
- type: "Literal"
- start: 143
- end: 147
loc: {...}
start: {...}
- line: 6
- column: 24
}end: {...}
- line: 6
- column: 28
}
}- value: "#/"
- raw: "'#/'"
}
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time