Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
longpress.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 { longpress } from './longpress.js';
let pressed = $state(false);
let duration = $state(2000);
</script>
<label>
<input type="range" bind:value={duration} max={2000} step={100} />
{duration}ms
</label>
<button
use:longpress={duration}
onlongpress={() => (pressed = true)}
onmouseenter={() => (pressed = false)}>press and hold</button
>
{#if pressed}
<p>congratulations, you pressed and held for {duration}ms</p>
{/if}
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 { longpress } from './longpress.js';
var root_1 = $.template(`<p> </p>`);
var root = $.template(`<label><input type="range"> </label> <button>press and hold</button> <!>`, 1);
export default function App($$anchor) {
let pressed = $.state(false);
let duration = $.state(2000);
var fragment = root();
var label = $.first_child(fragment);
var input = $.child(label);
$.remove_input_defaults(input);
$.set_attribute(input, 'max', 2000);
$.set_attribute(input, 'step', 100);
var text = $.sibling(input);
$.reset(label);
var button = $.sibling(label, 2);
$.action(button, ($$node, $$action_arg) => longpress?.($$node, $$action_arg), () => $.get(duration));
var node = $.sibling(button, 2);
{
var consequent = ($$anchor) => {
var p = root_1();
var text_1 = $.child(p);
$.reset(p);
$.template_effect(() => $.set_text(text_1, `congratulations, you pressed and held for ${$.get(duration) ?? ''}ms`));
$.append($$anchor, p);
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 126
- end: 446
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (6)
Text {...}
- type: "Text"
- start: 124
- end: 126
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 126
- end: 224
- name: "label"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (5)
Text {...}
- type: "Text"
- start: 133
- end: 135
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 135
- end: 201
- name: "input"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 142
- end: 154
- name: "type"
value: [...] (1)
Text {...}
- start: 148
- end: 153
- type: "Text"
- raw: "range"
- data: "range"
}
]
} BindDirective {...}
- start: 155
- end: 176
- type: "BindDirective"
- name: "value"
expression: Identifier {...}
- type: "Identifier"
- start: 167
- end: 175
loc: {...}
start: {...}
- line: 9
- column: 33
}end: {...}
- line: 9
- column: 41
}
}- name: "duration"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 177
- end: 187
- name: "max"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 181
- end: 187
expression: Literal {...}
- type: "Literal"
- start: 182
- end: 186
loc: {...}
start: {...}
- line: 9
- column: 48
}end: {...}
- line: 9
- column: 52
}
}- value: 2000
- raw: "2000"
}
}
} Attribute {...}
- type: "Attribute"
- start: 188
- end: 198
- name: "step"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 193
- end: 198
expression: Literal {...}
- type: "Literal"
- start: 194
- end: 197
loc: {...}
start: {...}
- line: 9
- column: 60
}end: {...}
- line: 9
- column: 63
}
}- value: 100
- raw: "100"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 201
- end: 203
- raw: " "
- data: " "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 203
- end: 213
expression: Identifier {...}
- type: "Identifier"
- start: 204
- end: 212
loc: {...}
start: {...}
- line: 10
- column: 2
}end: {...}
- line: 10
- column: 10
}
}- name: "duration"
}
} Text {...}
- type: "Text"
- start: 213
- end: 216
- raw: "ms"
- data: "ms"
}
]
}
} Text {...}
- type: "Text"
- start: 224
- end: 226
- raw: " "
- data: " "
} RegularElement {...}
- type: "RegularElement"
- start: 226
- end: 362
- name: "button"
attributes: [...] (3)
UseDirective {...}
- start: 235
- end: 259
- type: "UseDirective"
- name: "longpress"
expression: Identifier {...}
- type: "Identifier"
- start: 250
- end: 258
loc: {...}
start: {...}
- line: 14
- column: 16
}end: {...}
- line: 14
- column: 24
}
}- name: "duration"
}- modifiers: []
} Attribute {...}
- type: "Attribute"
- start: 261
- end: 297
- name: "onlongpress"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 273
- end: 297
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 274
- end: 296
loc: {...}
start: {...}
- line: 15
- column: 14
}end: {...}
- line: 15
- column: 36
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 281
- end: 295
loc: {...}
start: {...}
- line: 15
- column: 21
}end: {...}
- line: 15
- column: 35
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 281
- end: 288
loc: {...}
start: {...}
- line: 15
- column: 21
}end: {...}
- line: 15
- column: 28
}
}- name: "pressed"
}right: Literal {...}
- type: "Literal"
- start: 291
- end: 295
loc: {...}
start: {...}
- line: 15
- column: 31
}end: {...}
- line: 15
- column: 35
}
}- value: true
- raw: "true"
}
}
}
}
} Attribute {...}
- type: "Attribute"
- start: 299
- end: 337
- name: "onmouseenter"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 312
- end: 337
expression: ArrowFunctionExpression {...}
- type: "ArrowFunctionExpression"
- start: 313
- end: 336
loc: {...}
start: {...}
- line: 16
- column: 15
}end: {...}
- line: 16
- column: 38
}
}- id: null
- expression: true
- generator: false
- async: false
- params: []
body: AssignmentExpression {...}
- type: "AssignmentExpression"
- start: 320
- end: 335
loc: {...}
start: {...}
- line: 16
- column: 22
}end: {...}
- line: 16
- column: 37
}
}- operator: "="
left: Identifier {...}
- type: "Identifier"
- start: 320
- end: 327
loc: {...}
start: {...}
- line: 16
- column: 22
}end: {...}
- line: 16
- column: 29
}
}- name: "pressed"
}right: Literal {...}
- type: "Literal"
- start: 330
- end: 335
loc: {...}
start: {...}
- line: 16
- column: 32
}end: {...}
- line: 16
- column: 37
}
}- value: false
- raw: "false"
}
}
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 338
- end: 352
- raw: "press and hold"
- data: "press and hold"
}
]
}
} Text {...}
- type: "Text"
- start: 362
- end: 364
- raw: " "
- data: " "
} IfBlock {...}
- type: "IfBlock"
- elseif: false
- start: 364
- end: 446
test: Identifier {...}
- type: "Identifier"
- start: 369
- end: 376
loc: {...}
start: {...}
- line: 19
- column: 5
}end: {...}
- line: 19
- column: 12
}
}- name: "pressed"
}consequent: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 377
- end: 379
- raw: "\n\t"
- data: "\n\t"
} RegularElement {...}
- type: "RegularElement"
- start: 379
- end: 440
- name: "p"
- attributes: []
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (3)
Text {...}
- type: "Text"
- start: 382
- end: 424
- raw: "congratulations, you pressed and held for "
- data: "congratulations, you pressed and held for "
} ExpressionTag {...}
- type: "ExpressionTag"
- start: 424
- end: 434
expression: Identifier {...}
- type: "Identifier"
- start: 425
- end: 433
loc: {...}
start: {...}
- line: 20
- column: 47
}end: {...}
- line: 20
- column: 55
}
}- name: "duration"
}
} Text {...}
- type: "Text"
- start: 434
- end: 436
- raw: "ms"
- data: "ms"
}
]
}
} Text {...}
- type: "Text"
- start: 440
- end: 441
- raw: "\n"
- data: "\n"
}
]
}- alternate: null
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 124
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 115
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 6
- column: 0
}
}body: [...] (3)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 53
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 44
}
}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: "longpress"
}local: Identifier {...}
- type: "Identifier"
- start: 19
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 10
}end: {...}
- line: 2
- column: 19
}
}- name: "longpress"
}
}
]source: Literal {...}
- type: "Literal"
- start: 36
- end: 52
loc: {...}
start: {...}
- line: 2
- column: 27
}end: {...}
- line: 2
- column: 43
}
}- value: "./longpress.js"
- raw: "'./longpress.js'"
}
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 56
- end: 84
loc: {...}
start: {...}
- line: 4
- column: 1
}end: {...}
- line: 4
- column: 29
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 60
- end: 83
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 28
}
}id: Identifier {...}
- type: "Identifier"
- start: 60
- end: 67
loc: {...}
start: {...}
- line: 4
- column: 5
}end: {...}
- line: 4
- column: 12
}
}- name: "pressed"
}init: CallExpression {...}
- type: "CallExpression"
- start: 70
- end: 83
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 28
}
}callee: Identifier {...}
- type: "Identifier"
- start: 70
- end: 76
loc: {...}
start: {...}
- line: 4
- column: 15
}end: {...}
- line: 4
- column: 21
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 77
- end: 82
loc: {...}
start: {...}
- line: 4
- column: 22
}end: {...}
- line: 4
- column: 27
}
}- value: false
- raw: "false"
}
]- optional: false
}
}
]- kind: "let"
} VariableDeclaration {...}
- type: "VariableDeclaration"
- start: 86
- end: 114
loc: {...}
start: {...}
- line: 5
- column: 1
}end: {...}
- line: 5
- column: 29
}
}declarations: [...] (1)
VariableDeclarator {...}
- type: "VariableDeclarator"
- start: 90
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 28
}
}id: Identifier {...}
- type: "Identifier"
- start: 90
- end: 98
loc: {...}
start: {...}
- line: 5
- column: 5
}end: {...}
- line: 5
- column: 13
}
}- name: "duration"
}init: CallExpression {...}
- type: "CallExpression"
- start: 101
- end: 113
loc: {...}
start: {...}
- line: 5
- column: 16
}end: {...}
- line: 5
- column: 28
}
}callee: Identifier {...}
- type: "Identifier"
- start: 101
- end: 107
loc: {...}
start: {...}
- line: 5
- column: 16
}end: {...}
- line: 5
- column: 22
}
}- name: "$state"
}arguments: [...] (1)
Literal {...}
- type: "Literal"
- start: 108
- end: 112
loc: {...}
start: {...}
- line: 5
- column: 23
}end: {...}
- line: 5
- column: 27
}
}- value: 2000
- raw: "2000"
}
]- optional: false
}
}
]- kind: "let"
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time