Convert plugin.js to plugin.tsx

Summary:
* Deletes plugin.js
* Adds plugin.tsx
* Adds plugin flow-typed module that has the old flow types

Reviewed By: passy

Differential Revision: D16668067

fbshipit-source-id: b2f0ce47c4cf7125b4e352821e921b97675d12a9

.flowconfig

@@ -20,6 +20,8 @@ module.use_strict=true
 emoji=true
 all=true
 include_warnings=true
+module.name_mapper='^.*plugin\.flow\.js$' -> 'plugin'
+module.name_mapper='^.*plugin\.tsx$' -> 'plugin'
 module.name_mapper='^\(.*\)\.tsx$' -> 'TsStub'
 module.name_mapper='flipper' -> '<PROJECT_ROOT>/src/index.js'
 suppress_type=$FlowFixMe

flow-typed/plugin.js

@@ -0,0 +1,175 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+// This has been taken from the old plugin.js and manually stripped of
+// implementation so only the types remain.
+// It's not generated using flowgen because the typescript def is slightly weaker
+// than the original flow one. (Persisted State generic param being used
+// in reducers etc.
+
+declare module plugin {
+  import type {KeyboardActions} from './MenuBar.js';
+  import type {App} from './App.js';
+  import type {Logger} from './fb-interfaces/Logger.js';
+  import type Client from './Client.js';
+  import type {Store, MiddlewareAPI} from './reducers/index.js';
+  import type {MetricType} from './utils/exportMetrics.js';
+  import type {Node} from 'react';
+  import type BaseDevice from './devices/BaseDevice.js';
+  import type AndroidDevice from './devices/AndroidDevice';
+  import type IOSDevice from './devices/IOSDevice';
+
+  // This function is intended to be called from outside of the plugin.
+  // If you want to `call` from the plugin use, this.client.call
+  declare function callClient(
+    client: Client,
+    id: string,
+  ): (string, ?Object) => Promise<Object>;
+
+  declare interface PluginClient {
+    // eslint-disable-next-line
+    send(method: string, params?: Object): void;
+    // eslint-disable-next-line
+    call(method: string, params?: Object): Promise<any>;
+    // eslint-disable-next-line
+    subscribe(method: string, callback: (params: any) => void): void;
+    // eslint-disable-next-line
+    supportsMethod(method: string): Promise<boolean>;
+  }
+
+  declare type PluginTarget = BaseDevice | Client;
+
+  declare type Notification = {|
+    id: string,
+    title: string,
+    message: string | Node,
+    severity: 'warning' | 'error',
+    timestamp?: number,
+    category?: string,
+    action?: string,
+  |};
+
+  declare type Props<T> = {
+    logger: Logger,
+    persistedState: T,
+    setPersistedState: (state: $Shape<T>) => void,
+    target: PluginTarget,
+    deepLinkPayload: ?string,
+    selectPlugin: (pluginID: string, deepLinkPayload: ?string) => boolean,
+    isArchivedDevice: boolean,
+    selectedApp: ?string,
+  };
+
+  declare class FlipperBasePlugin<
+    State = *,
+    Actions = *,
+    PersistedState = *,
+  > extends React.Component<Props<PersistedState>, State> {
+    static title: ?string;
+    static id: string;
+    static icon: ?string;
+    static gatekeeper: ?string;
+    static entry: ?string;
+    static bugs: ?{
+      email?: string,
+      url?: string,
+    };
+    static keyboardActions: ?KeyboardActions;
+    static screenshot: ?string;
+    static defaultPersistedState: PersistedState;
+    static persistedStateReducer: ?(
+      persistedState: PersistedState,
+      method: string,
+      data: Object,
+    ) => $Shape<PersistedState>;
+    static metricsReducer: ?(
+      persistedState: PersistedState,
+    ) => Promise<MetricType>;
+    static exportPersistedState: ?(
+      callClient: (string, ?Object) => Promise<Object>,
+      persistedState: ?PersistedState,
+      store: ?MiddlewareAPI,
+    ) => Promise<?PersistedState>;
+    static getActiveNotifications: ?(
+      persistedState: PersistedState,
+    ) => Array<Notification>;
+    static onRegisterDevice: ?(
+      store: Store,
+      baseDevice: BaseDevice,
+      setPersistedState: (
+        pluginKey: string,
+        newPluginState: ?PersistedState,
+      ) => void,
+    ) => void;
+    // forbid instance properties that should be static
+    title: empty;
+    id: empty;
+    persist: empty;
+    icon: empty;
+    keyboardActions: empty;
+    screenshot: empty;
+
+    reducers: {
+      [actionName: string]: (state: State, actionData: Object) => $Shape<State>,
+    };
+    app: App;
+    onKeyboardAction: ?(action: string) => void;
+
+    toJSON(): string;
+
+    init(): void;
+    teardown(): void;
+    computeNotifications(props: Props<*>, state: State): Array<Notification>;
+    // methods to be overridden by subclasses
+    _init(): void;
+    _teardown(): void;
+
+    dispatchAction(actionData: Actions): void;
+  }
+
+  declare class FlipperDevicePlugin<
+    S = *,
+    A = *,
+    P = *,
+  > extends FlipperBasePlugin<S, A, P> {
+    device: BaseDevice;
+
+    constructor(props: Props<P>): void;
+
+    _init(): void;
+
+    _teardown(): void;
+
+    static supportsDevice(device: BaseDevice): boolean;
+  }
+
+  declare class FlipperPlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
+    S,
+    A,
+    P,
+  > {
+    constructor(props: Props<P>): void;
+
+    subscriptions: Array<{
+      method: string,
+      callback: Function,
+    }>;
+
+    client: PluginClient;
+    realClient: Client;
+
+    getDevice(): Promise<BaseDevice>;
+
+    getAndroidDevice(): AndroidDevice;
+
+    getIOSDevice(): IOSDevice;
+
+    _teardown(): void;
+
+    _init(): void;
+  }
+}

src/Client.tsx

@@ -5,11 +5,7 @@
  * @format
  */
 
-import {
+import {FlipperPlugin, FlipperDevicePlugin} from './plugin';
-  FlipperPlugin,
-  FlipperBasePlugin,
-  FlipperDevicePlugin,
-} from './plugin.js';
 import BaseDevice, {OS} from './devices/BaseDevice.js';
 import {App} from './App.js';
 import {Logger} from './fb-interfaces/Logger.js';
@@ -315,7 +311,9 @@ export default class Client extends EventEmitter {
         const params = data.params;
         invariant(params, 'expected params');
 
-        const persistingPlugin: typeof FlipperBasePlugin | null =
+        const persistingPlugin:
+          | typeof FlipperPlugin
+          | typeof FlipperDevicePlugin =
           this.store.getState().plugins.clientPlugins.get(params.api) ||
           this.store.getState().plugins.devicePlugins.get(params.api);
         if (persistingPlugin && persistingPlugin.persistedStateReducer) {

src/MenuBar.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {FlipperPlugin, FlipperDevicePlugin} from './plugin.js';
+import type {FlipperPlugin, FlipperDevicePlugin} from './plugin.tsx';
 import {showOpenDialog} from './utils/exportData.js';
 import {
   setExportDataToFileActiveSheet,

src/PluginContainer.js

@@ -4,10 +4,10 @@
  * LICENSE file in the root directory of this source tree.
  * @format
  */
-import type {FlipperPlugin, FlipperDevicePlugin} from './plugin.js';
+import type {FlipperPlugin, FlipperDevicePlugin} from './plugin.tsx';
 import type {Logger} from './fb-interfaces/Logger';
 import BaseDevice from './devices/BaseDevice.js';
-import type {Props as PluginProps} from './plugin';
+import type {Props as PluginProps} from './plugin.tsx';
 import {pluginKey as getPluginKey} from './reducers/pluginStates.tsx';
 import Client from './Client.tsx';
 import {

src/__tests__/createTablePlugin.node.js

@@ -10,7 +10,7 @@ import {createTablePlugin} from '../createTablePlugin.js';
 import type {TableRows_immutable} from 'flipper';
 
 //import type {PersistedState, RowData} from '../createTablePlugin.js';
-import {FlipperPlugin} from '../plugin.js';
+import {FlipperPlugin} from '../plugin.tsx';
 
 import {List, Map as ImmutableMap} from 'immutable';
 

src/chrome/BugReporterDialog.js

@@ -6,7 +6,7 @@
  */
 
 import type BugReporter from '../fb-stubs/BugReporter.js';
-import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin';
+import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin.tsx';
 import {Fragment, Component} from 'react';
 import {connect} from 'react-redux';
 import {

src/chrome/MainSidebar.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import {FlipperBasePlugin} from '../plugin.js';
+import {FlipperBasePlugin} from '../plugin.tsx';
 import config from '../fb-stubs/config';
 import type BaseDevice from '../devices/BaseDevice.js';
 import type Client from '../Client.tsx';

src/chrome/PluginDebugger.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin';
+import type {FlipperDevicePlugin, FlipperPlugin} from '../plugin.tsx';
 import type {PluginDefinition} from '../dispatcher/plugins';
 import type Client from '../Client.tsx';
 import type {TableBodyRow} from '../ui/components/table/types';

src/createTablePlugin.js

@@ -15,7 +15,7 @@ import type {
 import FlexColumn from './ui/components/FlexColumn';
 import Button from './ui/components/Button';
 import DetailSidebar from './chrome/DetailSidebar';
-import {FlipperPlugin} from './plugin';
+import {FlipperPlugin} from './plugin.tsx';
 import SearchableTable_immutable from './ui/components/searchable/SearchableTable_immutable';
 import textContent from './utils/textContent.js';
 import createPaste from './fb-stubs/createPaste.js';

src/dispatcher/__tests__/TestPlugin.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import {FlipperPlugin} from '../../plugin.js';
+import {FlipperPlugin} from '../../plugin.tsx';
 
 export default class extends FlipperPlugin {
   static id = 'Static ID';

src/dispatcher/__tests__/plugins.electron.js

@@ -13,7 +13,7 @@ import dispatcher, {
 } from '../plugins';
 import path from 'path';
 import {remote} from 'electron';
-import {FlipperPlugin} from '../../plugin';
+import {FlipperPlugin} from '../../plugin.tsx';
 import reducers from '../../reducers/index.tsx';
 import {init as initLogger} from '../../fb-stubs/Logger.js';
 import configureStore from 'redux-mock-store';

src/dispatcher/notifications.js

@@ -8,7 +8,7 @@
 import type {Store} from '../reducers/index.tsx';
 import type {Logger} from '../fb-interfaces/Logger.js';
 import type {PluginNotification} from '../reducers/notifications.tsx';
-import type {FlipperPlugin, FlipperDevicePlugin} from '../plugin.js';
+import type {FlipperPlugin, FlipperDevicePlugin} from '../plugin.tsx';
 import isHeadless from '../utils/isHeadless.js';
 import {ipcRenderer} from 'electron';
 import {selectPlugin} from '../reducers/connections.tsx';

src/dispatcher/plugins.js

@@ -7,7 +7,7 @@
 
 import type {Store} from '../reducers/index.tsx';
 import type {Logger} from '../fb-interfaces/Logger.js';
-import type {FlipperPlugin, FlipperDevicePlugin} from '../plugin.js';
+import type {FlipperPlugin, FlipperDevicePlugin} from '../plugin.tsx';
 import type {State} from '../reducers/plugins.tsx';
 
 import React from 'react';
@@ -21,7 +21,7 @@ import {
 } from '../reducers/plugins.tsx';
 import {remote} from 'electron';
 import GK from '../fb-stubs/GK';
-import {FlipperBasePlugin} from '../plugin.js';
+import {FlipperBasePlugin} from '../plugin.tsx';
 import {setupMenuBar} from '../MenuBar.js';
 import path from 'path';
 import {default as config} from '../utils/processConfig.js';

src/index.js

@@ -16,8 +16,8 @@ export {
   FlipperPlugin,
   FlipperDevicePlugin,
   callClient,
-} from './plugin.js';
+} from './plugin.tsx';
-export type {PluginClient, Props} from './plugin.js';
+export type {PluginClient, Props} from './plugin.tsx';
 export type {MetricType} from './utils/exportMetrics.js';
 export {default as Client} from './Client.tsx';
 export {clipboard} from 'electron';

src/plugin.tsx

@@ -5,26 +5,21 @@
  * @format
  */
 
-import type {KeyboardActions} from './MenuBar.js';
+import {KeyboardActions} from './MenuBar.js';
-import type {App} from './App.js';
+import {App} from './App.js';
-import type {Logger} from './fb-interfaces/Logger.js';
+import {Logger} from './fb-interfaces/Logger.js';
-import type Client from './Client.tsx';
+import Client from './Client';
-import type {Store, MiddlewareAPI} from './reducers/index.tsx';
+import {Store, MiddlewareAPI} from './reducers/index';
-import type {MetricType} from './utils/exportMetrics.js';
+import {MetricType} from './utils/exportMetrics.js';
-import React from 'react';
+import {ReactNode, Component} from 'react';
-import type {Node} from 'react';
 import BaseDevice from './devices/BaseDevice.js';
-import AndroidDevice from './devices/AndroidDevice';
-import IOSDevice from './devices/IOSDevice';
-
-const invariant = require('invariant');
 
 // This function is intended to be called from outside of the plugin.
 // If you want to `call` from the plugin use, this.client.call
 export function callClient(
   client: Client,
   id: string,
-): (string, ?Object) => Promise<Object> {
+): (string, params: Object | null) => Promise<Object> {
   return (method, params) => client.call(id, method, false, params);
 }
 
@@ -41,81 +36,88 @@ export interface PluginClient {
 
 type PluginTarget = BaseDevice | Client;
 
-export type Notification = {|
+export type Notification = {
-  id: string,
+  id: string;
-  title: string,
+  title: string;
-  message: string | Node,
+  message: string | ReactNode;
-  severity: 'warning' | 'error',
+  severity: 'warning' | 'error';
-  timestamp?: number,
+  timestamp?: number;
-  category?: string,
+  category?: string;
-  action?: string,
+  action?: string;
-|};
-
-export type Props<T> = {
-  logger: Logger,
-  persistedState: T,
-  setPersistedState: (state: $Shape<T>) => void,
-  target: PluginTarget,
-  deepLinkPayload: ?string,
-  selectPlugin: (pluginID: string, deepLinkPayload: ?string) => boolean,
-  isArchivedDevice: boolean,
-  selectedApp: ?string,
 };
 
-export class FlipperBasePlugin<
+export type Props<T> = {
-  State = *,
+  logger: Logger;
-  Actions = *,
+  persistedState: T;
-  PersistedState = *,
+  setPersistedState: (state: Partial<T>) => void;
-> extends React.Component<Props<PersistedState>, State> {
+  target: PluginTarget;
-  static title: ?string = null;
+  deepLinkPayload: string | null;
+  selectPlugin: (pluginID: string, deepLinkPayload: string | null) => boolean;
+  isArchivedDevice: boolean;
+  selectedApp: string | null;
+};
+
+export type BaseAction = {
+  type: string;
+};
+
+export abstract class FlipperBasePlugin<
+  State,
+  Actions extends BaseAction,
+  PersistedState
+> extends Component<Props<PersistedState>, State> {
+  abstract ['constructor']: any;
+  static title: string | null = null;
   static id: string = '';
-  static icon: ?string = null;
+  static icon: string | null = null;
-  static gatekeeper: ?string = null;
+  static gatekeeper: string | null = null;
-  static entry: ?string = null;
+  static entry: string | null = null;
-  static bugs: ?{
+  static bugs:
-    email?: string,
+    | ({
-    url?: string,
+        email?: string;
-  } = null;
+        url?: string;
-  static keyboardActions: ?KeyboardActions;
+      })
-  static screenshot: ?string;
+    | null = null;
-  static defaultPersistedState: PersistedState;
+  static keyboardActions: KeyboardActions | null;
-  static persistedStateReducer: ?(
+  static screenshot: string | null;
-    persistedState: PersistedState,
+  static defaultPersistedState: any;
-    method: string,
+  static persistedStateReducer:
-    data: Object,
+    | (<U>(persistedState: U, method: string, data: Object) => Partial<U>)
-  ) => $Shape<PersistedState>;
+    | null;
-  static metricsReducer: ?(
+  static metricsReducer: (<U>(persistedState: U) => Promise<MetricType>) | null;
-    persistedState: PersistedState,
+  static exportPersistedState:
-  ) => Promise<MetricType>;
+    | (<U>(
-  static exportPersistedState: ?(
+        callClient: (string, params: Object | null) => Promise<Object>,
-    callClient: (string, ?Object) => Promise<Object>,
+        persistedState: U | null,
-    persistedState: ?PersistedState,
+        store: MiddlewareAPI | null,
-    store: ?MiddlewareAPI,
+      ) => Promise<U>)
-  ) => Promise<?PersistedState>;
+    | null;
-  static getActiveNotifications: ?(
+  static getActiveNotifications:
-    persistedState: PersistedState,
+    | (<U>(persistedState: U) => Array<Notification>)
-  ) => Array<Notification>;
+    | null;
-  static onRegisterDevice: ?(
+  static onRegisterDevice:
-    store: Store,
+    | (<U>(
-    baseDevice: BaseDevice,
+        store: Store,
-    setPersistedState: (
+        baseDevice: BaseDevice,
-      pluginKey: string,
+        setPersistedState: (
-      newPluginState: ?PersistedState,
+          pluginKey: string,
-    ) => void,
+          newPluginState: U | null,
-  ) => void;
+        ) => void,
+      ) => void)
+    | null;
   // forbid instance properties that should be static
-  title: empty;
+  title: never;
-  id: empty;
+  id: never;
-  persist: empty;
+  persist: never;
-  icon: empty;
+  icon: never;
-  keyboardActions: empty;
+  keyboardActions: never;
-  screenshot: empty;
+  screenshot: never;
 
   reducers: {
-    [actionName: string]: (state: State, actionData: Object) => $Shape<State>,
+    [actionName: string]: (state: State, actionData: Object) => Partial<State>;
   } = {};
   app: App;
-  onKeyboardAction: ?(action: string) => void;
+  onKeyboardAction: ((action: string) => void) | null;
 
   toJSON() {
     return `<${this.constructor.name}#${this.constructor.id}>`;
@@ -124,7 +126,10 @@ export class FlipperBasePlugin<
   // methods to be overriden by plugins
   init(): void {}
   teardown(): void {}
-  computeNotifications(props: Props<*>, state: State): Array<Notification> {
+  computeNotifications(
+    _props: Props<PersistedState>,
+    _state: State,
+  ): Array<Notification> {
     return [];
   }
   // methods to be overridden by subclasses
@@ -148,11 +153,12 @@ export class FlipperBasePlugin<
   }
 }
 
-export class FlipperDevicePlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
+export class FlipperDevicePlugin<
   S,
-  A,
+  A extends BaseAction,
-  P,
+  P
-> {
+> extends FlipperBasePlugin<S, A, P> {
+  ['constructor']: typeof FlipperPlugin;
   device: BaseDevice;
 
   constructor(props: Props<P>) {
@@ -169,18 +175,19 @@ export class FlipperDevicePlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
     this.teardown();
   }
 
-  static supportsDevice(device: BaseDevice) {
+  static supportsDevice(_device: BaseDevice) {
     throw new Error(
       'supportsDevice is unimplemented in FlipperDevicePlugin class',
     );
   }
 }
 
-export class FlipperPlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
+export class FlipperPlugin<
   S,
-  A,
+  A extends BaseAction,
-  P,
+  P
-> {
+> extends FlipperBasePlugin<S, A, P> {
+  ['constructor']: typeof FlipperPlugin;
   constructor(props: Props<P>) {
     super(props);
     const {id} = this.constructor;
@@ -202,8 +209,8 @@ export class FlipperPlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
   }
 
   subscriptions: Array<{
-    method: string,
+    method: string;
-    callback: Function,
+    callback: Function;
   }>;
 
   client: PluginClient;
@@ -213,24 +220,6 @@ export class FlipperPlugin<S = *, A = *, P = *> extends FlipperBasePlugin<
     return this.realClient.device;
   }
 
-  getAndroidDevice(): AndroidDevice {
-    const device = this.getDevice();
-    invariant(
-      device != null && device instanceof AndroidDevice,
-      'expected android device',
-    );
-    return device;
-  }
-
-  getIOSDevice() {
-    const device = this.getDevice();
-    invariant(
-      device != null && device instanceof IOSDevice,
-      'expected ios device',
-    );
-    return device;
-  }
-
   _teardown() {
     // automatically unsubscribe subscriptions
     for (const {method, callback} of this.subscriptions) {

src/plugins/TableNativePlugin.js

@@ -19,7 +19,7 @@ import {
 import ErrorBlock from '../ui/components/ErrorBlock';
 import FlexColumn from '../ui/components/FlexColumn';
 import DetailSidebar from '../chrome/DetailSidebar';
-import {FlipperPlugin} from '../plugin';
+import {FlipperPlugin} from '../plugin.tsx';
 import SearchableTable from '../ui/components/searchable/SearchableTable';
 import textContent from '../utils/textContent.js';
 import createPaste from '../fb-stubs/createPaste.js';

src/plugins/crash_reporter/index.js

@@ -32,7 +32,7 @@ import fs from 'fs';
 import os from 'os';
 import util from 'util';
 import path from 'path';
-import type {Notification} from '../../plugin';
+import type {Notification} from '../../plugin.tsx';
 import type {Store, DeviceLogEntry, OS, Props} from 'flipper';
 import {Component} from 'react';
 

src/plugins/databases/ClientProtocol.js

@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {PluginClient} from '../../plugin';
+import type {PluginClient} from '../../plugin.tsx';
 import type {Value} from '../../ui/components/table/TypeBasedValueRenderer';
 
 type ClientCall<Params, Response> = Params => Promise<Response>;

src/plugins/example/index.js

@@ -7,7 +7,7 @@
  */
 
 import {Button, Input, FlipperPlugin, FlexColumn, styled, Text} from 'flipper';
-import type {Notification} from '../../plugin';
+import type {Notification} from '../../plugin.tsx';
 type DisplayMessageResponse = {
   greeting: string,
 };

src/plugins/fresco/__tests__/index.node.js

@@ -9,7 +9,7 @@ import FrescoPlugin from '../index.js';
 import type {PersistedState, ImageEventWithId} from '../index.js';
 import type {AndroidCloseableReferenceLeakEvent} from '../api.js';
 import type {MetricType} from 'flipper';
-import type {Notification} from '../../../plugin';
+import type {Notification} from '../../../plugin.tsx';
 
 function mockPersistedState(
   imageSizes: Array<{

src/plugins/fresco/index.js

@@ -31,7 +31,7 @@ import {
 } from 'flipper';
 import ImagesSidebar from './ImagesSidebar.js';
 import ImagePool from './ImagePool.js';
-import type {Notification} from '../../plugin';
+import type {Notification} from '../../plugin.tsx';
 
 export type ImageEventWithId = ImageEvent & {eventId: number};
 

src/plugins/logs/index.js

@@ -13,7 +13,7 @@ import type {
 } from 'flipper';
 import type {Counter} from './LogWatcher.js';
 import type {DeviceLogEntry} from '../../devices/BaseDevice.js';
-import type {Props as PluginProps} from '../../plugin';
+import type {Props as PluginProps} from '../../plugin.tsx';
 
 import {
   Text,

src/plugins/network/index.js

@@ -35,7 +35,7 @@ import {
 import RequestDetails from './RequestDetails.js';
 import {clipboard} from 'electron';
 import {URL} from 'url';
-import type {Notification} from '../../plugin';
+import type {Notification} from '../../plugin.tsx';
 
 type PersistedState = {|
   requests: {[id: RequestId]: Request},

src/reducers/__tests__/notifications.node.tsx

@@ -15,7 +15,9 @@ import {
   updateCategoryBlacklist,
 } from '../notifications';
 
-const notification = {
+import {Notification} from '../../plugin';
+
+const notification: Notification = {
   id: 'id',
   title: 'title',
   message: 'message',

src/reducers/__tests__/plugins.node.tsx

@@ -14,17 +14,18 @@ import {
   FlipperBasePlugin,
   FlipperPlugin,
   FlipperDevicePlugin,
-} from '../../plugin.js';
+  BaseAction,
+} from '../../plugin';
 
-const testBasePlugin = class extends FlipperBasePlugin {
+const testPlugin = class extends FlipperPlugin<any, BaseAction, any> {
   static id = 'TestPlugin';
 };
 
-const testPlugin = class extends FlipperPlugin {
+const testDevicePlugin = class extends FlipperDevicePlugin<
-  static id = 'TestPlugin';
+  any,
-};
+  BaseAction,
-
+  any
-const testDevicePlugin = class extends FlipperDevicePlugin {
+> {
   static id = 'TestDevicePlugin';
 };
 
@@ -73,22 +74,6 @@ test('do not add plugin twice', () => {
   expect(res.clientPlugins.size).toEqual(1);
 });
 
-test('do not add other classes', () => {
-  const res = reducer(
-    {
-      devicePlugins: new Map(),
-      clientPlugins: new Map(),
-      gatekeepedPlugins: [],
-      failedPlugins: [],
-      disabledPlugins: [],
-      selectedPlugins: [],
-    },
-    registerPlugins([testBasePlugin]),
-  );
-  expect(res.devicePlugins.size).toEqual(0);
-  expect(res.devicePlugins.size).toEqual(0);
-});
-
 test('add gatekeeped plugin', () => {
   const gatekeepedPlugins = [{name: 'plugin', out: 'out.js'}];
   const res = reducer(

src/reducers/plugins.tsx

@@ -5,7 +5,7 @@
  * @format
  */
 
-import {FlipperPlugin, FlipperDevicePlugin} from '../plugin.js';
+import {FlipperPlugin, FlipperDevicePlugin} from '../plugin';
 import {PluginDefinition} from '../dispatcher/plugins';
 
 export type State = {
@@ -64,10 +64,10 @@ export default function reducer(
 
       // $FlowFixMe Flow doesn't know prototype
       if (p.prototype instanceof FlipperDevicePlugin) {
-        // $FlowFixMe Flow doesn't know p must be Class<FlipperDevicePlugin> here
+        // @ts-ignore doesn't know p must be typeof FlipperDevicePlugin here
         devicePlugins.set(p.id, p);
       } else if (p.prototype instanceof FlipperPlugin) {
-        // $FlowFixMe Flow doesn't know p must be Class<FlipperPlugin> here
+        // @ts-ignore doesn't know p must be typeof FlipperPlugin here
         clientPlugins.set(p.id, p);
       }
     });

src/ui/components/console.js

@@ -17,7 +17,7 @@ import {
 } from '../index';
 import styled from '../styled/index';
 import type {TableBodyRow, TableRows} from 'flipper';
-import type {PluginClient} from '../../plugin';
+import type {PluginClient} from '../../plugin.tsx';
 
 type ValueWithType = {|
   type: string,

src/ui/components/elements-inspector/sidebar.js

@@ -6,7 +6,7 @@
  */
 
 import type {Element} from './ElementsInspector.js';
-import type {PluginClient} from '../../../plugin';
+import type {PluginClient} from '../../../plugin.tsx';
 import type Client from '../../../Client.tsx';
 import type {Logger} from '../../../fb-interfaces/Logger.js';
 import Panel from '../Panel.js';

src/utils/__tests__/exportData.electron.js

@@ -8,8 +8,8 @@
 import {default as BaseDevice} from '../../devices/BaseDevice';
 import {default as ArchivedDevice} from '../../devices/ArchivedDevice';
 import {processStore} from '../exportData';
-import {FlipperDevicePlugin} from '../../plugin.js';
+import {FlipperDevicePlugin} from '../../plugin.tsx';
-import type {Notification} from '../../plugin.js';
+import type {Notification} from '../../plugin.tsx';
 import type {ClientExport} from '../../Client.tsx';
 
 class TestDevicePlugin extends FlipperDevicePlugin {

src/utils/exportData.js

@@ -12,7 +12,7 @@ import type {PluginNotification} from '../reducers/notifications.tsx';
 import type {ClientExport} from '../Client.tsx';
 import type {State as PluginStatesState} from '../reducers/pluginStates.tsx';
 import {pluginKey} from '../reducers/pluginStates.tsx';
-import {FlipperDevicePlugin, FlipperPlugin, callClient} from '../plugin.js';
+import {FlipperDevicePlugin, FlipperPlugin, callClient} from '../plugin.tsx';
 import {default as BaseDevice} from '../devices/BaseDevice';
 import {default as ArchivedDevice} from '../devices/ArchivedDevice';
 import {default as Client} from '../Client.tsx';

src/utils/onRegisterDevice.js

@@ -5,7 +5,7 @@
  * @format
  */
 import type {Store} from '../reducers/index.tsx';
-import {FlipperPlugin, FlipperDevicePlugin} from '../plugin.js';
+import {FlipperPlugin, FlipperDevicePlugin} from '../plugin.tsx';
 import type BaseDevice from '../devices/BaseDevice.js';
 import {setPluginState} from '../reducers/pluginStates.tsx';
 import {getPersistedState} from '../utils/pluginUtils.js';

src/utils/pluginUtils.js

@@ -5,7 +5,7 @@
  * @format
  */
 import type BaseDevice from '../devices/BaseDevice.js';
-import {FlipperDevicePlugin, FlipperPlugin} from '../plugin.js';
+import {FlipperDevicePlugin, FlipperPlugin} from '../plugin.tsx';
 import type {State as PluginStatesState} from '../reducers/pluginStates.tsx';
 import {pluginsClassMap} from './exportData.js';
 import type {State as PluginsState} from '../reducers/plugins.tsx';