Summary:
I've decided to migrate [a desktop plugin](https://github.com/bamlab/react-native-performance) to Sandy.
When doing so, I decided to rise to the challenge from the [Flipper docs](https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic): `we are going to pretend that we always write unit tests first` 😅
However, I've realized that when creating a plugin with `npx flipper-pkg init`, running `yarn jest` directly after creation actually fails.
There are 3 issues solved in the different commits:
1. an absolute import seem to not be resolved, since all the other imports were relative in the file, I changed it as well
2. some dependencies are missing.
They used to be included in the `flipper` dependency but when migrating to use `flipper-plugin` instead, they're not present anymore.
I don't think this is an ideal fix, I would believe a dependency like a `flipper-dev-environment` including all of those would be more appropriate. So I'm open to suggestions to fix/remove of course
3. jest.config needs to be fixed to run in jsdom environment and ensure we can test the react component
## Changelog
Fix: ensure desktop plugin template tests run
Pull Request resolved: https://github.com/facebook/flipper/pull/3039
Test Plan:
I've cloned the repo and run:
```
cd flipper/desktop/pkg
yarn
cd ../../..
./flipper/desktop/pkg/bin/run init
```
I run the tests on the newly package created, but it actually still failed because of the first issue (since it still installed `flipper-plugin` from npm`)
However, by adding this patch, it now runs!
```patch
diff --git a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
index 2e07ff5..ff3181d 100644
--- a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
+++ b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js
@@ -39,7 +39,7 @@ const useAssertStableRef_1 = require("../../utils/useAssertStableRef");
const PluginContext_1 = require("../../plugin/PluginContext");
const lodash_1 = require("lodash");
const useInUnitTest_1 = require("../../utils/useInUnitTest");
-const createDataSource_1 = require("flipper-plugin/src/state/createDataSource");
+const createDataSource_1 = require("../../state/createDataSource");
function DataTable(props) {
var _a, _b;
const { onRowStyle, onSelect, onCopyRows, onContextMenu } = props;
```
Reviewed By: aigoncharov
Differential Revision: D32358207
Pulled By: mweststrate
fbshipit-source-id: 7761b4150c24dd5379a24c3c1deeb78bf3dda4ee
Summary:
`flipper-pkg init` would always introduce `flipper-plugin` peer with version `latest`. Since that can never be checked against the current flipper version, it always generated a warning. Updated the init process to take the version the plugin was generated with as base version instead.
Note that in the test the version will always display as 0.0.0, will double check after release that the proper version will show up when running from npx, but don't see a reason why not (famous last words)
Reviewed By: nikoant, priteshrnandgaonkar
Differential Revision: D28992531
fbshipit-source-id: c32aad1650f575f790c2e04d089104b7a616d26f
Summary:
Few improvements for "build-plugin" task which together with Sandcastle command changes (D26872427) helps to build all plugins in CI ~30% faster if most of them has not changed (which is usually the case):
1) compute package checksum in the same script to not call additional yarn scripts for each plugin
2) avoid packaging plugin if it's checksum has not changed since last release
Reviewed By: mweststrate
Differential Revision: D26872253
fbshipit-source-id: 968102d32a1550ea7503f1169f0ef2863296383f
Summary:
Added option to bootstrap device plugin in "flipper-pkg".
Changelog: "flipper-pkg init" can now be used to bootstrap device plugins
Reviewed By: mweststrate
Differential Revision: D26389429
fbshipit-source-id: 90773011bd50289004cd747111e1787402840922
Summary:
I've re-designed interfaces describing plugins as I found that mental overhead working with them became too expensive because of slightly flawed design. However this cascaded changes in many files so you can see how extensively these interfaces used in our codebase.
Before this change we had one interface PluginDetails which described three different entities: 1) plugins installed on the disk 2) plugins bundled into Flipper 3) plugins available on Marketplace. It's hard to use this "general" PluginDetails interface because of this as you always need to think about all three use cases everywhere.
After this change we have 3 separate interfaces: InstalledPluginDetails, BundledPluginDetails and DownloadablePluginDetails and things became much type-safer now.
Reviewed By: mweststrate
Differential Revision: D25530383
fbshipit-source-id: b93593916a980c04e36dc6ffa168797645a0ff9c
Summary: Extracted plugin marketplace API to a separate file and updated it to load full plugin manifests.
Reviewed By: passy
Differential Revision: D25181759
fbshipit-source-id: a63f9ce16249ccc170df148cef5c209fdc6d4d6d
Summary: This updates the docs of Flipper to use Sandy, rather than `FlipperPlugin` class. Restructured the docs a bit as a result.
Reviewed By: passy
Differential Revision: D24991285
fbshipit-source-id: 66d5760c25cf9cf3983515433dfd64348d51db3d
Summary:
This diff updates plugin scaffolding by using Sandy and closely following the internal Scarf templates (see D24949452, D24949452)
By using `flipper-plugin`, it is now also possible to write unit tests for a plugin, and the default infra for that is generated (babel / jest)
For now there is still a dependency on `flipper` to support fancy components not yet available in Sandy, this will be updated in the future: T79632585
Changelog: `flipper-pkg init` now uses the new Sandy plugin infrastructure ant Ant.design component system
Reviewed By: nikoant
Differential Revision: D24950080
fbshipit-source-id: afc5e7ac728b20cb84fdbbdcb76cd45968736c01
Summary:
allow-large-files
Updated to typescript 4. Note that this is no new major, the way TS numbers is that 4.0 is simply the number after 3.9 (so they refuse to use 3.10).
Primarily reason is that it allows us to use `/** deprecated */`. although there are definitely more interesting improvements
Reviewed By: passy, nikoant
Differential Revision: D23869445
fbshipit-source-id: 54e251b398b8698d9b18898ce66c3203b32aa356
Summary: Changelog: Added command `flipper-pkg checksum` for computing the total checksum of all the files included into plugin package.
Reviewed By: passy
Differential Revision: D22255125
fbshipit-source-id: a4f91370b4ab16ea4ce4a60e29f9d20fdd5f4331
Summary:
When running `flipper-pkg init path/plugin`, this allows to skip the `Do you wanna add this path to watching in Flipper config?`, if the path is direct first level subdirectory of any added path from Flipper `pluginPaths: []`
## Changelog
- Improve matching for watched pluginPaths when initialising new plugin
Pull Request resolved: https://github.com/facebook/flipper/pull/1269
Test Plan:
1. Create folder: `~/flipper-plugins`
2. Add this folder to Flipper config `pluginPaths: ['~/flipper-plugins']`
3. Create new subfolder `test-plugin`
4. Run `flipper-pkg init test-plugin`
5. It should not ask to add this folder to pluginPaths
To verify it only works for first level subdirectory, create another folder: `/deep/test-plugin2` and re-run steps with it.
This should also keep working if we specify exactly the path for the plugin itself.
Reviewed By: mweststrate
Differential Revision: D22065630
Pulled By: jknoxville
fbshipit-source-id: 9ef8d364e3815033b63579e37a6f2d19515ca902
Summary: Added new package with test utilities re-used by other packages
Reviewed By: mweststrate
Differential Revision: D21949629
fbshipit-source-id: 8bfa959401669dc8911a1f647f417cafd92c2e4b
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/1198
Normalize paths so snapshots look the same on mac and win
Reviewed By: passy
Differential Revision: D21722773
fbshipit-source-id: 4a12117d3ec0fb57cdfc7c5bb06a5c0835412a5f
Summary: Freshly init-ed plugins are not picked up by Flipper if they are not on the search path. This diff checks if the current dir is on the search path, and, if not, suggests to add it.
Reviewed By: jknoxville
Differential Revision: D21619632
fbshipit-source-id: b1dbe2695dbee9ce537999dc83e36f969ba4b747
Summary:
Created a test that snapshots the generated files, so that we can capture accidental regressions when generating files.
Also made the package id to package name a bit more robust
Reviewed By: jknoxville
Differential Revision: D21619633
fbshipit-source-id: 88ffb127e050d840df9ccd4b15ba29a71f341975
Summary:
Although there are tools that do this for you (create-react-app, react-native), and other that assume you are already in the created directory before you invoke the command (typescript, git), creating the directory by the tool has a few benefits:
1. less risk of making an accidental mess when people assume they don't need to create the dir first (I definitely ended up with a node_modules in the wrong directory)
1. it provide a naive way of detecting plugin name conflicts early (at least for plugins you create yourself)
1. in the next diff I'll add a pkg suggestion to add the current directory to the search path for flipper plugins. In the current setup, that would require needing to suggest to add the parent directory, which somehow feels less logical
2. makes sure that the directory name follows npm conventions: the package.json name should match the current directory name (not super important, but e.g VSCode will show warnings otherwise)
Reviewed By: jknoxville
Differential Revision: D21619631
fbshipit-source-id: 6d027ad18f14659e0347a66cacf056eacbc65680
Summary:
Added a watch mode to the bundle command of flipper plugins. This makes it easy to test develop plugins locally, even when you are using a production build of flipper, which lowers the barrier of developing / fixing plugins.
opted for `fs.watch` over watchman to avoid some overengineering:
1. pkg / pkg-lib don't have the watchman utilities that would be needed for this. I wasn't sure if I could move those over from `static` without breaking the bootstrapping process
2. watchman is often a nuisance on non FB machines that aren't set up for it. fs.watch in contrast doesn't have any further dependencies or setup requirements, and is much more likely to work ootb.
3. since we watch only the `src` folder we don't really need the watchman optimizations. (so for a package.json change people would have to restart, but I don't think that is much of a problem).
Reviewed By: jknoxville
Differential Revision: D21523814
fbshipit-source-id: b1de72b7d01c6fc50cb8ce5709f54f8019eb89e4
Summary:
Searched for broken link patterns inside the app itself. I think I found them all but it's not certain.
Patterns searched for and replaced:
```
.html
getting-started/)
getting-started)
getting-started"
```
and also searched the repo for regex `\]\(.*)` and checked them by eye.
Reviewed By: passy
Differential Revision: D21306944
fbshipit-source-id: a2e09b0fd8677f5f26e5cc4a06805b474247f7e6
Summary: "migrate" command for easy migration of existing Flipper plugins to the specification version 2.
Reviewed By: passy
Differential Revision: D21253913
fbshipit-source-id: 9edb170fbaa10e9c3f670d5d68e69f4f6106c151
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/1072
Once again fixed GH windows jobs which are currently failing
Reviewed By: mweststrate
Differential Revision: D21277273
fbshipit-source-id: 0df6ee7eb00b8f72bd6952747fa0e25e787ca335
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
Summary:
Command which transpiles and bundles plugin code.
It is supposed to be used in "prepack" script for all open-sourced plugin packages to bundle them before publishing like this:
```
{
"devDependencies": {
"flipper-pkg": "latest"
},
"scripts": {
"prepack": "flipper-pkg bundle"
}
}
```
Also made directory parameter of other command "pack" optional so it also can be called from plugin directory simply by `flipper-pkg pack`.
Changelog: "flipper-pkg bundle" command for bundling plugins before publishing.
Reviewed By: mweststrate
Differential Revision: D21129691
fbshipit-source-id: 8f97bc950c28cf9ad8b0117c0e1d811ed1b988eb
Summary: Renamed command "bundle" to "pack" because the latter name better describe what the command does. Also I'm going to add another command which will only bundle the plugin code and it will be called "bundle" (see the next diff in this stack)
Reviewed By: mweststrate
Differential Revision: D21129690
fbshipit-source-id: 2dde30501c3776d6796c27c68d49948d1f84f822
Summary:
Added versioning for plugin format.
The first version is where "main" points to source code entry and plugins are bundled by Flipper in run-time on loading them.
The second version is where "main" points to the already existing bundle and Flipper just loads it without bundling. The plugins of version 2 must be bundled using "flipper-pkg" tool before publishing.
Changelog: Support new packaging format for plugins.
Reviewed By: mweststrate
Differential Revision: D21074173
fbshipit-source-id: 7b70250e48e5bd5d359c96149fb5b14e67783c4d
Summary: "flipper-pkg" added ~2MB to Flipper disttributive size, because of heavy dependencies which are only required for CLI functionality. See size warning in diff D21068373 in this stack where I added pkg as dependency to flipper. Here I'm splitting it into library and CLI packages, so Flipper app will only reference the library.
Reviewed By: passy
Differential Revision: D21087336
fbshipit-source-id: d9d62f1e75a835d1c0fa78ff1addb0d9a761a9c7
Summary: Moved getWatchFolders script to flipper-pkg and used it from other packages. Script helps to resolve all the folders with package dependencies including symlinked folders in case if plugin is a part of yarn workspaces.
Reviewed By: mweststrate
Differential Revision: D21068373
fbshipit-source-id: 8691837fdb1aef333dab4c13d8758262838d36ee
Summary:
SORRY FOR BIG DIFF, but it's really hard to split it as all these changes are cross-dependent and should be made at once:
1. Moved transformations to separate package "flipper-babel-transformer" and linked it using yarn workspaces to "static" and "pkg" packages where they are re-used. Removed double copies of transformations we had before int these two packages.
2. Converted transformations to typescript
3. Refactored transformations to avoid relying on file system paths for customisation (FB stubs and Electron stubs for headless build)
4. As babel transformations must be built before other builds - enabled incremental build for them and changed scripts to invoke the transformations build before other build scripts
5. As we need to deploy all the dependencies including the fresh "flipper-babel-transformer" as a part of "static" - implemented script which copies package with all the dependencies taking in account yarn workspaces (hoisting and symlinks)
Reviewed By: passy, mweststrate
Differential Revision: D20690662
fbshipit-source-id: 38a275b60d3c91e01ec21d1dbd72d03c05cfac0b
Summary:
This gets us on the latest Prettier 2.x:
https://prettier.io/blog/2020/03/21/2.0.0.html
Notably, this adds support for TypeScript 3.8,
which introduces new syntax, such as `import type`.
Reviewed By: zertosh
Differential Revision: D20636268
fbshipit-source-id: fca5833d003804333a05ba16325bbbe0e06d6c8a
Summary:
Quick notes:
- This looks worse than it is. It adds mandatory parentheses to single argument lambdas. Lots of outrage on Twitter about it, personally I'm {emoji:1f937_200d_2642} about it.
- Space before function, e.g. `a = function ()` is now enforced. I like this because both were fine before.
- I added `eslint-config-prettier` to the config because otherwise a ton of rules conflict with eslint itself.
Close https://github.com/facebook/flipper/pull/915
Reviewed By: jknoxville
Differential Revision: D20594929
fbshipit-source-id: ca1c65376b90e009550dd6d1f4e0831d32cbff03
Summary:
1) moved "sonar/desktop/src" to "sonar/desktop/app/src", so "app" is now a separate package containing the core Flipper app code
2) Configured yarn workspaces with the root in "sonar/desktop": app, static, pkg, doctor, headless-tests. Plugins are not included for now, I plan to do this later.
Reviewed By: jknoxville
Differential Revision: D20535782
fbshipit-source-id: 600b2301960f37c7d72166e0d04eba462bec9fc1
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/878
1) Enabled eslint error reporting for unresolved imports and fixed all the errors
2) Enabled eslint for typings (d.ts) and fixed all the errors
Reviewed By: passy
Differential Revision: D20335151
fbshipit-source-id: 7b142281a406b32df0f02a5cd0d7d05eba941acd
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/872
Move all the JS code related to desktop app to "desktop" subfolder.
The structure of "desktop" folder:
- `src` - JS code of Flipper desktop app executing in Electron Renderer (Chrome) process. This folder also contains all the Flipper plugins in subfolder "src/plugins".
- `static` - JS code of Flipper desktop app bootstrapping executing in Electron Main (Node.js) process
- `pkg` - Flipper packaging lib and CLI tool
- `doctor` - Flipper diagnostics lib and CLI tool
- `scripts` - Build scripts for Flipper desktop app
- `headless` - Headless version of Flipper app
- `headless-tests` - Integration tests running agains Flipper headless version
Reviewed By: passy
Differential Revision: D20249304
fbshipit-source-id: 9a51c63b51b92b758a02fc8ebf7d3d116770efe9
