import { mount, unmount } from 'svelte';
import index from './index.svelte';
import './index.css';

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 });
  });
}