13afb8b802
Summary:
Resolves https://github.com/facebook/flipper/issues/3819
This PR fixes Flipper's plugin installation, so that scoped plugins (with `/` in the name) can be successfully installed (+removed).
In more detail, Flipper's function [`installPluginFromNpm()`](69bac4a3d6/desktop/plugin-lib/src/pluginInstaller.tsx (L99-L114)) relies on the `live-plugin-manager` package to handle the NPM package to a temporary directory.
Before this patch, Flipper would assume the name of the directory (incorrectly). This patch simply uses the directory as provided by `live-plugin-manager`'s result.
If we use `shopify/flipper-plugin-react-native-performance` as a concrete example after this patch:
- `installPluginFromNpm()` is called to install `shopify/flipper-plugin-react-native-performance`
- `plugManNoDep.install()` installs the plugin to `/path/to/tmp/shopify/flipper-plugin-react-native-performance`
- note: before this patch, it would have been assumed to be installed to: `/path/to/tmp/shopify__flipper-plugin-react-native-performance` which does not exist
- `installPluginFromTempDir()` is called to install the package to `~/.flipper/installed-plugins/shopify__flipper-plugin-react-native-performance/{version}` (where `{version}` is the current version, i.e. `1.0.0`)
Once the plugin is in `~/.flipper/installed-plugins/`, the escaping is correctly applied consistently by Flipper, and there are no further issues managing/using the plugin.
## Changelog
Fixed errors when installing scoped NPM plugins
Pull Request resolved: https://github.com/facebook/flipper/pull/3825
Test Plan:
Ideally we'd have some unit tests, but mocking out the NPM fetching in `live-plugin-manager` seems like a bunch of work. If you have some shortcuts, let me know, because this would be useful to test across platforms.
But in the meantime, we can easily manually test this.
### Reproduce the failure
First, let's reproduce the failure:
- run Flipper 0.150.0 (or `yarn start` on master, etc)
- open plugin marketplace, attempt to install scoped plugins
- installation will fail (with ⚠️ icon)
<img width="1541" alt="Screen Shot 2022-06-20 at 1 18 21 pm" src="https://user-images.githubusercontent.com/33126/174590735-ed25d192-a661-4333-af08-e494678b9fbb.png">
- logs will show a failure to read `package.json`
<img width="1175" alt="Screen Shot 2022-06-20 at 1 18 39 pm" src="https://user-images.githubusercontent.com/33126/174590824-339ba7ef-dcde-42b6-90ac-b99424845c3e.png">
### Demonstrate success
- run Flipper from this branch (via `yarn start`)
- open plugin marketplace, attempt to install scoped plugins
- installation will succeed, with notification to restart Flipper
<img width="1541" alt="image" src="https://user-images.githubusercontent.com/33126/174591112-880f55bf-0439-457c-a199-4bab0b3f193f.png">
- (package can also be successfully used/upgraded/uninstalled)
Reviewed By: lawrencelomax
Differential Revision: D39345564
Pulled By: lblasa
fbshipit-source-id: 729d70a29c7941e59ac03bb21061fc1d2bc8d998
Flipper Desktop
This folder contains everything to run the Flipper 'Desktop', that is, the UI which you use to interact with the device / app under debug.
Packages provided here:
- flipper-common: utilities & types shared between client, server, flipper-plugin
- flipper-server-core: all device & client management goes in here. Basically flipper's backend
- flipper-ui-core: all UI goes in here, as far as it doesn't depend on Electron
- flipper-ui-electron: the Electron app, will load server-core and ui-core, and glue them together, providing implementations for some electron * specific stuff like dialgos
- flipper-server: A node process hosting flipper-server-core, that can be connected to over websockets. And probably can serve a browser version of the UI as well.
- flipper-ui-browser: thin wrapper around flipper-ui-core, providing some browser specific behavior / stubs.
- flipper-dump: (might remove later), but want to hack a quick and dirt flipper dump in here, as alternative way to test flipper-server-core.
- flipper-plugin: The flipper SDK used by plugins. Exposes all API's that can be used by plugins
- pkg: CLI tool to manage building flipper plugins
- pkg-lib
- plugin-lib
- babel-transformer
- doctor
- eslint-plugin-flipper
Packages overview
flipper-ui-electron:
- flipper-server-core (directly embedded)
- flipper-ui-core
- plugins (prebundled)
- plugins (installable)
- flipper-plugin
flipper-server
- flipper-server-core
- flipper-ui-browser (served by webserver)
- flipper-ui-core (communicates using WebSocket with server-core)
- plugins (prebundled)
- plugins (installable)?
flipper-dump
- flipper-server-core