Introduce Metro device and plugin

Summary: Introduced Metro device and the possibility to directly connect to running Metro instances

Reviewed By: jknoxville

Differential Revision: D19445623

fbshipit-source-id: 31978d966a56007c48f795076d6651e23de0e38d

src/plugins/metro/index.tsx

@@ -0,0 +1,171 @@
+/**
+ * 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 React from 'react';
+import {
+  FlipperDevicePlugin,
+  Device,
+  View,
+  Button,
+  Toolbar,
+  ButtonGroup,
+  MetroDevice,
+} from 'flipper';
+
+type LogEntry = {};
+
+export type PersistedState = {
+  logs: LogEntry[];
+};
+
+type State = {};
+
+/*
+Flow types for events 
+
+/
+  A tagged union of all the actions that may happen and we may want to
+  report to the tool user.
+ /
+export type ReportableEvent =
+  | {
+      port: number,
+      projectRoots: $ReadOnlyArray<string>,
+      type: 'initialize_started',
+      ...
+    }
+  | {type: 'initialize_done', ...}
+  | {
+      type: 'initialize_failed',
+      port: number,
+      error: Error,
+      ...
+    }
+  | {
+      buildID: string,
+      type: 'bundle_build_done',
+      ...
+    }
+  | {
+      buildID: string,
+      type: 'bundle_build_failed',
+      ...
+    }
+  | {
+      buildID: string,
+      bundleDetails: BundleDetails,
+      type: 'bundle_build_started',
+      ...
+    }
+  | {
+      error: Error,
+      type: 'bundling_error',
+      ...
+    }
+  | {type: 'dep_graph_loading', ...}
+  | {type: 'dep_graph_loaded', ...}
+  | {
+      buildID: string,
+      type: 'bundle_transform_progressed',
+      transformedFileCount: number,
+      totalFileCount: number,
+      ...
+    }
+  | {
+      type: 'global_cache_error',
+      error: Error,
+      ...
+    }
+  | {
+      type: 'global_cache_disabled',
+      reason: GlobalCacheDisabledReason,
+      ...
+    }
+  | {type: 'transform_cache_reset', ...}
+  | {
+      type: 'worker_stdout_chunk',
+      chunk: string,
+      ...
+    }
+  | {
+      type: 'worker_stderr_chunk',
+      chunk: string,
+      ...
+    }
+  | {
+      type: 'hmr_client_error',
+      error: Error,
+      ...
+    }
+  | {
+      type: 'client_log',
+      level:
+        | 'trace'
+        | 'info'
+        | 'warn'
+        | 'error'
+        | 'log'
+        | 'group'
+        | 'groupCollapsed'
+        | 'groupEnd'
+        | 'debug',
+      data: Array<mixed>,
+      ...
+    };
+*/
+
+export default class MetroPlugin extends FlipperDevicePlugin<
+  State,
+  any,
+  PersistedState
+> {
+  static supportsDevice(device: Device) {
+    return device.os === 'Metro';
+  }
+
+  get ws(): WebSocket {
+    return (this.device as MetroDevice).ws;
+  }
+
+  sendCommand(command: string) {
+    if (this.ws) {
+      this.ws.send(
+        JSON.stringify({
+          version: 2,
+          type: 'command',
+          command,
+        }),
+      );
+    }
+  }
+
+  render() {
+    return (
+      <View>
+        <Toolbar>
+          <ButtonGroup>
+            Work-in-progress
+            <Button
+              onClick={() => {
+                this.sendCommand('reload');
+              }}>
+              Reload RN
+            </Button>
+            <Button
+              onClick={() => {
+                this.sendCommand('devMenu');
+              }}>
+              Dev Menu
+            </Button>
+          </ButtonGroup>
+        </Toolbar>
+      </View>
+    );
+  }
+}

src/plugins/metro/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "Metro",
+  "version": "0.1.0",
+  "description": "A plugin to manage React Native applications served trough Metro",
+  "main": "index.tsx",
+  "repository": "https://github.com/facebook/flipper",
+  "license": "MIT",
+  "keywords": [
+    "flipper-plugin",
+    "react-native",
+    "metro"
+  ],
+  "title": "Metro Bundler",
+  "bugs": {
+    "email": "mweststrate@fb.com"
+  },
+  "dependencies": {}
+}