example-extension: added extension.registerPage(), clean up

Signed-off-by: Roman <ixrock@gmail.com>

src/extensions/example-extension/example-extension.tsx

@@ -2,31 +2,22 @@ import { Button, DynamicPageType, Icon, LensExtension } from "@lens/extensions";
 import React from "react";
 import path from "path";
 
-let extension: ExampleExtension; // todo: provide instance from context
-
 export default class ExampleExtension extends LensExtension {
-  protected unRegisterPage = Function();
-
   onActivate() {
-    extension = this
+    console.log('EXAMPLE EXTENSION: ACTIVATED', this.getMeta());
-    console.log('EXAMPLE EXTENSION: ACTIVATE', this.getMeta())
+    this.registerPage({
-    const { dynamicPages } = this.runtime;
-
-    this.unRegisterPage = dynamicPages.register({
       type: DynamicPageType.CLUSTER,
       path: "/extension-example",
       menuTitle: "Example Extension",
       components: {
-        Page: ExtensionPage,
+        Page: () => <ExtensionPage extension={this}/>,
         MenuIcon: ExtensionIcon,
       }
     })
   }
 
   onDeactivate() {
-    extension = null;
+    console.log('EXAMPLE EXTENSION: DEACTIVATED', this.getMeta());
-    console.log('EXAMPLE EXTENSION: DEACTIVATE', this.getMeta());
-    this.unRegisterPage();
   }
 }
 
@@ -34,14 +25,15 @@ export function ExtensionIcon(props: {} /*IconProps |*/) {
   return <Icon {...props} material="camera" tooltip={path.basename(__filename)}/>
 }
 
-export class ExtensionPage extends React.Component {
+export class ExtensionPage extends React.Component<{ extension: ExampleExtension }> {
   deactivate = () => {
+    const { extension } = this.props;
     extension.runtime.navigate("/")
     extension.disable();
   }
 
   render() {
-    const { MainLayout } = extension.runtime.components;
+    const { MainLayout } = this.props.extension.runtime.components;
     return (
       <MainLayout className="ExampleExtension">
         <div className="flex column gaps align-flex-start">

src/extensions/extension-api.ts

@@ -2,7 +2,7 @@
 export type { LensRuntimeRendererEnv } from "./lens-runtime";
 
 // APIs
-export * from "./extension"
+export * from "./lens-extension"
 export { DynamicPageType } from "./register-page";
 
 // Common UI components

src/extensions/extension-store.ts

@@ -3,8 +3,8 @@ import path from "path";
 import fs from "fs-extra";
 import { action, observable, reaction, toJS, } from "mobx";
 import { BaseStore } from "../common/base-store";
-import { ExtensionId, ExtensionManifest, ExtensionVersion, LensExtension } from "./extension";
+import { ExtensionId, ExtensionManifest, ExtensionVersion, LensExtension } from "./lens-extension";
-import { isDevelopment, isProduction, isTestEnv } from "../common/vars";
+import { isDevelopment } from "../common/vars";
 import logger from "../main/logger";
 
 export interface ExtensionStoreModel {
@@ -47,7 +47,7 @@ export class ExtensionStore extends BaseStore<ExtensionStoreModel> {
     if (isDevelopment) {
       return path.resolve(__static, "../src/extensions");
     }
-    return path.resolve(__static, "../extensions"); //todo figure out prod
+    return path.resolve(__static, "../extensions");
   }
 
   async load() {

src/extensions/lens-extension.ts

@@ -1,17 +1,20 @@
 import type { ExtensionModel } from "./extension-store";
 import type { LensRuntimeRendererEnv } from "./lens-runtime";
+import type { PageRegistration } from "./register-page";
 import { readJsonSync } from "fs-extra";
 import { action, observable, toJS } from "mobx";
 import extensionManifest from "./example-extension/package.json"
 import logger from "../main/logger";
 
-export type ExtensionId = string; // instance-id or abs path to "%lens-extension/manifest.json"
+export type ExtensionId = string | ExtensionPackageJsonPath;
+export type ExtensionPackageJsonPath = string;
 export type ExtensionVersion = string | number;
 export type ExtensionManifest = typeof extensionManifest & ExtensionModel;
 
 export class LensExtension implements ExtensionModel {
   public id: ExtensionId;
   public updateUrl: string;
+  protected disposers: Function[] = [];
 
   @observable name = "";
   @observable description = "";
@@ -48,6 +51,8 @@ export class LensExtension implements ExtensionModel {
     this.onDeactivate();
     this.isEnabled = false;
     this.runtime = null;
+    this.disposers.forEach(cleanUp => cleanUp());
+    this.disposers.length = 0;
     console.log(`[EXTENSION]: disabled ${this.name}@${this.version}`, this.getMeta());
   }
 
@@ -99,4 +104,12 @@ export class LensExtension implements ExtensionModel {
       recurseEverything: true,
     })
   }
+
+  // Runtime helpers
+  protected registerPage(params: PageRegistration, autoDisable = true) {
+    const dispose = this.runtime.dynamicPages.register(params);
+    if (autoDisable) {
+      this.disposers.push(dispose);
+    }
+  }
 }