Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.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
›
⌄
⌄
⌄
⌄
⌄
⌄
<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as { id, name }, i}
<li>
<a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a>
</li>
{/each}
</ul>
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';
var root_1 = $.template(`<li><a target="_blank" rel="noreferrer"> </a></li>`);
var root = $.template(`<h1>The Famous Cats of YouTube</h1> <ul></ul>`, 1);
export default function App($$anchor) {
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{
id: 'OUtn3pvWmpg',
name: 'Henri The Existential Cat'
}
];
var fragment = root();
var ul = $.sibling($.first_child(fragment), 2);
$.each(ul, 5, () => cats, $.index, ($$anchor, $$item, i) => {
let id = () => $.get($$item).id;
let name = () => $.get($$item).name;
var li = root_1();
var a = $.child(li);
var text = $.child(a);
$.reset(a);
$.reset(li);
$.template_effect(() => {
$.set_attribute(a, 'href', `https://www.youtube.com/watch?v=${id() ?? ''}`);
$.set_text(text, `${i + 1 ?? ''}: ${name() ?? ''}`);
});
$.append($$anchor, li);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 183
- end: 399
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (4)
Text {...}
- type: "Text"
- start: 181
- end: 183
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 183
- end: 218
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 187
- end: 213
- raw: "The Famous Cats of YouTube"
- data: "The Famous Cats of YouTube"
}
]
}
} Text {...}
- type: "Text"
- start: 218
- end: 220
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 220
- end: 399
- name: "ul"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 224
- end: 226
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- type: "EachBlock"
- start: 226
- end: 393
expression: Identifier {...}
- type: "Identifier"
- start: 233
- end: 237
loc: {...}
start: {...}
- line: 12
- column: 8
}end: {...}
- line: 12
- column: 12
}
}- name: "cats"
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 257
- end: 260
- raw: "\n\t\t"
- data: "\n\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 260
- end: 384
- name: "li"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 264
- end: 268
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 268
- end: 376
- name: "a"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 271
- end: 286
- name: "target"
value: [...] (1)
Text {...}
- start: 279
- end: 285
- type: "Text"
- raw: "_blank"
- data: "_blank"
}
]
} Attribute {...}
- type: "Attribute"
- start: 287
- end: 303
- name: "rel"
value: [...] (1)
Text {...}
- start: 292
- end: 302
- type: "Text"
- raw: "noreferrer"
- data: "noreferrer"
}
]
} Attribute {...}
- type: "Attribute"
- start: 304
- end: 347
- name: "href"
value: [...] (2)
Text {...}
- start: 310
- end: 342
- type: "Text"
- raw: "https://www.youtube.com/watch?v="
- data: "https://www.youtube.com/watch?v="
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 342
- end: 346
expression: Identifier {...}
- type: "Identifier"
- start: 343
- end: 345
loc: {...}
start: {...}
- line: 14
- column: 78
}end: {...}
- line: 14
- column: 80
}
}- name: "id"
}
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 348
- end: 353
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 353
- end: 360
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 354
- end: 359
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 10
}
}left: Identifier {...}
- type: "Identifier"
- start: 354
- end: 355
loc: {...}
start: {...}
- line: 15
- column: 5
}end: {...}
- line: 15
- column: 6
}
}- name: "i"
}- operator: "+"
right: Literal {...}
- type: "Literal"
- start: 358
- end: 359
loc: {...}
start: {...}
- line: 15
- column: 9
}end: {...}
- line: 15
- column: 10
}
}- value: 1
- raw: "1"
}
}
} Text {...}
- type: "Text"
- start: 360
- end: 362
- raw: ": "
- data: ": "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 362
- end: 368
expression: Identifier {...}
- type: "Identifier"
- start: 363
- end: 367
loc: {...}
start: {...}
- line: 15
- column: 14
}end: {...}
- line: 15
- column: 18
}
}- name: "name"
}
} Text {...}
- type: "Text"
- start: 368
- end: 372
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 376
- end: 379
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 384
- end: 386
- raw: "\n\t"
- data: "\n\t"
}
]
}context: ObjectPattern {...}
- type: "ObjectPattern"
- start: 241
- end: 253
loc: {...}
start: {...}
- line: 12
- column: 17
}end: {...}
- line: 12
- column: 29
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 243
- end: 245
loc: {...}
start: {...}
- line: 12
- column: 19
}end: {...}
- line: 12
- column: 21
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 243
- end: 245
loc: {...}
start: {...}
- line: 12
- column: 19
}end: {...}
- line: 12
- column: 21
}
}- name: "id"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 243
- end: 245
loc: {...}
start: {...}
- line: 12
- column: 19
}end: {...}
- line: 12
- column: 21
}
}- name: "id"
}
} Property {...}
- type: "Property"
- start: 247
- end: 251
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 27
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 247
- end: 251
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 27
}
}- name: "name"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 247
- end: 251
loc: {...}
start: {...}
- line: 12
- column: 23
}end: {...}
- line: 12
- column: 27
}
}- name: "name"
}
}
]- typeAnnotation: undefined
}- index: "i"
- key: undefined
} Text {...}
- type: "Text"
- start: 393
- end: 394
- raw: "\n"
- data: "\n"
}
]
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 181
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 172
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 7
- column: 0
}
}body: [...] (1)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 171
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 6
- column: 3
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 170
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 6
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 18
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 9
}
}- name: "cats"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 21
- end: 170
loc: {...}
start: {...}
- line: 2
- column: 12
}end: {...}
- line: 6
- column: 2
}
}elements: [...] (3)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 25
- end: 68
loc: {...}
start: {...}
- line: 3
- column: 2
}end: {...}
- line: 3
- column: 45
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 27
- end: 44
loc: {...}
start: {...}
- line: 3
- column: 4
}end: {...}
- line: 3
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 27
- end: 29
loc: {...}
start: {...}
- line: 3
- column: 4
}end: {...}
- line: 3
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 31
- end: 44
loc: {...}
start: {...}
- line: 3
- column: 8
}end: {...}
- line: 3
- column: 21
}
}- value: "J---aiyznGQ"
- raw: "'J---aiyznGQ'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 46
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 23
}end: {...}
- line: 3
- column: 43
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 46
- end: 50
loc: {...}
start: {...}
- line: 3
- column: 23
}end: {...}
- line: 3
- column: 27
}
}- name: "name"
}value: Literal {...}
- type: "Literal"
- start: 52
- end: 66
loc: {...}
start: {...}
- line: 3
- column: 29
}end: {...}
- line: 3
- column: 43
}
}- value: "Keyboard Cat"
- raw: "'Keyboard Cat'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 72
- end: 107
loc: {...}
start: {...}
- line: 4
- column: 2
}end: {...}
- line: 4
- column: 37
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 74
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 74
- end: 76
loc: {...}
start: {...}
- line: 4
- column: 4
}end: {...}
- line: 4
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 78
- end: 91
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 21
}
}- value: "z_AbfPXTKms"
- raw: "'z_AbfPXTKms'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 93
- end: 105
loc: {...}
start: {...}
- line: 4
- column: 23
}end: {...}
- line: 4
- column: 35
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 93
- end: 97
loc: {...}
start: {...}
- line: 4
- column: 23
}end: {...}
- line: 4
- column: 27
}
}- name: "name"
}value: Literal {...}
- type: "Literal"
- start: 99
- end: 105
loc: {...}
start: {...}
- line: 4
- column: 29
}end: {...}
- line: 4
- column: 35
}
}- value: "Maru"
- raw: "'Maru'"
}- kind: "init"
}
]
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 111
- end: 167
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 58
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 113
- end: 130
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 113
- end: 115
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 6
}
}- name: "id"
}value: Literal {...}
- type: "Literal"
- start: 117
- end: 130
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 21
}
}- value: "OUtn3pvWmpg"
- raw: "'OUtn3pvWmpg'"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 132
- end: 165
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 56
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 132
- end: 136
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 27
}
}- name: "name"
}value: Literal {...}
- type: "Literal"
- start: 138
- end: 165
loc: {...}
start: {...}
- line: 5
- column: 29
}end: {...}
- line: 5
- column: 56
}
}- value: "Henri The Existential Cat"
- raw: "'Henri The Existential Cat'"
}- kind: "init"
}
]
}
]
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time