Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
longpress.js
<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
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: ,
});
/* 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
Adding parameters • Playground • Svelte