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

"lint" command for flipper-pkg tool

Browse Source 
Summary:
Implemented json schema for flipper plugin package.json and used it for validation in "flipper-pkg lint" command.

Nice thing about json schema is that it not only allows to validate json, but also can be referenced using "$schema" property in json so IDEs like VSCode can find it and use for code completion, validation and to show properties documentation. I'm going to deploy the schema as a part of documentation website so it can be referenced as https://fbflipper.com/schemas/plugin-package/v2.json.

Also the "$schema" field can be used instead of "specVersion" to determine the specification according to which the plugin is defined. E.g., if specification version 3 would be created, it will be described in schema https://fbflipper.com/schemas/plugin-package/v3.json, etc.

Reviewed By: passy

Differential Revision: D21228294

fbshipit-source-id: f21351e584ef936a7d6b314436448489691f83a6
This commit is contained in:
Anton Nikolaev
2020-04-27 17:31:39 -07:00
committed by Facebook GitHub Bot
parent 01f8d80402
commit 21c574ac80
24 changed files with 1062 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docs/tutorial/js-setup.mdx
View File

@@ -43,19 +43,21 @@ $ yarn init
```
Open the `package.json` and edit it. There are a few important things:
1) "name" must start with "flipper-plugin-"
2) "keywords" must contain "flipper-plugin"
3) "id" must be the same as used on native side, e.g. returned by getId() method in Android plugin. In our case that is "sea-mammals".
4) "specVersion" must contain the version of the specification according to which the plugin is defined. Currently, Flipper supports plugins defined by the specification version 2, while version 1 is being deprecated.
5) "title" and "icon" are optional fields specifying the plugin item appearance in the Flipper sidebar.
1) "$schema" must contain URI identifying scheme according to which the plugin is defined. Currently, Flipper supports plugins defined by the specification version 2 (https://fbflipper.com/schemas/plugin-package/v2.json), while version 1 is being deprecated.
2) "name" must start with "flipper-plugin-"
3) "keywords" must contain "flipper-plugin"
4) "id" must be the same as used on native side, e.g. returned by getId() method in Android plugin. In our case that is "sea-mammals".
5) "flipperBundlerEntry" must point to the source entry point which will be used by "flipper-pkg" to produce the plugin bundle.
6) "main" must point to the place where the produced bundle will be written.
7) "title" and "icon" are optional fields specifying the plugin item appearance in the Flipper sidebar.
For instance:
```json
{
"$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
"name": "flipper-plugin-sea-mammals",
"id": "sea-mammals",
"specVersion": 2,
"version": "2.0.0",
"main": "dist/bundle.js",
"flipperBundlerEntry": "src/index.tsx",
@@ -65,7 +67,8 @@ For instance:
"title": "Sea Mammals",
"category": "Example Plugin",
"scripts": {
"prepack": "flipper-pkg bundle"
"lint": "flipper-pkg lint",
"prepack": "flipper-pkg lint && flipper-pkg bundle"
},
"peerDependencies": {
"flipper": "latest"
@@ -78,4 +81,6 @@ For instance:
```
*See [package.json](https://github.com/facebook/flipper/blob/master/desktop/plugins/seamammals/package.json)*
To ensure there are no errors in the defined plugin, install packages (using `yarn install` or `npm install`) and execute script `lint` (`yarn lint` or `npm run lint`) which shows all the mismatches that should be fixed to make the plugin definition valid.
Now that our package has been set up, we are ready to build a UI for our plugin. Either by using a standardized table-based plugin, or by creating a custom UI.