diff --git a/desktop/plugins/seamammals/package.json b/desktop/plugins/seamammals/package.json index 3e15b9a29..fa04cf751 100644 --- a/desktop/plugins/seamammals/package.json +++ b/desktop/plugins/seamammals/package.json @@ -1,13 +1,28 @@ { - "name": "sea-mammals", - "version": "1.0.0", - "main": "index.tsx", + "name": "flipper-plugin-sea-mammals", + "id": "sea-mammals", + "private": true, + "specVersion": 2, + "version": "2.0.0", + "main": "dist/bundle.js", + "flipperBundlerEntry": "src/index.tsx", "license": "MIT", - "keywords": ["flipper-plugin"], + "keywords": [ + "flipper-plugin" + ], "icon": "apps", "title": "Sea Mammals", "category": "Example Plugin", "bugs": { "email": "realpassy@fb.com" + }, + "scripts": { + "prepack": "flipper-pkg bundle" + }, + "dependencies": { + "flipper": "0.39.0" + }, + "devDependencies": { + "flipper-pkg": "0.39.0" } } diff --git a/desktop/plugins/seamammals/index.tsx b/desktop/plugins/seamammals/src/index.tsx similarity index 100% rename from desktop/plugins/seamammals/index.tsx rename to desktop/plugins/seamammals/src/index.tsx diff --git a/desktop/scripts/workspaces.ts b/desktop/scripts/workspaces.ts index 0c62275cb..4546aa3cd 100644 --- a/desktop/scripts/workspaces.ts +++ b/desktop/scripts/workspaces.ts @@ -27,6 +27,10 @@ export interface Workspaces { packages: Package[]; } +function isPlugin(dir: string) { + return dir.startsWith(pluginsDir); +} + export async function getWorkspaces(): Promise { const rootPackageJson = await fs.readJson(path.join(rootDir, 'package.json')); const packageGlobs = rootPackageJson.workspaces.packages as string[]; @@ -37,9 +41,7 @@ export async function getWorkspaces(): Promise { glob(path.join(rootDir, pattern, '')), )), ), - async (dir) => - !dir.startsWith(pluginsDir) && - (await fs.pathExists(path.join(dir, 'package.json'))), + async (dir) => await fs.pathExists(path.join(dir, 'package.json')), ), async (dir) => { const json = await fs.readJson(path.join(dir, 'package.json')); @@ -95,11 +97,13 @@ async function bumpWorkspaceVersions( ): Promise { newVersion = newVersion || (rootPackage.json.version as string); const allPackages = [rootPackage, ...packages]; - const localPackageNames = packages.map(({json}) => json.name as string); + const localPackageNames = packages + .filter((pkg) => !isPlugin(pkg.dir)) + .map(({json}) => json.name as string); for (const pkg of allPackages) { - const json = pkg.json; + const {dir, json} = pkg; let changed = false; - if (json.version !== newVersion) { + if (json.version !== newVersion && !isPlugin(dir)) { json.version = newVersion; changed = true; } diff --git a/docs/tutorial/js-publishing.md b/docs/tutorial/js-publishing.md index 3a2bcb154..b67b4aef7 100644 --- a/docs/tutorial/js-publishing.md +++ b/docs/tutorial/js-publishing.md @@ -11,21 +11,31 @@ 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 { - "name": "flipper-plugin-example", - "version": "1.0.0", - "description": "An example for a Flipper plugin", - "main": "index.tsx", + "name": "flipper-plugin-sea-mammals", + "id": "sea-mammals", + "specVersion": 2, + "version": "2.0.0", + "main": "dist/bundle.js", + "flipperBundlerEntry": "src/index.tsx", "license": "MIT", "keywords": ["flipper-plugin"], - "title": "Example Plugin", "icon": "apps", - "bugs": { - "url": "https://github.com/facebook/flipper/issues/" + "title": "Sea Mammals", + "category": "Example Plugin", + "scripts": { + "prepack": "flipper-pkg bundle" + }, + "dependencies": { + "flipper": "latest" + }, + "devDependencies": { + "flipper-pkg": "latest" } } ``` diff --git a/docs/tutorial/js-setup.md b/docs/tutorial/js-setup.md index b2c5ef480..ddc9887f2 100644 --- a/docs/tutorial/js-setup.md +++ b/docs/tutorial/js-setup.md @@ -5,7 +5,8 @@ sidebar_label: Building a Desktop Plugin --- Now that we have the native side covered, let's display the data we're sending -on the desktop side. +on the desktop side. You can check out the full workflow of building Flipper desktop +plugins here: https://fbflipper.com/docs/extending/js-setup.html. ![Custom cards UI for our sea mammals plugin](assets/js-custom.png) @@ -40,22 +41,36 @@ $ cd sea-mammals $ yarn init ``` -When choosing the package name, remember to use the name we have specified on the native side as ID. -In our case, that is "sea-mammals". Once done, open the `package.json`. In addition to the name, -you can also specify a title to show in the Flipper sidebar and an icon to display here. For instance: +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. + +For instance: ```json { - "name": "sea-mammals", - "version": "1.0.0", - "main": "index.tsx", + "name": "flipper-plugin-sea-mammals", + "id": "sea-mammals", + "specVersion": 2, + "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 bundle" + }, "dependencies": { "flipper": "latest" + }, + "devDependencies": { + "flipper-pkg": "latest" } } ```