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
<!-- https://eugenkiss.github.io/7guis/tasks#timer -->

<script>
import { onMount } from 'svelte';

let elapsed = $state(0);
let duration = $state(5000);

onMount(() => {
let last_time = performance.now();

let frame = requestAnimationFrame(function update(time) {
frame = requestAnimationFrame(update);

elapsed += Math.min(time - last_time, duration - elapsed);
last_time = time;
});

return () => {
cancelAnimationFrame(frame);
};
});
</script>

<label>
elapsed time:
<progress value={elapsed / duration}></progress>
</label>

<div>{(elapsed / 1000).toFixed(1)}s</div>

<label>
duration:
<input type="range" bind:value={duration} min="1" max="20000" />
</label>

Error compiling component

WebAssembly.instantiateStreaming(): value type opcode @+13
import 'svelte/internal/disclose-version';
import * as $ from 'svelte/internal/client';
import { onMount } from 'svelte';

var on_click = (_, elapsed) => $.set(elapsed, 0);
var root = $.template(`<label>elapsed time: <progress></progress></label> <div> </div> <label>duration: <input type="range" min="1" max="20000"></label> <button>reset</button>`, 1);

export default function App($$anchor, $$props) {
$.push($$props, true);

let elapsed = $.state(0);
let duration = $.state(5000);

onMount(() => {
let last_time = performance.now();

let frame = requestAnimationFrame(function update(time) {
frame = requestAnimationFrame(update);
$.set(elapsed, $.get(elapsed) + Math.min(time - last_time, $.get(duration) - $.get(elapsed)));
last_time = time;
});

return () => {
cancelAnimationFrame(frame);
};
});

var fragment = root();
var label = $.first_child(fragment);
var progress = $.sibling($.child(label));

$.reset(label);

var div = $.sibling(label, 2);
var text = $.child(div);

result = svelte.compile(source, {
generate: ,
});
/* Add a <style> tag to see the CSS output */
		
			
				
  • Root {
    • css: null
    • js: []
    • start: 0
    • end: 749
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (10)
        • Comment {...}
          • type: "Comment"
          • start: 0
          • end: 54
          • data: " https://eugenkiss.github.io/7guis/tasks#timer "
          }
        • Text {...}
          • type: "Text"
          • start: 54
          • end: 56
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Text {...}
          • type: "Text"
          • start: 474
          • end: 476
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 476
          • end: 557
          • name: "label"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 483
                • end: 500
                • raw: "elapsed time: "
                • data: "elapsed time: "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 500
                • end: 548
                • name: "progress"
                • attributes: [...] (1)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 510
                    • end: 536
                    • name: "value"
                    • value: ExpressionTag {...}
                      • type: "ExpressionTag"
                      • start: 516
                      • end: 536
                      • expression: BinaryExpression {...}
                        • type: "BinaryExpression"
                        • start: 517
                        • end: 535
                        • loc: {...}
                          • start: {...}
                            • line: 27
                            • column: 18
                            }
                          • end: {...}
                            • line: 27
                            • column: 36
                            }
                          }
                        • left: Identifier {...}
                          • type: "Identifier"
                          • start: 517
                          • end: 524
                          • loc: {...}
                            • start: {...}
                              • line: 27
                              • column: 18
                              }
                            • end: {...}
                              • line: 27
                              • column: 25
                              }
                            }
                          • name: "elapsed"
                          }
                        • operator: "/"
                        • right: Identifier {...}
                          • type: "Identifier"
                          • start: 527
                          • end: 535
                          • loc: {...}
                            • start: {...}
                              • line: 27
                              • column: 28
                              }
                            • end: {...}
                              • line: 27
                              • column: 36
                              }
                            }
                          • name: "duration"
                          }
                        }
                      }
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 548
                • end: 549
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 557
          • end: 559
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 559
          • end: 600
          • name: "div"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (2)
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 564
                • end: 593
                • expression: CallExpression {...}
                  • type: "CallExpression"
                  • start: 565
                  • end: 592
                  • loc: {...}
                    • start: {...}
                      • line: 30
                      • column: 6
                      }
                    • end: {...}
                      • line: 30
                      • column: 33
                      }
                    }
                  • callee: MemberExpression {...}
                    • type: "MemberExpression"
                    • start: 565
                    • end: 589
                    • loc: {...}
                      • start: {...}
                        • line: 30
                        • column: 6
                        }
                      • end: {...}
                        • line: 30
                        • column: 30
                        }
                      }
                    • object: BinaryExpression {...}
                      • type: "BinaryExpression"
                      • start: 566
                      • end: 580
                      • loc: {...}
                        • start: {...}
                          • line: 30
                          • column: 7
                          }
                        • end: {...}
                          • line: 30
                          • column: 21
                          }
                        }
                      • left: Identifier {...}
                        • type: "Identifier"
                        • start: 566
                        • end: 573
                        • loc: {...}
                          • start: {...}
                            • line: 30
                            • column: 7
                            }
                          • end: {...}
                            • line: 30
                            • column: 14
                            }
                          }
                        • name: "elapsed"
                        }
                      • operator: "/"
                      • right: Literal {...}
                        • type: "Literal"
                        • start: 576
                        • end: 580
                        • loc: {...}
                          • start: {...}
                            • line: 30
                            • column: 17
                            }
                          • end: {...}
                            • line: 30
                            • column: 21
                            }
                          }
                        • value: 1000
                        • raw: "1000"
                        }
                      }
                    • property: Identifier {...}
                      • type: "Identifier"
                      • start: 582
                      • end: 589
                      • loc: {...}
                        • start: {...}
                          • line: 30
                          • column: 23
                          }
                        • end: {...}
                          • line: 30
                          • column: 30
                          }
                        }
                      • name: "toFixed"
                      }
                    • computed: false
                    • optional: false
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 590
                      • end: 591
                      • loc: {...}
                        • start: {...}
                          • line: 30
                          • column: 31
                          }
                        • end: {...}
                          • line: 30
                          • column: 32
                          }
                        }
                      • value: 1
                      • raw: "1"
                      }
                    ]
                  • optional: false
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 593
                • end: 594
                • raw: "s"
                • data: "s"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 600
          • end: 602
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 602
          • end: 695
          • name: "label"
          • attributes: []
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 609
                • end: 622
                • raw: "duration: "
                • data: "duration: "
                }
              • RegularElement {...}
                • type: "RegularElement"
                • start: 622
                • end: 686
                • name: "input"
                • attributes: [...] (4)
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 629
                    • end: 641
                    • name: "type"
                    • value: [...] (1)
                      • Text {...}
                        • start: 635
                        • end: 640
                        • type: "Text"
                        • raw: "range"
                        • data: "range"
                        }
                      ]
                    }
                  • BindDirective {...}
                    • start: 642
                    • end: 663
                    • type: "BindDirective"
                    • name: "value"
                    • expression: Identifier {...}
                      • type: "Identifier"
                      • start: 654
                      • end: 662
                      • loc: {...}
                        • start: {...}
                          • line: 34
                          • column: 33
                          }
                        • end: {...}
                          • line: 34
                          • column: 41
                          }
                        }
                      • name: "duration"
                      }
                    • modifiers: []
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 664
                    • end: 671
                    • name: "min"
                    • value: [...] (1)
                      • Text {...}
                        • start: 669
                        • end: 670
                        • type: "Text"
                        • raw: "1"
                        • data: "1"
                        }
                      ]
                    }
                  • Attribute {...}
                    • type: "Attribute"
                    • start: 672
                    • end: 683
                    • name: "max"
                    • value: [...] (1)
                      • Text {...}
                        • start: 677
                        • end: 682
                        • type: "Text"
                        • raw: "20000"
                        • data: "20000"
                        }
                      ]
                    }
                  ]
                • fragment: Fragment {...}
                  • type: "Fragment"
                  • nodes: []
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 686
                • end: 687
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 695
          • end: 697
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 697
          • end: 749
          • name: "button"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: 705
              • end: 734
              • name: "onclick"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 713
                • end: 734
                • expression: ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 714
                  • end: 733
                  • loc: {...}
                    • start: {...}
                      • line: 37
                      • column: 17
                      }
                    • end: {...}
                      • line: 37
                      • column: 36
                      }
                    }
                  • id: null
                  • expression: true
                  • generator: false
                  • async: false
                  • params: []
                  • body: AssignmentExpression {...}
                    • type: "AssignmentExpression"
                    • start: 721
                    • end: 732
                    • loc: {...}
                      • start: {...}
                        • line: 37
                        • column: 24
                        }
                      • end: {...}
                        • line: 37
                        • column: 35
                        }
                      }
                    • operator: "="
                    • left: Identifier {...}
                      • type: "Identifier"
                      • start: 721
                      • end: 728
                      • loc: {...}
                        • start: {...}
                          • line: 37
                          • column: 24
                          }
                        • end: {...}
                          • line: 37
                          • column: 31
                          }
                        }
                      • name: "elapsed"
                      }
                    • right: Literal {...}
                      • type: "Literal"
                      • start: 731
                      • end: 732
                      • loc: {...}
                        • start: {...}
                          • line: 37
                          • column: 34
                          }
                        • end: {...}
                          • line: 37
                          • column: 35
                          }
                        }
                      • value: 0
                      • raw: "0"
                      }
                    }
                  }
                }
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 735
                • end: 740
                • raw: "reset"
                • data: "reset"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 56
      • end: 474
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 64
        • end: 465
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 23
            • column: 0
            }
          }
        • body: [...] (4)
          • ImportDeclaration {...}
            • type: "ImportDeclaration"
            • start: 66
            • end: 99
            • loc: {...}
              • start: {...}
                • line: 4
                • column: 1
                }
              • end: {...}
                • line: 4
                • column: 34
                }
              }
            • specifiers: [...] (1)
              • ImportSpecifier {...}
                • type: "ImportSpecifier"
                • start: 75
                • end: 82
                • loc: {...}
                  • start: {...}
                    • line: 4
                    • column: 10
                    }
                  • end: {...}
                    • line: 4
                    • column: 17
                    }
                  }
                • imported: Identifier {...}
                  • type: "Identifier"
                  • start: 75
                  • end: 82
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 10
                      }
                    • end: {...}
                      • line: 4
                      • column: 17
                      }
                    }
                  • name: "onMount"
                  }
                • local: Identifier {...}
                  • type: "Identifier"
                  • start: 75
                  • end: 82
                  • loc: {...}
                    • start: {...}
                      • line: 4
                      • column: 10
                      }
                    • end: {...}
                      • line: 4
                      • column: 17
                      }
                    }
                  • name: "onMount"
                  }
                }
              ]
            • source: Literal {...}
              • type: "Literal"
              • start: 90
              • end: 98
              • loc: {...}
                • start: {...}
                  • line: 4
                  • column: 25
                  }
                • end: {...}
                  • line: 4
                  • column: 33
                  }
                }
              • value: "svelte"
              • raw: "'svelte'"
              }
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 102
            • end: 126
            • loc: {...}
              • start: {...}
                • line: 6
                • column: 1
                }
              • end: {...}
                • line: 6
                • column: 25
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 106
                • end: 125
                • loc: {...}
                  • start: {...}
                    • line: 6
                    • column: 5
                    }
                  • end: {...}
                    • line: 6
                    • column: 24
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 106
                  • end: 113
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 5
                      }
                    • end: {...}
                      • line: 6
                      • column: 12
                      }
                    }
                  • name: "elapsed"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 116
                  • end: 125
                  • loc: {...}
                    • start: {...}
                      • line: 6
                      • column: 15
                      }
                    • end: {...}
                      • line: 6
                      • column: 24
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 116
                    • end: 122
                    • loc: {...}
                      • start: {...}
                        • line: 6
                        • column: 15
                        }
                      • end: {...}
                        • line: 6
                        • column: 21
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 123
                      • end: 124
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 22
                          }
                        • end: {...}
                          • line: 6
                          • column: 23
                          }
                        }
                      • value: 0
                      • raw: "0"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 128
            • end: 156
            • loc: {...}
              • start: {...}
                • line: 7
                • column: 1
                }
              • end: {...}
                • line: 7
                • column: 29
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 132
                • end: 155
                • loc: {...}
                  • start: {...}
                    • line: 7
                    • column: 5
                    }
                  • end: {...}
                    • line: 7
                    • column: 28
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 132
                  • end: 140
                  • loc: {...}
                    • start: {...}
                      • line: 7
                      • column: 5
                      }
                    • end: {...}
                      • line: 7
                      • column: 13
                      }
                    }
                  • name: "duration"
                  }
                • init: CallExpression {...}
                  • type: "CallExpression"
                  • start: 143
                  • end: 155
                  • loc: {...}
                    • start: {...}
                      • line: 7
                      • column: 16
                      }
                    • end: {...}
                      • line: 7
                      • column: 28
                      }
                    }
                  • callee: Identifier {...}
                    • type: "Identifier"
                    • start: 143
                    • end: 149
                    • loc: {...}
                      • start: {...}
                        • line: 7
                        • column: 16
                        }
                      • end: {...}
                        • line: 7
                        • column: 22
                        }
                      }
                    • name: "$state"
                    }
                  • arguments: [...] (1)
                    • Literal {...}
                      • type: "Literal"
                      • start: 150
                      • end: 154
                      • loc: {...}
                        • start: {...}
                          • line: 7
                          • column: 23
                          }
                        • end: {...}
                          • line: 7
                          • column: 27
                          }
                        }
                      • value: 5000
                      • raw: "5000"
                      }
                    ]
                  • optional: false
                  }
                }
              ]
            • kind: "let"
            }
          • ExpressionStatement {...}
            • type: "ExpressionStatement"
            • start: 159
            • end: 464
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 1
                }
              • end: {...}
                • line: 22
                • column: 4
                }
              }
            • expression: CallExpression {...}
              • type: "CallExpression"
              • start: 159
              • end: 463
              • loc: {...}
                • start: {...}
                  • line: 9
                  • column: 1
                  }
                • end: {...}
                  • line: 22
                  • column: 3
                  }
                }
              • callee: Identifier {...}
                • type: "Identifier"
                • start: 159
                • end: 166
                • loc: {...}
                  • start: {...}
                    • line: 9
                    • column: 1
                    }
                  • end: {...}
                    • line: 9
                    • column: 8
                    }
                  }
                • name: "onMount"
                }
              • arguments: [...] (1)
                • ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 167
                  • end: 462
                  • loc: {...}
                    • start: {...}
                      • line: 9
                      • column: 9
                      }
                    • end: {...}
                      • line: 22
                      • column: 2
                      }
                    }
                  • id: null
                  • expression: false
                  • generator: false
                  • async: false
                  • params: []
                  • body: BlockStatement {...}
                    • type: "BlockStatement"
                    • start: 173
                    • end: 462
                    • loc: {...}
                      • start: {...}
                        • line: 9
                        • column: 15
                        }
                      • end: {...}
                        • line: 22
                        • column: 2
                        }
                      }
                    • body: [...] (3)
                      • VariableDeclaration {...}
                        • type: "VariableDeclaration"
                        • start: 177
                        • end: 211
                        • loc: {...}
                          • start: {...}
                            • line: 10
                            • column: 2
                            }
                          • end: {...}
                            • line: 10
                            • column: 36
                            }
                          }
                        • declarations: [...] (1)
                          • VariableDeclarator {...}
                            • type: "VariableDeclarator"
                            • start: 181
                            • end: 210
                            • loc: {...}
                              • start: {...}
                                • line: 10
                                • column: 6
                                }
                              • end: {...}
                                • line: 10
                                • column: 35
                                }
                              }
                            • id: Identifier {...}
                              • type: "Identifier"
                              • start: 181
                              • end: 190
                              • loc: {...}
                                • start: {...}
                                  • line: 10
                                  • column: 6
                                  }
                                • end: {...}
                                  • line: 10
                                  • column: 15
                                  }
                                }
                              • name: "last_time"
                              }
                            • init: CallExpression {...}
                              • type: "CallExpression"
                              • start: 193
                              • end: 210
                              • loc: {...}
                                • start: {...}
                                  • line: 10
                                  • column: 18
                                  }
                                • end: {...}
                                  • line: 10
                                  • column: 35
                                  }
                                }
                              • callee: MemberExpression {...}
                                • type: "MemberExpression"
                                • start: 193
                                • end: 208
                                • loc: {...}
                                  • start: {...}
                                    • line: 10
                                    • column: 18
                                    }
                                  • end: {...}
                                    • line: 10
                                    • column: 33
                                    }
                                  }
                                • object: Identifier {...}
                                  • type: "Identifier"
                                  • start: 193
                                  • end: 204
                                  • loc: {...}
                                    • start: {...}
                                      • line: 10
                                      • column: 18
                                      }
                                    • end: {...}
                                      • line: 10
                                      • column: 29
                                      }
                                    }
                                  • name: "performance"
                                  }
                                • property: Identifier {...}
                                  • type: "Identifier"
                                  • start: 205
                                  • end: 208
                                  • loc: {...}
                                    • start: {...}
                                      • line: 10
                                      • column: 30
                                      }
                                    • end: {...}
                                      • line: 10
                                      • column: 33
                                      }
                                    }
                                  • name: "now"
                                  }
                                • computed: false
                                • optional: false
                                }
                              • arguments: []
                              • optional: false
                              }
                            }
                          ]
                        • kind: "let"
                        }
                      • VariableDeclaration {...}
                        • type: "VariableDeclaration"
                        • start: 215
                        • end: 404
                        • loc: {...}
                          • start: {...}
                            • line: 12
                            • column: 2
                            }
                          • end: {...}
                            • line: 17
                            • column: 5
                            }
                          }
                        • declarations: [...] (1)
                          • VariableDeclarator {...}
                            • type: "VariableDeclarator"
                            • start: 219
                            • end: 403
                            • loc: {...}
                              • start: {...}
                                • line: 12
                                • column: 6
                                }
                              • end: {...}
                                • line: 17
                                • column: 4
                                }
                              }
                            • id: Identifier {...}
                              • type: "Identifier"
                              • start: 219
                              • end: 224
                              • loc: {...}
                                • start: {...}
                                  • line: 12
                                  • column: 6
                                  }
                                • end: {...}
                                  • line: 12
                                  • column: 11
                                  }
                                }
                              • name: "frame"
                              }
                            • init: CallExpression {...}
                              • type: "CallExpression"
                              • start: 227
                              • end: 403
                              • loc: {...}
                                • start: {...}
                                  • line: 12
                                  • column: 14
                                  }
                                • end: {...}
                                  • line: 17
                                  • column: 4
                                  }
                                }
                              • callee: Identifier {...}
                                • type: "Identifier"
                                • start: 227
                                • end: 248
                                • loc: {...}
                                  • start: {...}
                                    • line: 12
                                    • column: 14
                                    }
                                  • end: {...}
                                    • line: 12
                                    • column: 35
                                    }
                                  }
                                • name: "requestAnimationFrame"
                                }
                              • arguments: [...] (1)
                                • FunctionExpression {...}
                                  • type: "FunctionExpression"
                                  • start: 249
                                  • end: 402
                                  • loc: {...}
                                    • start: {...}
                                      • line: 12
                                      • column: 36
                                      }
                                    • end: {...}
                                      • line: 17
                                      • column: 3
                                      }
                                    }
                                  • id: Identifier {...}
                                    • type: "Identifier"
                                    • start: 258
                                    • end: 264
                                    • loc: {...}
                                      • start: {...}
                                        • line: 12
                                        • column: 45
                                        }
                                      • end: {...}
                                        • line: 12
                                        • column: 51
                                        }
                                      }
                                    • name: "update"
                                    }
                                  • expression: false
                                  • generator: false
                                  • async: false
                                  • params: [...] (1)
                                    • Identifier {...}
                                      • type: "Identifier"
                                      • start: 265
                                      • end: 269
                                      • loc: {...}
                                        • start: {...}
                                          • line: 12
                                          • column: 52
                                          }
                                        • end: {...}
                                          • line: 12
                                          • column: 56
                                          }
                                        }
                                      • name: "time"
                                      }
                                    ]
                                  • body: BlockStatement {...}
                                    • type: "BlockStatement"
                                    • start: 271
                                    • end: 402
                                    • loc: {...}
                                      • start: {...}
                                        • line: 12
                                        • column: 58
                                        }
                                      • end: {...}
                                        • line: 17
                                        • column: 3
                                        }
                                      }
                                    • body: [...] (3)
                                      • ExpressionStatement {...}
                                        • type: "ExpressionStatement"
                                        • start: 276
                                        • end: 314
                                        • loc: {...}
                                          • start: {...}
                                            • line: 13
                                            • column: 3
                                            }
                                          • end: {...}
                                            • line: 13
                                            • column: 41
                                            }
                                          }
                                        • expression: AssignmentExpression {...}
                                          • type: "AssignmentExpression"
                                          • start: 276
                                          • end: 313
                                          • loc: {...}
                                            • start: {...}
                                              • line: 13
                                              • column: 3
                                              }
                                            • end: {...}
                                              • line: 13
                                              • column: 40
                                              }
                                            }
                                          • operator: "="
                                          • left: Identifier {...}
                                            • type: "Identifier"
                                            • start: 276
                                            • end: 281
                                            • loc: {...}
                                              • start: {...}
                                                • line: 13
                                                • column: 3
                                                }
                                              • end: {...}
                                                • line: 13
                                                • column: 8
                                                }
                                              }
                                            • name: "frame"
                                            }
                                          • right: CallExpression {...}
                                            • type: "CallExpression"
                                            • start: 284
                                            • end: 313
                                            • loc: {...}
                                              • start: {...}
                                                • line: 13
                                                • column: 11
                                                }
                                              • end: {...}
                                                • line: 13
                                                • column: 40
                                                }
                                              }
                                            • callee: Identifier {...}
                                              • type: "Identifier"
                                              • start: 284
                                              • end: 305
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 13
                                                  • column: 11
                                                  }
                                                • end: {...}
                                                  • line: 13
                                                  • column: 32
                                                  }
                                                }
                                              • name: "requestAnimationFrame"
                                              }
                                            • arguments: [...] (1)
                                              • Identifier {...}
                                                • type: "Identifier"
                                                • start: 306
                                                • end: 312
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 13
                                                    • column: 33
                                                    }
                                                  • end: {...}
                                                    • line: 13
                                                    • column: 39
                                                    }
                                                  }
                                                • name: "update"
                                                }
                                              ]
                                            • optional: false
                                            }
                                          }
                                        }
                                      • ExpressionStatement {...}
                                        • type: "ExpressionStatement"
                                        • start: 319
                                        • end: 377
                                        • loc: {...}
                                          • start: {...}
                                            • line: 15
                                            • column: 3
                                            }
                                          • end: {...}
                                            • line: 15
                                            • column: 61
                                            }
                                          }
                                        • expression: AssignmentExpression {...}
                                          • type: "AssignmentExpression"
                                          • start: 319
                                          • end: 376
                                          • loc: {...}
                                            • start: {...}
                                              • line: 15
                                              • column: 3
                                              }
                                            • end: {...}
                                              • line: 15
                                              • column: 60
                                              }
                                            }
                                          • operator: "+="
                                          • left: Identifier {...}
                                            • type: "Identifier"
                                            • start: 319
                                            • end: 326
                                            • loc: {...}
                                              • start: {...}
                                                • line: 15
                                                • column: 3
                                                }
                                              • end: {...}
                                                • line: 15
                                                • column: 10
                                                }
                                              }
                                            • name: "elapsed"
                                            }
                                          • right: CallExpression {...}
                                            • type: "CallExpression"
                                            • start: 330
                                            • end: 376
                                            • loc: {...}
                                              • start: {...}
                                                • line: 15
                                                • column: 14
                                                }
                                              • end: {...}
                                                • line: 15
                                                • column: 60
                                                }
                                              }
                                            • callee: MemberExpression {...}
                                              • type: "MemberExpression"
                                              • start: 330
                                              • end: 338
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 15
                                                  • column: 14
                                                  }
                                                • end: {...}
                                                  • line: 15
                                                  • column: 22
                                                  }
                                                }
                                              • object: Identifier {...}
                                                • type: "Identifier"
                                                • start: 330
                                                • end: 334
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 15
                                                    • column: 14
                                                    }
                                                  • end: {...}
                                                    • line: 15
                                                    • column: 18
                                                    }
                                                  }
                                                • name: "Math"
                                                }
                                              • property: Identifier {...}
                                                • type: "Identifier"
                                                • start: 335
                                                • end: 338
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 15
                                                    • column: 19
                                                    }
                                                  • end: {...}
                                                    • line: 15
                                                    • column: 22
                                                    }
                                                  }
                                                • name: "min"
                                                }
                                              • computed: false
                                              • optional: false
                                              }
                                            • arguments: [...] (2)
                                              • BinaryExpression {...}
                                                • type: "BinaryExpression"
                                                • start: 339
                                                • end: 355
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 15
                                                    • column: 23
                                                    }
                                                  • end: {...}
                                                    • line: 15
                                                    • column: 39
                                                    }
                                                  }
                                                • left: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 339
                                                  • end: 343
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 15
                                                      • column: 23
                                                      }
                                                    • end: {...}
                                                      • line: 15
                                                      • column: 27
                                                      }
                                                    }
                                                  • name: "time"
                                                  }
                                                • operator: "-"
                                                • right: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 346
                                                  • end: 355
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 15
                                                      • column: 30
                                                      }
                                                    • end: {...}
                                                      • line: 15
                                                      • column: 39
                                                      }
                                                    }
                                                  • name: "last_time"
                                                  }
                                                }
                                              • BinaryExpression {...}
                                                • type: "BinaryExpression"
                                                • start: 357
                                                • end: 375
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 15
                                                    • column: 41
                                                    }
                                                  • end: {...}
                                                    • line: 15
                                                    • column: 59
                                                    }
                                                  }
                                                • left: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 357
                                                  • end: 365
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 15
                                                      • column: 41
                                                      }
                                                    • end: {...}
                                                      • line: 15
                                                      • column: 49
                                                      }
                                                    }
                                                  • name: "duration"
                                                  }
                                                • operator: "-"
                                                • right: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 368
                                                  • end: 375
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 15
                                                      • column: 52
                                                      }
                                                    • end: {...}
                                                      • line: 15
                                                      • column: 59
                                                      }
                                                    }
                                                  • name: "elapsed"
                                                  }
                                                }
                                              ]
                                            • optional: false
                                            }
                                          }
                                        }
                                      • ExpressionStatement {...}
                                        • type: "ExpressionStatement"
                                        • start: 381
                                        • end: 398
                                        • loc: {...}
                                          • start: {...}
                                            • line: 16
                                            • column: 3
                                            }
                                          • end: {...}
                                            • line: 16
                                            • column: 20
                                            }
                                          }
                                        • expression: AssignmentExpression {...}
                                          • type: "AssignmentExpression"
                                          • start: 381
                                          • end: 397
                                          • loc: {...}
                                            • start: {...}
                                              • line: 16
                                              • column: 3
                                              }
                                            • end: {...}
                                              • line: 16
                                              • column: 19
                                              }
                                            }
                                          • operator: "="
                                          • left: Identifier {...}
                                            • type: "Identifier"
                                            • start: 381
                                            • end: 390
                                            • loc: {...}
                                              • start: {...}
                                                • line: 16
                                                • column: 3
                                                }
                                              • end: {...}
                                                • line: 16
                                                • column: 12
                                                }
                                              }
                                            • name: "last_time"
                                            }
                                          • right: Identifier {...}
                                            • type: "Identifier"
                                            • start: 393
                                            • end: 397
                                            • loc: {...}
                                              • start: {...}
                                                • line: 16
                                                • column: 15
                                                }
                                              • end: {...}
                                                • line: 16
                                                • column: 19
                                                }
                                              }
                                            • name: "time"
                                            }
                                          }
                                        }
                                      ]
                                    }
                                  }
                                ]
                              • optional: false
                              }
                            }
                          ]
                        • kind: "let"
                        }
                      • ReturnStatement {...}
                        • type: "ReturnStatement"
                        • start: 408
                        • end: 459
                        • loc: {...}
                          • start: {...}
                            • line: 19
                            • column: 2
                            }
                          • end: {...}
                            • line: 21
                            • column: 4
                            }
                          }
                        • argument: ArrowFunctionExpression {...}
                          • type: "ArrowFunctionExpression"
                          • start: 415
                          • end: 458
                          • loc: {...}
                            • start: {...}
                              • line: 19
                              • column: 9
                              }
                            • end: {...}
                              • line: 21
                              • column: 3
                              }
                            }
                          • id: null
                          • expression: false
                          • generator: false
                          • async: false
                          • params: []
                          • body: BlockStatement {...}
                            • type: "BlockStatement"
                            • start: 421
                            • end: 458
                            • loc: {...}
                              • start: {...}
                                • line: 19
                                • column: 15
                                }
                              • end: {...}
                                • line: 21
                                • column: 3
                                }
                              }
                            • body: [...] (1)
                              • ExpressionStatement {...}
                                • type: "ExpressionStatement"
                                • start: 426
                                • end: 454
                                • loc: {...}
                                  • start: {...}
                                    • line: 20
                                    • column: 3
                                    }
                                  • end: {...}
                                    • line: 20
                                    • column: 31
                                    }
                                  }
                                • expression: CallExpression {...}
                                  • type: "CallExpression"
                                  • start: 426
                                  • end: 453
                                  • loc: {...}
                                    • start: {...}
                                      • line: 20
                                      • column: 3
                                      }
                                    • end: {...}
                                      • line: 20
                                      • column: 30
                                      }
                                    }
                                  • callee: Identifier {...}
                                    • type: "Identifier"
                                    • start: 426
                                    • end: 446
                                    • loc: {...}
                                      • start: {...}
                                        • line: 20
                                        • column: 3
                                        }
                                      • end: {...}
                                        • line: 20
                                        • column: 23
                                        }
                                      }
                                    • name: "cancelAnimationFrame"
                                    }
                                  • arguments: [...] (1)
                                    • Identifier {...}
                                      • type: "Identifier"
                                      • start: 447
                                      • end: 452
                                      • loc: {...}
                                        • start: {...}
                                          • line: 20
                                          • column: 24
                                          }
                                        • end: {...}
                                          • line: 20
                                          • column: 29
                                          }
                                        }
                                      • name: "frame"
                                      }
                                    ]
                                  • optional: false
                                  }
                                }
                              ]
                            }
                          }
                        }
                      ]
                    }
                  }
                ]
              • optional: false
              }
            }
          ]
        • sourceType: "module"
        • leadingComments: [...] (1)
          • Line {...}
            • type: "Line"
            • value: " https://eugenkiss.github.io/7guis/tasks#timer "
            }
          ]
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Timer • Playground • Svelte