Add documentation

Summary: Document Flipper integration with JavaScript clients.

Reviewed By: passy

Differential Revision: D31827187

fbshipit-source-id: c40d8820241c0f85bd2366a0c087d4270d316c71

js/js-flipper/src/plugin.ts

@@ -41,6 +41,8 @@ export interface FlipperPluginConnection {
    */
   receive(method: string, receiver: FlipperPluginReceiver): void;
 }
+
+// DOCS_FLIPPER_PLUGIN_START
 export interface FlipperPlugin {
   /**
    * @return The id of this plugin. This is the namespace which Flipper desktop plugins will call
@@ -66,3 +68,4 @@ export interface FlipperPlugin {
    */
   runInBackground?(): boolean;
 }
+// DOCS_FLIPPER_PLUGIN_END

js/react-flipper-example/src/FlipperTicTacToe.tsx

@@ -11,6 +11,7 @@ import {useState, useEffect, FC} from 'react';
 import type {FlipperPluginConnection, FlipperClient} from 'js-flipper';
 import './FlipperTicTacToe.css';
 
+// DOCS_START_CLIENT_START
 // We want to import and start flipper client only in development and test modes
 let flipperClientPromise: Promise<FlipperClient> | undefined;
 if (process.env.NODE_ENV !== 'production') {
@@ -19,6 +20,7 @@ if (process.env.NODE_ENV !== 'production') {
     return flipperClient;
   });
 }
+// DOCS_START_CLIENT_END
 
 interface GameState {
   cells: string[];
@@ -27,25 +29,32 @@ interface GameState {
 }
 
 const FlipperTicTacToe: FC = () => {
+  // DOCS_ADD_PLUGIN_START
+  // TicTacToe game status
   const [status, setStatus] = useState('Waiting for Flipper Desktop Player...');
+  // TicTacToe game state
   const [gameState, setGameState] = useState<GameState>({
     cells: [],
     turn: ' ',
     winner: ' ',
   });
+  // Flipper connection instance
   const [connection, setConnection] = useState<FlipperPluginConnection>();
 
   useEffect(() => {
     flipperClientPromise?.then(flipperClient => {
       flipperClient.addPlugin({
         getId() {
+          // Name of the plugin
           return 'ReactNativeTicTacToe';
         },
         onConnect(connection) {
+          // Once we connected, we display it to the user
           setStatus('Desktop player present');
+          // And stash the connection object
           setConnection(connection);
 
-          // listen to updates
+          // We start listening to updates from Flipper Desktop
           connection.receive('SetState', (gameState: GameState) => {
             if (gameState.winner !== ' ') {
               setStatus(
@@ -61,16 +70,18 @@ const FlipperTicTacToe: FC = () => {
             setGameState(gameState);
           });
 
-          // request initial state
+          // We also request the initial state of the game from Flipper Desktop
           connection.send('GetState');
         },
         onDisconnect() {
+          // When Flipper Desktop disconnects, we show it to the user
           setConnection(undefined);
           setStatus('Desktop player gone...');
         },
       });
     });
   }, []);
+  // DOCS_ADD_PLUGIN_END
 
   return (
     <div>