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
21
22
23
24
25
26
27
28
29
›
⌄
⌄
⌄
⌄
<script>
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const progress = tweened(0, {
duration: 400,
easing: cubicOut
});
</script>
<progress value={$progress}></progress>
<button onclick={() => progress.set(0)}> 0% </button>
<button onclick={() => progress.set(0.25)}> 25% </button>
<button onclick={() => progress.set(0.5)}> 50% </button>
<button onclick={() => progress.set(0.75)}> 75% </button>
<button onclick={() => progress.set(1)}> 100% </button>
<style>
progress {
display: block;
width: 100%;
}
</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 { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
var root = $.template(`<progress class="svelte-1vol2d3"></progress> <button>0%</button> <button>25%</button> <button>50%</button> <button>75%</button> <button>100%</button>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, false);
const [$$stores, $$cleanup] = $.setup_stores();
const $progress = () => $.store_get(progress, '$progress', $$stores);
const progress = tweened(0, { duration: 400, easing: cubicOut });
$.init();
var fragment = root();
var progress_1 = $.first_child(fragment);
var button = $.sibling(progress_1, 2);
button.__click = () => progress.set(0);
var button_1 = $.sibling(button, 2);
button_1.__click = () => progress.set(0.25);
var button_2 = $.sibling(button_1, 2);
button_2.__click = () => progress.set(0.5);
var button_3 = $.sibling(button_2, 2);
button_3.__click = () => progress.set(0.75);
var button_4 = $.sibling(button_3, 2);
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
›
progress.svelte-1vol2d3 {
display: block;
width: 100%;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 507
- end: 571
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 516
- end: 524
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 516
- end: 524
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "progress"
- start: 516
- end: 524
}
]- start: 516
- end: 524
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 525
- end: 562
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 529
- end: 543
- property: "display"
- value: "block"
} Declaration {...}
- type: "Declaration"
- start: 547
- end: 558
- property: "width"
- value: "100%"
}
]
}- start: 516
- end: 562
}
]content: {...}
- start: 514
- end: 563
- styles: "\n\tprogress {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n"
- comment: null
}
}- js: []
- start: 178
- end: 505
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (13)
Text {...}
- type: "Text"
- start: 176
- end: 178
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 178
- end: 217
- name: "progress"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 188
- end: 205
- name: "value"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 194
- end: 205
expression: Identifier {...}
- type: "Identifier"
- start: 195
- end: 204
loc: {...}
start: {...}
- line: 11
- column: 17
}end: {...}
- line: 11
- column: 26
}
}- name: "$progress"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1vol2d3"
- raw: "svelte-1vol2d3"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 217
- end: 219
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 219
- end: 272
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 227
- end: 258
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 235
- end: 258
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 236
- end: 257
loc: {...}
start: {...}
- line: 13
- column: 17
}end: {...}
- line: 13
- column: 38
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 242
- end: 257
loc: {...}
start: {...}
- line: 13
- column: 23
}end: {...}
- line: 13
- column: 38
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 242
- end: 254
loc: {...}
start: {...}
- line: 13
- column: 23
}end: {...}
- line: 13
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 242
- end: 250
loc: {...}
start: {...}
- line: 13
- column: 23
}end: {...}
- line: 13
- column: 31
}
}- name: "progress"
}property: Identifier {...}
- type: "Identifier"
- start: 251
- end: 254
loc: {...}
start: {...}
- line: 13
- column: 32
}end: {...}
- line: 13
- column: 35
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 255
- end: 256
loc: {...}
start: {...}
- line: 13
- column: 36
}end: {...}
- line: 13
- column: 37
}
}- value: 0
- raw: "0"
}
]- optional: false
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 259
- end: 263
- raw: "0%"
- data: "0%"
}
]
}
} Text {...}
- type: "Text"
- start: 272
- end: 274
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 274
- end: 331
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 282
- end: 316
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 290
- end: 316
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 291
- end: 315
loc: {...}
start: {...}
- line: 15
- column: 17
}end: {...}
- line: 15
- column: 41
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 297
- end: 315
loc: {...}
start: {...}
- line: 15
- column: 23
}end: {...}
- line: 15
- column: 41
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 297
- end: 309
loc: {...}
start: {...}
- line: 15
- column: 23
}end: {...}
- line: 15
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 297
- end: 305
loc: {...}
start: {...}
- line: 15
- column: 23
}end: {...}
- line: 15
- column: 31
}
}- name: "progress"
}property: Identifier {...}
- type: "Identifier"
- start: 306
- end: 309
loc: {...}
start: {...}
- line: 15
- column: 32
}end: {...}
- line: 15
- column: 35
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 310
- end: 314
loc: {...}
start: {...}
- line: 15
- column: 36
}end: {...}
- line: 15
- column: 40
}
}- value: 0.25
- raw: "0.25"
}
]- optional: false
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 317
- end: 322
- raw: "25%"
- data: "25%"
}
]
}
} Text {...}
- type: "Text"
- start: 331
- end: 333
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 333
- end: 389
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 341
- end: 374
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 349
- end: 374
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 350
- end: 373
loc: {...}
start: {...}
- line: 17
- column: 17
}end: {...}
- line: 17
- column: 40
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 356
- end: 373
loc: {...}
start: {...}
- line: 17
- column: 23
}end: {...}
- line: 17
- column: 40
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 356
- end: 368
loc: {...}
start: {...}
- line: 17
- column: 23
}end: {...}
- line: 17
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 356
- end: 364
loc: {...}
start: {...}
- line: 17
- column: 23
}end: {...}
- line: 17
- column: 31
}
}- name: "progress"
}property: Identifier {...}
- type: "Identifier"
- start: 365
- end: 368
loc: {...}
start: {...}
- line: 17
- column: 32
}end: {...}
- line: 17
- column: 35
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 369
- end: 372
loc: {...}
start: {...}
- line: 17
- column: 36
}end: {...}
- line: 17
- column: 39
}
}- value: 0.5
- raw: "0.5"
}
]- optional: false
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 375
- end: 380
- raw: "50%"
- data: "50%"
}
]
}
} Text {...}
- type: "Text"
- start: 389
- end: 391
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 391
- end: 448
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 399
- end: 433
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 407
- end: 433
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 408
- end: 432
loc: {...}
start: {...}
- line: 19
- column: 17
}end: {...}
- line: 19
- column: 41
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 414
- end: 432
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 41
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 414
- end: 426
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 414
- end: 422
loc: {...}
start: {...}
- line: 19
- column: 23
}end: {...}
- line: 19
- column: 31
}
}- name: "progress"
}property: Identifier {...}
- type: "Identifier"
- start: 423
- end: 426
loc: {...}
start: {...}
- line: 19
- column: 32
}end: {...}
- line: 19
- column: 35
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 427
- end: 431
loc: {...}
start: {...}
- line: 19
- column: 36
}end: {...}
- line: 19
- column: 40
}
}- value: 0.75
- raw: "0.75"
}
]- optional: false
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 434
- end: 439
- raw: "75%"
- data: "75%"
}
]
}
} Text {...}
- type: "Text"
- start: 448
- end: 450
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 450
- end: 505
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 458
- end: 489
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 466
- end: 489
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 467
- end: 488
loc: {...}
start: {...}
- line: 21
- column: 17
}end: {...}
- line: 21
- column: 38
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: CallExpression {...}
- type: "CallExpression"
- start: 473
- end: 488
loc: {...}
start: {...}
- line: 21
- column: 23
}end: {...}
- line: 21
- column: 38
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 473
- end: 485
loc: {...}
start: {...}
- line: 21
- column: 23
}end: {...}
- line: 21
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 473
- end: 481
loc: {...}
start: {...}
- line: 21
- column: 23
}end: {...}
- line: 21
- column: 31
}
}- name: "progress"
}property: Identifier {...}
- type: "Identifier"
- start: 482
- end: 485
loc: {...}
start: {...}
- line: 21
- column: 32
}end: {...}
- line: 21
- column: 35
}
}- name: "set"
}- computed: false
- optional: false
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 486
- end: 487
loc: {...}
start: {...}
- line: 21
- column: 36
}end: {...}
- line: 21
- column: 37
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 490
- end: 496
- raw: "100%"
- data: "100%"
}
]
}
} Text {...}
- type: "Text"
- start: 505
- end: 507
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 176
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 167
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 9
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 50
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 41
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}- name: "tweened"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 26
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 17
}
}- name: "tweened"
}
}
]source: Literal {...}
- type: "Literal"
- start: 34
- end: 49
loc: {...}
start: {...}
- line: 2
- column: 25
}end: {...}
- line: 2
- column: 40
}
}- value: "svelte/motion"
- raw: "'svelte/motion'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 52
- end: 93
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 42
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 61
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}imported: Identifier {...}
- type: "Identifier"
- start: 61
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}- name: "cubicOut"
}local: Identifier {...}
- type: "Identifier"
- start: 61
- end: 69
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 18
}
}- name: "cubicOut"
}
}
]source: Literal {...}
- type: "Literal"
- start: 77
- end: 92
loc: {...}
start: {...}
- line: 3
- column: 26
}end: {...}
- line: 3
- column: 41
}
}- value: "svelte/easing"
- raw: "'svelte/easing'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 96
- end: 166
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 8
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 102
- end: 165
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 8
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 102
- end: 110
loc: {...}
start: {...}
- line: 5
- column: 7
}end: {...}
- line: 5
- column: 15
}
}- name: "progress"
}init: CallExpression {...}
- type: "CallExpression"
- start: 113
- end: 165
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 8
- column: 3
}
}callee: Identifier {...}
- type: "Identifier"
- start: 113
- end: 120
loc: {...}
start: {...}
- line: 5
- column: 18
}end: {...}
- line: 5
- column: 25
}
}- name: "tweened"
}arguments: [...] (2)
Literal {...}
- type: "Literal"
- start: 121
- end: 122
loc: {...}
start: {...}
- line: 5
- column: 26
}end: {...}
- line: 5
- column: 27
}
}- value: 0
- raw: "0"
} ObjectExpression {...}
- type: "ObjectExpression"
- start: 124
- end: 164
loc: {...}
start: {...}
- line: 5
- column: 29
}end: {...}
- line: 8
- column: 2
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 128
- end: 141
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 15
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 128
- end: 136
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 10
}
}- name: "duration"
}value: Literal {...}
- type: "Literal"
- start: 138
- end: 141
loc: {...}
start: {...}
- line: 6
- column: 12
}end: {...}
- line: 6
- column: 15
}
}- value: 400
- raw: "400"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 145
- end: 161
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 18
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 145
- end: 151
loc: {...}
start: {...}
- line: 7
- column: 2
}end: {...}
- line: 7
- column: 8
}
}- name: "easing"
}value: Identifier {...}
- type: "Identifier"
- start: 153
- end: 161
loc: {...}
start: {...}
- line: 7
- column: 10
}end: {...}
- line: 7
- column: 18
}
}- name: "cubicOut"
}- kind: "init"
}
]
}
]- optional: false
}
}
]- kind: "const"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time