Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
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
›
⌄
⌄
⌄
⌄
⌄
<script>
let m = $state({ x: 0, y: 0 });
function handleMousemove(event) {
m.x = event.clientX;
m.y = event.clientY;
}
</script>
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div onmousemove={handleMousemove}>
The mouse position is {m.x} x {m.y}
</div>
<style>
div {
width: 100%;
height: 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
›
⌄
⌄
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
function handleMousemove(event, m) {
m.x = event.clientX;
m.y = event.clientY;
}
var root = $.template(`<div class="svelte-1c44y5p"> </div>`);
export default function App($$anchor) {
let m = $.proxy({ x: 0, y: 0 });
var div = root();
div.__mousemove = [handleMousemove, m];
var text = $.child(div);
$.reset(div);
$.template_effect(() => $.set_text(text, `The mouse position is ${m.x ?? ''} x ${m.y ?? ''}`));
$.append($$anchor, div);
}
$.delegate(['mousemove']);
result = svelte.compile(source, {
generate: ,
});9
1
2
3
4
5
6
›
div.svelte-1c44y5p {
width: 100%;
height: 100%;
}
Root {
css: StyleSheet {...}
- type: "StyleSheet"
- start: 278
- end: 335
- attributes: []
children: [...] (1)
Rule {...}
- type: "Rule"
prelude: SelectorList {...}
- type: "SelectorList"
- start: 287
- end: 290
children: [...] (1)
ComplexSelector {...}
- type: "ComplexSelector"
- start: 287
- end: 290
children: [...] (1)
RelativeSelector {...}
- type: "RelativeSelector"
- combinator: null
selectors: [...] (1)
TypeSelector {...}
- type: "TypeSelector"
- name: "div"
- start: 287
- end: 290
}
]- start: 287
- end: 290
}
]
}
]
}block: Block {...}
- type: "Block"
- start: 291
- end: 326
children: [...] (2)
Declaration {...}
- type: "Declaration"
- start: 295
- end: 306
- property: "width"
- value: "100%"
} Declaration {...}
- type: "Declaration"
- start: 310
- end: 322
- property: "height"
- value: "100%"
}
]
}- start: 287
- end: 326
}
]content: {...}
- start: 285
- end: 327
- styles: "\n\tdiv {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"
- comment: null
}
}- js: []
- start: 138
- end: 276
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 136
- end: 138
- raw: "\n\n"
- data: "\n\n"
} Comment {...}
- type: "Comment"
- start: 138
- end: 196
- data: " svelte-ignore a11y_no_static_element_interactions "
} Text {...}
- type: "Text"
- start: 196
- end: 197
- raw: "\n"
- data: "\n"
} RegularElement {...}
- type: "RegularElement"
- start: 197
- end: 276
- name: "div"
attributes: [...] (2)
Attribute {...}
- type: "Attribute"
- start: 202
- end: 231
- name: "onmousemove"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 214
- end: 231
expression: Identifier {...}
- type: "Identifier"
- start: 215
- end: 230
loc: {...}
start: {...}
- line: 11
- column: 18
}end: {...}
- line: 11
- column: 33
}
}- name: "handleMousemove"
}
}
} Attribute {...}
- type: "Attribute"
- start: -1
- end: -1
- name: "class"
value: [...] (1)
Text {...}
- type: "Text"
- data: "svelte-1c44y5p"
- raw: "svelte-1c44y5p"
- start: -1
- end: -1
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 232
- end: 256
- raw: "The mouse position is "
- data: "The mouse position is "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 256
- end: 261
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 257
- end: 260
loc: {...}
start: {...}
- line: 12
- column: 24
}end: {...}
- line: 12
- column: 27
}
}object: Identifier {...}
- type: "Identifier"
- start: 257
- end: 258
loc: {...}
start: {...}
- line: 12
- column: 24
}end: {...}
- line: 12
- column: 25
}
}- name: "m"
}property: Identifier {...}
- type: "Identifier"
- start: 259
- end: 260
loc: {...}
start: {...}
- line: 12
- column: 26
}end: {...}
- line: 12
- column: 27
}
}- name: "x"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 261
- end: 264
- raw: " x "
- data: " x "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 264
- end: 269
expression: MemberExpression {...}
- type: "MemberExpression"
- start: 265
- end: 268
loc: {...}
start: {...}
- line: 12
- column: 32
}end: {...}
- line: 12
- column: 35
}
}object: Identifier {...}
- type: "Identifier"
- start: 265
- end: 266
loc: {...}
start: {...}
- line: 12
- column: 32
}end: {...}
- line: 12
- column: 33
}
}- name: "m"
}property: Identifier {...}
- type: "Identifier"
- start: 267
- end: 268
loc: {...}
start: {...}
- line: 12
- column: 34
}end: {...}
- line: 12
- column: 35
}
}- name: "y"
}- computed: false
- optional: false
}
} Text {...}
- type: "Text"
- start: 269
- end: 270
- raw: "\n"
- data: "\n"
}
]
}
} Text {...}
- type: "Text"
- start: 276
- end: 278
- raw: "\n\n"
- data: "\n\n"
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 136
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 127
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 8
- column: 0
}
}body: [...] (2)
VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 10
- end: 41
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 32
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 14
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 31
}
}id: Identifier {...}
- type: "Identifier"
- start: 14
- end: 15
loc: {...}
start: {...}
- line: 2
- column: 5
}end: {...}
- line: 2
- column: 6
}
}- name: "m"
}init: CallExpression {...}
- type: "CallExpression"
- start: 18
- end: 40
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 31
}
}callee: Identifier {...}
- type: "Identifier"
- start: 18
- end: 24
loc: {...}
start: {...}
- line: 2
- column: 9
}end: {...}
- line: 2
- column: 15
}
}- name: "$state"
}arguments: [...] (1)
ObjectExpression {...}
- type: "ObjectExpression"
- start: 25
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 16
}end: {...}
- line: 2
- column: 30
}
}properties: [...] (2)
Property {...}
- type: "Property"
- start: 27
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 22
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 27
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 18
}end: {...}
- line: 2
- column: 19
}
}- name: "x"
}value: Literal {...}
- type: "Literal"
- start: 30
- end: 31
loc: {...}
start: {...}
- line: 2
- column: 21
}end: {...}
- line: 2
- column: 22
}
}- value: 0
- raw: "0"
}- kind: "init"
} Property {...}
- type: "Property"
- start: 33
- end: 37
loc: {...}
start: {...}
- line: 2
- column: 24
}end: {...}
- line: 2
- column: 28
}
}- method: false
- shorthand: false
- computed: false
key: Identifier {...}
- type: "Identifier"
- start: 33
- end: 34
loc: {...}
start: {...}
- line: 2
- column: 24
}end: {...}
- line: 2
- column: 25
}
}- name: "y"
}value: Literal {...}
- type: "Literal"
- start: 36
- end: 37
loc: {...}
start: {...}
- line: 2
- column: 27
}end: {...}
- line: 2
- column: 28
}
}- value: 0
- raw: "0"
}- kind: "init"
}
]
}
]- optional: false
}
}
]- kind: "let"
} FunctionDeclaration {...}
- type: "FunctionDeclaration"
- start: 44
- end: 126
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 7
- column: 2
}
}id: Identifier {...}
- type: "Identifier"
- start: 53
- end: 68
loc: {...}
start: {...}
- line: 4
- column: 10
}end: {...}
- line: 4
- column: 25
}
}- name: "handleMousemove"
}- expression: false
- generator: false
- async: false
params: [...] (1)
Identifier {...}
- type: "Identifier"
- start: 69
- end: 74
loc: {...}
start: {...}
- line: 4
- column: 26
}end: {...}
- line: 4
- column: 31
}
}- name: "event"
}
]body: BlockStatement {...}
- type: "BlockStatement"
- start: 76
- end: 126
loc: {...}
start: {...}
- line: 4
- column: 33
}end: {...}
- line: 7
- column: 2
}
}body: [...] (2)
ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 80
- end: 100
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 22
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 80
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 21
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 80
- end: 83
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 5
}
}object: Identifier {...}
- type: "Identifier"
- start: 80
- end: 81
loc: {...}
start: {...}
- line: 5
- column: 2
}end: {...}
- line: 5
- column: 3
}
}- name: "m"
}property: Identifier {...}
- type: "Identifier"
- start: 82
- end: 83
loc: {...}
start: {...}
- line: 5
- column: 4
}end: {...}
- line: 5
- column: 5
}
}- name: "x"
}- computed: false
- optional: false
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 86
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 21
}
}object: Identifier {...}
- type: "Identifier"
- start: 86
- end: 91
loc: {...}
start: {...}
- line: 5
- column: 8
}end: {...}
- line: 5
- column: 13
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 92
- end: 99
loc: {...}
start: {...}
- line: 5
- column: 14
}end: {...}
- line: 5
- column: 21
}
}- name: "clientX"
}- computed: false
- optional: false
}
}
} ExpressionStatement {...}
- type: "ExpressionStatement"
- start: 103
- end: 123
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 22
}
}expression: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 103
- end: 122
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 21
}
}- operator: "="
left: MemberExpression {...}
- type: "MemberExpression"
- start: 103
- end: 106
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 5
}
}object: Identifier {...}
- type: "Identifier"
- start: 103
- end: 104
loc: {...}
start: {...}
- line: 6
- column: 2
}end: {...}
- line: 6
- column: 3
}
}- name: "m"
}property: Identifier {...}
- type: "Identifier"
- start: 105
- end: 106
loc: {...}
start: {...}
- line: 6
- column: 4
}end: {...}
- line: 6
- column: 5
}
}- name: "y"
}- computed: false
- optional: false
}right: MemberExpression {...}
- type: "MemberExpression"
- start: 109
- end: 122
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 21
}
}object: Identifier {...}
- type: "Identifier"
- start: 109
- end: 114
loc: {...}
start: {...}
- line: 6
- column: 8
}end: {...}
- line: 6
- column: 13
}
}- name: "event"
}property: Identifier {...}
- type: "Identifier"
- start: 115
- end: 122
loc: {...}
start: {...}
- line: 6
- column: 14
}end: {...}
- line: 6
- column: 21
}
}- name: "clientY"
}- computed: false
- optional: false
}
}
}
]
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time