Introduce onDestroy hook

Summary: This diff introduces the `onDestroy` hook that can be used by plugins to listen to the event where a plugin is cleaned up (either because it is disabled, or because the client is being cleaned up)

Reviewed By: jknoxville

Differential Revision: D22208121

fbshipit-source-id: 9c4951ae671be611f21da171c548d4054c481166

desktop/flipper-plugin/src/plugin/Plugin.tsx

@@ -7,7 +7,8 @@
  * @format
  */
 
-import {PluginDetails} from 'flipper-plugin-lib';
+import {SandyPluginDefinition} from './SandyPluginDefinition';
+import {EventEmitter} from 'events';
 
 type EventsContract = Record<string, any>;
 type MethodsContract = Record<string, (params: any) => Promise<any>>;
@@ -16,13 +17,18 @@ type MethodsContract = Record<string, (params: any) => Promise<any>>;
  * API available to a plugin factory
  */
 export interface FlipperClient<
-  Events extends EventsContract,
-  Methods extends MethodsContract
-> {}
+  Events extends EventsContract = {},
+  Methods extends MethodsContract = {}
+> {
+  /**
+   * the onDestroy event is fired whenever a client is unloaded from Flipper, or a plugin is disabled.
+   */
+  onDestroy(cb: () => void): void;
+}
 
 /**
  * Internal API exposed by Flipper, and wrapped by FlipperPluginInstance to be passed to the
- * Plugin Factory
+ * Plugin Factory. For internal purposes only
  */
 interface RealFlipperClient {}
 
@@ -33,15 +39,6 @@ export type FlipperPluginFactory<
 
 export type FlipperPluginComponent = React.FC<{}>;
 
-export type FlipperPluginModule = {
-  /** the factory function that initializes a plugin instance */
-  plugin: FlipperPluginFactory<any, any>;
-  /** the component type that can render this plugin */
-  Component: FlipperPluginComponent;
-  // TODO: support device plugins T68738317
-  // devicePlugin: FlipperPluginFactory
-};
-
 export class SandyPluginInstance {
   /** base client provided by Flipper */
   realClient: RealFlipperClient;
@@ -50,7 +47,9 @@ export class SandyPluginInstance {
   /** the original plugin definition */
   definition: SandyPluginDefinition;
   /** the plugin instance api as used inside components and such  */
-  instanceApi: object;
+  instanceApi: any;
+
+  events = new EventEmitter();
 
   constructor(
     realClient: RealFlipperClient,
@@ -58,7 +57,11 @@ export class SandyPluginInstance {
   ) {
     this.realClient = realClient;
     this.definition = definition;
-    this.client = {};
+    this.client = {
+      onDestroy: (cb) => {
+        this.events.on('destroy', cb);
+      },
+    };
     this.instanceApi = definition.module.plugin(this.client);
   }
 
@@ -71,84 +74,10 @@ export class SandyPluginInstance {
   }
 
   destroy() {
-    // TODO: T68683507
+    this.events.emit('destroy');
   }
 
   toJSON() {
     // TODO: T68683449
   }
 }
-
-/**
- * A sandy plugin definitions represents a loaded plugin definition, storing two things:
- * the loaded JS module, and the meta data (typically coming from package.json).
- *
- * Also delegates some of the standard plugin functionality to have a similar public static api as FlipperPlugin
- */
-export class SandyPluginDefinition {
-  id: string;
-  module: FlipperPluginModule;
-  details: PluginDetails;
-
-  // TODO: Implement T68683449
-  exportPersistedState:
-    | ((
-        callClient: (method: string, params?: any) => Promise<any>,
-        persistedState: any, // TODO: type StaticPersistedState | undefined,
-        store: any, // TODO: ReduxState | undefined,
-        idler?: any, // TODO: Idler,
-        statusUpdate?: (msg: string) => void,
-        supportsMethod?: (method: string) => Promise<boolean>,
-      ) => Promise<any /* TODO: StaticPersistedState | undefined */>)
-    | undefined = undefined;
-
-  constructor(details: PluginDetails, module: FlipperPluginModule) {
-    this.id = details.id;
-    this.details = details;
-    if (!module.plugin || typeof module.plugin !== 'function') {
-      throw new Error(
-        `Flipper plugin '${this.id}' should export named function called 'plugin'`,
-      );
-    }
-    if (!module.Component || typeof module.Component !== 'function') {
-      throw new Error(
-        `Flipper plugin '${this.id}' should export named function called 'Component'`,
-      );
-    }
-    this.module = module;
-    this.module.Component.displayName = `FlipperPlugin(${this.id})`;
-  }
-
-  get packageName() {
-    return this.details.name;
-  }
-
-  get title() {
-    return this.details.title;
-  }
-
-  get icon() {
-    return this.details.icon;
-  }
-
-  get category() {
-    return this.details.category;
-  }
-
-  get gatekeeper() {
-    return this.details.gatekeeper;
-  }
-
-  get version() {
-    return this.details.version;
-  }
-
-  get isDefault() {
-    return this.details.isDefault;
-  }
-
-  get keyboardActions() {
-    // TODO: T68882551 support keyboard actions
-    return [];
-  }
-}

desktop/flipper-plugin/src/plugin/SandyPluginDefinition.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {PluginDetails} from 'flipper-plugin-lib';
+import {FlipperPluginFactory, FlipperPluginComponent} from './Plugin';
+
+/**
+ * FlipperPluginModule describe the exports that are provided by a typical Flipper Desktop plugin
+ */
+export type FlipperPluginModule = {
+  /** the factory function that initializes a plugin instance */
+  plugin: FlipperPluginFactory<any, any>;
+  /** the component type that can render this plugin */
+  Component: FlipperPluginComponent;
+  // TODO: support device plugins T68738317
+  // devicePlugin: FlipperPluginFactory
+};
+
+/**
+ * A sandy plugin definitions represents a loaded plugin definition, storing two things:
+ * the loaded JS module, and the meta data (typically coming from package.json).
+ *
+ * Also delegates some of the standard plugin functionality to have a similar public static api as FlipperPlugin
+ */
+export class SandyPluginDefinition {
+  id: string;
+  module: FlipperPluginModule;
+  details: PluginDetails;
+
+  // TODO: Implement T68683449
+  exportPersistedState:
+    | ((
+        callClient: (method: string, params?: any) => Promise<any>,
+        persistedState: any, // TODO: type StaticPersistedState | undefined,
+        store: any, // TODO: ReduxState | undefined,
+        idler?: any, // TODO: Idler,
+        statusUpdate?: (msg: string) => void,
+        supportsMethod?: (method: string) => Promise<boolean>,
+      ) => Promise<any /* TODO: StaticPersistedState | undefined */>)
+    | undefined = undefined;
+
+  constructor(details: PluginDetails, module: FlipperPluginModule) {
+    this.id = details.id;
+    this.details = details;
+    if (!module.plugin || typeof module.plugin !== 'function') {
+      throw new Error(
+        `Flipper plugin '${this.id}' should export named function called 'plugin'`,
+      );
+    }
+    if (!module.Component || typeof module.Component !== 'function') {
+      throw new Error(
+        `Flipper plugin '${this.id}' should export named function called 'Component'`,
+      );
+    }
+    this.module = module;
+    this.module.Component.displayName = `FlipperPlugin(${this.id})`;
+  }
+
+  get packageName() {
+    return this.details.name;
+  }
+
+  get title() {
+    return this.details.title;
+  }
+
+  get icon() {
+    return this.details.icon;
+  }
+
+  get category() {
+    return this.details.category;
+  }
+
+  get gatekeeper() {
+    return this.details.gatekeeper;
+  }
+
+  get version() {
+    return this.details.version;
+  }
+
+  get isDefault() {
+    return this.details.isDefault;
+  }
+
+  get keyboardActions() {
+    // TODO: T68882551 support keyboard actions
+    return [];
+  }
+}