Run prettier

packages/d3-state-visualizer/examples/tree/index.js

@@ -3,7 +3,7 @@ import { tree } from 'd3-state-visualizer';
 const appState = {
   todoStore: {
     todos: [
-      { title: 'd3'},
+      { title: 'd3' },
       { title: 'state' },
       { title: 'visualizer' },
       { title: 'tree' }
@@ -28,8 +28,8 @@ const render = tree(document.getElementById('root'), {
   isSorted: false,
   widthBetweenNodesCoeff: 1.5,
   heightBetweenNodesCoeff: 2,
-  style: {border: '1px solid black'},
+  style: { border: '1px solid black' },
-  tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2}
+  tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 }
 });
 
 render();

packages/d3-state-visualizer/examples/tree/server.js

@@ -9,7 +9,7 @@ new WebpackDevServer(webpack(config), {
   stats: {
     colors: true
   }
-}).listen(3000, 'localhost', function (err) {
+}).listen(3000, 'localhost', function(err) {
   if (err) {
     // eslint-disable-next-line no-console
     console.log(err);

packages/d3-state-visualizer/examples/tree/webpack.config.js

@@ -14,18 +14,18 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/static/'
   },
-  plugins: [
+  plugins: [new webpack.HotModuleReplacementPlugin()],
-    new webpack.HotModuleReplacementPlugin(),
-  ],
   resolve: {
     extensions: ['.js']
   },
   module: {
-    rules: [{
+    rules: [
-      test: /\.js$/,
+      {
-      loaders: ['babel-loader'],
+        test: /\.js$/,
-      exclude: /node_modules/,
+        loaders: ['babel-loader'],
-      include: __dirname
+        exclude: /node_modules/,
-    }]
+        include: __dirname
+      }
+    ]
   }
 };

packages/d3-state-visualizer/src/charts/tree/tree.js

@@ -1,9 +1,14 @@
-import d3 from 'd3'
+import d3 from 'd3';
-import { isEmpty } from 'ramda'
+import { isEmpty } from 'ramda';
-import map2tree from 'map2tree'
+import map2tree from 'map2tree';
-import deepmerge from 'deepmerge'
+import deepmerge from 'deepmerge';
-import { getTooltipString, toggleChildren, visit, getNodeGroupByDepthCount } from './utils'
+import {
-import d3tooltip from 'd3tooltip'
+  getTooltipString,
+  toggleChildren,
+  visit,
+  getNodeGroupByDepthCount
+} from './utils';
+import d3tooltip from 'd3tooltip';
 
 const defaultOptions = {
   state: undefined,
@@ -14,7 +19,7 @@ const defaultOptions = {
   style: {
     node: {
       colors: {
-        'default': '#ccc',
+        default: '#ccc',
         collapsed: 'lightsteelblue',
         parent: 'white'
       },
@@ -22,7 +27,7 @@ const defaultOptions = {
     },
     text: {
       colors: {
-        'default': 'black',
+        default: 'black',
         hover: 'skyblue'
       }
     },
@@ -56,7 +61,7 @@ const defaultOptions = {
     },
     style: undefined
   }
-}
+};
 
 export default function(DOMNode, options = {}) {
   const {
@@ -77,48 +82,55 @@ export default function(DOMNode, options = {}) {
     tree,
     tooltipOptions,
     onClickText
-    } = deepmerge(defaultOptions, options)
+  } = deepmerge(defaultOptions, options);
 
-  const width = size - margin.left - margin.right
+  const width = size - margin.left - margin.right;
-  const height = size * aspectRatio - margin.top - margin.bottom
+  const height = size * aspectRatio - margin.top - margin.bottom;
-  const fullWidth = size
+  const fullWidth = size;
-  const fullHeight = size * aspectRatio
+  const fullHeight = size * aspectRatio;
 
   const attr = {
     id,
     preserveAspectRatio: 'xMinYMin slice'
-  }
+  };
 
   if (!style.width) {
-    attr.width = fullWidth
+    attr.width = fullWidth;
   }
 
   if (!style.width || !style.height) {
-    attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`
+    attr.viewBox = `0 0 ${fullWidth} ${fullHeight}`;
   }
 
-  const root = d3.select(DOMNode)
+  const root = d3.select(DOMNode);
-  const zoom = d3.behavior.zoom()
+  const zoom = d3.behavior
+    .zoom()
     .scaleExtent([0.1, 3])
-    .scale(initialZoom)
+    .scale(initialZoom);
   const vis = root
     .append('svg')
     .attr(attr)
-    .style({cursor: '-webkit-grab', ...style})
+    .style({ cursor: '-webkit-grab', ...style })
-    .call(zoom.on('zoom', () => {
+    .call(
-      const { translate, scale } = d3.event
+      zoom.on('zoom', () => {
-      vis.attr('transform', `translate(${translate})scale(${scale})`)
+        const { translate, scale } = d3.event;
-    }))
+        vis.attr('transform', `translate(${translate})scale(${scale})`);
+      })
+    )
     .append('g')
     .attr({
-      transform: `translate(${margin.left + style.node.radius}, ${margin.top}) scale(${initialZoom})`
+      transform: `translate(${margin.left + style.node.radius}, ${
-    })
+        margin.top
+      }) scale(${initialZoom})`
+    });
 
-  let layout = d3.layout.tree().size([width, height])
+  let layout = d3.layout.tree().size([width, height]);
-  let data
+  let data;
 
   if (isSorted) {
-    layout.sort((a, b) => b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1)
+    layout.sort((a, b) =>
+      b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1
+    );
   }
 
   // previousNodePositionsById stores node x and y
@@ -131,85 +143,109 @@ export default function(DOMNode, options = {}) {
       x: height / 2,
       y: 0
     }
-  }
+  };
 
   // traverses a map with node positions by going through the chain
   // of parent ids; once a parent that matches the given filter is found,
   // the parent position gets returned
   function findParentNodePosition(nodePositionsById, nodeId, filter) {
-    let currentPosition = nodePositionsById[nodeId]
+    let currentPosition = nodePositionsById[nodeId];
     while (currentPosition) {
-      currentPosition = nodePositionsById[currentPosition.parentId]
+      currentPosition = nodePositionsById[currentPosition.parentId];
       if (!currentPosition) {
-        return null
+        return null;
       }
       if (!filter || filter(currentPosition)) {
-        return currentPosition
+        return currentPosition;
       }
     }
   }
 
   return function renderChart(nextState = tree || state) {
-    data = !tree ? map2tree(nextState, {key: rootKeyName, pushMethod}) : nextState
+    data = !tree
+      ? map2tree(nextState, { key: rootKeyName, pushMethod })
+      : nextState;
 
     if (isEmpty(data) || !data.name) {
-      data = { name: 'error', message: 'Please provide a state map or a tree structure'}
+      data = {
+        name: 'error',
+        message: 'Please provide a state map or a tree structure'
+      };
     }
 
-    let nodeIndex = 0
+    let nodeIndex = 0;
-    let maxLabelLength = 0
+    let maxLabelLength = 0;
 
     // nodes are assigned with string ids, which reflect their location
     // within the hierarcy; e.g. "root|branch|subBranch|subBranch[0]|property"
     // top-level elemnt always has id "root"
-    visit(data,
+    visit(
-        node => {
+      data,
-          maxLabelLength = Math.max(node.name.length, maxLabelLength)
+      node => {
-          node.id = node.id || 'root'
+        maxLabelLength = Math.max(node.name.length, maxLabelLength);
-        },
+        node.id = node.id || 'root';
-        node => node.children && node.children.length > 0 ? node.children.map((c) => {
+      },
-          c.id = `${node.id || ''}|${c.name}`
+      node =>
-          return c
+        node.children && node.children.length > 0
-        }) : null
+          ? node.children.map(c => {
-    )
+              c.id = `${node.id || ''}|${c.name}`;
+              return c;
+            })
+          : null
+    );
 
     /*eslint-disable*/
-    update()
+    update();
     /*eslint-enable*/
 
     function update() {
       // path generator for links
-      const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x])
+      const diagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
       // set tree dimensions and spacing between branches and nodes
-      const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data))
+      const maxNodeCountByLevel = Math.max(...getNodeGroupByDepthCount(data));
 
-      layout = layout.size([maxNodeCountByLevel * 25 * heightBetweenNodesCoeff, width])
+      layout = layout.size([
+        maxNodeCountByLevel * 25 * heightBetweenNodesCoeff,
+        width
+      ]);
 
-      let nodes = layout.nodes(data)
+      let nodes = layout.nodes(data);
-      let links = layout.links(nodes)
+      let links = layout.links(nodes);
 
-      nodes.forEach(node => node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+      nodes.forEach(
+        node =>
+          (node.y = node.depth * (maxLabelLength * 7 * widthBetweenNodesCoeff))
+      );
 
       const nodePositions = nodes.map(n => ({
         parentId: n.parent && n.parent.id,
         id: n.id,
         x: n.x,
         y: n.y
-      }))
+      }));
-      const nodePositionsById = {}
+      const nodePositionsById = {};
-      nodePositions.forEach(node => nodePositionsById[node.id] = node)
+      nodePositions.forEach(node => (nodePositionsById[node.id] = node));
 
       // process the node selection
-      let node = vis.selectAll('g.node')
+      let node = vis
+        .selectAll('g.node')
         .property('__oldData__', d => d)
-        .data(nodes, d => d.id || (d.id = ++nodeIndex))
+        .data(nodes, d => d.id || (d.id = ++nodeIndex));
-      let nodeEnter = node.enter().append('g')
+      let nodeEnter = node
+        .enter()
+        .append('g')
         .attr({
-          'class': 'node',
+          class: 'node',
           transform: d => {
-            const position = findParentNodePosition(nodePositionsById, d.id, (n) => previousNodePositionsById[n.id])
+            const position = findParentNodePosition(
-            const previousPosition = position && previousNodePositionsById[position.id] || previousNodePositionsById.root
+              nodePositionsById,
-            return `translate(${previousPosition.y},${previousPosition.x})`
+              d.id,
+              n => previousNodePositionsById[n.id]
+            );
+            const previousPosition =
+              (position && previousNodePositionsById[position.id]) ||
+              previousNodePositionsById.root;
+            return `translate(${previousPosition.y},${previousPosition.x})`;
           }
         })
         .style({
@@ -220,43 +256,46 @@ export default function(DOMNode, options = {}) {
           mouseover: function mouseover() {
             d3.select(this).style({
               fill: style.text.colors.hover
-            })
+            });
           },
           mouseout: function mouseout() {
             d3.select(this).style({
               fill: style.text.colors.default
-            })
+            });
           }
-        })
+        });
 
       if (!tooltipOptions.disabled) {
-        nodeEnter.call(d3tooltip(d3, 'tooltip', {...tooltipOptions, root})
+        nodeEnter.call(
-          .text((d, i) => getTooltipString(d, i, tooltipOptions))
+          d3tooltip(d3, 'tooltip', { ...tooltipOptions, root })
-          .style(tooltipOptions.style)
+            .text((d, i) => getTooltipString(d, i, tooltipOptions))
-        )
+            .style(tooltipOptions.style)
+        );
       }
 
       // g inside node contains circle and text
       // this extra wrapper helps run d3 transitions in parallel
-      const nodeEnterInnerGroup = nodeEnter.append('g')
+      const nodeEnterInnerGroup = nodeEnter.append('g');
-      nodeEnterInnerGroup.append('circle')
+      nodeEnterInnerGroup
+        .append('circle')
         .attr({
-          'class': 'nodeCircle',
+          class: 'nodeCircle',
           r: 0
         })
         .on({
           click: clickedNode => {
-            if (d3.event.defaultPrevented) return
+            if (d3.event.defaultPrevented) return;
-            toggleChildren(clickedNode)
+            toggleChildren(clickedNode);
-            update()
+            update();
           }
-        })
+        });
 
-      nodeEnterInnerGroup.append('text')
+      nodeEnterInnerGroup
+        .append('text')
         .attr({
-          'class': 'nodeText',
+          class: 'nodeText',
           'text-anchor': 'middle',
-          'transform': `translate(0,0)`,
+          transform: 'translate(0,0)',
           dy: '.35em'
         })
         .style({
@@ -265,118 +304,148 @@ export default function(DOMNode, options = {}) {
         .text(d => d.name)
         .on({
           click: onClickText
-        })
+        });
 
       // update the text to reflect whether node has children or not
-      node.select('text')
+      node.select('text').text(d => d.name);
-        .text(d => d.name)
 
       // change the circle fill depending on whether it has children and is collapsed
-      node.select('circle')
+      node.select('circle').style({
-        .style({
+        stroke: 'black',
-          stroke: 'black',
+        'stroke-width': '1.5px',
-          'stroke-width': '1.5px',
+        fill: d =>
-          fill: d => d._children ? style.node.colors.collapsed : (d.children ? style.node.colors.parent : style.node.colors.default)
+          d._children
-        })
+            ? style.node.colors.collapsed
+            : d.children
+            ? style.node.colors.parent
+            : style.node.colors.default
+      });
 
       // transition nodes to their new position
-      let nodeUpdate = node.transition()
+      let nodeUpdate = node
+        .transition()
         .duration(transitionDuration)
         .attr({
           transform: d => `translate(${d.y},${d.x})`
-        })
+        });
 
       // ensure circle radius is correct
-      nodeUpdate.select('circle')
+      nodeUpdate.select('circle').attr('r', style.node.radius);
-        .attr('r', style.node.radius)
 
       // fade the text in and align it
-      nodeUpdate.select('text')
+      nodeUpdate
+        .select('text')
         .style('fill-opacity', 1)
         .attr({
           transform: function transform(d) {
-            const x = (d.children || d._children ? -1 : 1) * (this.getBBox().width / 2 + style.node.radius + 5)
+            const x =
-            return `translate(${x},0)`
+              (d.children || d._children ? -1 : 1) *
+              (this.getBBox().width / 2 + style.node.radius + 5);
+            return `translate(${x},0)`;
           }
-        })
+        });
 
       // blink updated nodes
-      node.filter(function flick(d) {
+      node
-        // test whether the relevant properties of d match
+        .filter(function flick(d) {
-        // the equivalent property of the oldData
+          // test whether the relevant properties of d match
-        // also test whether the old data exists,
+          // the equivalent property of the oldData
-        // to catch the entering elements!
+          // also test whether the old data exists,
-        return (this.__oldData__ && d.value !== this.__oldData__.value)
+          // to catch the entering elements!
-      })
+          return this.__oldData__ && d.value !== this.__oldData__.value;
+        })
         .select('g')
-        .style('opacity', '0.3').transition()
+        .style('opacity', '0.3')
-        .duration(blinkDuration).style('opacity', '1')
+        .transition()
+        .duration(blinkDuration)
+        .style('opacity', '1');
 
       // transition exiting nodes to the parent's new position
-      let nodeExit = node.exit().transition()
+      let nodeExit = node
+        .exit()
+        .transition()
         .duration(transitionDuration)
         .attr({
           transform: d => {
-            const position = findParentNodePosition(previousNodePositionsById, d.id, (n) => nodePositionsById[n.id])
+            const position = findParentNodePosition(
-            const futurePosition = position && nodePositionsById[position.id] || nodePositionsById.root
+              previousNodePositionsById,
-            return `translate(${futurePosition.y},${futurePosition.x})`
+              d.id,
+              n => nodePositionsById[n.id]
+            );
+            const futurePosition =
+              (position && nodePositionsById[position.id]) ||
+              nodePositionsById.root;
+            return `translate(${futurePosition.y},${futurePosition.x})`;
           }
         })
-        .remove()
+        .remove();
 
-      nodeExit.select('circle')
+      nodeExit.select('circle').attr('r', 0);
-        .attr('r', 0)
 
-      nodeExit.select('text')
+      nodeExit.select('text').style('fill-opacity', 0);
-        .style('fill-opacity', 0)
 
       // update the links
-      let link = vis.selectAll('path.link')
+      let link = vis.selectAll('path.link').data(links, d => d.target.id);
-        .data(links, d => d.target.id)
 
       // enter any new links at the parent's previous position
-      link.enter().insert('path', 'g')
+      link
+        .enter()
+        .insert('path', 'g')
         .attr({
-          'class': 'link',
+          class: 'link',
           d: d => {
-            const position = findParentNodePosition(nodePositionsById, d.target.id, (n) => previousNodePositionsById[n.id])
+            const position = findParentNodePosition(
-            const previousPosition = position && previousNodePositionsById[position.id] || previousNodePositionsById.root
+              nodePositionsById,
+              d.target.id,
+              n => previousNodePositionsById[n.id]
+            );
+            const previousPosition =
+              (position && previousNodePositionsById[position.id]) ||
+              previousNodePositionsById.root;
             return diagonal({
               source: previousPosition,
               target: previousPosition
-            })
+            });
           }
         })
-        .style(style.link)
+        .style(style.link);
 
       // transition links to their new position
-      link.transition()
+      link
+        .transition()
         .duration(transitionDuration)
         .attr({
           d: diagonal
-        })
+        });
 
       // transition exiting nodes to the parent's new position
-      link.exit()
+      link
+        .exit()
         .transition()
         .duration(transitionDuration)
         .attr({
           d: d => {
-            const position = findParentNodePosition(previousNodePositionsById, d.target.id, (n) => nodePositionsById[n.id])
+            const position = findParentNodePosition(
-            const futurePosition = position && nodePositionsById[position.id] || nodePositionsById.root
+              previousNodePositionsById,
+              d.target.id,
+              n => nodePositionsById[n.id]
+            );
+            const futurePosition =
+              (position && nodePositionsById[position.id]) ||
+              nodePositionsById.root;
             return diagonal({
               source: futurePosition,
               target: futurePosition
-            })
+            });
           }
         })
-        .remove()
+        .remove();
 
       // delete the old data once it's no longer needed
-      node.property('__oldData__', null)
+      node.property('__oldData__', null);
 
       // stash the old positions for transition
-      previousNodePositionsById = nodePositionsById
+      previousNodePositionsById = nodePositionsById;
     }
-  }
+  };
 }

packages/devui/src/Slider/styles/default.js

@@ -56,9 +56,7 @@ export const style = ({ theme, percent, disabled, withLabel }) => css`
     height: 0.8em;
     border-radius: 0.5em;
     box-shadow: 0 0 .125em ${theme.base04};
-    background: linear-gradient(${theme.base01}, ${theme.base02} 40%, ${
+    background: linear-gradient(${theme.base01}, ${theme.base02} 40%, ${theme.base01})
-      theme.base01
-    })
       no-repeat ${theme.base00};
     background-size: ${percent}% 100%;
   }`

packages/devui/src/Tabs/Tabs.js

@@ -76,7 +76,7 @@ export default class Tabs extends Component {
       <TabsContainer position={this.props.position}>
         {tabsHeader}
         <div>
-          <this.SelectedComponent {...this.selector && this.selector()} />
+          <this.SelectedComponent {...(this.selector && this.selector())} />
         </div>
       </TabsContainer>
     );

packages/devui/src/utils/animations.js

@@ -36,9 +36,7 @@ export const ripple = theme => `
     top: 0;
     left: 0;
     pointer-events: none;
-    background-image: radial-gradient(circle, ${
+    background-image: radial-gradient(circle, ${theme.base07} 11%, transparent 11%);
-      theme.base07
-    } 11%, transparent 11%);
     background-repeat: no-repeat;
     background-position: 50%;
     transform: scale(10, 10);

packages/devui/src/utils/createStyledComponent.js

@@ -10,7 +10,10 @@ export default (styles, component) =>
       props.theme.type
         ? getStyle(styles, props.theme.type)
         : // used outside of container (theme provider)
-          getStyle(styles, 'default')({
+          getStyle(
+            styles,
+            'default'
+          )({
             ...props,
             theme: getDefaultTheme(props.theme)
           })}

packages/map2tree/test/map2tree.spec.js

@@ -31,7 +31,10 @@ describe('# shallow map', () => {
 
     const expected = {
       name: 'state',
-      children: [{ name: 'a', value: 'foo' }, { name: 'b', value: 'bar' }]
+      children: [
+        { name: 'a', value: 'foo' },
+        { name: 'b', value: 'bar' }
+      ]
     };
 
     expect(map2tree(map)).toEqual(expected);
@@ -62,7 +65,10 @@ describe('# shallow map', () => {
       children: [
         {
           name: 'a',
-          children: [{ name: 'aa', value: 'foo' }, { name: 'ab', value: 'bar' }]
+          children: [
+            { name: 'aa', value: 'foo' },
+            { name: 'ab', value: 'bar' }
+          ]
         }
       ]
     };
@@ -132,7 +138,10 @@ describe('# array map', () => {
       children: [
         {
           name: 'a',
-          children: [{ name: 'a[0]', value: 1 }, { name: 'a[1]', value: 2 }]
+          children: [
+            { name: 'a[0]', value: 1 },
+            { name: 'a[1]', value: 2 }
+          ]
         }
       ]
     };
@@ -148,7 +157,10 @@ describe('# array map', () => {
       children: [
         {
           name: 'a',
-          children: [{ name: 'a[1]', value: 2 }, { name: 'a[0]', value: 1 }]
+          children: [
+            { name: 'a[1]', value: 2 },
+            { name: 'a[0]', value: 1 }
+          ]
         }
       ]
     };

packages/react-json-tree/examples/webpack.config.js

@@ -16,9 +16,7 @@ module.exports = {
     filename: 'bundle.js',
     publicPath: '/static/'
   },
-  plugins: [
+  plugins: [new webpack.HotModuleReplacementPlugin()],
-    new webpack.HotModuleReplacementPlugin(),
-  ],
   module: {
     rules: [
       {

packages/redux-devtools-chart-monitor/src/Chart.js

@@ -20,7 +20,7 @@ class Chart extends Component {
     style: PropTypes.shape({
       node: PropTypes.shape({
         colors: PropTypes.shape({
-          'default': PropTypes.string,
+          default: PropTypes.string,
           parent: PropTypes.string,
           collapsed: PropTypes.string
         }),
@@ -28,7 +28,7 @@ class Chart extends Component {
       }),
       text: PropTypes.shape({
         colors: PropTypes.shape({
-          'default': PropTypes.string,
+          default: PropTypes.string,
           hover: PropTypes.string
         })
       }),
@@ -79,7 +79,7 @@ class Chart extends Component {
   }
 
   render() {
-    return <div style={wrapperStyle} ref={this.divRef}/>;
+    return <div style={wrapperStyle} ref={this.divRef} />;
   }
 }
 

packages/redux-devtools-chart-monitor/src/ChartMonitor.js

@@ -50,15 +50,12 @@ class ChartMonitor extends Component {
 
     preserveScrollTop: PropTypes.bool,
     select: PropTypes.func.isRequired,
-    theme: PropTypes.oneOfType([
+    theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-      PropTypes.object,
-      PropTypes.string
-    ]),
     invertTheme: PropTypes.bool
   };
 
   static defaultProps = {
-    select: (state) => state,
+    select: state => state,
     theme: 'nicinabox',
     preserveScrollTop: true,
     invertTheme: false
@@ -106,7 +103,9 @@ class ChartMonitor extends Component {
     }
 
     // eslint-disable-next-line no-console
-    console.warn('DevTools theme ' + theme + ' not found, defaulting to nicinabox');
+    console.warn(
+      'DevTools theme ' + theme + ' not found, defaulting to nicinabox'
+    );
     return invertTheme ? invertColors(themes.nicinabox) : themes.nicinabox;
   }
 
@@ -118,7 +117,7 @@ class ChartMonitor extends Component {
       height: '100%',
       node: {
         colors: {
-          'default': theme.base0B,
+          default: theme.base0B,
           collapsed: theme.base0B,
           parent: theme.base0E
         },
@@ -126,7 +125,7 @@ class ChartMonitor extends Component {
       },
       text: {
         colors: {
-          'default': theme.base0D,
+          default: theme.base0D,
           hover: theme.base06
         }
       }
@@ -139,18 +138,20 @@ class ChartMonitor extends Component {
 
     const tooltipOptions = {
       disabled: false,
-      offset: {left: 30, top: 10},
+      offset: { left: 30, top: 10 },
       indentationSize: 2,
       style: {
         'background-color': theme.base06,
-        'opacity': '0.7',
+        opacity: '0.7',
         'border-radius': '5px',
-        'padding': '5px'
+        padding: '5px'
       }
     };
 
     const defaultOptions = {
-      state: computedStates.length ? computedStates[props.currentStateIndex].state : null,
+      state: computedStates.length
+        ? computedStates[props.currentStateIndex].state
+        : null,
       isSorted: false,
       heightBetweenNodesCoeff: 1,
       widthBetweenNodesCoeff: 1.3,
@@ -165,7 +166,7 @@ class ChartMonitor extends Component {
     const theme = this.getTheme();
 
     return (
-      <div style={{...styles.container, backgroundColor: theme.base07}}>
+      <div style={{ ...styles.container, backgroundColor: theme.base07 }}>
         <Chart {...this.getChartOptions()} />
       </div>
     );

packages/redux-devtools-chart-monitor/src/actions.js

@@ -1 +1,2 @@
-export const TOGGLE_VISIBILITY = '@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';
+export const TOGGLE_VISIBILITY =
+  '@@redux-devtools-log-monitor/TOGGLE_VISIBILITY';

packages/redux-devtools-cli/src/routes.js

@@ -9,7 +9,11 @@ var graphqlMiddleware = require('./middleware/graphql');
 var app = express.Router();
 
 function serveUmdModule(name) {
-  app.use(express.static(path.dirname(require.resolve(name + '/package.json')) + '/umd'));
+  app.use(
+    express.static(
+      path.dirname(require.resolve(name + '/package.json')) + '/umd'
+    )
+  );
 }
 
 function routes(options, store, scServer) {

packages/redux-devtools-core/src/app/components/Header.js

@@ -75,7 +75,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(Header);
-  null,
-  mapDispatchToProps
-)(Header);

packages/redux-devtools-core/src/app/components/InstanceSelector.js

@@ -45,7 +45,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(InstanceSelector);
-  mapStateToProps,
-  mapDispatchToProps
-)(InstanceSelector);

packages/redux-devtools-core/src/app/components/MonitorSelector.js

@@ -42,7 +42,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(MonitorSelector);
-  mapStateToProps,
-  mapDispatchToProps
-)(MonitorSelector);

packages/redux-devtools-core/src/app/components/Settings/Connection.js

@@ -129,7 +129,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(Connection);
-  mapStateToProps,
-  mapDispatchToProps
-)(Connection);

packages/redux-devtools-core/src/app/components/Settings/Themes.js

@@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(Themes);
-  mapStateToProps,
-  mapDispatchToProps
-)(Themes);

packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js

@@ -38,7 +38,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(DispatcherButton);
-  null,
-  mapDispatchToProps
-)(DispatcherButton);

packages/redux-devtools-core/src/app/components/buttons/ExportButton.js

@@ -30,7 +30,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(ExportButton);
-  null,
-  mapDispatchToProps
-)(ExportButton);

packages/redux-devtools-core/src/app/components/buttons/ImportButton.js

@@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(ImportButton);
-  null,
-  mapDispatchToProps
-)(ImportButton);

packages/redux-devtools-core/src/app/components/buttons/LockButton.js

@@ -37,7 +37,4 @@ function mapDispatchToProps(dispatch, ownProps) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(LockButton);
-  null,
-  mapDispatchToProps
-)(LockButton);

packages/redux-devtools-core/src/app/components/buttons/PersistButton.js

@@ -49,7 +49,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(LockButton);
-  mapStateToProps,
-  mapDispatchToProps
-)(LockButton);

packages/redux-devtools-core/src/app/components/buttons/RecordButton.js

@@ -35,7 +35,4 @@ function mapDispatchToProps(dispatch, ownProps) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(RecordButton);
-  null,
-  mapDispatchToProps
-)(RecordButton);

packages/redux-devtools-core/src/app/components/buttons/SliderButton.js

@@ -36,7 +36,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(SliderButton);
-  null,
-  mapDispatchToProps
-)(SliderButton);

packages/redux-devtools-core/src/app/components/buttons/SyncButton.js

@@ -42,7 +42,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(SyncButton);
-  mapStateToProps,
-  mapDispatchToProps
-)(SyncButton);

packages/redux-devtools-core/src/app/containers/Actions.js

@@ -82,7 +82,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(Actions);
-  mapStateToProps,
-  mapDispatchToProps
-)(Actions);

packages/redux-devtools-core/src/app/containers/App.js

@@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(App);
-  mapStateToProps,
-  mapDispatchToProps
-)(App);

packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.js

@@ -53,7 +53,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(ChartMonitorWrapper);
-  null,
-  mapDispatchToProps
-)(ChartMonitorWrapper);

packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.js

@@ -214,7 +214,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(null, mapDispatchToProps)(Dispatcher);
-  null,
-  mapDispatchToProps
-)(Dispatcher);

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.js

@@ -105,8 +105,5 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-const ConnectedChartTab = connect(
+const ConnectedChartTab = connect(null, mapDispatchToProps)(ChartTab);
-  null,
-  mapDispatchToProps
-)(ChartTab);
 export default withTheme(ConnectedChartTab);

packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.js

@@ -109,7 +109,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapStateToProps, mapDispatchToProps)(SubTabs);
-  mapStateToProps,
-  mapDispatchToProps
-)(SubTabs);

packages/redux-devtools-core/src/utils/filters.js

@@ -45,7 +45,8 @@ export function isFiltered(action, localFilter) {
   const opts = getDevToolsOptions();
   if (
     (!localFilter &&
-      (opts.filter && opts.filter === FilterState.DO_NOT_FILTER)) ||
+      opts.filter &&
+      opts.filter === FilterState.DO_NOT_FILTER) ||
     (type && typeof type.match !== 'function')
   )
     return false;

packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx

@@ -236,33 +236,30 @@ class DemoApp extends React.Component {
   };
 }
 
-export default connect(
+export default connect(state => state, {
-  state => state,
+  toggleTimeoutUpdate: timeoutUpdateEnabled => ({
-  {
+    type: 'TOGGLE_TIMEOUT_UPDATE',
-    toggleTimeoutUpdate: timeoutUpdateEnabled => ({
+    timeoutUpdateEnabled
-      type: 'TOGGLE_TIMEOUT_UPDATE',
+  }),
-      timeoutUpdateEnabled
+  timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
-    }),
+  increment: () => ({ type: 'INCREMENT' }),
-    timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }),
+  push: () => ({ type: 'PUSH' }),
-    increment: () => ({ type: 'INCREMENT' }),
+  pop: () => ({ type: 'POP' }),
-    push: () => ({ type: 'PUSH' }),
+  replace: () => ({ type: 'REPLACE' }),
-    pop: () => ({ type: 'POP' }),
+  changeNested: () => ({ type: 'CHANGE_NESTED' }),
-    replace: () => ({ type: 'REPLACE' }),
+  pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
-    changeNested: () => ({ type: 'CHANGE_NESTED' }),
+  addIterator: () => ({ type: 'ADD_ITERATOR' }),
-    pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }),
+  addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
-    addIterator: () => ({ type: 'ADD_ITERATOR' }),
+  addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
-    addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }),
+  addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }),
-    addRecursive: () => ({ type: 'ADD_RECURSIVE' }),
+  addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
-    addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }),
+  changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
-    addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }),
+  hugePayload: () => ({
-    changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }),
+    type: 'HUGE_PAYLOAD',
-    hugePayload: () => ({
+    payload: Array.from({ length: 10000 }).map((_, i) => i)
-      type: 'HUGE_PAYLOAD',
+  }),
-      payload: Array.from({ length: 10000 }).map((_, i) => i)
+  addFunction: () => ({ type: 'ADD_FUNCTION' }),
-    }),
+  addSymbol: () => ({ type: 'ADD_SYMBOL' }),
-    addFunction: () => ({ type: 'ADD_FUNCTION' }),
+  shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
-    addSymbol: () => ({ type: 'ADD_SYMBOL' }),
+  pushRoute
-    shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }),
+})(DemoApp);
-    pushRoute
-  }
-)(DemoApp);

packages/redux-devtools-inspector/demo/src/js/reducers.js

@@ -28,8 +28,20 @@ const IMMUTABLE_MAP = Immutable.Map({
 });
 
 const NATIVE_MAP = new window.Map([
-  ['map', new window.Map([[{ first: true }, 1], ['second', 2]])],
+  [
-  ['weakMap', new window.WeakMap([[{ first: true }, 1], [{ second: 1 }, 2]])],
+    'map',
+    new window.Map([
+      [{ first: true }, 1],
+      ['second', 2]
+    ])
+  ],
+  [
+    'weakMap',
+    new window.WeakMap([
+      [{ first: true }, 1],
+      [{ second: 1 }, 2]
+    ])
+  ],
   ['set', new window.Set([{ first: true }, 'second'])],
   ['weakSet', new window.WeakSet([{ first: true }, { second: 1 }])]
 ]);

packages/redux-devtools-instrument/src/instrument.js

@@ -80,7 +80,9 @@ export const ActionCreators = {
             stack = frames
               .slice(
                 0,
-                traceLimit + extraFrames + (frames[0].startsWith('Error') ? 1 : 0)
+                traceLimit +
+                  extraFrames +
+                  (frames[0].startsWith('Error') ? 1 : 0)
               )
               .join('\n');
           }

packages/redux-devtools-instrument/test/instrument.spec.js

@@ -983,7 +983,9 @@ describe('instrument', () => {
       exportedState = monitoredLiftedStore.getState();
       expect(exportedState.actionsById[0].stack).toBe(undefined);
       expect(typeof exportedState.actionsById[1].stack).toBe('string');
-      expect(exportedState.actionsById[1].stack).toContain('at Object.performAction');
+      expect(exportedState.actionsById[1].stack).toContain(
+        'at Object.performAction'
+      );
       expect(exportedState.actionsById[1].stack).toContain('instrument.js');
       expect(exportedState.actionsById[1].stack).toContain(
         'instrument.spec.js'
@@ -1318,13 +1320,7 @@ describe('instrument', () => {
 
   it('throws if there are more than one instrument enhancer included', () => {
     expect(() => {
-      createStore(
+      createStore(counter, compose(instrument(), instrument()));
-        counter,
-        compose(
-          instrument(),
-          instrument()
-        )
-      );
     }).toThrow(
       'DevTools instrumentation should not be applied more than once. ' +
         'Check your store configuration.'

packages/redux-devtools/examples/todomvc/containers/TodoApp.js

@@ -30,7 +30,4 @@ function mapDispatch(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapState, mapDispatch)(TodoApp);
-  mapState,
-  mapDispatch
-)(TodoApp);

packages/redux-devtools/test/persistState.spec.js

@@ -41,10 +41,7 @@ describe('persistState', () => {
   it('should persist state', () => {
     const store = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id'))
-        instrument(),
-        persistState('id')
-      )
     );
     expect(store.getState()).toBe(0);
 
@@ -54,35 +51,20 @@ describe('persistState', () => {
 
     const store2 = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id'))
-        instrument(),
-        persistState('id')
-      )
     );
     expect(store2.getState()).toBe(2);
   });
 
   it('should not persist state if no session id', () => {
-    const store = createStore(
+    const store = createStore(reducer, compose(instrument(), persistState()));
-      reducer,
-      compose(
-        instrument(),
-        persistState()
-      )
-    );
     expect(store.getState()).toBe(0);
 
     store.dispatch({ type: 'INCREMENT' });
     store.dispatch({ type: 'INCREMENT' });
     expect(store.getState()).toBe(2);
 
-    const store2 = createStore(
+    const store2 = createStore(reducer, compose(instrument(), persistState()));
-      reducer,
-      compose(
-        instrument(),
-        persistState()
-      )
-    );
     expect(store2.getState()).toBe(0);
   });
 
@@ -90,10 +72,7 @@ describe('persistState', () => {
     const oneLess = state => (state === undefined ? -1 : state - 1);
     const store = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id', oneLess))
-        instrument(),
-        persistState('id', oneLess)
-      )
     );
     expect(store.getState()).toBe(0);
 
@@ -103,10 +82,7 @@ describe('persistState', () => {
 
     const store2 = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id', oneLess))
-        instrument(),
-        persistState('id', oneLess)
-      )
     );
     expect(store2.getState()).toBe(1);
   });
@@ -116,10 +92,7 @@ describe('persistState', () => {
       action.type === 'INCREMENT' ? { type: 'DECREMENT' } : action;
     const store = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id', undefined, incToDec))
-        instrument(),
-        persistState('id', undefined, incToDec)
-      )
     );
     expect(store.getState()).toBe(0);
 
@@ -129,10 +102,7 @@ describe('persistState', () => {
 
     const store2 = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id', undefined, incToDec))
-        instrument(),
-        persistState('id', undefined, incToDec)
-      )
     );
     expect(store2.getState()).toBe(-2);
   });
@@ -140,13 +110,7 @@ describe('persistState', () => {
   it('should warn if read from localStorage fails', () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
     delete global.localStorage.getItem;
-    createStore(
+    createStore(reducer, compose(instrument(), persistState('id')));
-      reducer,
-      compose(
-        instrument(),
-        persistState('id')
-      )
-    );
 
     expect(spy.mock.calls[0]).toContain(
       'Could not read debug session from localStorage:'
@@ -160,10 +124,7 @@ describe('persistState', () => {
     delete global.localStorage.setItem;
     const store = createStore(
       reducer,
-      compose(
+      compose(instrument(), persistState('id'))
-        instrument(),
-        persistState('id')
-      )
     );
 
     store.dispatch({ type: 'INCREMENT' });

packages/redux-slider-monitor/examples/todomvc/containers/TodoApp.js

@@ -30,7 +30,4 @@ function mapDispatch(dispatch) {
   };
 }
 
-export default connect(
+export default connect(mapState, mapDispatch)(TodoApp);
-  mapState,
-  mapDispatch
-)(TodoApp);

packages/redux-slider-monitor/examples/todomvc/webpack.config.js

@@ -20,9 +20,7 @@ module.exports = {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js'
   },
-  plugins: [
+  plugins: [new webpack.HotModuleReplacementPlugin()],
-    new webpack.HotModuleReplacementPlugin()
-  ],
   module: {
     rules: [
       {