Refactor Notebook and Profile modal controllers to use PreactContainer

src/annotator/notebook.tsx

-import { render } from 'preact';
-
 import type { Destroyable } from '../types/annotator';
 import NotebookModal from './components/NotebookModal';
 import type { NotebookConfig } from './components/NotebookModal';
 import type { EventBus } from './util/emitter';
-import { createShadowRoot } from './util/shadow-root';
+import { PreactContainer } from './util/preact-container';
 
 export class Notebook implements Destroyable {
-  private _outerContainer: HTMLElement;
-  private _shadowRoot: ShadowRoot;
+  private _container: PreactContainer;
 
   /**
    * @param eventBus - Enables communication between components sharing the
@@ -19,22 +16,14 @@ export class Notebook implements Destroyable {
     eventBus: EventBus,
     config: NotebookConfig,
   ) {
-    /**
-     * Un-styled shadow host for the notebook content.
-     * This isolates the notebook from the page's styles.
-     */
-    this._outerContainer = document.createElement('hypothesis-notebook');
-    element.appendChild(this._outerContainer);
-    this._shadowRoot = createShadowRoot(this._outerContainer);
-
-    render(
-      <NotebookModal eventBus={eventBus} config={config} />,
-      this._shadowRoot,
-    );
+    this._container = new PreactContainer('notebook', () => (
+      <NotebookModal eventBus={eventBus} config={config} />
+    ));
+    element.append(this._container.element);
+    this._container.render();
   }
 
   destroy() {
-    render(null, this._shadowRoot);
-    this._outerContainer.remove();
+    this._container.destroy();
   }
 }

src/annotator/profile.tsx

-import { render } from 'preact';
-
 import type { Destroyable } from '../types/annotator';
 import type { ProfileConfig } from './components/ProfileModal';
 import ProfileModal from './components/ProfileModal';
 import type { EventBus } from './util/emitter';
-import { createShadowRoot } from './util/shadow-root';
+import { PreactContainer } from './util/preact-container';
 
 export class Profile implements Destroyable {
-  private _outerContainer: HTMLElement;
-  public shadowRoot: ShadowRoot;
+  private _container: PreactContainer;
 
   constructor(element: HTMLElement, eventBus: EventBus, config: ProfileConfig) {
-    this._outerContainer = document.createElement('hypothesis-profile');
-    element.appendChild(this._outerContainer);
-    this.shadowRoot = createShadowRoot(this._outerContainer);
-
-    render(
-      <ProfileModal eventBus={eventBus} config={config} />,
-      this.shadowRoot,
-    );
+    this._container = new PreactContainer('profile', () => (
+      <ProfileModal eventBus={eventBus} config={config} />
+    ));
+    element.append(this._container.element);
+    this._container.render();
   }
 
   destroy(): void {
-    render(null, this.shadowRoot);
-    this._outerContainer.remove();
+    this._container.destroy();
   }
 }

src/annotator/test/notebook-test.js

@@ -47,7 +47,7 @@ describe('Notebook', () => {
     it('creates the container', () => {
       assert.isFalse(container.hasChildNodes());
       const notebook = createNotebook();
-      const shadowRoot = notebook._outerContainer.shadowRoot;
+      const shadowRoot = notebook._container.element.shadowRoot;
       assert.isNotNull(shadowRoot);
       assert.isNotNull(shadowRoot.querySelector('#notebook-modal'));
     });

src/annotator/test/profile-test.js

@@ -47,7 +47,7 @@ describe('Profile', () => {
     it('creates the container', () => {
       assert.isFalse(container.hasChildNodes());
       const profile = createProfile();
-      const shadowRoot = profile._outerContainer.shadowRoot;
+      const shadowRoot = profile._container.element.shadowRoot;
       assert.isNotNull(shadowRoot);
       assert.isNotNull(shadowRoot.querySelector('#profile-modal'));
     });