feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

app/assets/javascripts/preferences/panes/ExtensionPane.tsx

@@ -1,12 +1,13 @@
-import { PreferencesGroup, PreferencesSegment } from "@/preferences/components";
-import { WebApplication } from "@/ui_models/application";
-import { SNComponent } from "@standardnotes/snjs/dist/@types";
-import { observer } from "mobx-react-lite";
-import { FunctionComponent } from "preact";
-import { ExtensionItem } from "./extensions-segments";
+import { PreferencesGroup, PreferencesSegment } from '@/preferences/components';
+import { WebApplication } from '@/ui_models/application';
+import { ComponentViewer, SNComponent } from '@standardnotes/snjs/dist/@types';
+import { observer } from 'mobx-react-lite';
+import { FunctionComponent } from 'preact';
+import { ExtensionItem } from './extensions-segments';
 import { ComponentView } from '@/components/ComponentView';
 import { AppState } from '@/ui_models/app_state';
 import { PreferencesMenu } from '@/preferences/PreferencesMenu';
+import { useEffect, useState } from 'preact/hooks';
 
 interface IProps {
   application: WebApplication;
@@ -17,7 +18,17 @@ interface IProps {
 
 export const ExtensionPane: FunctionComponent<IProps> = observer(
   ({ extension, application, appState, preferencesMenu }) => {
-    const latestVersion = preferencesMenu.extensionsLatestVersions.getVersion(extension);
+    const [componentViewer] = useState<ComponentViewer>(
+      application.componentManager.createComponentViewer(extension)
+    );
+    const latestVersion =
+      preferencesMenu.extensionsLatestVersions.getVersion(extension);
+
+    useEffect(() => {
+      return () => {
+        application.componentManager.destroyComponentViewer(componentViewer);
+      };
+    }, [application, componentViewer]);
 
     return (
       <div className="preferences-extension-pane color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
@@ -28,15 +39,18 @@ export const ExtensionPane: FunctionComponent<IProps> = observer(
                 application={application}
                 extension={extension}
                 first={false}
-                uninstall={() => application.deleteItem(extension).then(() => preferencesMenu.loadExtensionsPanes())}
-                toggleActivate={() => application.toggleComponent(extension).then(() => preferencesMenu.loadExtensionsPanes())}
+                uninstall={() =>
+                  application
+                    .deleteItem(extension)
+                    .then(() => preferencesMenu.loadExtensionsPanes())
+                }
                 latestVersion={latestVersion}
               />
               <PreferencesSegment>
                 <ComponentView
                   application={application}
                   appState={appState}
-                  componentUuid={extension.uuid}
+                  componentViewer={componentViewer}
                 />
               </PreferencesSegment>
             </PreferencesGroup>
@@ -44,4 +58,5 @@ export const ExtensionPane: FunctionComponent<IProps> = observer(
         </div>
       </div>
     );
-  });
+  }
+);