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

js-setup.mdx (Creating Plugins - Building an javaScript (browser) Plugin)

Browse Source 
Summary: Restyle of page, including changes to spelling, grammar, links, and structure (where relevant).

Reviewed By: lblasa

Differential Revision: D36412815

fbshipit-source-id: d844bb745fcd483878b47c6f9736f24de0000655
This commit is contained in:
Kevin Strider
2022-05-17 04:19:25 -07:00
committed by Facebook GitHub Bot
parent bfcdb82b43
commit 656b04ed53
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
docs/tutorial/js-setup.mdx
View File

@@ -5,23 +5,29 @@ sidebar_label: Desktop Plugin - Setup
--- ---
import useBaseUrl from '@docusaurus/useBaseUrl'; import useBaseUrl from '@docusaurus/useBaseUrl';
Now that we have the native side covered, let's display the data we're sending Now that the native side is covered (see the previous pages in this tutorial), it's time to display the data you're sending on the desktop side.
on the desktop side.
<img alt="Custom cards UI for our sea mammals plugin" src={useBaseUrl("img/js-custom.png")} /> The following desktop screenshot shows the 'Sea-mammals' plugin, of this tutorial, in action.
<img alt="Custom cards UI for the sea mammals plugin" src={useBaseUrl("img/js-custom.png")} />
<FbInternalOnly> <FbInternalOnly>
[FB-Only] After scaffolding and starting Flipper from source, no further steps are needed to setup the desktop plugin.
After scaffolding and starting Flipper from source, no further steps are needed to setup the desktop plugin.
</FbInternalOnly> </FbInternalOnly>
<OssOnly> <OssOnly>
## Scaffolding a new Desktop plugin ## Scaffolding a new Desktop plugin
A new Flipper Desktop plugin can be scaffolded by running `npx flipper-pkg init` in the directory where you want to store the plugin sources (Don't run this command inside the Flipper repository itself!). A new Flipper Desktop plugin can be scaffolded by running `npx flipper-pkg init` in the directory where you want to store the plugin sources.
Before running this command, make sure Flipper is closed.
For example: :::warning
Don't run this command inside the Flipper repository!. Before running this command, make sure Flipper is closed.
:::
The following snippet shows an example:
```bash ```bash
mkdir ~/FlipperPlugins mkdir ~/FlipperPlugins
@@ -29,14 +35,18 @@ cd ~/FlipperPlugins
npx flipper-pkg init npx flipper-pkg init
``` ```
Add the directory to the Flipper watch folder if asked. In this tutorial we will be creating a `client` plugin. `device` plugins are only used when creating plugins that _don't_ connect to a specific application and are pretty rare. Add the directory (shown in the snippet) to the Flipper watch folder if asked.
The tool will ask you to provide "id" and "title" for your plugin. Use "sea-mammals" as "id" and "Sea Mammals" as "title". After that the tool will create two files in the directory: `package.json` and `src/index.tsx`. In this tutorial, you'll be creating a `client` plugin. `device` plugins are only used when creating plugins that _don't_ connect to a specific application.
After the process has finished, use `yarn watch` in the generated directory to start compiling the plugin on the fly. Take the following steps for npx:
Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI. 1. The npx tool asks you to provide the 'id' and 'title' for your plugin. For the sake of this tutorial, use 'sea-mammals' as 'id' and 'Sea Mammals' as the 'title'.
2. The npx tool creates two files in the directory: `package.json` and `src/index.tsx`.
3. After the process has finished, use `yarn watch` in the generated directory to start compiling the plugin on the fly.
Now that the package has been set up, you are ready to build a UI for your plugin. This can be achieved either by using a standardized [table-based plugin](js-table.mdx), or by creating a [custom UI](js-custom.mdx).
</OssOnly> </OssOnly>
For more background on the generated files and overal plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure.mdx) page. For more background on the generated files and overall plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure.mdx) page.