Refactored inspected element plugins type/format

Moved StyleX plugin type to be shared. Replaced Array-of-plugins type with object type, since the frontend already needs to know about which types it supports anyway (so no need to do unnecessary filtering).

Author: Brian Vaughn

packages/react-devtools-shared/src/backend/StyleX/utils.js

@@ -7,14 +7,11 @@
  * @flow
  */
 
-export type StyleXData = {|
-  sources: Array<string>,
-  resolvedStyles: Object,
-|};
+import type {StyleXPlugin} from 'react-devtools-shared/src/types';
 
 const cachedStyleNameToValueMap: Map<string, string> = new Map();
 
-export function getStyleXData(data: any): StyleXData {
+export function getStyleXData(data: any): StyleXPlugin {
   const sources = new Set();
   const resolvedStyles = {};
 

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -839,7 +839,9 @@ export function attach(
       rendererPackageName: null,
       rendererVersion: null,
 
-      plugins: [],
+      plugins: {
+        stylex: null,
+      },
     };
   }
 

packages/react-devtools-shared/src/backend/renderer.js

@@ -102,7 +102,6 @@ import type {
   NativeType,
   PathFrame,
   PathMatch,
-  Plugin,
   ProfilingDataBackend,
   ProfilingDataForRootBackend,
   ReactRenderer,
@@ -113,6 +112,7 @@ import type {
 import type {
   ComponentFilter,
   ElementType,
+  Plugins,
 } from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
@@ -3239,14 +3239,13 @@ export function attach(
       targetErrorBoundaryID = getNearestErrorBoundaryID(fiber);
     }
 
-    const plugins: Array<Plugin> = [];
+    const plugins: Plugins = {
+      stylex: null,
+    };
 
     if (enableStyleXFeatures) {
       if (memoizedProps.hasOwnProperty('xstyle')) {
-        plugins.push({
-          type: 'stylex',
-          data: getStyleXData(memoizedProps.xstyle),
-        });
+        plugins.stylex = getStyleXData(memoizedProps.xstyle);
       }
     }
 

packages/react-devtools-shared/src/backend/types.js

@@ -13,6 +13,7 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ComponentFilter,
   ElementType,
+  Plugins,
 } from 'react-devtools-shared/src/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
@@ -213,14 +214,6 @@ export type OwnersList = {|
   owners: Array<SerializedElement> | null,
 |};
 
-// For now, let's only support a hard-coded set of plugins.
-type PluginType = 'stylex';
-
-export type Plugin = {
-  type: PluginType,
-  data: any,
-};
-
 export type InspectedElement = {|
   id: number,
 
@@ -274,8 +267,8 @@ export type InspectedElement = {|
   rendererPackageName: string | null,
   rendererVersion: string | null,
 
-  // Array of UI plugins/visualizations for the inspected element.
-  plugins: Array<Plugin>,
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
 |};
 
 export const InspectElementErrorType = 'error';

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js

@@ -12,6 +12,7 @@ import KeyValue from './KeyValue';
 import Store from '../../store';
 import sharedStyles from './InspectedElementSharedStyles.css';
 import styles from './InspectedElementStyleXPlugin.css';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -30,14 +31,16 @@ export default function InspectedElementStyleXPlugin({
   inspectedElement,
   store,
 }: Props) {
-  const styleXPlugin = inspectedElement.plugins.find(
-    ({type}) => type === 'stylex',
-  );
-  if (styleXPlugin == null || styleXPlugin.data == null) {
+  if (!enableStyleXFeatures) {
+    return null;
+  }
+
+  const styleXPlugin = inspectedElement.plugins.stylex;
+  if (styleXPlugin == null) {
     return null;
   }
 
-  const {resolvedStyles, sources} = styleXPlugin.data;
+  const {resolvedStyles, sources} = styleXPlugin;
 
   return (
     <div className={sharedStyles.InspectedElementTree}>

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -12,7 +12,7 @@ import type {
   Dehydrated,
   Unserializable,
 } from 'react-devtools-shared/src/hydration';
-import type {ElementType} from 'react-devtools-shared/src/types';
+import type {ElementType, Plugins} from 'react-devtools-shared/src/types';
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
@@ -64,14 +64,6 @@ export type InspectedElementResponseType =
   | 'no-change'
   | 'not-found';
 
-// For now, let's only support a hard-coded set of plugins.
-type PluginType = 'stylex';
-
-export type Plugin = {
-  type: PluginType,
-  data: any,
-};
-
 export type InspectedElement = {|
   id: number,
 
@@ -123,8 +115,8 @@ export type InspectedElement = {|
   rendererPackageName: string | null,
   rendererVersion: string | null,
 
-  // Array of UI plugins/visualizations for the inspected element.
-  plugins: Array<Plugin>,
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
 |};
 
 // TODO: Add profiling type

packages/react-devtools-shared/src/types.js

@@ -91,3 +91,12 @@ export type LRUCache<K, V> = {|
   reset: () => void,
   set: (key: K, value: V) => void,
 |};
+
+export type StyleXPlugin = {|
+  sources: Array<string>,
+  resolvedStyles: Object,
+|};
+
+export type Plugins = {|
+  stylex: StyleXPlugin | null,
+|};