From 283d8e14adbc92ccb99d4b124cbf0728097631a7 Mon Sep 17 00:00:00 2001
From: Vincent van der Wal <111272374+vincvdwal@users.noreply.github.com>
Date: Sun, 24 Nov 2024 17:49:47 +0100
Subject: [PATCH] Replace Svelte example with runes (v5.0.0+) and rm deprecated
 onmousemove (#2242)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* replace with runes and rm depr onmousemove

* rm whitespace

* readd whitespace in script tag

* updated sandbox

---------

Co-authored-by: Vincent van der Wal <info@vincentvanderwal.nl>
Co-authored-by: Philippe Rivière <fil@rezo.net>
---
 docs/getting-started.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/getting-started.md b/docs/getting-started.md
index 89266e82d1..bc8043736f 100644
--- a/docs/getting-started.md
+++ b/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