Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Button.svelte
Ripple.svelte
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.31.2.
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
›
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
⌄
<script>
import Button, { ButtonVariant } from "./Button.svelte";
</script>
<style>
ul#_ {
display: flex;
flex-direction: column;
padding: 0;
}
ul#_ > li {
padding: 1em;
text-align: center;
list-style: none;
}
</style>
<ul id="_">
<li>
<Button variant="{ButtonVariant.Contained}">
Hello world
</Button>
</li>
<li>
<Button variant="{ButtonVariant.Outlined}">
Hello world
</Button>
</li>
<li>
<Button variant="{ButtonVariant.Text}">
Hello world
</Button>
</li>
</ul>
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.31.2 */
import {
SvelteComponent,
append,
attr,
create_component,
destroy_component,
detach,
element,
init,
insert,
mount_component,
safe_not_equal,
space,
text,
transition_in,
transition_out
} from "svelte/internal";
import Button, { ButtonVariant } from "./Button.svelte";
function add_css() {
var style = element("style");
style.id = "svelte-1oo50m4-style";
style.textContent = "ul#_.svelte-1oo50m4.svelte-1oo50m4{display:flex;flex-direction:column;padding:0}ul#_.svelte-1oo50m4>li.svelte-1oo50m4{padding:1em;text-align:center;list-style:none}";
append(document.head, style);
}
// (19:2) <Button variant="{ButtonVariant.Contained}">
function create_default_slot_2(ctx) {
let t;
return {
c() {
t = text("Hello world");
},
result = svelte.compile(source, {
generate: ,
});9
1
›
ul#_.svelte-1oo50m4.svelte-1oo50m4{display:flex;flex-direction:column;padding:0}ul#_.svelte-1oo50m4>li.svelte-1oo50m4{padding:1em;text-align:center;list-style:none}
{
html: Fragment {...}
- start: 77
- end: 510
- type: "Fragment"
children: [...] (3)
Text {...}
- start: 76
- end: 77
- type: "Text"
- raw: "\n"
- data: "\n"
} Text {...}
- start: 237
- end: 238
- type: "Text"
- raw: "\n"
- data: "\n"
} Element {...}
- start: 238
- end: 510
- type: "Element"
- name: "ul"
attributes: [...] (1)
Attribute {...}
- start: 242
- end: 248
- type: "Attribute"
- name: "id"
value: [...] (1)
Text {...}
- start: 246
- end: 247
- type: "Text"
- raw: "_"
- data: "_"
}
]
}
]children: [...] (7)
Text {...}
- start: 249
- end: 251
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 251
- end: 336
- type: "Element"
- name: "li"
- attributes: []
children: [...] (3)
Text {...}
- start: 255
- end: 258
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 258
- end: 329
- type: "InlineComponent"
- name: "Button"
attributes: [...] (1)
Attribute {...}
- start: 266
- end: 301
- type: "Attribute"
- name: "variant"
value: [...] (1)
MustacheTag {...}
- start: 275
- end: 300
- type: "MustacheTag"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 276
- end: 299
loc: {...}
start: {...}
- line: 19
- column: 20
}end: {...}
- line: 19
- column: 43
}
}object: Identifier {...}
- type: "Identifier"
- start: 276
- end: 289
loc: {...}
start: {...}
- line: 19
- column: 20
}end: {...}
- line: 19
- column: 33
}
}- name: "ButtonVariant"
}property: Identifier {...}
- type: "Identifier"
- start: 290
- end: 299
loc: {...}
start: {...}
- line: 19
- column: 34
}end: {...}
- line: 19
- column: 43
}
}- name: "Contained"
}- computed: false
- optional: false
}
}
]
}
]children: [...] (1)
Text {...}
- start: 302
- end: 320
- type: "Text"
- raw: "\n\t\t\tHello world\n\t\t"
- data: "\n\t\t\tHello world\n\t\t"
}
]
} Text {...}
- start: 329
- end: 331
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 336
- end: 338
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 338
- end: 422
- type: "Element"
- name: "li"
- attributes: []
children: [...] (3)
Text {...}
- start: 342
- end: 345
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 345
- end: 415
- type: "InlineComponent"
- name: "Button"
attributes: [...] (1)
Attribute {...}
- start: 353
- end: 387
- type: "Attribute"
- name: "variant"
value: [...] (1)
MustacheTag {...}
- start: 362
- end: 386
- type: "MustacheTag"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 363
- end: 385
loc: {...}
start: {...}
- line: 24
- column: 20
}end: {...}
- line: 24
- column: 42
}
}object: Identifier {...}
- type: "Identifier"
- start: 363
- end: 376
loc: {...}
start: {...}
- line: 24
- column: 20
}end: {...}
- line: 24
- column: 33
}
}- name: "ButtonVariant"
}property: Identifier {...}
- type: "Identifier"
- start: 377
- end: 385
loc: {...}
start: {...}
- line: 24
- column: 34
}end: {...}
- line: 24
- column: 42
}
}- name: "Outlined"
}- computed: false
- optional: false
}
}
]
}
]children: [...] (1)
Text {...}
- start: 388
- end: 406
- type: "Text"
- raw: "\n\t\t\tHello world\n\t\t"
- data: "\n\t\t\tHello world\n\t\t"
}
]
} Text {...}
- start: 415
- end: 417
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 422
- end: 424
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
} Element {...}
- start: 424
- end: 504
- type: "Element"
- name: "li"
- attributes: []
children: [...] (3)
Text {...}
- start: 428
- end: 431
- type: "Text"
- raw: "\n\t\t"
- data: "\n\t\t"
} InlineComponent {...}
- start: 431
- end: 497
- type: "InlineComponent"
- name: "Button"
attributes: [...] (1)
Attribute {...}
- start: 439
- end: 469
- type: "Attribute"
- name: "variant"
value: [...] (1)
MustacheTag {...}
- start: 448
- end: 468
- type: "MustacheTag"
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 449
- end: 467
loc: {...}
start: {...}
- line: 29
- column: 20
}end: {...}
- line: 29
- column: 38
}
}object: Identifier {...}
- type: "Identifier"
- start: 449
- end: 462
loc: {...}
start: {...}
- line: 29
- column: 20
}end: {...}
- line: 29
- column: 33
}
}- name: "ButtonVariant"
}property: Identifier {...}
- type: "Identifier"
- start: 463
- end: 467
loc: {...}
start: {...}
- line: 29
- column: 34
}end: {...}
- line: 29
- column: 38
}
}- name: "Text"
}- computed: false
- optional: false
}
}
]
}
]children: [...] (1)
Text {...}
- start: 470
- end: 488
- type: "Text"
- raw: "\n\t\t\tHello world\n\t\t"
- data: "\n\t\t\tHello world\n\t\t"
}
]
} Text {...}
- start: 497
- end: 499
- type: "Text"
- raw: "\n\t"
- data: "\n\t"
}
]
} Text {...}
- start: 504
- end: 505
- type: "Text"
- raw: "\n"
- data: "\n"
}
]
}
]
}css: Style {...}
- type: "Style"
- start: 77
- end: 237
- attributes: []
children: [...] (2)
Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (2)
TypeSelector {...}
- type: "TypeSelector"
- name: "ul"
- start: 86
- end: 88
} IdSelector {...}
- type: "IdSelector"
- name: "_"
- start: 88
- end: 90
}
]- start: 86
- end: 90
}
]- start: 86
- end: 90
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "display"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "flex"
- start: 104
- end: 108
}
]- start: 103
- end: 108
}- start: 95
- end: 108
} Declaration {...}
- type: "Declaration"
- important: false
- property: "flex-direction"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "column"
- start: 128
- end: 134
}
]- start: 127
- end: 134
}- start: 112
- end: 134
} Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Number {...}
- type: "Number"
- value: "0"
- start: 147
- end: 148
}
]- start: 146
- end: 148
}- start: 138
- end: 148
}
]- start: 91
- end: 152
}- start: 86
- end: 152
} Rule {...}
- type: "Rule"
selector: SelectorList {...}
- type: "SelectorList"
children: [...] (1)
Selector {...}
- type: "Selector"
children: [...] (4)
TypeSelector {...}
- type: "TypeSelector"
- name: "ul"
- start: 156
- end: 158
} IdSelector {...}
- type: "IdSelector"
- name: "_"
- start: 158
- end: 160
} Combinator {...}
- type: "Combinator"
- name: ">"
- start: 161
- end: 162
} TypeSelector {...}
- type: "TypeSelector"
- name: "li"
- start: 163
- end: 165
}
]- start: 156
- end: 165
}
]- start: 156
- end: 165
}block: Block {...}
- type: "Block"
children: [...] (3)
Declaration {...}
- type: "Declaration"
- important: false
- property: "padding"
value: Value {...}
- type: "Value"
children: [...] (1)
Dimension {...}
- type: "Dimension"
- value: "1"
- unit: "em"
- start: 179
- end: 182
}
]- start: 178
- end: 182
}- start: 170
- end: 182
} Declaration {...}
- type: "Declaration"
- important: false
- property: "text-align"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "center"
- start: 198
- end: 204
}
]- start: 197
- end: 204
}- start: 186
- end: 204
} Declaration {...}
- type: "Declaration"
- important: false
- property: "list-style"
value: Value {...}
- type: "Value"
children: [...] (1)
Identifier {...}
- type: "Identifier"
- name: "none"
- start: 220
- end: 224
}
]- start: 219
- end: 224
}- start: 208
- end: 224
}
]- start: 166
- end: 228
}- start: 156
- end: 228
}
]content: {...}
- start: 84
- end: 229
- styles: "\n\tul#_ {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 0;\n\t}\n\t\n\tul#_ > li {\n\t\tpadding: 1em;\n\t\ttext-align: center;\n\t\tlist-style: none;\n\t}\n"
}
}instance: Script {...}
- type: "Script"
- start: 0
- end: 76
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 67
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 3
- column: 0
}
}body: [...] (1)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 66
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 57
}
}specifiers: [...] (2)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 14
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 23
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 14
}
}- name: "Button"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 27
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 31
}
}imported: Identifier {...}
- type: "Identifier"
- start: 27
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 31
}
}- name: "ButtonVariant"
}local: Identifier {...}
- type: "Identifier"
- start: 27
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 31
}
}- name: "ButtonVariant"
}
}
]source: Literal {...}
- type: "Literal"
- start: 48
- end: 65
loc: {...}
start: {...}
- line: 2
- column: 39
}end: {...}
- line: 2
- column: 56
}
}- value: "./Button.svelte"
- raw: "\"./Button.svelte\""
}
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time