From d1b17d3ecde137b9a330bec6efa4786c8244fe97 Mon Sep 17 00:00:00 2001
From: Pascal Hartig <realpassy@fb.com>
Date: Wed, 21 Aug 2019 04:54:03 -0700
Subject: [PATCH] Update jssetup for TypeScript

Reviewed By: jknoxville

Differential Revision: D16918664

fbshipit-source-id: 934ad08d60d882b013a3f1d9201d330a6c117bb1
---
 docs/extending/jssetup.md | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/docs/extending/jssetup.md b/docs/extending/jssetup.md
index e7c29cff5..277061c83 100644
--- a/docs/extending/jssetup.md
+++ b/docs/extending/jssetup.md
@@ -7,14 +7,18 @@ All JavaScript Flipper plugins must be self-contained in a directory. This direc
 * package.json
 * index.js
 
-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. After that create an `index.js` file which will be the entry point to your plugin. An example `package.json` file could look like this:
+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`.
+
+Plugins can be written in plain ES6 JavaScript, [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) but we recommend you use TypeScript for the best development experience. We also recommend you use the file extension `.tsx` when using TypeScript which adds support for inline React expressions.
+
+After `yarn init` finishes, create an `index.tsx` file which will be the entry point to your plugin. An example `package.json` file could look like this:
 
 Example `package.json`:
 ```
 {
   "name": "myplugin",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "index.tsx",
   "license": "MIT",
   "dependencies": {},
   "title": "My Plugin",
@@ -35,9 +39,9 @@ Important attributes of `package.json`:
 
 `bugs` Specify an email and/or url, where plugin bugs should be reported.
 
-In `index.js` you will define the plugin in JavaScript. This file must export a default class that extends `FlipperPlugin`. Browse our [JS API docs](js-plugin-api) to see what you can do, and make sure to check out our [UI Component Library](ui-components.md) for lots of pre-made components.
+In `index.tsx` you will define the plugin in JavaScript. This file must export a default class that extends `FlipperPlugin`. Browse our [JS API docs](js-plugin-api) to see what you can do, and make sure to check out our [UI Component Library](ui-components.md) for lots of pre-made components.
 
-Example `index.js`:
+Example `index.tsx`:
 ```js
 import {FlipperPlugin} from 'flipper';
 
@@ -64,7 +68,7 @@ Plugin File Structure:
 ~ flipper-plugins/
     my-plugin/
       package.json
-      index.js
+      index.tsx
 ```
 
 ### npm dependencies
@@ -73,7 +77,7 @@ If you need any dependencies in your plugin, you can install them using `yarn ad
 
 ### ES6, babel-transforms and bundling
 
-Our plugin-loader is capable of all ES6 goodness, flow annotations and JSX and applies the required babel-transforms without you having to care about this. Also you don't need to bundle your plugin, you can simply use ES6 imports and it will work out of the box.
+Our plugin-loader is capable of all ES6 goodness, Flow annotations, TypeScript, and JSX and applies the required babel-transforms without you having to care about this. You don't need to bundle your plugin, you can simply use ES6 imports and it will work out of the box.
 
 ## Working on the core