Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
add.js
runes
Runes are available from Svelte 5 onwards, and this playground is using Svelte 3.33.0.
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
›
⌄
⌄
⌄
<script>
import add from "./add.js";
const arr = [{
one : 1
}];
// Works, the default value for two has access to one
arr.forEach(({ one, two = add(one, 1)}) => console.log(one, two));
</script>
<!-- Doesn't work, one is extracted to child_ctx[1] but the reference to it isn't updated -->
{#each arr as { one, two = add(one, 1) }}
{one} - {two}
{/each}
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.33.0 */
import {
SvelteComponent,
destroy_each,
detach,
empty,
init,
insert,
noop,
safe_not_equal,
text
} from "svelte/internal";
import add from "./add.js";
function get_each_context(ctx, list, i) {
const child_ctx = ctx.slice();
child_ctx[1] = list[i].one;
child_ctx[2] = list[i].two !== undefined
? list[i].two
: add(child_ctx[1], 1);
return child_ctx;
}
// (13:0) {#each arr as { one, two = add(one, 1) }}
function create_each_block(ctx) {
let t0_value = /*one*/ ctx[1] + "";
let t0;
let t1;
let t2_value = /*two*/ ctx[2] + "";
let t2;
return {
c() {
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
{
html: Fragment {...}
- start: 207
- end: 365
- type: "Fragment"
children: [...] (4)
Text {...}
- start: 205
- end: 207
- type: "Text"
- raw: "\n\n"
- data: "\n\n"
} Comment {...}
- start: 207
- end: 300
- type: "Comment"
- data: " Doesn't work, one is extracted to child_ctx[1] but the reference to it isn't updated "
} Text {...}
- start: 300
- end: 301
- type: "Text"
- raw: "\n"
- data: "\n"
} EachBlock {...}
- start: 301
- end: 365
- type: "EachBlock"
expression: Identifier {...}
- type: "Identifier"
- start: 308
- end: 311
loc: {...}
start: {...}
- line: 13
- column: 7
}end: {...}
- line: 13
- column: 10
}
}- name: "arr"
}children: [...] (3)
MustacheTag {...}
- start: 344
- end: 349
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 345
- end: 348
loc: {...}
start: {...}
- line: 14
- column: 2
}end: {...}
- line: 14
- column: 5
}
}- name: "one"
}
} Text {...}
- start: 349
- end: 352
- type: "Text"
- raw: " - "
- data: " - "
} MustacheTag {...}
- start: 352
- end: 357
- type: "MustacheTag"
expression: Identifier {...}
- type: "Identifier"
- start: 353
- end: 356
loc: {...}
start: {...}
- line: 14
- column: 10
}end: {...}
- line: 14
- column: 13
}
}- name: "two"
}
}
]context: ObjectPattern {...}
- type: "ObjectPattern"
- start: 315
- end: 341
loc: {...}
start: {...}
- line: 13
- column: 15
}end: {...}
- line: 13
- column: 41
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 317
- end: 320
loc: {...}
start: {...}
- line: 13
- column: 17
}end: {...}
- line: 13
- column: 20
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 317
- end: 320
loc: {...}
start: {...}
- line: 13
- column: 17
}end: {...}
- line: 13
- column: 20
}
}- name: "one"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 317
- end: 320
loc: {...}
start: {...}
- line: 13
- column: 17
}end: {...}
- line: 13
- column: 20
}
}- name: "one"
}
} Property {...}
- type: "Property"
- start: 322
- end: 339
loc: {...}
start: {...}
- line: 13
- column: 22
}end: {...}
- line: 13
- column: 39
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 322
- end: 325
loc: {...}
start: {...}
- line: 13
- column: 22
}end: {...}
- line: 13
- column: 25
}
}- name: "two"
}- kind: "init"
value: AssignmentPattern {...}
- type: "AssignmentPattern"
- start: 322
- end: 339
loc: {...}
start: {...}
- line: 13
- column: 22
}end: {...}
- line: 13
- column: 39
}
}left: Identifier {...}
- type: "Identifier"
- start: 322
- end: 325
loc: {...}
start: {...}
- line: 13
- column: 22
}end: {...}
- line: 13
- column: 25
}
}- name: "two"
}right: CallExpression {...}
- type: "CallExpression"
- start: 328
- end: 339
loc: {...}
start: {...}
- line: 13
- column: 28
}end: {...}
- line: 13
- column: 39
}
}callee: Identifier {...}
- type: "Identifier"
- start: 328
- end: 331
loc: {...}
start: {...}
- line: 13
- column: 28
}end: {...}
- line: 13
- column: 31
}
}- name: "add"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 332
- end: 335
loc: {...}
start: {...}
- line: 13
- column: 32
}end: {...}
- line: 13
- column: 35
}
}- name: "one"
} Literal {...}
- type: "Literal"
- start: 337
- end: 338
loc: {...}
start: {...}
- line: 13
- column: 37
}end: {...}
- line: 13
- column: 38
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
}
]
}
}
]
}- css: undefined
instance: Script {...}
- type: "Script"
- start: 0
- end: 205
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 196
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 10
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 37
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 28
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 11
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 20
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 11
}
}- name: "add"
}
}
]source: Literal {...}
- type: "Literal"
- start: 26
- end: 36
loc: {...}
start: {...}
- line: 2
- column: 17
}end: {...}
- line: 2
- column: 27
}
}- value: "./add.js"
- raw: "\"./add.js\""
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 41
- end: 70
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 6
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 47
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 6
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 47
- end: 50
loc: {...}
start: {...}
- line: 4
- column: 7
}end: {...}
- line: 4
- column: 10
}
}- name: "arr"
}init: ArrayExpression {...}
- type: "ArrayExpression"
- start: 53
- end: 69
loc: {...}
start: {...}
- line: 4
- column: 13
}end: {...}
- line: 6
- column: 3
}
}elements: [...] (1)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 54
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 14
}end: {...}
- line: 6
- column: 2
}
}properties: [...] (1)
Property {...}
- type: "Property"
- start: 58
- end: 65
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 9
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 58
- end: 61
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 5
}
}- name: "one"
}value: Literal {...}
- type: "Literal"
- start: 64
- end: 65
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 9
}
}- value: 1
- raw: "1"
}- kind: "init"
}
]
}
]
}
}
]- kind: "const"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 129
- end: 195
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 67
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 129
- end: 194
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 66
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 129
- end: 140
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 12
}
}object: Identifier {...}
- type: "Identifier"
- start: 129
- end: 132
loc: {...}
start: {...}
- line: 9
- column: 1
}end: {...}
- line: 9
- column: 4
}
}- name: "arr"
}property: Identifier {...}
- type: "Identifier"
- start: 133
- end: 140
loc: {...}
start: {...}
- line: 9
- column: 5
}end: {...}
- line: 9
- column: 12
}
}- name: "forEach"
}- computed: false
- optional: false
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 141
- end: 193
loc: {...}
start: {...}
- line: 9
- column: 13
}end: {...}
- line: 9
- column: 65
}
}- id: null
- expression: true
- generator: false
- async: false
params: [...] (1)
ObjectPattern {...}
- type: "ObjectPattern"
- start: 142
- end: 167
loc: {...}
start: {...}
- line: 9
- column: 14
}end: {...}
- line: 9
- column: 39
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 144
- end: 147
loc: {...}
start: {...}
- line: 9
- column: 16
}end: {...}
- line: 9
- column: 19
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 144
- end: 147
loc: {...}
start: {...}
- line: 9
- column: 16
}end: {...}
- line: 9
- column: 19
}
}- name: "one"
}- kind: "init"
value: Identifier {...}
- type: "Identifier"
- start: 144
- end: 147
loc: {...}
start: {...}
- line: 9
- column: 16
}end: {...}
- line: 9
- column: 19
}
}- name: "one"
}
} Property {...}
- type: "Property"
- start: 149
- end: 166
loc: {...}
start: {...}
- line: 9
- column: 21
}end: {...}
- line: 9
- column: 38
}
}- method: false
- shorthand: true
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 149
- end: 152
loc: {...}
start: {...}
- line: 9
- column: 21
}end: {...}
- line: 9
- column: 24
}
}- name: "two"
}- kind: "init"
value: AssignmentPattern {...}
- type: "AssignmentPattern"
- start: 149
- end: 166
loc: {...}
start: {...}
- line: 9
- column: 21
}end: {...}
- line: 9
- column: 38
}
}left: Identifier {...}
- type: "Identifier"
- start: 149
- end: 152
loc: {...}
start: {...}
- line: 9
- column: 21
}end: {...}
- line: 9
- column: 24
}
}- name: "two"
}right: CallExpression {...}
- type: "CallExpression"
- start: 155
- end: 166
loc: {...}
start: {...}
- line: 9
- column: 27
}end: {...}
- line: 9
- column: 38
}
}callee: Identifier {...}
- type: "Identifier"
- start: 155
- end: 158
loc: {...}
start: {...}
- line: 9
- column: 27
}end: {...}
- line: 9
- column: 30
}
}- name: "add"
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 159
- end: 162
loc: {...}
start: {...}
- line: 9
- column: 31
}end: {...}
- line: 9
- column: 34
}
}- name: "one"
} Literal {...}
- type: "Literal"
- start: 164
- end: 165
loc: {...}
start: {...}
- line: 9
- column: 36
}end: {...}
- line: 9
- column: 37
}
}- value: 1
- raw: "1"
}
]- optional: false
}
}
}
]
}
]body: CallExpression {...}
- type: "CallExpression"
- start: 172
- end: 193
loc: {...}
start: {...}
- line: 9
- column: 44
}end: {...}
- line: 9
- column: 65
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 172
- end: 183
loc: {...}
start: {...}
- line: 9
- column: 44
}end: {...}
- line: 9
- column: 55
}
}object: Identifier {...}
- type: "Identifier"
- start: 172
- end: 179
loc: {...}
start: {...}
- line: 9
- column: 44
}end: {...}
- line: 9
- column: 51
}
}- name: "console"
}property: Identifier {...}
- type: "Identifier"
- start: 180
- end: 183
loc: {...}
start: {...}
- line: 9
- column: 52
}end: {...}
- line: 9
- column: 55
}
}- name: "log"
}- computed: false
- optional: false
}arguments: [...] (2)
Identifier {...}
- type: "Identifier"
- start: 184
- end: 187
loc: {...}
start: {...}
- line: 9
- column: 56
}end: {...}
- line: 9
- column: 59
}
}- name: "one"
} Identifier {...}
- type: "Identifier"
- start: 189
- end: 192
loc: {...}
start: {...}
- line: 9
- column: 61
}end: {...}
- line: 9
- column: 64
}
}- name: "two"
}
]- optional: false
}
}
]- optional: false
}leadingComments: [...] (1)
Line {...}
- type: "Line"
- value: " Works, the default value for two has access to one"
- start: 74
- end: 127
- has_trailing_newline: true
}
]
}
]- sourceType: "module"
}
}- module: undefined
}
The AST is not public API and may change at any point in time