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

Fix relative links

Browse Source 
Summary: Translated all cases where we had a parent-relative link to use the base URL instead.

Reviewed By: jknoxville

Differential Revision: D22256229

fbshipit-source-id: 81ee6fecb77dbaa19d112cb319771c22ff66d02a
This commit is contained in:
Pascal Hartig
2020-06-26 05:11:32 -07:00
committed by Facebook GitHub Bot
parent 419691da97
commit b2e8070af2
19 changed files with 51 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/tutorial/js-custom.mdx
View File

@@ -4,6 +4,7 @@ title: Building Custom UI
sidebar_label: Custom UI
---
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
Displaying your data in a table might work for many use-cases. However, depending on your plugin and data it might make sense to customize the way your data is visualized. Flipper uses React to render the plugins and provides a variety of ready-to-use UI components that can be used to build custom plugin UIs.
@@ -35,13 +36,13 @@ export default class SeaMammals extends FlipperPlugin<State, any, PersistedState
}
```
You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on [styling components](../extending/styling-components).
You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on <Link to={useBaseUrl("/docs/extending/styling-components")}>styling components</Link>.
## Adding data handling
The plugin is quite useless when we don't display any actual data. We are adding two static properties to our plugin class for data handling. `defaultPersistedState` defines the default state before we received any data. In `persistedStateReducer` we define how new data is merged with the existing data.
For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about [persistedState](../extending/js-plugin-api#persistedstate) in our guide.
For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about <Link to={useBaseUrl("/docs/extending/js-plugin-api#persistedstate")}>persistedState</Link> in our guide.
```js
static defaultPersistedState: PersistedState = {

6
docs/tutorial/react-native.mdx
View File

@@ -2,6 +2,8 @@
id: react-native
title: Building a React Native Plugin
---
import useBaseUrl from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
<div class="warning">
@@ -17,7 +19,7 @@ To expose Flipper to the JavaScript world, the React Native Native Module `react
Registering a new plugin is done by importing `addPlugin` from `"react-native-flipper"` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events.
These `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application.
If the plugin is a [background plugin](../extending/create-plugin#background-plugins), 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).
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:
@@ -44,7 +46,7 @@ addPlugin({
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 [Client Plugin API](../extending/create-plugin) for details.
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 Native app can be found inside this repository as well (run `yarn && yarn android` in `react-native/ReactNativeFlipperExample` to start the test project):