jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make Sidebar Extensions more idiomatic

Browse Source 
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
This commit is contained in:
Michel Weststrate
2021-04-15 07:46:28 -07:00
committed by Facebook GitHub Bot
parent 7d9495027b
commit 4f75247213
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
desktop/plugins/public/layout/InspectorSidebar.tsx
View File

@@ -23,7 +23,7 @@ import deepEqual from 'deep-equal';
import React from 'react'; import React from 'react';
import {useMemo, useEffect} from 'react'; import {useMemo, useEffect} from 'react';
import {kebabCase} from 'lodash'; import {kebabCase} from 'lodash';
import {default as SidebarExtensions} from './extensions/fb-stubs/index'; import {SidebarExtensions} from './extensions/fb-stubs/SidebarExtensions';
const NoData = styled(FlexCenter)({ const NoData = styled(FlexCenter)({
fontSize: 18, fontSize: 18,
@@ -147,9 +147,15 @@ const Sidebar: React.FC<Props> = (props: Props) => {
const sections: Array<React.ReactNode> = ( const sections: Array<React.ReactNode> = (
(SidebarExtensions && (SidebarExtensions &&
element?.data && element?.data &&
SidebarExtensions.map((ext) => Object.entries(SidebarExtensions).map(([ext, Comp]) => (
ext(props.client, props.realClient, element, props.logger), <Comp
)) || key={ext}
client={props.client}
realClient={props.realClient}
logger={props.logger}
selectedNode={element}
/>
))) ||
[] []
).concat( ).concat(
sectionDefs.map((def) => ( sectionDefs.map((def) => (

17
desktop/plugins/public/layout/extensions/fb-stubs/index.tsx → desktop/plugins/public/layout/extensions/fb-stubs/SidebarExtensions.tsx
View File

@@ -9,11 +9,12 @@
import type {Client, Logger, PluginClient, Element} from 'flipper'; import type {Client, Logger, PluginClient, Element} from 'flipper';
export default [] as Array< export const SidebarExtensions: Record<
( string,
client: PluginClient, React.FC<{
realClient: Client, client: PluginClient;
selectedNode: Element, realClient: Client;
logger: Logger, selectedNode: Element;
) => React.ReactNode logger: Logger;
>; }>
> = {};