Show displayName for Context Provider and Consumer (resolves #1008)

Author: nanovazquez

backend/getDataFiber.js

@@ -152,18 +152,16 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
           break;
         case CONTEXT_PROVIDER_NUMBER:
         case CONTEXT_PROVIDER_SYMBOL_STRING:
-          nodeType = 'Special';
+          nodeType = 'ContextProvider';
           props = fiber.memoizedProps;
-          name = 'Context.Provider';
+          name = getDisplayName(fiber.type, 'Context.Provider');
           children = [];
           break;
         case CONTEXT_CONSUMER_NUMBER:
         case CONTEXT_CONSUMER_SYMBOL_STRING:
-          nodeType = 'Special';
+          nodeType = 'ContextConsumer';
           props = fiber.memoizedProps;
-          // TODO: TraceUpdatesBackendManager currently depends on this.
-          // If you change .name, figure out a more resilient way to detect it.
-          name = 'Context.Consumer';
+          name = getDisplayName(fiber.type, 'Context.Consumer');
           children = [];
           break;
         case STRICT_MODE_NUMBER:

frontend/Node.js

@@ -504,9 +504,9 @@ const jsxTagStyle = (inverted: boolean, nodeType: string, theme: Theme) => {
     color = theme.state02;
   } else if (nodeType === 'Special') {
     color = theme.special01;
-  } else if (nodeType === 'Composite') {
+  } else if (nodeType === 'Composite' || nodeType === 'ContextProvider' || nodeType === 'ContextConsumer') {
     color = theme.special00;
-  } else {
+ } else {
     color = theme.special07;
   }
 

plugins/TraceUpdates/TraceUpdatesBackendManager.js

@@ -26,7 +26,7 @@ import type {
 import type {ControlState} from '../../frontend/types.js';
 
 const NODE_TYPE_COMPOSITE = 'Composite';
-const NODE_TYPE_SPECIAL = 'Special';
+const NODE_TYPE_CONTEXT_CONSUMER = 'ContextConsumer';
 
 class TraceUpdatesBackendManager {
   _onMeasureNode: () => void;
@@ -62,10 +62,8 @@ class TraceUpdatesBackendManager {
     // We highlight user components and context consumers
     // (without consumers, a context update that renders
     // only host nodes directly wouldn't highlight at all).
-    const shouldHighlight = obj.nodeType === NODE_TYPE_COMPOSITE || (
-      obj.nodeType === NODE_TYPE_SPECIAL &&
-      obj.name === 'Context.Consumer'
-    );
+    const shouldHighlight = obj.nodeType === NODE_TYPE_COMPOSITE || obj.nodeType === NODE_TYPE_CONTEXT_CONSUMER;
+
     if (!shouldHighlight) {
       return;
     }

test/example/build/sink.js

@@ -17,6 +17,36 @@ var Immutable = require('immutable');
 var assign = require('object-assign');
 var guid = require('../../utils/guid');
 
+const themes = {
+  light: {
+    container: {
+      color: '#000000',
+      background: '#eeeeee',
+    },
+    addButton: {
+      color: '#000000',
+    },
+  },
+  dark: {
+    container: {
+      color: '#ffffff',
+      background: '#222222',
+    },
+    addButton: {
+      color: '#ffffff',
+    },
+    filterButton: {
+      color: '#ffffff',
+    },
+    filterButtonActive: {
+      backgroundColor: 'crimson',
+    }
+  },
+};
+const ThemeContext = React.createContext();
+ThemeContext.Provider.displayName = 'ThemeContext.Provider';
+ThemeContext.Consumer.displayName = 'ThemeContext.Consumer';
+
 class Todos extends React.Component {
   constructor(props) {
     super(props);
@@ -86,16 +116,26 @@ class Todos extends React.Component {
 
   render() {
     return (
-      <div style={styles.container}>
-        <h1 style={styles.title}>Things to do</h1>
-        <NewTodo onAdd={this.onAdd.bind(this)} />
-        <TodoItems
-          todos={this.state.todos}
-          filter={this.state.filter}
-          onToggleComplete={this.toggleComplete.bind(this)}
-        />
-        <Filter onSort={this.sort.bind(this)} onFilter={this.changeFilter.bind(this)} filter={this.state.filter} />
-      </div>
+      <ThemeContext.Consumer>
+        {theme => {
+          const mergedStyles = {
+            container: { ...styles.container, ...theme.container },
+            title: { ...styles.title, ...theme.title },
+          };
+          return (
+            <div style={mergedStyles.container}>
+              <h1 style={mergedStyles.title}>Things to do</h1>
+              <NewTodo onAdd={this.onAdd.bind(this)} />
+              <TodoItems
+                todos={this.state.todos}
+                filter={this.state.filter}
+                onToggleComplete={this.toggleComplete.bind(this)}
+              />
+              <Filter onSort={this.sort.bind(this)} onFilter={this.changeFilter.bind(this)} filter={this.state.filter} />
+            </div>
+          );
+        }}
+      </ThemeContext.Consumer>
     );
   }
 }
@@ -123,18 +163,27 @@ class NewTodo extends React.Component {
 
   render() {
     return (
-      <div style={styles.newContainer}>
-        <input
-          style={styles.newInput}
-          value={this.state.text}
-          placeholder="Add new item"
-          onKeyDown={e => this.checkEnter(e)}
-          onChange={e => this.setState({text: e.target.value})}
-        />
-        <button onClick={this.submit.bind(this)} style={styles.addButton}>
-          +
-        </button>
-      </div>
+      <ThemeContext.Consumer>
+        {theme => {
+          const mergedStyles = {
+            newContainer: { ...styles.newContainer, ...theme.newContainer },
+            newInput: { ...styles.newInput, ...theme.newInput },
+            addButton: { ...styles.addButton, ...theme.addButton },
+          };
+          return (
+            <div style={mergedStyles.newContainer}>
+              <input
+                style={mergedStyles.newInput}
+                value={this.state.text}
+                placeholder="Add new item"
+                onKeyDown={e => this.checkEnter(e)}
+                onChange={e => this.setState({text: e.target.value})}
+              />
+              <button onClick={this.submit.bind(this)} style={mergedStyles.addButton}>+</button>
+            </div>
+          );
+        }}
+      </ThemeContext.Consumer>
     );
   }
 }
@@ -189,9 +238,7 @@ class HoverHighlight extends React.Component {
       <div
         onMouseOver={() => this.setState({hover: true})}
         onMouseOut={() => this.setState({hover: false})}
-        style={assign({}, this.props.style, {
-          backgroundColor: this.state.hover ? '#eee' : 'transparent',
-        })}>
+        style={assign({}, this.props.style)}>
         {this.props.children}
       </div>
     );
@@ -200,17 +247,28 @@ class HoverHighlight extends React.Component {
 
 function Filter(props) {
   var options = ['All', 'Completed', 'Remaining'];
+
   return (
-    <div style={styles.filter}>
-      {options.map(text => (
-        <button
-          key={text}
-          style={assign({}, styles.filterButton, text === props.filter && styles.filterButtonActive)}
-          onClick={props.onFilter.bind(null, text)}
-        >{text}</button>
-      ))}
-      {/*<button onClick={this.props.onSort} style={styles.filterButton}>Sort</button>*/}
-    </div>
+    <ThemeContext.Consumer>
+      {theme => {
+        const mergedStyles = {
+          filterButton: { ...styles.filterButton, ...theme.filterButton },
+          filterButtonActive: { ...styles.filterButtonActive, ...theme.filterButtonActive },
+        };
+        return (
+          <div style={styles.filter}>
+            {options.map(text => (
+              <button
+                key={text}
+                style={assign({}, mergedStyles.filterButton, text === props.filter && mergedStyles.filterButtonActive)}
+                onClick={props.onFilter.bind(null, text)}
+              >{text}</button>
+            ))}
+            {/*<button onClick={this.props.onSort} style={styles.filterButton}>Sort</button>*/}
+          </div>
+        );
+      }}
+    </ThemeContext.Consumer>
   );
 }
 
@@ -278,8 +336,8 @@ var styles = {
 
   iframeWatermark: {
     position: 'absolute',
-    top: 20,
-    left: 20,
+    top: 30,
+    left: 10,
     fontSize: 25,
     color: '#ccc',
     fontFamily: 'sans-serif',
@@ -397,29 +455,47 @@ for (var mCount = 200; mCount--;) {
 
 
 class Wrap extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = { theme: themes.light };
+    this.handleToggleButtonClick = this.handleToggleButtonClick.bind(this);
+  }
+
+  handleToggleButtonClick() {
+    const { theme } = this.state;
+    this.setState({
+      theme: theme === themes.dark
+        ? themes.light
+        : themes.dark,
+    });
+  }
+
   render() {
+    const { theme } = this.state;
+    const themeButtonLabel = `Switch to ${theme === themes.dark ? 'light' : 'dark'} theme`;
     return (
-      <div>
-        <div style={styles.iframeWatermark}>
-          this is an iframe
+      <ThemeContext.Provider value={this.state.theme}>
+        <div>
+          <button onClick={this.handleToggleButtonClick}>{themeButtonLabel}</button>
+          <div style={styles.iframeWatermark}>this is an iframe</div>
+          {/* for testing highlighing in the presence of multiple scrolls
+          {long(long(long()))} {/* */}
+          <Todos/>
+          {/*<span thing={someVal}/>
+          <Target count={1}/>
+          <span awesome={2} thing={[1,2,3]} more={{2:3}}/>
+          <span val={null}/>
+          <span val={undefined}/>
+          <div>&lt;</div>*/}
+          <DeeplyNested />
+          <PropTester awesome={2}/>
+          <PropTester {...emptyProps}/>
+          <PropTester {...primitiveProps}/>
+          <PropTester {...complexProps}/>
+          <PropTester {...uninspectableProps}/>
+          <PropTester massiveMap={massiveMap}/>
         </div>
-        {/* for testing highlighing in the presence of multiple scrolls
-        {long(long(long()))} {/* */}
-        <Todos/>
-        {/*<span thing={someVal}/>
-        <Target count={1}/>
-        <span awesome={2} thing={[1,2,3]} more={{2:3}}/>
-        <span val={null}/>
-        <span val={undefined}/>
-        <div>&lt;</div>*/}
-        <DeeplyNested />
-        <PropTester awesome={2}/>
-        <PropTester {...emptyProps}/>
-        <PropTester {...primitiveProps}/>
-        <PropTester {...complexProps}/>
-        <PropTester {...uninspectableProps}/>
-        <PropTester massiveMap={massiveMap}/>
-      </div>
+      </ThemeContext.Provider>
     );
   }
 }