jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update jssetup for TypeScript

Browse Source 
Reviewed By: jknoxville

Differential Revision: D16918664

fbshipit-source-id: 934ad08d60d882b013a3f1d9201d330a6c117bb1
This commit is contained in:
Pascal Hartig
2019-08-21 04:54:03 -07:00
committed by Facebook Github Bot
parent 076087f0b2
commit d1b17d3ecd
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/extending/jssetup.md
View File

@@ -7,14 +7,18 @@ All JavaScript Flipper plugins must be self-contained in a directory. This direc
* package.json * package.json
* index.js * 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`: Example `package.json`:
``` ```
{ {
"name": "myplugin", "name": "myplugin",
"version": "1.0.0", "version": "1.0.0",
"main": "index.js", "main": "index.tsx",
"license": "MIT", "license": "MIT",
"dependencies": {}, "dependencies": {},
"title": "My Plugin", "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. `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 ```js
import {FlipperPlugin} from 'flipper'; import {FlipperPlugin} from 'flipper';
@@ -64,7 +68,7 @@ Plugin File Structure:
~ flipper-plugins/ ~ flipper-plugins/
my-plugin/ my-plugin/
package.json package.json
index.js index.tsx
``` ```
### npm dependencies ### 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 ### 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 ## Working on the core