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

improve docs code blocks highlighting (#2049)

Browse Source 
Summary:
This PR adds missing Objective-C entry to the Docusaurus config, fixes Objective-C code blocks label and adds or replaces several code block labels to improve the currently highlighted blocks.

Prism in Docusaurus by default also includes syntax highlight for `jsx` and `tsx`, which improves the nodes and props highlight, so I have used those syntaxes in few places too.

I have also fixed one typo that I have spotted and my IDE made a cleanup of whitespaces in edited files.

## Changelog

* [website] improve docs code blocks highlighting

Pull Request resolved: https://github.com/facebook/flipper/pull/2049

Test Plan:
The changes have been tested running Flipper website on `localhost`.

## Preview

<img width="650" alt="Screenshot 2021-03-12 150934" src="https://user-images.githubusercontent.com/719641/110951135-fff20d00-8344-11eb-96db-1bdc82c8d5ea.png">

<img width="649" alt="Screenshot 2021-03-12 151022" src="https://user-images.githubusercontent.com/719641/110951268-2ca62480-8345-11eb-9d3b-1a48f1267776.png">

Reviewed By: priteshrnandgaonkar

Differential Revision: D27336599

Pulled By: passy

fbshipit-source-id: c2dfb3d8cad4675da0f5e1270cada1e56a0175c0
This commit is contained in:
Bartosz Kaszubowski
2021-03-29 02:45:09 -07:00
committed by Facebook GitHub Bot
parent e4a814502a
commit 40e6cdebb1
18 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/extending/create-plugin.mdx
View File

@@ -47,7 +47,7 @@ public class MyFlipperPlugin implements FlipperPlugin {
</TabItem> </TabItem>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
@interface MyFlipperPlugin : NSObject<FlipperPlugin> @interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end @end
@@ -127,7 +127,7 @@ connection.receive("getData", new FlipperReceiver() {
</TabItem> </TabItem>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
@interface MyFlipperPlugin : NSObject<FlipperPlugin> @interface MyFlipperPlugin : NSObject<FlipperPlugin>
@end @end
@@ -204,7 +204,7 @@ connection.send("MyMessage",
</TabItem> </TabItem>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
[connection send:@"getData" withParams:@{@"message":@"hello"}]; [connection send:@"getData" withParams:@{@"message":@"hello"}];
``` ```
@@ -275,7 +275,7 @@ if (client != null) {
</TabItem> </TabItem>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
FlipperClient *client = [FlipperClient sharedClient]; FlipperClient *client = [FlipperClient sharedClient];
MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"]; MyFlipperPlugin *myPlugin = [client pluginWithIdentifier:@"MyFlipperPlugin"];
[myPlugin sendData:myData]; [myPlugin sendData:myData];

2
docs/extending/create-table-plugin.mdx
View File

@@ -18,7 +18,7 @@ Below is a sample implementation of a desktop plugin based on `createTablePlugin
See "[Create Plugin](create-plugin)" for how to create the native counterpart for your plugin. See "[Create Plugin](create-plugin)" for how to create the native counterpart for your plugin.
```javascript ```tsx
import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper'; import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper';
type Id = string; type Id = string;

4
docs/extending/desktop-plugin-structure.mdx
View File

@@ -122,7 +122,7 @@ Flipper Desktop plugins come in three possible flavors:
A plugin always exposes two elements from its entry module (typically `src/index.tsx`): `plugin` and `Component`: A plugin always exposes two elements from its entry module (typically `src/index.tsx`): `plugin` and `Component`:
```typescript ```tsx
import {PluginClient} from 'flipper-plugin'; import {PluginClient} from 'flipper-plugin';
export function plugin(client: PluginClient) { export function plugin(client: PluginClient) {
@@ -143,7 +143,7 @@ Flipper also supports so-called device plugins - plugins that are available for
so are a bit more limited in general. so are a bit more limited in general.
Their entry module anatomy is: Their entry module anatomy is:
```typescript ```tsx
import {DevicePluginClient} from 'flipper-plugin'; import {DevicePluginClient} from 'flipper-plugin';
export function devicePlugin(client: DevicePluginClient) { export function devicePlugin(client: DevicePluginClient) {

2
docs/extending/establishing-a-connection.mdx
View File

@@ -49,7 +49,7 @@ localhost:8089/sonar?os={OS}
``` ```
On that connection, send the following payload: On that connection, send the following payload:
``` ```js
Request = { Request = {
"method": "signCertificate", "method": "signCertificate",
"csr": string, "csr": string,

20
docs/extending/new-clients.mdx
View File

@@ -58,7 +58,7 @@ The syntax used for these type definitions is [Flow](https://flow.org/en/docs/ty
### getPlugins ### getPlugins
Return the available plugins as a list of identifiers. A plugin identifier is a string which is matched with the plugin identifier of desktop javascript plugins. This allows the client to specify the plugins it supports. Return the available plugins as a list of identifiers. A plugin identifier is a string which is matched with the plugin identifier of desktop javascript plugins. This allows the client to specify the plugins it supports.
``` ```js
Request = { Request = {
"method": "getPlugins", "method": "getPlugins",
} }
@@ -75,7 +75,7 @@ Response = {
Returns a subset of the available plugins returned by `getPlugin`. The background connections will automatically receive a connection from Flipper once it starts (and if the plugins are enabled), rather than waiting for the user to open the plugin. Returns a subset of the available plugins returned by `getPlugin`. The background connections will automatically receive a connection from Flipper once it starts (and if the plugins are enabled), rather than waiting for the user to open the plugin.
``` ```js
Request = { Request = {
"method": "getBackgroundPlugins", "method": "getBackgroundPlugins",
} }
@@ -89,7 +89,7 @@ Response = {
### init ### init
Initialize a plugin. This should result in an onConnected call on the appropriate plugin. Plugins should by nature be lazy and should not be initialized up front as this may incur significant cost. The Flipper desktop client knows when a plugin is needed and should control when to initialize them. Initialize a plugin. This should result in an onConnected call on the appropriate plugin. Plugins should by nature be lazy and should not be initialized up front as this may incur significant cost. The Flipper desktop client knows when a plugin is needed and should control when to initialize them.
``` ```js
Request = { Request = {
"method": "init", "method": "init",
"params": { "params": {
@@ -100,7 +100,7 @@ Request = {
### deinit ### deinit
Opposite of init. A call to deinit is made when a plugin is no longer needed and should release any resources. Don't rely only on deinit to release plugin resources as Flipper may quit without having the chance to issue a deinit call. In those cases, you should also rely on the RSocket disconnect callbacks. This call is mainly for allowing the desktop app to control the lifecycle of plugins. Opposite of init. A call to deinit is made when a plugin is no longer needed and should release any resources. Don't rely only on deinit to release plugin resources as Flipper may quit without having the chance to issue a deinit call. In those cases, you should also rely on the RSocket disconnect callbacks. This call is mainly for allowing the desktop app to control the lifecycle of plugins.
``` ```js
Request = { Request = {
"method": "deinit", "method": "deinit",
"params": { "params": {
@@ -115,7 +115,7 @@ request.params.api is the plugin id.
request.params.method is the method within the plugin to execute. request.params.method is the method within the plugin to execute.
request.params.params is an optional params object containing the parameters to the RPC invocation. request.params.params is an optional params object containing the parameters to the RPC invocation.
``` ```js
Request = { Request = {
"method": "execute", "method": "execute",
"params": { "params": {
@@ -137,7 +137,7 @@ Response = {
The Flipper desktop app handles error reporting so you don't have to. If an error occurs during the execution of an RPC invocation, return a serialization of it in the response so it can be attributed to the method call. The Flipper desktop app handles error reporting so you don't have to. If an error occurs during the execution of an RPC invocation, return a serialization of it in the response so it can be attributed to the method call.
If an error occurs in some other context, you can proactively send it to Flipper with the following request structure: If an error occurs in some other context, you can proactively send it to Flipper with the following request structure:
``` ```js
Request = { Request = {
error: { error: {
message: string, message: string,
@@ -150,7 +150,7 @@ While in development mode, Flipper will display any client errors next to javasc
## Testing ## Testing
Testing is incredibly important when building core infrastructure and tools. The following is pseudo code for tests we would expect any new FlipperClient implementation to implement and correctly execute. To run tests we strongly encourage you to build a mock for the RSocket connection to mock out the desktop side of the protocol and to not have any network dependencies in your test code. Testing is incredibly important when building core infrastructure and tools. The following is pseudo code for tests we would expect any new FlipperClient implementation to implement and correctly execute. To run tests we strongly encourage you to build a mock for the RSocket connection to mock out the desktop side of the protocol and to not have any network dependencies in your test code.
``` ```js
test("GetPlugins", { test("GetPlugins", {
let connection = new MockConnection(); let connection = new MockConnection();
let client = new FlipperClient(connection); let client = new FlipperClient(connection);
@@ -172,7 +172,7 @@ test("GetPlugins", {
})); }));
}); });
``` ```
``` ```js
test("InitDeinit", { test("InitDeinit", {
let connection = new MockConnection(); let connection = new MockConnection();
let client = new FlipperClient(connection); let client = new FlipperClient(connection);
@@ -204,7 +204,7 @@ test("InitDeinit", {
assertFalse(plugin.connected); assertFalse(plugin.connected);
}); });
``` ```
``` ```js
test("Disconnect", { test("Disconnect", {
let connection = new MockConnection(); let connection = new MockConnection();
let client = new FlipperClient(connection); let client = new FlipperClient(connection);
@@ -228,7 +228,7 @@ test("Disconnect", {
assertFalse(plugin.connected); assertFalse(plugin.connected);
}); });
``` ```
``` ```js
test("Execute", { test("Execute", {
let connection = new MockConnection(); let connection = new MockConnection();
let client = new FlipperClient(connection); let client = new FlipperClient(connection);

2
docs/extending/plugin-distribution.mdx
View File

@@ -13,7 +13,7 @@ Flipper plugins are essentially standard npm packages. So you can publish them b
1. `package.json` and code [must follow the Flipper plugin specification](desktop-plugin-structure#plugin-definition) 1. `package.json` and code [must follow the Flipper plugin specification](desktop-plugin-structure#plugin-definition)
2. code must be bundled using "flipper-pkg" before packing or publishing. This can be done by executing `flipper-pkg bundle` on `prepack` step: 2. code must be bundled using "flipper-pkg" before packing or publishing. This can be done by executing `flipper-pkg bundle` on `prepack` step:
``` ```json
{ {
... ...
"devDependencies": { "devDependencies": {

2
docs/extending/search-and-filter.mdx
View File

@@ -31,7 +31,7 @@ The list of filters that are currently applied.
### Example ### Example
``` ```tsx
import type {SearchableProps} from 'flipper'; import type {SearchableProps} from 'flipper';
import {Searchable} from 'flipper'; import {Searchable} from 'flipper';

8
docs/extending/styling-components.mdx
View File

@@ -10,7 +10,7 @@ Flipper ships with its own design system which is based on [Ant Design](https://
In general, custom styling should be needed rarily, as Ant Design provides a very extensive set of [components](https://ant.design/components/overview/). In general, custom styling should be needed rarily, as Ant Design provides a very extensive set of [components](https://ant.design/components/overview/).
To build plugin layout and data visualization Flipper ships with an additional set of components through the `flipper-plugin` package. To build plugin layout and data visualization Flipper ships with an additional set of components through the `flipper-plugin` package.
The list of available additional compoents can be found in the <Link to={useBaseUrl('/docs/extending/flipper-plugin#ui-components')}>API Reference</Link> and are further documented The list of available additional components can be found in the <Link to={useBaseUrl('/docs/extending/flipper-plugin#ui-components')}>API Reference</Link> and are further documented
in the Flipper Style Guide which can be found in Flipper under `View > Flipper style guide`. in the Flipper Style Guide which can be found in Flipper under `View > Flipper style guide`.
In case you still need customly styled components, In case you still need customly styled components,
@@ -20,7 +20,7 @@ we are using [emotion](https://emotion.sh) to style our components. For more det
For basic building blocks (views, texts, ...) you can use the styled object. For basic building blocks (views, texts, ...) you can use the styled object.
```javascript ```js
import {styled} from 'flipper-plugin'; import {styled} from 'flipper-plugin';
const MyView = styled.div({ const MyView = styled.div({
@@ -37,7 +37,7 @@ const MyInput = styled.input({ ... });
In some cases it is required to customize Ant or Flipper's components in some way. For example changing colors, alignment, or wrapping behavior. In some cases it is required to customize Ant or Flipper's components in some way. For example changing colors, alignment, or wrapping behavior.
Flippers components can be wrapped using the `styled` function which allows adding or overwriting existing style rules. Flippers components can be wrapped using the `styled` function which allows adding or overwriting existing style rules.
```javascript ```jsx
import {Layout, styled} from 'flipper-plugin'; import {Layout, styled} from 'flipper-plugin';
const Container = styled(Layout.Container)({ const Container = styled(Layout.Container)({
@@ -55,7 +55,7 @@ The CSS-in-JS object passed to the styled components takes just any CSS rule, wi
The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React. The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React.
```javascript ```jsx
const MyView = styled.div( const MyView = styled.div(
props => ({ props => ({
fontSize: 10, fontSize: 10,

4
docs/extending/supporting-layout.mdx
View File

@@ -8,7 +8,7 @@ To enable the Flipper layout inspector on a new platform, just implement a clien
Note that we're using [Flow](https://flow.org/en/docs/types/objects/) syntax to specify this JSON API. Note that we're using [Flow](https://flow.org/en/docs/types/objects/) syntax to specify this JSON API.
### Node ### Node
``` ```ts
type NodeId = string; type NodeId = string;
type InspectorValue = { type InspectorValue = {
@@ -45,7 +45,7 @@ InspectorValue can also be used to change the parsed type of the value, such as
### Plugin Interface ### Plugin Interface
``` ```ts
interface ClientLayoutPlugin { interface ClientLayoutPlugin {
Node getRoot(); Node getRoot();
GetNodesResponse getNodes({ids: Array<NodeId>}); GetNodesResponse getNodes({ids: Array<NodeId>});

4
docs/extending/testing.mdx
View File

@@ -76,7 +76,7 @@ public void myTest() {
Start by creating your first test file in this directory `MyFlipperPluginTests.cpp` and import the testing utilities from `fbsource//xplat/sonar/xplat:FlipperTestLib`. These utilities mock out core pieces of the communication channel so that you can test your plugin in isolation. Start by creating your first test file in this directory `MyFlipperPluginTests.cpp` and import the testing utilities from `fbsource//xplat/sonar/xplat:FlipperTestLib`. These utilities mock out core pieces of the communication channel so that you can test your plugin in isolation.
``` ```objc
#include <MyFlipperPlugin/MyFlipperPlugin.h> #include <MyFlipperPlugin/MyFlipperPlugin.h>
#include <FlipperTestLib/FlipperConnectionMock.h> #include <FlipperTestLib/FlipperConnectionMock.h>
#include <FlipperTestLib/FlipperResponderMock.h> #include <FlipperTestLib/FlipperResponderMock.h>
@@ -99,7 +99,7 @@ TEST(MyFlipperPluginTests, testDummy) {
Here is a simple test using these mock utilities to create a plugin, send some data, and assert that the result is as expected. Here is a simple test using these mock utilities to create a plugin, send some data, and assert that the result is as expected.
``` ```objc
TEST(MyFlipperPluginTests, testDummy) { TEST(MyFlipperPluginTests, testDummy) {
std::vector<folly::dynamic> successfulResponses; std::vector<folly::dynamic> successfulResponses;
auto responder = std::make_unique<FlipperResponderMock>(&successfulResponses); auto responder = std::make_unique<FlipperResponderMock>(&successfulResponses);

2
docs/getting-started/ios-native.mdx
View File

@@ -91,7 +91,7 @@ AppDelegate.
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
#import <FlipperKit/FlipperClient.h> #import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h> #import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>

2
docs/getting-started/react-native-ios.mdx
View File

@@ -107,7 +107,7 @@ The code below enables the following integrations:
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
... ...
#if DEBUG #if DEBUG
#ifdef FB_SONARKIT_ENABLED #ifdef FB_SONARKIT_ENABLED

4
docs/setup/layout-plugin.mdx
View File

@@ -94,7 +94,7 @@ Once you have added the pod, initialise the plugin and add it to the `FlipperCli
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults]; SKDescriptorMapper *mapper = [[SKDescriptorMapper alloc] initWithDefaults];
@@ -126,7 +126,7 @@ Once you have added the pod you will then need to augment the descriptor with Co
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h> #import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h> #import <FlipperKitLayoutComponentKitSupport/FlipperKitLayoutComponentKitSupport.h>

2
docs/setup/network-plugin.mdx
View File

@@ -56,7 +56,7 @@ Initialise the plugin in the following way:
<Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}> <Tabs defaultValue="ios" values={[{ label: 'iOS', value: 'ios'}, { label: 'Swift', value: 'swift'}]}>
<TabItem value="ios"> <TabItem value="ios">
```objective-c ```objc
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h> #import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
[[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]]; [[FlipperClient sharedClient] addPlugin: [[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];

4
docs/troubleshooting.mdx
View File

@@ -232,7 +232,7 @@ If you experience errors such as `Undefined symbol: associated type descriptor f
Comment out the relevant lines in `ios/Podfile` and run `cd ios && pod install` again: Comment out the relevant lines in `ios/Podfile` and run `cd ios && pod install` again:
``` ```ruby
# use_flipper! # use_flipper!
# post_install do |installer| # post_install do |installer|
# flipper_post_install(installer) # flipper_post_install(installer)
@@ -243,7 +243,7 @@ Comment out the relevant lines in `ios/Podfile` and run `cd ios && pod install`
To speed up CI builds, Flipper can be disabled on CI environments by making the Flipper SDK inclusion conditional (this works on most CI providers, feel free to customize the environment variable): To speed up CI builds, Flipper can be disabled on CI environments by making the Flipper SDK inclusion conditional (this works on most CI providers, feel free to customize the environment variable):
``` ```ruby
if !ENV['CI'] if !ENV['CI']
use_flipper! use_flipper!
post_install do |installer| post_install do |installer|

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

@@ -21,7 +21,7 @@ After that, we replace our `createTablePlugin` with a `plugin` definition, and a
Separating those two concepts helps with testing and maintaining state when the user switches plugins. Separating those two concepts helps with testing and maintaining state when the user switches plugins.
```typescript ```tsx
import React from 'react'; import React from 'react';
import {PluginClient, createState} from 'flipper-plugin'; import {PluginClient, createState} from 'flipper-plugin';
@@ -115,7 +115,7 @@ Unit tests will be picked automatically by Jest if they are named like `__tests_
running `yarn test --watch` in our plugin root. running `yarn test --watch` in our plugin root.
Here is our initial unit test: Here is our initial unit test:
```typescript ```ts
// (1) // (1)
import {TestUtils} from 'flipper-plugin'; import {TestUtils} from 'flipper-plugin';
// (2) // (2)
@@ -184,7 +184,7 @@ Flipper leverages Ant design, so any [official Ant component](https://ant.design
The styling system used by Flipper can be found by starting Flipper, and opening `View > Flipper Style Guide`. The styling system used by Flipper can be found by starting Flipper, and opening `View > Flipper Style Guide`.
The different `Layout` elements are documented there as well. The different `Layout` elements are documented there as well.
```typescript ```tsx
import React, {memo} from 'react'; import React, {memo} from 'react';
import {Typography, Card} from 'antd'; import {Typography, Card} from 'antd';
import { import {
@@ -264,7 +264,7 @@ The source of the other `MammalCard` component can be found [here](https://githu
At this moment the plugin is ready to be used in Flipper, and opening it should lead to sane results. At this moment the plugin is ready to be used in Flipper, and opening it should lead to sane results.
But let's verify with some tests that the UI works correctly, and doesn't regress in the future by adding another unit test to the `seamammals.spec.tsx` file and assert that the rendering is correct and interactive: But let's verify with some tests that the UI works correctly, and doesn't regress in the future by adding another unit test to the `seamammals.spec.tsx` file and assert that the rendering is correct and interactive:
```typescript ```ts
test('It can have selection and render details', async () => { test('It can have selection and render details', async () => {
// (1) // (1)
const { const {

10
docs/tutorial/js-table.mdx
View File

@@ -25,7 +25,7 @@ can sort, filter and select items for more detailed information.
We start by defining what our table rows look like as types: We start by defining what our table rows look like as types:
```javascript ```js
type Id = number; type Id = number;
type Row = { type Row = {
@@ -43,7 +43,7 @@ that we know when something new was added to the table. We will use the
Next, we define which columns to show and how to display them: Next, we define which columns to show and how to display them:
```javascript ```js
const columns = { const columns = {
title: { title: {
value: 'Title', value: 'Title',
@@ -73,7 +73,7 @@ table. You could, for instance, show images that you referenced.
For this tutorial, however, we will just show the full object by For this tutorial, however, we will just show the full object by
using our `ManagedDataInspector` UI component: using our `ManagedDataInspector` UI component:
```javascript ```jsx
import {Panel, ManagedDataInspector} from 'flipper'; import {Panel, ManagedDataInspector} from 'flipper';
function renderSidebar(row: Row) { function renderSidebar(row: Row) {
@@ -96,7 +96,7 @@ also render individual rows in our table but instead of a React
component, we provide a description of the data based component, we provide a description of the data based
on the column keys we have set up before. on the column keys we have set up before.
```javascript ```jsx
function buildRow(row: Row): TableBodyRow { function buildRow(row: Row): TableBodyRow {
return { return {
columns: { columns: {
@@ -130,7 +130,7 @@ any row and copy the content to their clipboard.
Now that we've build all the individual pieces, we Now that we've build all the individual pieces, we
just need to hook it all up using `createTablePlugin`: just need to hook it all up using `createTablePlugin`:
```javascript ```js
export default createTablePlugin<Row>({ export default createTablePlugin<Row>({
method: 'newRow', method: 'newRow',
columns, columns,

2
website/docusaurus.config.js
View File

@@ -144,7 +144,7 @@ const siteConfig = {
}, },
}), }),
prism: { prism: {
additionalLanguages: ['groovy', 'java', 'kotlin', 'ruby', 'swift'], additionalLanguages: ['groovy', 'java', 'kotlin', 'ruby', 'swift', 'objectivec'],
}, },
}, },
favicon: 'img/icon.png', favicon: 'img/icon.png',