Commit Graph

709 Commits

Author SHA1 Message Date
Michel Weststrate
5db2ef1275 Perf fixes
Summary:
This diff fixes some more perf bottlenecks in the layout inspector (see the diffs earlier in the stack for the total picture). Mostly:

1. Pass down stable refs from the root for callbacks and configuration
2. Remove the deep-equality check in the sidebar section rendering, which has a pretty significant constant overhead, especially if the selection didn't change
3. If the selection changes, the correct semantics is to reset the sidebar rather than trying to reconcile the elements. (A consequence of this is that Panel collapse state isn't preserved atm after changing selection, will address that in a later diff)

This reduces average render time for sidebar from ~20 to ~2 ms.

Reviewed By: priteshrnandgaonkar

Differential Revision: D27677353

fbshipit-source-id: ba183b7e3d778c0b3c8e7ca0d51535ce99a097ca
2021-04-15 07:48:33 -07:00
Michel Weststrate
4f75247213 Make Sidebar Extensions more idiomatic
Summary: Sidebar extensions were unkeyed, which make them render inefficiently. I cleaned the api a bit here by making the extensions more idiomatic; they are now components rather then functions, so that they have their own render cycle, state, etc. They are memo-ed now as well, so that they don't have to re-render if the selected item doesn't change.

Reviewed By: nikoant

Differential Revision: D27685980

fbshipit-source-id: b133bc42061b3b8cf971792f5818810ecb80e3ea
2021-04-15 07:48:33 -07:00
Michel Weststrate
7d9495027b Fix layout inspector re-rendering all elements on all changes
Summary:
Changelog: [Layout] Addressed several performance issues in the layout plugin

This diff and a few of the next stuff fix some performance issues in the Layout plugin. This diff fixes an issue where computing the context menu will cause all rows to render at all times, make the responiveness of the plugin quite slugish.

The fix in this case is to build up the context menu lazily, and pass a stable ref to the function through the tree, rather than a new menu every time the root component renders.

The changes in this diff and the next ones in total reduces the time (in prod builds) to draw a frame from ~200ms to ~5ms.

Reviewed By: cekkaewnumchai

Differential Revision: D27685983

fbshipit-source-id: a48b2ce2cdd1db31bb13122924617cbc3b6c198a
2021-04-15 07:48:33 -07:00
Michel Weststrate
69de9bc92d Initial move to flipper-plugin
Summary:
This diff moves the core of ElementsInspector to flipper-plugin and decouples it from legacy design system and Electron, without any significant improvements or API changes yet, which will follow later.

Colors and docs will be added later in this stack.

Reviewed By: passy

Differential Revision: D27660300

fbshipit-source-id: 96abfa3b3174fa852cf04ae119c23c3d629fee74
2021-04-15 07:48:33 -07:00
Brian Vaughn
7bd4f80c25 Update React DevTools deps from 4.6 -> 4.12
Summary:
Update `react-devtools-core` and `react-devtools` dependencies for RN, VSCode, Sonar, etc.

# Changelog:

[General][Changed] - Upgraded react-devtools-core dependency to 4.12.0

Reviewed By: gaearon

Differential Revision: D27764688

fbshipit-source-id: faa179cf4be3b49b14244d47ee0b91ae63138b8b
2021-04-14 13:37:24 -07:00
Anton Nikolaev
dc7226b7dc Script for plugin type-checking (#2172)
Summary:
Pull Request resolved: https://github.com/facebook/flipper/pull/2172

New script which runs "tsc" for all plugins, receives list of errors and then checks which plugins are affected. It works for shared libs too, e.g. if there is an error in a shared library, then all plugins dependant on it will be counted as affected. For convenience, script saves list of errors affecting each plugin to "tsc-errors.log" in plugin folder.

This script will be used for automatic type-checking plugins against current "stable" and "insiders" versions of Flipper.

An alternative to this implementation would be to simply run "tsc" for each plugin individually, but such implementation takes a lot of time (5+ sec per plugin) and so cannot be effectively used on diffs.

Reviewed By: mweststrate

Differential Revision: D27499765

fbshipit-source-id: fcbbfc94a13e6c7c5beff0c889a929f84c41b2dd
2021-04-09 05:22:01 -07:00
Anton Nikolaev
e7c5a5cc93 Check that all dependencies provided by Flipper core are specified as peers in plugins
Summary: This is a guard to ensure all Flipper built-in packages are declared as peer dependencies. It also removes all of them from nested node_modules after installation to be 100% sure they always loaded from the root folder, because e.g. react can be still installed as a transitive dependency even it is not declared as dependency directly.

Reviewed By: passy

Differential Revision: D27040267

fbshipit-source-id: 1e315a6b280b36ab20778ee261aa386b51d9f964
2021-04-09 05:22:00 -07:00
Anton Nikolaev
b45b5f854a Move layout plugin sidebar extensions to the plugin package
Summary: Moved layout plugin sidebar extensions to the plugin package.

Reviewed By: passy

Differential Revision: D27036489

fbshipit-source-id: 5b3406e5c50ba61709d925a3c0cb07a6fd7552db
2021-04-09 05:22:00 -07:00
Anton Nikolaev
b3274a8450 Plugin folders re-structuring
Summary:
Here I'm changing plugin repository structure to allow re-using of shared packages between both public and fb-internal plugins, and to ensure that public plugins has their own yarn.lock as this will be required to implement reproducible jobs checking plugin compatibility with released flipper versions.

Please note that there are a lot of moved files in this diff, make sure to click "Expand all" to see all that actually changed (there are not much of them actually).

New proposed structure for plugin packages:
```
- root
- node_modules - modules included into Flipper: flipper, flipper-plugin, react, antd, emotion
-- plugins
 --- node_modules - modules used by both public and fb-internal plugins (shared libs will be linked here, see D27034936)
 --- public
---- node_modules - modules used by public plugins
---- pluginA
----- node_modules - modules used by plugin A exclusively
---- pluginB
----- node_modules - modules used by plugin B exclusively
 --- fb
---- node_modules - modules used by fb-internal plugins
---- pluginC
----- node_modules - modules used by plugin C exclusively
---- pluginD
----- node_modules - modules used by plugin D exclusively
```
I've moved all public plugins under dir "plugins/public" and excluded them from root yarn workspaces. Instead, they will have their own yarn workspaces config and yarn.lock and they will use flipper modules as peer dependencies.

Reviewed By: mweststrate

Differential Revision: D27034108

fbshipit-source-id: c2310e3c5bfe7526033f51b46c0ae40199fd7586
2021-04-09 05:22:00 -07:00