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

adding docs for new package.json fields

Browse Source 
Summary: as per title

Reviewed By: priteshrnandgaonkar

Differential Revision: D13432418

fbshipit-source-id: fd96d7ea54127d1256f3c0b147e19338be8e7b72
This commit is contained in:
Daniel Büchele
2018-12-18 16:18:32 -08:00
committed by Facebook Github Bot
parent 2c9feb40e9
commit ea54b6d4ca
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/jssetup.md
View File

@@ -6,23 +6,30 @@ sidebar_label: JavaScript Setup
## Creating the plugin UI
To create the desktop part of your plugin, initiate a new JavaScript project using `yarn init` and make sure your package name starts with `flipper-plugin-` and a file called `index.js`, which is the entry point to your plugin. A sample `package.json`-file could look like this:
To create the desktop part of your plugin, initiate a new JavaScript project using `yarn init` and make sure your package name is the plugin's ID you are using in the native implementation. Create a file called `index.js`, which is the entry point to your plugin. A sample `package.json`-file could look like this:
```
{
"name": "flipper-plugin-myplugin",
"name": "myplugin",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {}
"dependencies": {},
"title": "My Plugin",
"icon": "apps",
"bugs": {
"email": "you@example.com"
}
}
```
Flipper uses some fields from the `package.json` in the plugin. A `title` can be set, that is shown in Flipper's sidebar, same is true for the `icon`. We also strongly encourage to set a `bugs` field specifying an email and/or url, where bugs for the plugin can be reported.
In `index.js` you can now create your plugin. Take a look at [Writing a plugin](writing-a-plugin.md) to learn how a plugin can look like. Also, make sure to check out [Flipper's UI components](ui-components.md) when building your plugin.
### Dynamically loading plugins
Once a plugin is created, Flipper can load it from its folder. The path from where the plugins are loaded is specified in `~/.flipper/config.json`. The paths specified in `pluginPaths` need to point to a folder containing a subfolder for every plugin. For example you can create a directory `~/flipper-plugins` and set `pluginPaths` in Flipper's config to `["~/flipper-plugins"]`. This directory needs to contain a sub-directory for every plugin you create. In this example there would be a directory `~/flipper-plugins/flipper-plugin-myplugin` that contains your plugin's package.json and all code of your plugin.
Once a plugin is created, Flipper can load it from its folder. The path from where the plugins are loaded is specified in `~/.flipper/config.json`. The paths specified in `pluginPaths` need to point to a folder containing a subfolder for every plugin. For example you can create a directory `~/flipper-plugins` and set `pluginPaths` in Flipper's config to `["~/flipper-plugins"]`. This directory needs to contain a sub-directory for every plugin you create. In this example there would be a directory `~/flipper-plugins/myplugin` that contains your plugin's package.json and all code of your plugin.
### npm dependencies