Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
Decrementer.svelte
Incrementer.svelte
Resetter.svelte
stores.js
runes
This component is in runes mode.
To disable runes mode, add the following to the top of your component:
<svelte:options runes={false} />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
›
⌄
⌄
<script>
import { onDestroy } from 'svelte';
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let countValue = $state();
const unsubscribe = count.subscribe((value) => {
countValue = value;
});
onDestroy(unsubscribe);
</script>
<h1>The count is {countValue}</h1>
<Incrementer />
<Decrementer />
<Resetter />
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 * as $ from 'svelte/internal/client';
import { onDestroy } from 'svelte';
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
var root = $.template(`<h1> </h1> <!> <!> <!>`, 1);
export default function App($$anchor, $$props) {
$.push($$props, true);
let countValue = $.state(undefined);
const unsubscribe = count.subscribe((value) => {
$.set(countValue, $.proxy(value));
});
onDestroy(unsubscribe);
var fragment = root();
var h1 = $.first_child(fragment);
var text = $.child(h1);
$.reset(h1);
var node = $.sibling(h1, 2);
Incrementer(node, {});
var node_1 = $.sibling(node, 2);
Decrementer(node_1, {});
var node_2 = $.sibling(node_1, 2);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 369
- end: 449
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (8)
Text {...}
- type: "Text"
- start: 367
- end: 369
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 369
- end: 403
- name: "h1"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (2)
Text {...}
- type: "Text"
- start: 373
- end: 386
- raw: "The count is "
- data: "The count is "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 386
- end: 398
expression: Identifier {...}
- type: "Identifier"
- start: 387
- end: 397
loc: {...}
start: {...}
- line: 17
- column: 18
}end: {...}
- line: 17
- column: 28
}
}- name: "countValue"
}
}
]
}
} Text {...}
- type: "Text"
- start: 403
- end: 405
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 405
- end: 420
- name: "Incrementer"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 420
- end: 421
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 421
- end: 436
- name: "Decrementer"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 436
- end: 437
- raw: " "
- data: " "
} Component {...}
- type: "Component"
- start: 437
- end: 449
- name: "Resetter"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 367
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 358
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 15
- column: 0
}
}body: [...] (8)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 45
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 36
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}imported: Identifier {...}
- type: "Identifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}- name: "onDestroy"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}- name: "onDestroy"
}
}
]source: Literal {...}
- type: "Literal"
- start: 36
- end: 44
loc: {...}
start: {...}
- line: 2
- column: 27
}end: {...}
- line: 2
- column: 35
}
}- value: "svelte"
- raw: "'svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 47
- end: 83
loc: {...}
start: {...}
- line: 3
- column: 1
}end: {...}
- line: 3
- column: 37
}
}specifiers: [...] (1)
ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 56
- end: 61
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}imported: Identifier {...}
- type: "Identifier"
- start: 56
- end: 61
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}- name: "count"
}local: Identifier {...}
- type: "Identifier"
- start: 56
- end: 61
loc: {...}
start: {...}
- line: 3
- column: 10
}end: {...}
- line: 3
- column: 15
}
}- name: "count"
}
}
]source: Literal {...}
- type: "Literal"
- start: 69
- end: 82
loc: {...}
start: {...}
- line: 3
- column: 23
}end: {...}
- line: 3
- column: 36
}
}- value: "./stores.js"
- raw: "'./stores.js'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 85
- end: 132
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 48
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 92
- end: 103
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 19
}
}local: Identifier {...}
- type: "Identifier"
- start: 92
- end: 103
loc: {...}
start: {...}
- line: 4
- column: 8
}end: {...}
- line: 4
- column: 19
}
}- name: "Incrementer"
}
}
]source: Literal {...}
- type: "Literal"
- start: 109
- end: 131
loc: {...}
start: {...}
- line: 4
- column: 25
}end: {...}
- line: 4
- column: 47
}
}- value: "./Incrementer.svelte"
- raw: "'./Incrementer.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 134
- end: 181
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 48
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 141
- end: 152
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 19
}
}local: Identifier {...}
- type: "Identifier"
- start: 141
- end: 152
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 19
}
}- name: "Decrementer"
}
}
]source: Literal {...}
- type: "Literal"
- start: 158
- end: 180
loc: {...}
start: {...}
- line: 5
- column: 25
}end: {...}
- line: 5
- column: 47
}
}- value: "./Decrementer.svelte"
- raw: "'./Decrementer.svelte'"
}
} ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 183
- end: 224
loc: {...}
start: {...}
- line: 6
- column: 1
}end: {...}
- line: 6
- column: 42
}
}specifiers: [...] (1)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 190
- end: 198
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 16
}
}local: Identifier {...}
- type: "Identifier"
- start: 190
- end: 198
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 16
}
}- name: "Resetter"
}
}
]source: Literal {...}
- type: "Literal"
- start: 204
- end: 223
loc: {...}
start: {...}
- line: 6
- column: 22
}end: {...}
- line: 6
- column: 41
}
}- value: "./Resetter.svelte"
- raw: "'./Resetter.svelte'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 227
- end: 253
loc: {...}
start: {...}
- line: 8
- column: 1
}end: {...}
- line: 8
- column: 27
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 231
- end: 252
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 26
}
}id: Identifier {...}
- type: "Identifier"
- start: 231
- end: 241
loc: {...}
start: {...}
- line: 8
- column: 5
}end: {...}
- line: 8
- column: 15
}
}- name: "countValue"
}init: CallExpression {...}
- type: "CallExpression"
- start: 244
- end: 252
loc: {...}
start: {...}
- line: 8
- column: 18
}end: {...}
- line: 8
- column: 26
}
}callee: Identifier {...}
- type: "Identifier"
- start: 244
- end: 250
loc: {...}
start: {...}
- line: 8
- column: 18
}end: {...}
- line: 8
- column: 24
}
}- name: "$state"
}- arguments: []
- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 256
- end: 331
loc: {...}
start: {...}
- line: 10
- column: 1
}end: {...}
- line: 12
- column: 4
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 262
- end: 330
loc: {...}
start: {...}
- line: 10
- column: 7
}end: {...}
- line: 12
- column: 3
}
}id: Identifier {...}
- type: "Identifier"
- start: 262
- end: 273
loc: {...}
start: {...}
- line: 10
- column: 7
}end: {...}
- line: 10
- column: 18
}
}- name: "unsubscribe"
}init: CallExpression {...}
- type: "CallExpression"
- start: 276
- end: 330
loc: {...}
start: {...}
- line: 10
- column: 21
}end: {...}
- line: 12
- column: 3
}
}callee: MemberExpression {...}
- type: "MemberExpression"
- start: 276
- end: 291
loc: {...}
start: {...}
- line: 10
- column: 21
}end: {...}
- line: 10
- column: 36
}
}object: Identifier {...}
- type: "Identifier"
- start: 276
- end: 281
loc: {...}
start: {...}
- line: 10
- column: 21
}end: {...}
- line: 10
- column: 26
}
}- name: "count"
}property: Identifier {...}
- type: "Identifier"
- start: 282
- end: 291
loc: {...}
start: {...}
- line: 10
- column: 27
}end: {...}
- line: 10
- column: 36
}
}- name: "subscribe"
}- computed: false
- optional: false
}arguments: [...] (1)
ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 292
- end: 329
loc: {...}
start: {...}
- line: 10
- column: 37
}end: {...}
- line: 12
- column: 2
}
}- id: null
- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 293
- end: 298
loc: {...}
start: {...}
- line: 10
- column: 38
}end: {...}
- line: 10
- column: 43
}
}- name: "value"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 303
- end: 329
loc: {...}
start: {...}
- line: 10
- column: 48
}end: {...}
- line: 12
- column: 2
}
}body: [...] (1)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 307
- end: 326
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 11
- column: 21
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 307
- end: 325
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 11
- column: 20
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 307
- end: 317
loc: {...}
start: {...}
- line: 11
- column: 2
}end: {...}
- line: 11
- column: 12
}
}- name: "countValue"
}right: Identifier {...}
- type: "Identifier"
- start: 320
- end: 325
loc: {...}
start: {...}
- line: 11
- column: 15
}end: {...}
- line: 11
- column: 20
}
}- name: "value"
}
}
}
]
}
}
]- optional: false
}
}
]- kind: "const"
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 334
- end: 357
loc: {...}
start: {...}
- line: 14
- column: 1
}end: {...}
- line: 14
- column: 24
}
}expression: CallExpression {...}
- type: "CallExpression"
- start: 334
- end: 356
loc: {...}
start: {...}
- line: 14
- column: 1
}end: {...}
- line: 14
- column: 23
}
}callee: Identifier {...}
- type: "Identifier"
- start: 334
- end: 343
loc: {...}
start: {...}
- line: 14
- column: 1
}end: {...}
- line: 14
- column: 10
}
}- name: "onDestroy"
}arguments: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 344
- end: 355
loc: {...}
start: {...}
- line: 14
- column: 11
}end: {...}
- line: 14
- column: 22
}
}- name: "unsubscribe"
}
]- optional: false
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time