diff --git a/docs/extending/create-plugin.mdx b/docs/extending/create-plugin.mdx index 83cea383b..446b96200 100644 --- a/docs/extending/create-plugin.mdx +++ b/docs/extending/create-plugin.mdx @@ -3,15 +3,20 @@ id: create-plugin title: Client Plugin API --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + ## FlipperPlugin +The plugin implementation that runs on the (mobile) application side of things is called the _client plugin_ in Flipper terminology. To build a client plugin, implement the `FlipperPlugin` interface. The ID that is returned from your implementation needs to match the `name` defined in your JavaScript counterpart's `package.json`. - - + + + ```java public class MyFlipperPlugin implements FlipperPlugin { private FlipperConnection mConnection; @@ -37,7 +42,10 @@ public class MyFlipperPlugin implements FlipperPlugin { } } ``` - + + + + ```objective-c @interface MyFlipperPlugin : NSObject @end @@ -51,7 +59,10 @@ public class MyFlipperPlugin implements FlipperPlugin { @end ``` - + + + + ```cpp class MyFlipperPlugin : public FlipperPlugin { public: @@ -61,7 +72,9 @@ public: bool runInBackground() override; }; ``` - + + +
@@ -87,15 +100,17 @@ addPlugin({ } }) ``` - + + ## Using FlipperConnection `onConnect` will be called when your plugin becomes active. This will provide a `FlipperConnection` allowing you to register receivers for desktop method calls and respond with data. - - + + + ```java connection.receive("getData", new FlipperReceiver() { @Override @@ -107,7 +122,10 @@ connection.receive("getData", new FlipperReceiver() { } }); ``` - + + + + ```objective-c @interface MyFlipperPlugin : NSObject @end @@ -129,7 +147,10 @@ connection.receive("getData", new FlipperReceiver() { @end ``` - + + + + ```cpp void MyFlipperPlugin::didConnect(std::shared_ptr conn) { conn->receive("getData", [](const folly::dynamic ¶ms, @@ -139,7 +160,10 @@ void MyFlipperPlugin::didConnect(std::shared_ptr conn) { }); } ``` - + + + + ```javascript addPlugin({ getId() { @@ -158,32 +182,44 @@ addPlugin({ // ...as-is }) ``` - + + + ## Push data to the desktop You don't have to wait for the desktop to request data though, you can also push data directly to the desktop. If the JS plugin subscribes to the same method, it will receive the data. - - + + + ```java connection.send("MyMessage", new FlipperObject.Builder() .put("message", "Hello") .build() ``` - + + + + ```objective-c [connection send:@"getData" withParams:@{@"message":@"hello"}]; ``` - + + + + ```cpp void MyFlipperPlugin::didConnect(std::shared_ptr conn) { dynamic message = folly::dynamic::object("message", "hello"); conn->send("getData", message); } ``` - + + + + ```javascript addPlugin({ getId() { @@ -196,7 +232,9 @@ addPlugin({ // ...as-is }) ``` - + + + ## Background Plugins diff --git a/docs/extending/send-data.mdx b/docs/extending/send-data.mdx index 9c583019f..145e55a98 100644 --- a/docs/extending/send-data.mdx +++ b/docs/extending/send-data.mdx @@ -3,15 +3,18 @@ id: send-data title: Providing Data to Plugins --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + It is often useful to get an instance of a Flipper plugin to send data to it. Flipper makes this simple with built-in support. Plugins should be treated as singleton instances as there can only be one `FlipperClient` and each `FlipperClient` can only have one instance of a certain plugin. The Flipper API makes this simple by offering a way to get the current client and query it for plugins. Plugins are identified by the string that their identifier method returns, in this example, "MyFlipperPlugin". Note that null checks may be required as plugins may not be initialized, for example in production builds. + + - - ```java final FlipperClient client = AndroidFlipperClient.getInstance(context); if (client != null) { @@ -19,13 +22,19 @@ if (client != null) { plugin.sendData(myData); } ``` - + + + + ```objective-c FlipperClient *client = [FlipperClient sharedClient]; MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"]; [myPlugin sendData:myData]; ``` - + + + + ```cpp auto& client = FlipperClient::instance(); auto myPlugin = client.getPlugin("MyFlipperPlugin"); @@ -33,7 +42,8 @@ if (myPlugin) { myPlugin->sendData(myData); } ``` - + + Here, `sendData` is an example of a method that might be implemented by the Flipper plugin. diff --git a/docs/getting-started/ios-native.mdx b/docs/getting-started/ios-native.mdx index 9f418d6f1..838dc164a 100644 --- a/docs/getting-started/ios-native.mdx +++ b/docs/getting-started/ios-native.mdx @@ -5,6 +5,8 @@ sidebar_label: Adding Flipper to iOS apps --- import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism. @@ -86,9 +88,8 @@ This is done to overcome a bug with Xcode 11 which fails to compile swift code w Install the dependencies by running `pod install`. You can now import and initialize Flipper in your AppDelegate. - - - + + ```objective-c #import @@ -116,7 +117,8 @@ AppDelegate. @end ``` - + + ```swift import UIKit @@ -139,7 +141,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate { } ``` - + + ## Enabling plugins diff --git a/docs/getting-started/react-native-ios.mdx b/docs/getting-started/react-native-ios.mdx index 9bcdbecba..63132e873 100644 --- a/docs/getting-started/react-native-ios.mdx +++ b/docs/getting-started/react-native-ios.mdx @@ -5,6 +5,8 @@ sidebar_label: React Native for iOS --- import useBaseUrl from '@docusaurus/useBaseUrl'; import Link from '@docusaurus/Link'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; These instructions are aimed at people manually adding Flipper to a React Native 0.62+ app. This should only be necessary if you have an existing app that cannot be upgraded with the @@ -102,9 +104,8 @@ The code below enables the following integrations: - Shared Preferences - Crash Reporter - - - + + ```objective-c ... @@ -145,7 +146,8 @@ The code below enables the following integrations: @end ``` - + + ```swift ... @@ -185,7 +187,8 @@ class AppDelegate: UIResponder, UIApplicationDelegate { } ``` - + + Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal. diff --git a/docs/setup/layout-plugin.mdx b/docs/setup/layout-plugin.mdx index 8c4c748f6..767b287c3 100644 --- a/docs/setup/layout-plugin.mdx +++ b/docs/setup/layout-plugin.mdx @@ -4,6 +4,9 @@ title: Layout Inspector Setup sidebar_label: Layout Inspector --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + To use the layout inspector plugin, you need to add the plugin to your Flipper client instance. ## Android @@ -88,22 +91,28 @@ pod 'FlipperKit/FlipperKitLayoutPlugin', '~>' + flipperkit_version Once you have added the pod, initialise the plugin and add it to the `FlipperClient` as follows. - - + + + ```objective-c #import SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults]; [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:context.application withDescriptorMapper:mapper]]; ``` - + + + + ```swift import FlipperKit let layoutDescriptorMapper = SKDescriptorMapper(defaults: ()) client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!)) ``` - + + + ### With ComponentKit Support @@ -113,8 +122,10 @@ If you want to enable [ComponentKit support](https://github.com/facebook/compone pod 'FlipperKit/FlipperKitLayoutComponentKitSupport', '~>' + flipperkit_version ``` Once you have added the pod you will then need to augment the descriptor with Componentkit-specific settings as shown below. - - + + + + ```objective-c #import #import @@ -124,7 +135,10 @@ SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWit [client addPlugin: [[FlipperKitLayoutPlugin alloc] initWithRootNode: application withDescriptorMapper: layoutDescriptorMapper]]; ``` - + + + + ```swift import FlipperKit @@ -133,4 +147,6 @@ FlipperKitLayoutComponentKitSupport.setUpWith(layoutDescriptorMapper) client?.add(FlipperKitLayoutPlugin(rootNode: application, with: layoutDescriptorMapper!)) ``` - + + + diff --git a/docs/setup/network-plugin.mdx b/docs/setup/network-plugin.mdx index 2a8fc0189..3144cba96 100644 --- a/docs/setup/network-plugin.mdx +++ b/docs/setup/network-plugin.mdx @@ -4,6 +4,9 @@ title: Network Setup sidebar_label: Network --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + To use the network plugin, you need to add the plugin to your Flipper client instance. ## Android @@ -50,19 +53,25 @@ pod 'FlipperKit/SKIOSNetworkPlugin', '~>' + flipperkit_version Initialise the plugin in the following way: - - + + + ```objective-c #import [[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; ``` - + + + + ```swift import FlipperKit client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter())) ``` - + + + diff --git a/docs/setup/shared-preferences-plugin.mdx b/docs/setup/shared-preferences-plugin.mdx index 597858c07..c0e0cb4f4 100644 --- a/docs/setup/shared-preferences-plugin.mdx +++ b/docs/setup/shared-preferences-plugin.mdx @@ -4,6 +4,9 @@ title: Shared Preferences Setup sidebar_label: Shared Preferences --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + This plugin is available for both Android and iOS. ## Android @@ -25,17 +28,23 @@ pod 'FlipperKit/FlipperKitUserDefaultsPlugin', '~>' + flipperkit_version Initialize the plugin in the following way: - - + + + ```objectivec #import [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:@"your_suitename"]]; ``` - + + + + ```swift import FlipperKit client?.add(FKUserDefaultsPlugin.init(suiteName: "your_suitename")) ``` - + + +