website updates for TS

Summary: update website to use TS instead of JS

Reviewed By: passy

Differential Revision: D16986666

fbshipit-source-id: 969de3ffcdf4aa594d9811947e5b440e594838e7

docs/extending/establishing-a-connection.md

@@ -60,4 +60,4 @@ This will ask Flipper desktop to generate a client certificate, using the CSR pr
 
 Depending on the client, `destination` can have a different meaning. A basic example would be a file path, that both the desktop and the client have access to. With this Flipper desktop could write the certificate to that path. A more involved example is that of the Android Client, where destination specifies a relative path inside an app container. And the Subject Common Name determines which app container. Together these two pieces of information form an absolute file path inside an android device.
 
-For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.js](https://github.com/facebook/flipper/blob/master/src/utils/CertificateProvider.js).
+For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/src/utils/CertificateProvider.tsx).

docs/extending/js-plugin-api.md

@@ -3,7 +3,7 @@ id: js-plugin-api
 title: JavaScript Plugin API
 ---
 
-Provided a plugin is setup as defined in [JS Plugin Definiton](js-setup), the basic requirement of a Flipper plugin is that `index.js` exports a default class that extends `FlipperPlugin`.
+Provided a plugin is setup as defined in [JS Plugin Definiton](js-setup), the basic requirement of a Flipper plugin is that `index.tsx` exports a default class that extends `FlipperPlugin`.
 
 `FlipperPlugin` is an extension of `React.Component` with extra Flipper-related functionality. This means to define the UI of your plugin, you just need to implement this React component.
 
@@ -69,7 +69,7 @@ Sometimes it's desirable for a plugin to be able to process incoming messages fr
 
 To do this, define a static `persistedStateReducer` function in the plugin class:
 ```
-static persistedStateReducer(
+static persistedStateReducer<PersistedState>(
     persistedState: PersistedState,
     method: string,
     data: Object
@@ -92,7 +92,7 @@ static getActiveNotifications(
 When the user clicks on a notification, they will be sent back to your plugin with the [deepLinkPayload](#deeplinkpayload) equal to the notification's action.
 
 ## Type Parameters
-`FlipperPlugin<S, A, P>` can optionally take the following type parameters. It is highly recommended you provide them to benefit from type safety, but you can pass `*` when not using these features.
+`FlipperPlugin<S, A, P>` can optionally take the following type parameters. It is highly recommended you provide them to benefit from type safety, but you can pass `any` when not using these features.
 
 **State**: Specifies the type of the FlipperPlugin state. A `FlipperPlugin` is a React component, and this is equivalent to the React state type parameter.
 

docs/extending/jssetup.md

@@ -5,7 +5,7 @@ title: JavaScript Plugin Definition
 
 All JavaScript Flipper plugins must be self-contained in a directory. This directory must contain at a minimum the following two files:
 * package.json
-* index.js
+* index.tsx
 
 The best way to initialize a JS plugin is to create a directory, and run `yarn init` inside it. Make sure your package name is the same as the identifier of the client plugin, e.g. if your Java plugin returns `myplugin` from its `getId()` method, the `name` field in your `package.json` should also be `myplugin`.
 
@@ -25,6 +25,9 @@ Example `package.json`:
   "icon": "apps",
   "bugs": {
     "email": "you@example.com"
+  },
+  "dependencies": {
+    "flipper": "latest"
   }
 }
 ```
@@ -73,7 +76,7 @@ Plugin File Structure:
 
 ### npm dependencies
 
-If you need any dependencies in your plugin, you can install them using `yarn add`. The Flipper UI components exported from `flipper`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin.
+If you need any dependencies in your plugin, you can install them using `yarn add`.
 
 ### ES6, babel-transforms and bundling
 

docs/extending/styling-components.md

@@ -65,7 +65,7 @@ Pseudo-classes can be used like this:
 
 ## Colors
 
-The colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.js`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.js) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
+The colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
 
 ```javascript
 import {colors} from 'flipper'

docs/tutorial/js-custom.md

@@ -11,10 +11,10 @@ Displaying your data in a table might work for many use-cases. However, dependin
 For our sea mammals app, we might not only want to see them listed as image URLs in a table but render the actual images in nice little cards. When selecting one of the cards we still want to display all details in the sidebar.
 ![Custom cards UI for our sea mammals plugin](/docs/assets/js-custom.png)
 
-Currently, the default export in our `index.js` is from `createTablePlugin`. Now we are going to replace this with a custom React component extending `FlipperPlugin`.
+Currently, the default export in our `index.tsx` is from `createTablePlugin`. Now we are going to replace this with a custom React component extending `FlipperPlugin`.
 
 ```js
-export default class SeaMammals extends FlipperPlugin {
+export default class SeaMammals extends FlipperPlugin<State, any, PersistedState> {
   static Container = styled(FlexRow)({
     backgroundColor: colors.macOSTitleBarBackgroundBlur,
     flexWrap: 'wrap',
@@ -43,20 +43,19 @@ The plugin is quite useless when we don't display any actual data. We are adding
 For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about [persistedState](extending/js-plugin-api.md#persistedstate) in our guide.
 
 ```js
-static defaultPersistedState = {
+static defaultPersistedState: PersistedState = {
   data: [],
 };
 
-static persistedStateReducer = (
+static persistedStateReducer<PersistedState>(
   persistedState: PersistedState,
   method: string,
   payload: Row,
-) => {
+) {
   if (method === 'newRow') {
-    return {
-      ...persistedState,
+    return return Object.assign({}, persistedState, {,
       [payload.id]: payload,
-    };
+    });
   }
   return persistedState;
 };
@@ -103,10 +102,9 @@ The `Card` component is responsible for rendering the actual image and title. Th
 
 ```js
 class Card extends React.Component<{
-  ...Row,
   onSelect: () => void,
   selected: boolean,
-}> {
+} & Row> {
   static Container = styled(FlexColumn)(props => ({
     margin: 10,
     borderRadius: 5,

docs/tutorial/js-table.md

@@ -47,13 +47,16 @@ you can also specify a title to show in the Flipper sidebar and an icon to displ
 {
   "name": "sea-mammals",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.tsx",
   "license": "MIT",
   "icon": "apps",
-  "title": "Sea Mammals"
+  "title": "Sea Mammals",
+  "dependencies": {
+    "flipper": "latest"
+  }
 }
 ```
-*See [package.json](https://github.com/facebook/flipper/blob/7dae5771d96ea76b75796d3b3a2c78746e581e3f/src/plugins/seamammals/package.json)*
+*See [package.json](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/package.json)*
 
 ## Building a Table
 
@@ -171,7 +174,7 @@ Now that we've build all the individual pieces, we
 just need to hook it all up using `createTablePlugin`:
 
 ```javascript
-export default createTablePlugin({
+export default createTablePlugin<Row>({
   method: 'newRow',
   columns,
   columnSizes,
@@ -179,7 +182,7 @@ export default createTablePlugin({
   buildRow,
 });
 ```
-*See [index.js](https://github.com/facebook/flipper/blob/7dae5771d96ea76b75796d3b3a2c78746e581e3f/src/plugins/seamammals/index.js)*
+*See [index.tsx](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/index.tsx)*
 
 The `method` we define here corresponds to the name
 of the function we call on the native side to inform