Add a checkbox to hide HOC wrappers in tree-view

frontend/Node.js

@@ -15,6 +15,7 @@ var React = require('react');
 var assign = require('object-assign');
 var decorate = require('./decorate');
 var Props = require('./Props');
+var shouldSkipToChildRendering = require('../plugins/Wrappers/shouldSkipToChildRendering');
 
 import type {Map} from 'immutable';
 
@@ -71,6 +72,10 @@ class Node extends React.Component {
     }
     var children = node.get('children');
 
+    if (this.props.skipToChildRendering) {
+      return <WrappedNode key={children[0]} depth={this.props.depth} id={children[0]} />;
+    }
+
     if (node.get('nodeType') === 'Wrapper') {
       return (
         <span>
@@ -257,7 +262,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id];
+    return [props.id, 'hidewrapperschange'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -266,9 +271,11 @@ var WrappedNode = decorate({
       var child = store.get(node.get('children')[0]);
       wrappedChildren = child && child.get('children');
     }
+
     return {
       node,
       wrappedChildren,
+      skipToChildRendering: shouldSkipToChildRendering(node, store),
       selected: store.selected === props.id,
       isBottomTagSelected: store.isBottomTagSelected,
       hovered: store.hovered === props.id,

frontend/SettingsPane.js

@@ -12,6 +12,7 @@
 var BananaSlugFrontendControl = require('../plugins/BananaSlug/BananaSlugFrontendControl');
 var ColorizerFrontendControl = require('../plugins/Colorizer/ColorizerFrontendControl');
 var RegexFrontendControl = require('../plugins/Regex/RegexFrontendControl');
+var WrappersFrontendControl = require('../plugins/Wrappers/WrappersFrontendControl');
 var React = require('react');
 
 class SettingsPane extends React.Component {
@@ -21,6 +22,7 @@ class SettingsPane extends React.Component {
         <BananaSlugFrontendControl {...this.props} />
         <ColorizerFrontendControl {...this.props} />
         <RegexFrontendControl {...this.props} />
+        <WrappersFrontendControl {...this.props} />
       </div>
     );
   }

frontend/Store.js

@@ -90,6 +90,7 @@ class Store extends EventEmitter {
   bananaslugState: ?ControlState;
   colorizerState: ?ControlState;
   regexState: ?ControlState;
+  hideWrappersState: ?ControlState;
   contextMenu: ?ContextMenu;
   hovered: ?ElementID;
   isBottomTagSelected: boolean;
@@ -127,6 +128,7 @@ class Store extends EventEmitter {
     this.bananaslugState = null;
     this.colorizerState = null;
     this.regexState = null;
+    this.hideWrappersState = null;
     this.placeholderText = DEFAULT_PLACEHOLDER;
     this.refreshSearch = false;
 
@@ -496,6 +498,11 @@ class Store extends EventEmitter {
     this.changeSearch(this.searchText);
   }
 
+  toggleHideWrappers(state: ControlState) {
+    this.hideWrappersState = state;
+    this.emit('hidewrapperschange');
+  }
+
   // Private stuff
   _establishConnection() {
     var tries = 0;

frontend/decorate.js

@@ -56,20 +56,25 @@ module.exports = function(options: Options, Component: any): any {
   var storeKey = options.store || 'store';
   class Wrapper extends React.Component {
     _listeners: Array<string>;
-    _update: () => void;
+    _update: () => boolean|void;
+    _mounted: boolean;
     state: State;
 
     constructor(props) {
       super(props);
       this.state = {};
     }
 
+    componentDidMount() {
+      this._mounted = true;
+    }
+
     componentWillMount() {
       if (!this.context[storeKey]) {
         console.warn('no store on context...');
         return;
       }
-      this._update = () => this.forceUpdate();
+      this._update = () => this._mounted && this.forceUpdate();
       if (!options.listeners) {
         return;
       }
@@ -87,6 +92,7 @@ module.exports = function(options: Options, Component: any): any {
       this._listeners.forEach(evt => {
         this.context[storeKey].off(evt, this._update);
       });
+      this._mounted = false;
     }
 
     shouldComponentUpdate(nextProps, nextState) {

plugins/Wrappers/WrappersFrontendControl.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hidewrapperschange'];
+  },
+  props(store) {
+    return {
+      state: store.hideWrappersState,
+      text: 'Hide Wrappers',
+      onChange: state => store.toggleHideWrappers(state),
+    };
+  },
+}, SettingsCheckbox);
+
+module.exports = Wrapped;

plugins/Wrappers/shouldSkipToChildRendering.js

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ */
+'use strict';
+
+/*
+ * Should hide higher-order wrapper components. An HOC is defined
+ * as a component that returns a single, non-DOM child.
+ */
+function shouldSkipToChildRendering(node, store) {
+  if (store.hideWrappersState && store.hideWrappersState.enabled) {
+    const children = node.get('children');
+    if (children && children.length === 1) {
+      const childName = store.get(children[0]).get('name');
+      return childName && !childName.match(/^[a-z]+$/);
+    }
+  }
+  return false;
+}
+
+module.exports = shouldSkipToChildRendering;