21c574ac80
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
67 lines
2.0 KiB
Plaintext
67 lines
2.0 KiB
Plaintext
---
|
|
id: js-publishing
|
|
title: Publishing your Plugin
|
|
sidebar_label: Publishing
|
|
---
|
|
import useBaseUrl from '@docusaurus/useBaseUrl';
|
|
|
|
Once you're happy with your plugin and want the world to see it,
|
|
you can publish it to npm. Ensure that your plugin follows these
|
|
two rules:
|
|
|
|
- The package name should to start with "flipper-plugin-". This makes
|
|
it easier to see what the purpose of the package is.
|
|
- The package must include the keyword "flipper-plugin".
|
|
- Source code of the plugin must be bundled by "flipper-pkg" tool.
|
|
|
|
A valid example `package.json` could look like this:
|
|
|
|
```json
|
|
{
|
|
"$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
|
|
"name": "flipper-plugin-sea-mammals",
|
|
"id": "sea-mammals",
|
|
"version": "2.0.0",
|
|
"main": "dist/bundle.js",
|
|
"flipperBundlerEntry": "src/index.tsx",
|
|
"license": "MIT",
|
|
"keywords": ["flipper-plugin"],
|
|
"icon": "apps",
|
|
"title": "Sea Mammals",
|
|
"category": "Example Plugin",
|
|
"scripts": {
|
|
"prepack": "flipper-pkg lint && flipper-pkg bundle"
|
|
},
|
|
"dependencies": {
|
|
"flipper": "latest"
|
|
},
|
|
"devDependencies": {
|
|
"flipper-pkg": "latest"
|
|
}
|
|
}
|
|
```
|
|
|
|
When you have confirmed that your `package.json` is correct,
|
|
run `yarn publish` or `npm publish` and follow the instructions.
|
|
|
|
## Installing Plugins
|
|
|
|
Once your plugin is published you can find it, alongside other
|
|
available Flipper plugins, by clicking on "Manage Plugins..."
|
|
in the bottom of the left sidebar and selecting the
|
|
"Install Plugins" tab. It may take a few moments for the
|
|
search index to update and your plugin to appear.
|
|
|
|
<img alt="Install plugins" src={useBaseUrl("img/install-plugins.png")} />
|
|
|
|
## Native Distribution
|
|
|
|
Depending on whether the client-side part of your plugin targets
|
|
Android, iOS or React Native, we recommend you use the standard
|
|
package distribution mechanism for the platform.
|
|
|
|
This may be Maven Central, JCenter or GitHub Packages for Android,
|
|
CocoaPods for iOS and npm or GitHub Packages for React Native.
|
|
Make sure to leave setup instructions in the README of your
|
|
npm package.
|