Unload section when destroying the renderer

paginator.js

@@ -151,6 +151,7 @@ const makeMarginals = (length, part) => Array.from({ length }, () => {
 })
 
 class View {
+    #observer = new ResizeObserver(() => this.expand())
     #element = document.createElement('div')
     #iframe = document.createElement('iframe')
     #contentRange = document.createRange()
@@ -212,7 +213,7 @@ class View {
                 const layout = beforeRender?.({ vertical, rtl, background })
                 this.#iframe.style.display = 'block'
                 this.render(layout)
-                new ResizeObserver(() => this.expand()).observe(doc.body)
+                this.#observer.observe(doc.body)
 
                 // the resize observer above doesn't work in Firefox
                 // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1832939)
@@ -352,6 +353,9 @@ class View {
     get overlayer() {
         return this.#overlayer
     }
+    destroy() {
+        if (this.document) this.#observer.unobserve(this.document.body)
+    }
 }
 
 // NOTE: everything here assumes the so-called "negative scroll type" for RTL
@@ -941,6 +945,9 @@ export class Paginator extends HTMLElement {
     }
     destroy() {
         this.#observer.unobserve(this)
+        this.#view.destroy()
+        this.#view = null
+        this.sections[this.#index]?.unload?.()
     }
 }
 

view.js

@@ -129,6 +129,15 @@ export class View extends HTMLElement {
         this.renderer.open(book)
         this.#root.append(this.renderer)
     }
+    close() {
+        this.renderer?.destroy?.()
+        this.#sectionProgress = null
+        this.#tocProgress = null
+        this.#pageProgress = null
+        this.#searchResults = new Map()
+        this.lastLocation = null
+        this.history = new History()
+    }
     goToTextStart() {
         return this.goTo(this.book.landmarks
             ?.find(m => m.type.includes('bodymatter') || m.type.includes('text'))
@@ -392,10 +401,6 @@ export class View extends HTMLElement {
             for (const item of list) this.deleteAnnotation(item)
         this.#searchResults.clear()
     }
-    destroy() {
-        this.book.destroy?.()
-        this.renderer?.destroy?.()
-    }
 }
 
 customElements.define('foliate-view', View)