support hot reload

src/index.ts

@@ -1,6 +1,30 @@
-import { mount } from 'svelte';
+import { mount, unmount } from 'svelte';
 import index from './index.svelte';
 import './index.css';
 
-const root = document.querySelector<HTMLDivElement>('#root')!;
-const app = mount(index, { target: root });
+declare global {
+  var didMount: boolean | undefined;
+}
+
+let app: Record<string, any> | undefined;
+
+// mount the application entrypoint to the DOM on first load. On subsequent hot
+// updates, the app will be unmounted and re-mounted via the accept handler.
+
+const target = document.querySelector<HTMLDivElement>('body>div')!;
+if (!globalThis.didMount) {
+  app = mount(index, { target });
+}
+
+globalThis.didMount = true;
+
+if (import.meta.hot) {
+  import.meta.hot.accept(async () => {
+    // avoid unmounting twice when another update gets accepted while outros are playing
+    if (!app) return;
+    const prevApp = app;
+    app = undefined;
+    await unmount(prevApp, { outro: true });
+    app = mount(index, { target });
+  });
+}