From af980b263c834a38e2fd6c823c45e675f9324494 Mon Sep 17 00:00:00 2001
From: Trevor Manz <trevor.j.manz@gmail.com>
Date: Sun, 14 Jul 2024 16:08:21 -0700
Subject: [PATCH 1/2] feat: Add destory handler

---
 src/index.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index e7f946d6..0c7703c5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -23,6 +23,7 @@ export interface VizarrViewer {
   addImage(config: ImageLayerConfig): void;
   setViewState(viewState: ViewState): void;
   on<E extends keyof Events>(event: E, cb: (data: Events[E]) => void): void;
+  destroy(): void;
 }
 
 /** switch to Promise.withResolvers when it's available */
@@ -44,12 +45,17 @@ export function createViewer(element: HTMLElement): Promise<VizarrViewer> {
     atom<ViewState | undefined>(undefined),
     ({ zoom, target }) => emitter.emit('viewStateChange', { zoom, target })
   );
-  let { promise, resolve } = defer<VizarrViewer>();
+  const { promise, resolve } = defer<VizarrViewer>();
 
   function App() {
     const addImage = useSetAtom(addImageAtom);
     const setViewState = useSetAtom(viewStateAtom);
-    React.useImperativeHandle(ref, () => ({ addImage, setViewState, on: emitter.on }), []);
+    React.useImperativeHandle(ref, () => ({
+      addImage,
+      setViewState,
+      on: emitter.on,
+      destroy: () => root.unmount()
+    }), []);
     React.useEffect(() => {
       if (ref.current) {
         resolve(ref.current);
@@ -62,13 +68,13 @@ export function createViewer(element: HTMLElement): Promise<VizarrViewer> {
       </>
     );
   }
-  ReactDOM.createRoot(element).render(
+  let root = ReactDOM.createRoot(element);
+  root.render(
     <ThemeProvider theme={theme}>
       <Provider>
         <App />
       </Provider>
     </ThemeProvider>
   );
-
   return promise;
 }

From f0cda9aacbe9e845d334f2619c3e6fcb4f018ce6 Mon Sep 17 00:00:00 2001
From: Trevor Manz <trevor.j.manz@gmail.com>
Date: Sun, 14 Jul 2024 16:09:36 -0700
Subject: [PATCH 2/2] formatting

---
 src/index.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 0c7703c5..3651ea88 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,12 +50,16 @@ export function createViewer(element: HTMLElement): Promise<VizarrViewer> {
   function App() {
     const addImage = useSetAtom(addImageAtom);
     const setViewState = useSetAtom(viewStateAtom);
-    React.useImperativeHandle(ref, () => ({
-      addImage,
-      setViewState,
-      on: emitter.on,
-      destroy: () => root.unmount()
-    }), []);
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        addImage,
+        setViewState,
+        on: emitter.on,
+        destroy: () => root.unmount(),
+      }),
+      []
+    );
     React.useEffect(() => {
       if (ref.current) {
         resolve(ref.current);