docs/tutorial/javascript.mdx
import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link';
:::caution This tutorial requires a browser that supports WebSockets. :::
This section of the tutorial goes through the three steps required to build a JavaScript plugin.
Add the Flipper client to your web application. Run npm install js-flipper (yarn add js-flipper)
:::warning Do not start the Flipper client in production! Preferably, do not even include Flipper in your production builds! :::
Use the following to start the Flipper client:
addPlugin to add your pluginTo register a new plugin with Flipper, call flipperClient.addPlugin and pass your plugin as an object.
Your plugin must conform to the following interface:
The onConnect and onDisconnect events, featured in the above snippet, are triggered every time the plugin becomes (in)active in the Flipper desktop application.
If the plugin is a <Link to={useBaseUrl("/docs/extending/create-plugin#background-plugins")}>background plugin</Link>, these events are triggered typically only once (they might be triggered never if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times).
The onConnect callback receive a connection which can be used to communicate with the backend:
You might want to store the connection somewhere to be able to send more events as long as onDisconnect event hasn't been fired.
The connection object can also be used to listen to messages coming from the Desktop plugin. See <Link to={useBaseUrl("/docs/extending/create-plugin")}>Client Plugin API</Link> for details.
An example plugin to play a little Tic-Tac-Toe between the Flipper Desktop and a React app can be found inside this repository as well (run yarn && yarn start in js/react-flipper-example to start the test project):