Support hiding components in devtools with Symbol.for('react.devtools.hide')

backend/getData.js

@@ -160,6 +160,11 @@ function getData(internalInstance: Object): DataType {
     };
   }
 
+  const hideSymbol = nodeType === 'Composite' &&
+    typeof Symbol === 'function' &&
+    typeof type === 'function' &&
+    type[Symbol.for('react.devtools.hide')];
+
   // $FlowFixMe
   return {
     nodeType,
@@ -175,6 +180,7 @@ function getData(internalInstance: Object): DataType {
     text,
     updater,
     publicInstance,
+    hideSymbol,
   };
 }
 

backend/getDataFiber.js

@@ -49,6 +49,7 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
   var nodeType = null;
   var name = null;
   var text = null;
+  var hideSymbol = null;
 
   switch (fiber.tag) {
     case FunctionalComponent:
@@ -58,12 +59,16 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
       publicInstance = fiber.stateNode;
       props = fiber.memoizedProps;
       state = fiber.memoizedState;
+      hideSymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
       if (publicInstance != null) {
         context = publicInstance.context;
         if (context && Object.keys(context).length === 0) {
           context = null;
         }
       }
+      if (name === 'HigherOrderComponent') {
+        console.log('fiber backend', fiber);
+      }
       const inst = publicInstance;
       if (inst) {
         updater = {
@@ -192,6 +197,7 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
     text,
     updater,
     publicInstance,
+    hideSymbol,
   };
 }
 

frontend/Breadcrumb.js

@@ -129,7 +129,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbol'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),

frontend/Node.js

@@ -29,6 +29,7 @@ type PropsType = {
   isBottomTagSelected: boolean,
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
+  hideSymbol: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -185,7 +186,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     let children = node.get('children');
 
-    if (node.get('nodeType') === 'Wrapper') {
+    if (node.get('nodeType') === 'Wrapper' || (this.props.hideSymbol && node.get('hideSymbol'))) {
       return (
         <span>
           {children.map(child =>
@@ -413,7 +414,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id];
+    return [props.id, 'hideSymbol'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -430,6 +431,7 @@ var WrappedNode = decorate({
       isBottomTagHovered: store.isBottomTagHovered,
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
+      hideSymbol: store.hideSymbol,
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);

frontend/Panel.js

@@ -66,6 +66,7 @@ type State = {
   preferencesPanelShown: boolean,
   themeKey: number,
   themeName: ?string,
+  hideSymbol: boolean,
 };
 
 class Panel extends React.Component<Props, State> {
@@ -92,6 +93,7 @@ class Panel extends React.Component<Props, State> {
       isReact: props.alreadyFoundReact,
       themeKey: 0,
       themeName: props.themeName,
+      hideSymbol: true,
     };
     this._unMounted = false;
     window.panel = this;

frontend/PreferencesPanel.js

@@ -24,9 +24,11 @@ import type {Theme} from './types';
 
 type Props = {
   changeTheme: (themeName: string) => void,
+  changeHideSymbol: (enabled: boolean) => void,
   hasCustomTheme: boolean,
   hide: () => void,
   open: bool,
+  hideSymbol: bool,
 };
 
 type State = {
@@ -66,7 +68,7 @@ class PreferencesPanel extends React.Component<Props, State> {
 
   render() {
     const {browserName, showHiddenThemes, theme, themeName, themes} = this.context;
-    const {hasCustomTheme, hide, open} = this.props;
+    const {hasCustomTheme, hide, open, hideSymbol} = this.props;
     const {editMode} = this.state;
 
     if (!open) {
@@ -108,6 +110,16 @@ class PreferencesPanel extends React.Component<Props, State> {
               <EditIcon />
             </EditButton>
           </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={hideSymbol}
+                onChange={this._changeHideSymbol}
+              />
+              Hide components with truthy <code>Symbol.for('react.devtools.hide')</code> property
+            </label>
+          </div>
           <div style={styles.buttonBar}>
             <button
               onClick={hide}
@@ -133,6 +145,12 @@ class PreferencesPanel extends React.Component<Props, State> {
     changeTheme(event.target.value);
   };
 
+  _changeHideSymbol = (event) => {
+    const {changeHideSymbol} = this.props;
+
+    changeHideSymbol(event.target.checked);
+  }
+
   _hide = () => {
     const {hide} = this.props;
     const {editMode} = this.state;
@@ -198,14 +216,16 @@ const blockClick = event => event.stopPropagation();
 
 const WrappedPreferencesPanel = decorate({
   listeners() {
-    return ['preferencesPanelShown'];
+    return ['preferencesPanelShown', 'hideSymbol'];
   },
   props(store, props) {
     return {
       changeTheme: themeName => store.changeTheme(themeName),
+      changeHideSymbol: enabled => store.changeHideSymbol(enabled),
       hasCustomTheme: !!store.themeStore.customTheme,
       hide: () => store.hidePreferencesPanel(),
       open: store.preferencesPanelShown,
+      hideSymbol: store.hideSymbol,
     };
   },
 }, PreferencesPanel);

frontend/Store.js

@@ -107,6 +107,7 @@ class Store extends EventEmitter {
   selectedTab: string;
   selected: ?ElementID;
   themeStore: ThemeStore;
+  hideSymbol: boolean;
   breadcrumbHead: ?ElementID;
   // an object describing the capabilities of the inspected runtime.
   capabilities: {
@@ -140,6 +141,7 @@ class Store extends EventEmitter {
     this.colorizerState = null;
     this.refreshSearch = false;
     this.themeStore = themeStore;
+    this.hideSymbol = true;
 
     // for debugging
     window.store = this;
@@ -362,6 +364,11 @@ class Store extends EventEmitter {
     this.emit('theme');
   }
 
+  changeHideSymbol(enabled: boolean) {
+    this.hideSymbol = enabled;
+    this.emit('hideSymbol');
+  }
+
   showPreferencesPanel() {
     this.preferencesPanelShown = true;
     this.emit('preferencesPanelShown');
@@ -504,7 +511,7 @@ class Store extends EventEmitter {
       var node = this.get(id);
       var nodeType = node.get('nodeType');
 
-      if (nodeType !== 'Wrapper' && nodeType !== 'Native') {
+      if (nodeType !== 'Wrapper' && nodeType !== 'Native' && !(nodeType === 'Composite' && this.hideSymbol && node.get('hideSymbol'))) {
         return id;
       }
       if (nodeType === 'Native' && (!up || this.get(this._parents.get(id)).get('nodeType') !== 'NativeWrapper')) {

test/example/target.js

@@ -444,6 +444,9 @@ function wrapWithHoc(Component) {
       return <div><Component /></div>;
     }
   }
+  if (typeof Symbol === 'function') {
+    HigherOrderComponent[Symbol.for('react.devtools.hide')] = true;
+  }
 
   return HigherOrderComponent;
 }