Replace Svelte example with runes (v5.0.0+) and rm deprecated onmousemove (#2242)

* replace with runes and rm depr onmousemove

* rm whitespace

* readd whitespace in script tag

* updated sandbox

---------

Co-authored-by: Vincent van der Wal <[email protected]>
Co-authored-by: Philippe Rivière <[email protected]>

Author: 3 people

docs/getting-started.md

@@ -302,29 +302,29 @@ Here’s an example of client-side rendering in Svelte. For server-side renderin
 
 :::code-group
 ```svelte [App.svelte]
-<script>
+<script lang="ts">
   import * as Plot from '@observablehq/plot';
   import * as d3 from 'd3';
 
-  let div;
-  let data = d3.ticks(-2, 2, 200).map(Math.sin);
+  let div: HTMLElement | undefined = $state();
+  let data = $state(d3.ticks(-2, 2, 200).map(Math.sin));
 
-  function onMousemove(event) {
+  function onMousemove(event: MouseEvent) {
     const [x, y] = d3.pointer(event);
     data = data.slice(-200).concat(Math.atan2(x, y));
   }
 
-  $: {
+  $effect(() => {
     div?.firstChild?.remove(); // remove old chart, if any
-    div?.append(Plot.lineY(data).plot({grid: true})); // add the new chart
-  }
+    div?.append(Plot.lineY(data).plot({ grid: true })); // add the new chart
+  });
 </script>
 
-<div on:mousemove={onMousemove} bind:this={div} role="img"></div>
+<div onmousemove={onMousemove} bind:this={div} role="img"></div>
 ```
 :::
 
-See our [Plot + Svelte REPL](https://svelte.dev/repl/ebf78a6a6c1145ecb84cf9345a7f82ae?version=4.2.0) for details.
+See our [Plot + Svelte REPL](https://svelte.dev/playground/e65b5c87ae7e44239cef41ec3df28f52?version=5.2.7) for details.
 
 ## Plot in Node.js