Update docs to use package name as ID

Summary: We swtiched from using the name of the package as the ID which is used to identify a client plugin. These changes were not reflected correctly in our docs.

Reviewed By: jknoxville

Differential Revision: D14165439

fbshipit-source-id: 1cbb9c1723911f8fa4b7df19c631e6f260c81bd8
This commit is contained in:
Daniel Büchele
2019-02-21 09:36:41 -08:00
committed by Facebook Github Bot
parent 0279fc919f
commit 43157f974e
4 changed files with 4 additions and 11 deletions

View File

@@ -6,7 +6,7 @@ sidebar_label: Mobile Setup
## Implement FlipperPlugin
Create a class implementing `FlipperPlugin`.
Create a class implementing `FlipperPlugin`. The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`.
### Android

View File

@@ -8,7 +8,7 @@ A very common kind of Flipper plugin is a plugin which fetches some structured d
To make building these kinds of plugins as easy as possible we have created an abstraction we call `createTablePlugin`. This is a function which manages the complexities of building a table plugin but still allows you to customize many things to suite your needs.
Below is a sample implementation of a desktop plugin based on `createTablePlugin`. It subscribes to updates from a client plugin with id `myplugin` sending rows to with the `newRow` method. A row can have any structure you want as long as it has a unique field `id` of type `string`.
Below is a sample implementation of a desktop plugin based on `createTablePlugin`. It subscribes to updates from a client send using the `newRow` method. A row can have any structure you want as long as it has a unique field `id` of type `string`.
See "[Create Plugin](create-plugin.md)" for how to create the native counterpart for your plugin.
@@ -74,10 +74,7 @@ const columnSizes = {
};
export default createTablePlugin({
title: 'My Plugin', // Title of plugin
id: 'myplugin', // ID of plugin
method: 'newRow', // Method which should be subscribed to to get new rows with share Row (from above),
icon: 'washing-machine',
columns,
columnSizes,
renderSidebar,

View File

@@ -23,13 +23,13 @@ To create the desktop part of your plugin, initiate a new JavaScript project usi
}
```
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.
Flipper uses some fields from the `package.json` in the plugin. The `name` is used as, the ID to identify the mobile counterpart. 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/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

View File

@@ -13,10 +13,6 @@ We expect this file to have a default export of type `FlipperPlugin`. A hello-wo
import {FlipperPlugin} from 'flipper';
export default class extends FlipperPlugin {
static title = 'My Plugin';
static id = 'my-plugin';
static icon = 'internet';
render() {
return 'hello world';
}