From 378638a4510a9a93dbb0b8e121e231fc8e10eec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Sat, 24 Aug 2019 03:27:00 -0700 Subject: [PATCH] website updates for TS Summary: update website to use TS instead of JS Reviewed By: passy Differential Revision: D16986666 fbshipit-source-id: 969de3ffcdf4aa594d9811947e5b440e594838e7 --- docs/extending/establishing-a-connection.md | 2 +- docs/extending/js-plugin-api.md | 6 +++--- docs/extending/jssetup.md | 7 +++++-- docs/extending/styling-components.md | 2 +- docs/tutorial/js-custom.md | 18 ++++++++---------- docs/tutorial/js-table.md | 13 ++++++++----- 6 files changed, 26 insertions(+), 22 deletions(-) diff --git a/docs/extending/establishing-a-connection.md b/docs/extending/establishing-a-connection.md index 0afc6832e..58fe2d58f 100644 --- a/docs/extending/establishing-a-connection.md +++ b/docs/extending/establishing-a-connection.md @@ -60,4 +60,4 @@ This will ask Flipper desktop to generate a client certificate, using the CSR pr Depending on the client, `destination` can have a different meaning. A basic example would be a file path, that both the desktop and the client have access to. With this Flipper desktop could write the certificate to that path. A more involved example is that of the Android Client, where destination specifies a relative path inside an app container. And the Subject Common Name determines which app container. Together these two pieces of information form an absolute file path inside an android device. -For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.js](https://github.com/facebook/flipper/blob/master/src/utils/CertificateProvider.js). +For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/src/utils/CertificateProvider.tsx). diff --git a/docs/extending/js-plugin-api.md b/docs/extending/js-plugin-api.md index c9e62f5c0..c1ade265b 100644 --- a/docs/extending/js-plugin-api.md +++ b/docs/extending/js-plugin-api.md @@ -3,7 +3,7 @@ id: js-plugin-api title: JavaScript Plugin API --- -Provided a plugin is setup as defined in [JS Plugin Definiton](js-setup), the basic requirement of a Flipper plugin is that `index.js` exports a default class that extends `FlipperPlugin`. +Provided a plugin is setup as defined in [JS Plugin Definiton](js-setup), the basic requirement of a Flipper plugin is that `index.tsx` exports a default class that extends `FlipperPlugin`. `FlipperPlugin` is an extension of `React.Component` with extra Flipper-related functionality. This means to define the UI of your plugin, you just need to implement this React component. @@ -69,7 +69,7 @@ Sometimes it's desirable for a plugin to be able to process incoming messages fr To do this, define a static `persistedStateReducer` function in the plugin class: ``` -static persistedStateReducer( +static persistedStateReducer( persistedState: PersistedState, method: string, data: Object @@ -92,7 +92,7 @@ static getActiveNotifications( When the user clicks on a notification, they will be sent back to your plugin with the [deepLinkPayload](#deeplinkpayload) equal to the notification's action. ## Type Parameters -`FlipperPlugin` can optionally take the following type parameters. It is highly recommended you provide them to benefit from type safety, but you can pass `*` when not using these features. +`FlipperPlugin` can optionally take the following type parameters. It is highly recommended you provide them to benefit from type safety, but you can pass `any` when not using these features. **State**: Specifies the type of the FlipperPlugin state. A `FlipperPlugin` is a React component, and this is equivalent to the React state type parameter. diff --git a/docs/extending/jssetup.md b/docs/extending/jssetup.md index 277061c83..2d64b9f35 100644 --- a/docs/extending/jssetup.md +++ b/docs/extending/jssetup.md @@ -5,7 +5,7 @@ title: JavaScript Plugin Definition All JavaScript Flipper plugins must be self-contained in a directory. This directory must contain at a minimum the following two files: * package.json -* index.js +* index.tsx The best way to initialize a JS plugin is to create a directory, and run `yarn init` inside it. Make sure your package name is the same as the identifier of the client plugin, e.g. if your Java plugin returns `myplugin` from its `getId()` method, the `name` field in your `package.json` should also be `myplugin`. @@ -25,6 +25,9 @@ Example `package.json`: "icon": "apps", "bugs": { "email": "you@example.com" + }, + "dependencies": { + "flipper": "latest" } } ``` @@ -73,7 +76,7 @@ Plugin File Structure: ### npm dependencies -If you need any dependencies in your plugin, you can install them using `yarn add`. The Flipper UI components exported from `flipper`, as well as `react` and `react-dom` don't need to be installed as dependencies. Our plugin-loader makes these dependencies available to your plugin. +If you need any dependencies in your plugin, you can install them using `yarn add`. ### ES6, babel-transforms and bundling diff --git a/docs/extending/styling-components.md b/docs/extending/styling-components.md index e1b5bfa94..c02daa606 100644 --- a/docs/extending/styling-components.md +++ b/docs/extending/styling-components.md @@ -65,7 +65,7 @@ Pseudo-classes can be used like this: ## Colors -The colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.js`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.js) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: +The colors module contains all standard colors used by Flipper. All the available colors are defined in [`src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: ```javascript import {colors} from 'flipper' diff --git a/docs/tutorial/js-custom.md b/docs/tutorial/js-custom.md index ce89a1964..ee57384ea 100644 --- a/docs/tutorial/js-custom.md +++ b/docs/tutorial/js-custom.md @@ -11,10 +11,10 @@ Displaying your data in a table might work for many use-cases. However, dependin For our sea mammals app, we might not only want to see them listed as image URLs in a table but render the actual images in nice little cards. When selecting one of the cards we still want to display all details in the sidebar. ![Custom cards UI for our sea mammals plugin](/docs/assets/js-custom.png) -Currently, the default export in our `index.js` is from `createTablePlugin`. Now we are going to replace this with a custom React component extending `FlipperPlugin`. +Currently, the default export in our `index.tsx` is from `createTablePlugin`. Now we are going to replace this with a custom React component extending `FlipperPlugin`. ```js -export default class SeaMammals extends FlipperPlugin { +export default class SeaMammals extends FlipperPlugin { static Container = styled(FlexRow)({ backgroundColor: colors.macOSTitleBarBackgroundBlur, flexWrap: 'wrap', @@ -43,20 +43,19 @@ The plugin is quite useless when we don't display any actual data. We are adding 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.md#persistedstate) in our guide. ```js -static defaultPersistedState = { +static defaultPersistedState: PersistedState = { data: [], }; -static persistedStateReducer = ( +static persistedStateReducer( persistedState: PersistedState, method: string, payload: Row, -) => { +) { if (method === 'newRow') { - return { - ...persistedState, + return return Object.assign({}, persistedState, {, [payload.id]: payload, - }; + }); } return persistedState; }; @@ -103,10 +102,9 @@ The `Card` component is responsible for rendering the actual image and title. Th ```js class Card extends React.Component<{ - ...Row, onSelect: () => void, selected: boolean, -}> { +} & Row> { static Container = styled(FlexColumn)(props => ({ margin: 10, borderRadius: 5, diff --git a/docs/tutorial/js-table.md b/docs/tutorial/js-table.md index 60e7f1902..51c2aa581 100644 --- a/docs/tutorial/js-table.md +++ b/docs/tutorial/js-table.md @@ -47,13 +47,16 @@ you can also specify a title to show in the Flipper sidebar and an icon to displ { "name": "sea-mammals", "version": "1.0.0", - "main": "index.js", + "main": "index.tsx", "license": "MIT", "icon": "apps", - "title": "Sea Mammals" + "title": "Sea Mammals", + "dependencies": { + "flipper": "latest" + } } ``` -*See [package.json](https://github.com/facebook/flipper/blob/7dae5771d96ea76b75796d3b3a2c78746e581e3f/src/plugins/seamammals/package.json)* +*See [package.json](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/package.json)* ## Building a Table @@ -171,7 +174,7 @@ Now that we've build all the individual pieces, we just need to hook it all up using `createTablePlugin`: ```javascript -export default createTablePlugin({ +export default createTablePlugin({ method: 'newRow', columns, columnSizes, @@ -179,7 +182,7 @@ export default createTablePlugin({ buildRow, }); ``` -*See [index.js](https://github.com/facebook/flipper/blob/7dae5771d96ea76b75796d3b3a2c78746e581e3f/src/plugins/seamammals/index.js)* +*See [index.tsx](https://github.com/facebook/flipper/blob/master/src/plugins/seamammals/index.tsx)* The `method` we define here corresponds to the name of the function we call on the native side to inform