Add stylex metadata to new plugins field

And display it separately in DevTools, as read-only (for now)

Author: Brian Vaughn

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

@@ -838,6 +838,8 @@ export function attach(
       rootType: null,
       rendererPackageName: null,
       rendererVersion: null,
+
+      plugins: [],
     };
   }
 

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

@@ -102,6 +102,7 @@ import type {
   NativeType,
   PathFrame,
   PathMatch,
+  Plugin,
   ProfilingDataBackend,
   ProfilingDataForRootBackend,
   ReactRenderer,
@@ -3238,12 +3239,17 @@ export function attach(
       targetErrorBoundaryID = getNearestErrorBoundaryID(fiber);
     }
 
+    const plugins: Array<Plugin> = [];
+
     const modifiedProps = {
       ...memoizedProps,
     };
     if (enableStyleXFeatures) {
       if (modifiedProps.hasOwnProperty('xstyle')) {
-        modifiedProps.xstyle = getStyleXValues(modifiedProps.xstyle);
+        plugins.push({
+          type: 'stylex',
+          data: getStyleXValues(modifiedProps.xstyle),
+        });
       }
     }
 
@@ -3306,6 +3312,8 @@ export function attach(
       rootType,
       rendererPackageName: renderer.rendererPackageName,
       rendererVersion: renderer.version,
+
+      plugins,
     };
   }
 

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

@@ -213,6 +213,14 @@ 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,
 
@@ -265,6 +273,9 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+
+  // Let's try this
+  plugins: Array<Plugin>,
 |};
 
 export const InspectElementErrorType = 'error';

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

@@ -208,6 +208,7 @@ export function convertInspectedElementBackendToFrontend(
     owners,
     context,
     hooks,
+    plugins,
     props,
     rendererPackageName,
     rendererVersion,
@@ -233,6 +234,7 @@ export function convertInspectedElementBackendToFrontend(
     hasLegacyContext,
     id,
     key,
+    plugins,
     rendererPackageName,
     rendererVersion,
     rootType,

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

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import KeyValue from './KeyValue';
+import Store from '../../store';
+import styles from './InspectedElementSharedStyles.css';
+
+import type {InspectedElement} from './types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+type Props = {|
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+|};
+
+export default function InspectedElementStyleXPlugin({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props) {
+  const styleXPlugin = inspectedElement.plugins.find(
+    ({type}) => type === 'stylex',
+  );
+  if (styleXPlugin == null || styleXPlugin.data == null) {
+    return null;
+  }
+
+  return (
+    <div className={styles.InspectedElementTree}>
+      <div className={styles.HeaderRow}>
+        <div className={styles.Header}>stylex</div>
+      </div>
+      {Object.entries(styleXPlugin.data).map(([name, value]) => (
+        <KeyValue
+          key={name}
+          alphaSort={true}
+          bridge={bridge}
+          canDeletePaths={false}
+          canEditValues={false}
+          canRenamePaths={false}
+          depth={1}
+          element={element}
+          hidden={false}
+          inspectedElement={inspectedElement}
+          name={name}
+          path={[name]}
+          pathRoot="stylex"
+          store={store}
+          value={value}
+        />
+      ))}
+    </div>
+  );
+}

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

@@ -23,6 +23,7 @@ import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWa
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
+import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import NativeStyleEditor from './NativeStyleEditor';
 import Badge from './Badge';
@@ -31,6 +32,7 @@ import {
   copyInspectedElementPath as copyInspectedElementPathAPI,
   storeAsGlobal as storeAsGlobalAPI,
 } from 'react-devtools-shared/src/backendAPI';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 
 import styles from './InspectedElementView.css';
 
@@ -124,6 +126,15 @@ export default function InspectedElementView({
           store={store}
         />
 
+        {enableStyleXFeatures && (
+          <InspectedElementStyleXPlugin
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        )}
+
         <InspectedElementErrorsAndWarningsTree
           bridge={bridge}
           element={element}

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

@@ -64,6 +64,14 @@ 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,
 
@@ -114,6 +122,8 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+
+  plugins: Array<Plugin>,
 |};
 
 // TODO: Add profiling type