Create flipper-server-client package

Summary:
FlipperServerClient is a useful abstraction for any JS-based client of headless Flipper. No need to bundle it with flipper-frontend-core, as the rest is not useful for external clients.
Currently, I am planning to add it to jest-e2e to send commands to Flipper

Reviewed By: lblasa

Differential Revision: D40765668

fbshipit-source-id: af48710bb15444ac1ecd649fe9a2ab252f3088f3

desktop/app/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "flipper-common": "0.0.0",
+    "flipper-server-client": "0.0.0",
     "flipper-server-companion": "0.0.0",
     "flipper-server-core": "0.0.0",
     "flipper-frontend-core": "0.0.0",

desktop/app/src/init.tsx

@@ -17,7 +17,7 @@ import {
 import {
   createFlipperServerWithSocket,
   FlipperServerState,
-} from 'flipper-frontend-core';
+} from 'flipper-server-client';
 import {
   FlipperServerImpl,
   getEnvironmentInfo,
@@ -89,7 +89,7 @@ async function getExternalServer(url: string) {
   };
   const socket = new ReconnectingWebSocket(url, [], options);
   const server = await createFlipperServerWithSocket(
-    socket,
+    socket as WebSocket,
     (_state: FlipperServerState) => {},
   );
   return server;

desktop/app/tsconfig.json

@@ -17,6 +17,9 @@
     {
       "path": "../flipper-frontend-core"
     },
+    {
+      "path": "../flipper-server-client"
+    },
     {
       "path": "../flipper-server-companion"
     },

desktop/flipper-frontend-core/src/index.tsx

@@ -21,5 +21,4 @@ export * from './globalObject';
 export * from './plugins';
 export {getPluginKey} from './utils/pluginKey';
 export * from './flipperLibImplementation';
-export * from './client/FlipperServerClient';
 export {default as frontendCoreConstants} from './fb-stubs/constants';

desktop/flipper-server-client/README.md

@@ -0,0 +1,3 @@
+# flipper-server-client (TBD)
+
+Lightweight abstraction to connect to Flipper Server and provide an API to interact with it

desktop/flipper-server-client/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "flipper-server-client",
+  "version": "0.0.0",
+  "description": "Lightweight abstraction to connect to Flipper Server and provide an API to interact with it",
+  "repository": "facebook/flipper",
+  "main": "lib/index.js",
+  "flipperBundlerEntry": "src",
+  "types": "lib/index.d.ts",
+  "license": "MIT",
+  "bugs": "https://github.com/facebook/flipper/issues",
+  "dependencies": {
+    "eventemitter3": "^4.0.7",
+    "flipper-common": "0.0.0",
+    "reconnecting-websocket": "^4.4.0"
+  },
+  "peerDependencies": {},
+  "scripts": {
+    "reset": "rimraf lib *.tsbuildinfo",
+    "build": "tsc -b",
+    "prepack": "yarn reset && yarn build"
+  },
+  "files": [
+    "lib/**/*"
+  ],
+  "homepage": "https://github.com/facebook/flipper",
+  "keywords": [
+    "Flipper"
+  ],
+  "author": "Facebook, Inc"
+}

desktop/flipper-server-client/src/FlipperServerClient.tsx

@@ -25,6 +25,7 @@ export enum FlipperServerState {
   CONNECTED,
   DISCONNECTED,
 }
+export type {FlipperServer};
 
 export function createFlipperServer(
   host: string,
@@ -32,11 +33,11 @@ export function createFlipperServer(
   onStateChange: (state: FlipperServerState) => void,
 ): Promise<FlipperServer> {
   const socket = new ReconnectingWebSocket(`ws://${host}:${port}`);
-  return createFlipperServerWithSocket(socket, onStateChange);
+  return createFlipperServerWithSocket(socket as WebSocket, onStateChange);
 }
 
 export function createFlipperServerWithSocket(
-  socket: ReconnectingWebSocket,
+  socket: WebSocket,
   onStateChange: (state: FlipperServerState) => void,
 ): Promise<FlipperServer> {
   onStateChange(FlipperServerState.CONNECTING);

desktop/flipper-server-client/src/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export * from './FlipperServerClient';

desktop/flipper-server-client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src",
+    "lib": ["dom", "ES2019"]
+  },
+  "references": [
+    {
+      "path": "../flipper-common"
+    }
+  ]
+}

desktop/flipper-ui-browser/package.json

@@ -16,6 +16,7 @@
     "eventemitter3": "^4.0.7",
     "flipper-common": "0.0.0",
     "flipper-frontend-core": "0.0.0",
+    "flipper-server-client": "0.0.0",
     "flipper-ui-core": "0.0.0",
     "invariant": "^2.2.4",
     "metro-runtime": "^0.70.2",

desktop/flipper-ui-browser/src/index.tsx

@@ -9,7 +9,7 @@
 
 import {getLogger, Logger, setLoggerInstance} from 'flipper-common';
 import {initializeRenderHost} from './initializeRenderHost';
-import {createFlipperServer, FlipperServerState} from 'flipper-frontend-core';
+import {createFlipperServer, FlipperServerState} from 'flipper-server-client';
 
 document.getElementById('root')!.innerText = 'flipper-ui-browser started';
 

desktop/flipper-ui-browser/tsconfig.json

@@ -13,6 +13,9 @@
     {
       "path": "../flipper-frontend-core"
     },
+    {
+      "path": "../flipper-server-client"
+    },
     {
       "path": "../flipper-ui-core"
     }

desktop/package.json

@@ -183,6 +183,7 @@
       "flipper-frontend-core",
       "flipper-plugin",
       "flipper-plugin-core",
+      "flipper-server-client",
       "flipper-server-companion",
       "flipper-server-core",
       "flipper-ui-core",

desktop/tsc-root/tsconfig.json

@@ -24,6 +24,9 @@
     {
       "path": "../flipper-server"
     },
+    {
+      "path": "../flipper-server-client"
+    },
     {
       "path": "../flipper-server-companion"
     },