Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
christmas.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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<!--
Demo of exported snippets for Advent of Svelte
- https://svelte.dev/blog/advent-of-svelte
- https://svelte.dev/docs/svelte/snippet#Exporting-snippets
-->
<script>
import { icons } from './christmas.svelte';
function pick(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
</script>
<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 360 360">
{#each { length: 10 }, x}
{#each { length: 10 }, y}
<g transform="translate({x * 36},{y * 36})">
{@render pick(icons)()}
</g>
{/each}
{/each}
</svg>
<style>
svg {
width: 100%;
height: 100%;
background: radial-gradient(at center, white, hsl(220, 100%, 90%));
}
</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
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 { icons } from './christmas.svelte';
var root_2 = $.ns_template(`<g><!></g>`);
var root = $.ns_template(`<svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 360 360" class="svelte-1icn2p"></svg>`);
export default function App($$anchor) {
function pick(array) {
const index = Math.floor(Math.random() * array.length);
return array[index];
}
var svg = root();
$.each(svg, 4, () => ({ length: 10 }), $.index, ($$anchor, $$item, x) => {
var fragment = $.comment();
var node = $.first_child(fragment);
$.each(node, 0, () => ({ length: 10 }), $.index, ($$anchor, $$item, y) => {
var g = root_2();
$.set_attribute(g, 'transform', `translate(${x * 36 ?? ''},${y * 36 ?? ''})`);
var node_1 = $.child(g);
$.snippet(node_1, () => pick(icons));
$.reset(g);
$.append($$anchor, g);
});
$.append($$anchor, fragment);
});
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
7
›
svg.svelte-1icn2p {
width: 100%;
height: 100%;
background: radial-gradient(at center, white, hsl(220, 100%, 90%));
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 571
- end: 698
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 580
- end: 583
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 580
- end: 583
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "svg"
- start: 580
- end: 583
}
]- start: 580
- end: 583
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 584
- end: 689
children: [...] (3)
Declaration {...}
- type: "Declaration"
- start: 588
- end: 599
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 603
- end: 615
- property: "height"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 619
- end: 685
- property: "background"
- value: "radial-gradient(at center, white, hsl(220, 100%, 90%))"
}
]
}- start: 580
- end: 689
}
]content: {...}
- start: 578
- end: 690
- styles: "\n\tsvg {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground: radial-gradient(at center, white, hsl(220, 100%, 90%));\n\t}\n"
- comment: null
}
}- js: []
- start: 0
- end: 569
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Comment {...}
- type: "Comment"
- start: 0
- end: 164
- data: "\n Demo of exported snippets for Advent of Svelte\n - https://svelte.dev/blog/advent-of-svelte\n - https://svelte.dev/docs/svelte/snippet#Exporting-snippets\n"
} Text {...}
- type: "Text"
- start: 164
- end: 166
- raw: "\n\n"
- data: "\n\n"
} Text {...}
- type: "Text"
- start: 338
- end: 340
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 340
- end: 569
- name: "svg"
attributes: [...] (3)
Attribute {...}
- type: "Attribute"
- start: 345
- end: 381
- name: "preserveAspectRatio"
value: [...] (1)
Text {...}
- start: 366
- end: 380
- type: "Text"
- raw: "xMidYMid slice"
- data: "xMidYMid slice"
}
]
} Attribute {...}
- type: "Attribute"
- start: 382
- end: 403
- name: "viewBox"
value: [...] (1)
Text {...}
- start: 391
- end: 402
- type: "Text"
- raw: "0 0 360 360"
- data: "0 0 360 360"
}
]
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1icn2p"
- raw: "svelte-1icn2p"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 404
- end: 406
- raw: "\n\t"
- data: "\n\t"
} EachBlock {...}
- type: "EachBlock"
- start: 406
- end: 562
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 413
- end: 427
loc: {...}
start: {...}
- line: 17
- column: 8
}end: {...}
- line: 17
- column: 22
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 415
- end: 425
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 20
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 415
- end: 421
loc: {...}
start: {...}
- line: 17
- column: 10
}end: {...}
- line: 17
- column: 16
}
}- name: "length"
}value: Literal {...}
- type: "Literal"
- start: 423
- end: 425
loc: {...}
start: {...}
- line: 17
- column: 18
}end: {...}
- line: 17
- column: 20
}
}- value: 10
- raw: "10"
}- kind: "init"
}
]
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 431
- end: 434
- raw: "\n\t\t"
- data: "\n\t\t"
} EachBlock {...}
- type: "EachBlock"
- start: 434
- end: 553
expression: ObjectExpression {...}
- type: "ObjectExpression"
- start: 441
- end: 455
loc: {...}
start: {...}
- line: 18
- column: 9
}end: {...}
- line: 18
- column: 23
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 443
- end: 453
loc: {...}
start: {...}
- line: 18
- column: 11
}end: {...}
- line: 18
- column: 21
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 443
- end: 449
loc: {...}
start: {...}
- line: 18
- column: 11
}end: {...}
- line: 18
- column: 17
}
}- name: "length"
}value: Literal {...}
- type: "Literal"
- start: 451
- end: 453
loc: {...}
start: {...}
- line: 18
- column: 19
}end: {...}
- line: 18
- column: 21
}
}- value: 10
- raw: "10"
}- kind: "init"
}
]
}body: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 459
- end: 463
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
} RegularElement {...}
- type: "RegularElement"
- start: 463
- end: 543
- name: "g"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 466
- end: 506
- name: "transform"
value: [...] (5)
Text {...}
- start: 477
- end: 487
- type: "Text"
- raw: "translate("
- data: "translate("
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 487
- end: 495
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 488
- end: 494
loc: {...}
start: {...}
- line: 19
- column: 28
}end: {...}
- line: 19
- column: 34
}
}left: Identifier {...}
- type: "Identifier"
- start: 488
- end: 489
loc: {...}
start: {...}
- line: 19
- column: 28
}end: {...}
- line: 19
- column: 29
}
}- name: "x"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 492
- end: 494
loc: {...}
start: {...}
- line: 19
- column: 32
}end: {...}
- line: 19
- column: 34
}
}- value: 36
- raw: "36"
}
}
} Text {...}
- start: 495
- end: 496
- type: "Text"
- raw: ","
- data: ","
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 496
- end: 504
expression: BinaryExpression {...}
- type: "BinaryExpression"
- start: 497
- end: 503
loc: {...}
start: {...}
- line: 19
- column: 37
}end: {...}
- line: 19
- column: 43
}
}left: Identifier {...}
- type: "Identifier"
- start: 497
- end: 498
loc: {...}
start: {...}
- line: 19
- column: 37
}end: {...}
- line: 19
- column: 38
}
}- name: "y"
}- operator: "*"
right: Literal {...}
- type: "Literal"
- start: 501
- end: 503
loc: {...}
start: {...}
- line: 19
- column: 41
}end: {...}
- line: 19
- column: 43
}
}- value: 36
- raw: "36"
}
}
} Text {...}
- start: 504
- end: 505
- type: "Text"
- raw: ")"
- data: ")"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 507
- end: 512
- raw: "\n\t\t\t\t"
- data: "\n\t\t\t\t"
} RenderTag {...}
- type: "RenderTag"
- start: 512
- end: 535
expression: CallExpression {...}
- type: "CallExpression"
- start: 521
- end: 534
loc: {...}
start: {...}
- line: 20
- column: 13
}end: {...}
- line: 20
- column: 26
}
}callee: CallExpression {...}
- type: "CallExpression"
- start: 521
- end: 532
loc: {...}
start: {...}
- line: 20
- column: 13
}end: {...}
- line: 20
- column: 24
}
}callee: Identifier {...}
- type: "Identifier"
- start: 521
- end: 525
loc: {...}
start: {...}
- line: 20
- column: 13
}end: {...}
- line: 20
- column: 17
}
}- name: "pick"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 526
- end: 531
loc: {...}
start: {...}
- line: 20
- column: 18
}end: {...}
- line: 20
- column: 23
}
}- name: "icons"
}
]- optional: false
}- arguments: []
- optional: false
}
} Text {...}
- type: "Text"
- start: 535
- end: 539
- raw: "\n\t\t\t"
- data: "\n\t\t\t"
}
]
}
} Text {...}
- type: "Text"
- start: 543
- end: 546
- raw: "\n\t\t"
- data: "\n\t\t"
}
]
}- context: null
- index: "y"
- key: undefined
} Text {...}
- type: "Text"
- start: 553
- end: 555
- raw: "\n\t"
- data: "\n\t"
}
]
}- context: null
- index: "x"
- key: undefined
} Text {...}
- type: "Text"
- start: 562
- end: 563
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 569
- end: 571
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 166
- end: 338
- context: "default"
content: Program {...}
- type: "Program"
- start: 174
- end: 329
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 14
- column: 0
}
}body: [...] (2)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 176
- end: 219
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 44
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 185
- end: 190
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 15
}
}imported: Identifier {...}
- type: "Identifier"
- start: 185
- end: 190
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 15
}
}- name: "icons"
}local: Identifier {...}
- type: "Identifier"
- start: 185
- end: 190
loc: {...}
start: {...}
- line: 8
- column: 10
}end: {...}
- line: 8
- column: 15
}
}- name: "icons"
}
}
]source: Literal {...}
- type: "Literal"
- start: 198
- end: 218
loc: {...}
start: {...}
- line: 8
- column: 23
}end: {...}
- line: 8
- column: 43
}
}- value: "./christmas.svelte"
- raw: "'./christmas.svelte'"
}
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 222
- end: 328
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 13
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 231
- end: 235
loc: {...}
start: {...}
- line: 10
- column: 10
}end: {...}
- line: 10
- column: 14
}
}- name: "pick"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 236
- end: 241
loc: {...}
start: {...}
- line: 10
- column: 15
}end: {...}
- line: 10
- column: 20
}
}- name: "array"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 243
- end: 328
loc: {...}
start: {...}
- line: 10
- column: 22
}end: {...}
- line: 13
- column: 2
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 247
- end: 302
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 11
- column: 57
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 253
- end: 301
loc: {...}
start: {...}
- line: 11
- column: 8
}end: {...}
- line: 11
- column: 56
}
}id: Identifier {...}
- type: "Identifier"
- start: 253
- end: 258
loc: {...}
start: {...}
- line: 11
- column: 8
}end: {...}
- line: 11
- column: 13
}
}- name: "index"
}init: CallExpression {...}
- type: "CallExpression"
- start: 261
- end: 301
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 56
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 261
- end: 271
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 26
}
}object: Identifier {...}
- type: "Identifier"
- start: 261
- end: 265
loc: {...}
start: {...}
- line: 11
- column: 16
}end: {...}
- line: 11
- column: 20
}
}- name: "Math"
}property: Identifier {...}
- type: "Identifier"
- start: 266
- end: 271
loc: {...}
start: {...}
- line: 11
- column: 21
}end: {...}
- line: 11
- column: 26
}
}- name: "floor"
}- computed: false
- optional: false
}arguments: [...] (1)
BinaryExpression {...}
- type: "BinaryExpression"
- start: 272
- end: 300
loc: {...}
start: {...}
- line: 11
- column: 27
}end: {...}
- line: 11
- column: 55
}
}left: CallExpression {...}
- type: "CallExpression"
- start: 272
- end: 285
loc: {...}
start: {...}
- line: 11
- column: 27
}end: {...}
- line: 11
- column: 40
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 272
- end: 283
loc: {...}
start: {...}
- line: 11
- column: 27
}end: {...}
- line: 11
- column: 38
}
}object: Identifier {...}
- type: "Identifier"
- start: 272
- end: 276
loc: {...}
start: {...}
- line: 11
- column: 27
}end: {...}
- line: 11
- column: 31
}
}- name: "Math"
}property: Identifier {...}
- type: "Identifier"
- start: 277
- end: 283
loc: {...}
start: {...}
- line: 11
- column: 32
}end: {...}
- line: 11
- column: 38
}
}- name: "random"
}- computed: false
- optional: false
}- arguments: []
- optional: false
}- operator: "*"
right: MemberExpression {...}
- type: "MemberExpression"
- start: 288
- end: 300
loc: {...}
start: {...}
- line: 11
- column: 43
}end: {...}
- line: 11
- column: 55
}
}object: Identifier {...}
- type: "Identifier"
- start: 288
- end: 293
loc: {...}
start: {...}
- line: 11
- column: 43
}end: {...}
- line: 11
- column: 48
}
}- name: "array"
}property: Identifier {...}
- type: "Identifier"
- start: 294
- end: 300
loc: {...}
start: {...}
- line: 11
- column: 49
}end: {...}
- line: 11
- column: 55
}
}- name: "length"
}- computed: false
- optional: false
}
}
]- optional: false
}
}
]- kind: "const"
} ReturnStatement {...}
- type: "ReturnStatement"
- start: 305
- end: 325
loc: {...}
start: {...}
- line: 12
- column: 2
}end: {...}
- line: 12
- column: 22
}
}argument: MemberExpression {...}
- type: "MemberExpression"
- start: 312
- end: 324
loc: {...}
start: {...}
- line: 12
- column: 9
}end: {...}
- line: 12
- column: 21
}
}object: Identifier {...}
- type: "Identifier"
- start: 312
- end: 317
loc: {...}
start: {...}
- line: 12
- column: 9
}end: {...}
- line: 12
- column: 14
}
}- name: "array"
}property: Identifier {...}
- type: "Identifier"
- start: 318
- end: 323
loc: {...}
start: {...}
- line: 12
- column: 15
}end: {...}
- line: 12
- column: 20
}
}- name: "index"
}- computed: true
- optional: false
}
}
]
}
}
]- sourceType: "module"
leadingComments: [...] (1)
Line {...}
- type: "Line"
- value: "\n Demo of exported snippets for Advent of Svelte\n - https://svelte.dev/blog/advent-of-svelte\n - https://svelte.dev/docs/svelte/snippet#Exporting-snippets\n"
}
]
}- attributes: []
}
}
The AST is not public API and may change at any point in time