diff --git a/packages/d3-state-visualizer/examples/tree/index.js b/packages/d3-state-visualizer/examples/tree/index.js index 90eb327f..8caf70f4 100644 --- a/packages/d3-state-visualizer/examples/tree/index.js +++ b/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'}, - tooltipOptions: {offset: {left: 30, top: 10}, indentationSize: 2} + style: { border: '1px solid black' }, + tooltipOptions: { offset: { left: 30, top: 10 }, indentationSize: 2 } }); render(); diff --git a/packages/d3-state-visualizer/examples/tree/server.js b/packages/d3-state-visualizer/examples/tree/server.js index e309a0b3..91d62452 100644 --- a/packages/d3-state-visualizer/examples/tree/server.js +++ b/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); diff --git a/packages/d3-state-visualizer/examples/tree/webpack.config.js b/packages/d3-state-visualizer/examples/tree/webpack.config.js index d99e1fcd..20df4163 100644 --- a/packages/d3-state-visualizer/examples/tree/webpack.config.js +++ b/packages/d3-state-visualizer/examples/tree/webpack.config.js @@ -14,18 +14,18 @@ module.exports = { filename: 'bundle.js', publicPath: '/static/' }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - ], + plugins: [new webpack.HotModuleReplacementPlugin()], resolve: { extensions: ['.js'] }, module: { - rules: [{ - test: /\.js$/, - loaders: ['babel-loader'], - exclude: /node_modules/, - include: __dirname - }] + rules: [ + { + test: /\.js$/, + loaders: ['babel-loader'], + exclude: /node_modules/, + include: __dirname + } + ] } }; diff --git a/packages/d3-state-visualizer/src/charts/tree/tree.js b/packages/d3-state-visualizer/src/charts/tree/tree.js index a32cbeae..605add6e 100644 --- a/packages/d3-state-visualizer/src/charts/tree/tree.js +++ b/packages/d3-state-visualizer/src/charts/tree/tree.js @@ -1,9 +1,14 @@ -import d3 from 'd3' -import { isEmpty } from 'ramda' -import map2tree from 'map2tree' -import deepmerge from 'deepmerge' -import { getTooltipString, toggleChildren, visit, getNodeGroupByDepthCount } from './utils' -import d3tooltip from 'd3tooltip' +import d3 from 'd3'; +import { isEmpty } from 'ramda'; +import map2tree from 'map2tree'; +import deepmerge from 'deepmerge'; +import { + 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 height = size * aspectRatio - margin.top - margin.bottom - const fullWidth = size - const fullHeight = size * aspectRatio + const width = size - margin.left - margin.right; + const height = size * aspectRatio - margin.top - margin.bottom; + const fullWidth = size; + 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 zoom = d3.behavior.zoom() + const root = d3.select(DOMNode); + 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}) - .call(zoom.on('zoom', () => { - const { translate, scale } = d3.event - vis.attr('transform', `translate(${translate})scale(${scale})`) - })) + .style({ cursor: '-webkit-grab', ...style }) + .call( + zoom.on('zoom', () => { + 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 data + let layout = d3.layout.tree().size([width, height]); + 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 maxLabelLength = 0 + let nodeIndex = 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, - node => { - 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}` - return c - }) : null - ) + visit( + data, + node => { + 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}`; + 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 links = layout.links(nodes) + let nodes = layout.nodes(data); + 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 = {} - nodePositions.forEach(node => nodePositionsById[node.id] = node) + })); + const nodePositionsById = {}; + 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)) - let nodeEnter = node.enter().append('g') + .data(nodes, d => d.id || (d.id = ++nodeIndex)); + let nodeEnter = node + .enter() + .append('g') .attr({ - 'class': 'node', + class: 'node', transform: d => { - const position = findParentNodePosition(nodePositionsById, d.id, (n) => previousNodePositionsById[n.id]) - const previousPosition = position && previousNodePositionsById[position.id] || previousNodePositionsById.root - return `translate(${previousPosition.y},${previousPosition.x})` + const position = findParentNodePosition( + nodePositionsById, + 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}) - .text((d, i) => getTooltipString(d, i, tooltipOptions)) - .style(tooltipOptions.style) - ) + nodeEnter.call( + d3tooltip(d3, 'tooltip', { ...tooltipOptions, root }) + .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') - nodeEnterInnerGroup.append('circle') + const nodeEnterInnerGroup = nodeEnter.append('g'); + nodeEnterInnerGroup + .append('circle') .attr({ - 'class': 'nodeCircle', + class: 'nodeCircle', r: 0 }) .on({ click: clickedNode => { - if (d3.event.defaultPrevented) return - toggleChildren(clickedNode) - update() + if (d3.event.defaultPrevented) return; + toggleChildren(clickedNode); + 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') - .text(d => d.name) + node.select('text').text(d => d.name); // change the circle fill depending on whether it has children and is collapsed - node.select('circle') - .style({ - stroke: 'black', - 'stroke-width': '1.5px', - fill: d => d._children ? style.node.colors.collapsed : (d.children ? style.node.colors.parent : style.node.colors.default) - }) + node.select('circle').style({ + stroke: 'black', + 'stroke-width': '1.5px', + fill: d => + 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') - .attr('r', style.node.radius) + nodeUpdate.select('circle').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) - return `translate(${x},0)` + const x = + (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) { - // test whether the relevant properties of d match - // the equivalent property of the oldData - // also test whether the old data exists, - // to catch the entering elements! - return (this.__oldData__ && d.value !== this.__oldData__.value) - }) + node + .filter(function flick(d) { + // test whether the relevant properties of d match + // the equivalent property of the oldData + // also test whether the old data exists, + // to catch the entering elements! + return this.__oldData__ && d.value !== this.__oldData__.value; + }) .select('g') - .style('opacity', '0.3').transition() - .duration(blinkDuration).style('opacity', '1') + .style('opacity', '0.3') + .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 futurePosition = position && nodePositionsById[position.id] || nodePositionsById.root - return `translate(${futurePosition.y},${futurePosition.x})` + const position = findParentNodePosition( + previousNodePositionsById, + 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') - .attr('r', 0) + nodeExit.select('circle').attr('r', 0); - nodeExit.select('text') - .style('fill-opacity', 0) + nodeExit.select('text').style('fill-opacity', 0); // update the links - let link = vis.selectAll('path.link') - .data(links, d => d.target.id) + let link = vis.selectAll('path.link').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 previousPosition = position && previousNodePositionsById[position.id] || previousNodePositionsById.root + const position = findParentNodePosition( + 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 futurePosition = position && nodePositionsById[position.id] || nodePositionsById.root + const position = findParentNodePosition( + 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; } - } + }; } diff --git a/packages/devui/src/Slider/styles/default.js b/packages/devui/src/Slider/styles/default.js index 82234cd6..5a13d082 100644 --- a/packages/devui/src/Slider/styles/default.js +++ b/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%, ${ - theme.base01 - }) + background: linear-gradient(${theme.base01}, ${theme.base02} 40%, ${theme.base01}) no-repeat ${theme.base00}; background-size: ${percent}% 100%; }` diff --git a/packages/devui/src/Tabs/Tabs.js b/packages/devui/src/Tabs/Tabs.js index f99bd73e..24c71783 100644 --- a/packages/devui/src/Tabs/Tabs.js +++ b/packages/devui/src/Tabs/Tabs.js @@ -76,7 +76,7 @@ export default class Tabs extends Component { {tabsHeader}
- +
); diff --git a/packages/devui/src/utils/animations.js b/packages/devui/src/utils/animations.js index 6ba8f7c6..36ddbbb9 100644 --- a/packages/devui/src/utils/animations.js +++ b/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, ${ - theme.base07 - } 11%, transparent 11%); + background-image: radial-gradient(circle, ${theme.base07} 11%, transparent 11%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); diff --git a/packages/devui/src/utils/createStyledComponent.js b/packages/devui/src/utils/createStyledComponent.js index ce1febfe..71198754 100644 --- a/packages/devui/src/utils/createStyledComponent.js +++ b/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) })} diff --git a/packages/map2tree/test/map2tree.spec.js b/packages/map2tree/test/map2tree.spec.js index 1279e80a..d65d30c9 100755 --- a/packages/map2tree/test/map2tree.spec.js +++ b/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 } + ] } ] }; diff --git a/packages/react-json-tree/examples/webpack.config.js b/packages/react-json-tree/examples/webpack.config.js index 3d7b894f..8a5b8bf7 100755 --- a/packages/react-json-tree/examples/webpack.config.js +++ b/packages/react-json-tree/examples/webpack.config.js @@ -16,9 +16,7 @@ module.exports = { filename: 'bundle.js', publicPath: '/static/' }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - ], + plugins: [new webpack.HotModuleReplacementPlugin()], module: { rules: [ { diff --git a/packages/redux-devtools-chart-monitor/src/Chart.js b/packages/redux-devtools-chart-monitor/src/Chart.js index 9e01b81c..69bee157 100644 --- a/packages/redux-devtools-chart-monitor/src/Chart.js +++ b/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
; + return
; } } diff --git a/packages/redux-devtools-chart-monitor/src/ChartMonitor.js b/packages/redux-devtools-chart-monitor/src/ChartMonitor.js index e6602913..d8260f4d 100644 --- a/packages/redux-devtools-chart-monitor/src/ChartMonitor.js +++ b/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([ - PropTypes.object, - PropTypes.string - ]), + theme: PropTypes.oneOfType([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 ( -
+
); diff --git a/packages/redux-devtools-chart-monitor/src/actions.js b/packages/redux-devtools-chart-monitor/src/actions.js index ec09b91b..0eefa3a9 100644 --- a/packages/redux-devtools-chart-monitor/src/actions.js +++ b/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'; diff --git a/packages/redux-devtools-cli/src/routes.js b/packages/redux-devtools-cli/src/routes.js index 33553ed6..5ab7457f 100644 --- a/packages/redux-devtools-cli/src/routes.js +++ b/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) { diff --git a/packages/redux-devtools-core/src/app/components/Header.js b/packages/redux-devtools-core/src/app/components/Header.js index f0bf8251..a80f35a5 100644 --- a/packages/redux-devtools-core/src/app/components/Header.js +++ b/packages/redux-devtools-core/src/app/components/Header.js @@ -75,7 +75,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(Header); +export default connect(null, mapDispatchToProps)(Header); diff --git a/packages/redux-devtools-core/src/app/components/InstanceSelector.js b/packages/redux-devtools-core/src/app/components/InstanceSelector.js index 65580ee6..54b13fc7 100644 --- a/packages/redux-devtools-core/src/app/components/InstanceSelector.js +++ b/packages/redux-devtools-core/src/app/components/InstanceSelector.js @@ -45,7 +45,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(InstanceSelector); +export default connect(mapStateToProps, mapDispatchToProps)(InstanceSelector); diff --git a/packages/redux-devtools-core/src/app/components/MonitorSelector.js b/packages/redux-devtools-core/src/app/components/MonitorSelector.js index 71308c04..28e03740 100644 --- a/packages/redux-devtools-core/src/app/components/MonitorSelector.js +++ b/packages/redux-devtools-core/src/app/components/MonitorSelector.js @@ -42,7 +42,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(MonitorSelector); +export default connect(mapStateToProps, mapDispatchToProps)(MonitorSelector); diff --git a/packages/redux-devtools-core/src/app/components/Settings/Connection.js b/packages/redux-devtools-core/src/app/components/Settings/Connection.js index 772f1b02..9b99a279 100644 --- a/packages/redux-devtools-core/src/app/components/Settings/Connection.js +++ b/packages/redux-devtools-core/src/app/components/Settings/Connection.js @@ -129,7 +129,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(Connection); +export default connect(mapStateToProps, mapDispatchToProps)(Connection); diff --git a/packages/redux-devtools-core/src/app/components/Settings/Themes.js b/packages/redux-devtools-core/src/app/components/Settings/Themes.js index 81db4f1f..3e16fc3d 100644 --- a/packages/redux-devtools-core/src/app/components/Settings/Themes.js +++ b/packages/redux-devtools-core/src/app/components/Settings/Themes.js @@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(Themes); +export default connect(mapStateToProps, mapDispatchToProps)(Themes); diff --git a/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js b/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js index 62d54b39..b323f05b 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js @@ -38,7 +38,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(DispatcherButton); +export default connect(null, mapDispatchToProps)(DispatcherButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js b/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js index 34df525c..61fadb92 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js @@ -30,7 +30,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(ExportButton); +export default connect(null, mapDispatchToProps)(ExportButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js index f4116793..dbbecdd2 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js @@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(ImportButton); +export default connect(null, mapDispatchToProps)(ImportButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/LockButton.js b/packages/redux-devtools-core/src/app/components/buttons/LockButton.js index 9f5c44e6..673eb7ff 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/LockButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/LockButton.js @@ -37,7 +37,4 @@ function mapDispatchToProps(dispatch, ownProps) { }; } -export default connect( - null, - mapDispatchToProps -)(LockButton); +export default connect(null, mapDispatchToProps)(LockButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js b/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js index f5fda377..586db331 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js @@ -49,7 +49,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(LockButton); +export default connect(mapStateToProps, mapDispatchToProps)(LockButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js b/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js index 95e2be35..a6da9128 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js @@ -35,7 +35,4 @@ function mapDispatchToProps(dispatch, ownProps) { }; } -export default connect( - null, - mapDispatchToProps -)(RecordButton); +export default connect(null, mapDispatchToProps)(RecordButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js b/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js index 67650c1b..b031f43d 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js @@ -36,7 +36,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(SliderButton); +export default connect(null, mapDispatchToProps)(SliderButton); diff --git a/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js b/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js index 7fbd033f..3d8c1062 100644 --- a/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js +++ b/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js @@ -42,7 +42,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(SyncButton); +export default connect(mapStateToProps, mapDispatchToProps)(SyncButton); diff --git a/packages/redux-devtools-core/src/app/containers/Actions.js b/packages/redux-devtools-core/src/app/containers/Actions.js index 0015dfcd..f88c5134 100644 --- a/packages/redux-devtools-core/src/app/containers/Actions.js +++ b/packages/redux-devtools-core/src/app/containers/Actions.js @@ -82,7 +82,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(Actions); +export default connect(mapStateToProps, mapDispatchToProps)(Actions); diff --git a/packages/redux-devtools-core/src/app/containers/App.js b/packages/redux-devtools-core/src/app/containers/App.js index 971ee61b..92cebc85 100644 --- a/packages/redux-devtools-core/src/app/containers/App.js +++ b/packages/redux-devtools-core/src/app/containers/App.js @@ -61,7 +61,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(App); +export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.js b/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.js index f8dee65c..93c01800 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.js +++ b/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.js @@ -53,7 +53,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(ChartMonitorWrapper); +export default connect(null, mapDispatchToProps)(ChartMonitorWrapper); diff --git a/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.js b/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.js index a3e1b2a8..c69f1f74 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.js +++ b/packages/redux-devtools-core/src/app/containers/monitors/Dispatcher.js @@ -214,7 +214,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - null, - mapDispatchToProps -)(Dispatcher); +export default connect(null, mapDispatchToProps)(Dispatcher); diff --git a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.js b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.js index ec5e4020..54249b8a 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.js +++ b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.js @@ -105,8 +105,5 @@ function mapDispatchToProps(dispatch) { }; } -const ConnectedChartTab = connect( - null, - mapDispatchToProps -)(ChartTab); +const ConnectedChartTab = connect(null, mapDispatchToProps)(ChartTab); export default withTheme(ConnectedChartTab); diff --git a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.js b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.js index ce31b6e3..ac2950be 100644 --- a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.js +++ b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.js @@ -109,7 +109,4 @@ function mapDispatchToProps(dispatch) { }; } -export default connect( - mapStateToProps, - mapDispatchToProps -)(SubTabs); +export default connect(mapStateToProps, mapDispatchToProps)(SubTabs); diff --git a/packages/redux-devtools-core/src/utils/filters.js b/packages/redux-devtools-core/src/utils/filters.js index 78562bfa..2141b13a 100644 --- a/packages/redux-devtools-core/src/utils/filters.js +++ b/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; diff --git a/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx b/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx index 6fea5b63..692e00da 100644 --- a/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx +++ b/packages/redux-devtools-inspector/demo/src/js/DemoApp.jsx @@ -236,33 +236,30 @@ class DemoApp extends React.Component { }; } -export default connect( - state => state, - { - toggleTimeoutUpdate: timeoutUpdateEnabled => ({ - type: 'TOGGLE_TIMEOUT_UPDATE', - timeoutUpdateEnabled - }), - timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }), - increment: () => ({ type: 'INCREMENT' }), - push: () => ({ type: 'PUSH' }), - pop: () => ({ type: 'POP' }), - replace: () => ({ type: 'REPLACE' }), - changeNested: () => ({ type: 'CHANGE_NESTED' }), - pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }), - addIterator: () => ({ type: 'ADD_ITERATOR' }), - addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }), - addRecursive: () => ({ type: 'ADD_RECURSIVE' }), - addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }), - addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }), - changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }), - hugePayload: () => ({ - type: 'HUGE_PAYLOAD', - payload: Array.from({ length: 10000 }).map((_, i) => i) - }), - addFunction: () => ({ type: 'ADD_FUNCTION' }), - addSymbol: () => ({ type: 'ADD_SYMBOL' }), - shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }), - pushRoute - } -)(DemoApp); +export default connect(state => state, { + toggleTimeoutUpdate: timeoutUpdateEnabled => ({ + type: 'TOGGLE_TIMEOUT_UPDATE', + timeoutUpdateEnabled + }), + timeoutUpdate: () => ({ type: 'TIMEOUT_UPDATE' }), + increment: () => ({ type: 'INCREMENT' }), + push: () => ({ type: 'PUSH' }), + pop: () => ({ type: 'POP' }), + replace: () => ({ type: 'REPLACE' }), + changeNested: () => ({ type: 'CHANGE_NESTED' }), + pushHugeArray: () => ({ type: 'PUSH_HUGE_ARRAY' }), + addIterator: () => ({ type: 'ADD_ITERATOR' }), + addHugeObect: () => ({ type: 'ADD_HUGE_OBJECT' }), + addRecursive: () => ({ type: 'ADD_RECURSIVE' }), + addNativeMap: () => ({ type: 'ADD_NATIVE_MAP' }), + addImmutableMap: () => ({ type: 'ADD_IMMUTABLE_MAP' }), + changeImmutableNested: () => ({ type: 'CHANGE_IMMUTABLE_NESTED' }), + hugePayload: () => ({ + type: 'HUGE_PAYLOAD', + payload: Array.from({ length: 10000 }).map((_, i) => i) + }), + addFunction: () => ({ type: 'ADD_FUNCTION' }), + addSymbol: () => ({ type: 'ADD_SYMBOL' }), + shuffleArray: () => ({ type: 'SHUFFLE_ARRAY' }), + pushRoute +})(DemoApp); diff --git a/packages/redux-devtools-inspector/demo/src/js/reducers.js b/packages/redux-devtools-inspector/demo/src/js/reducers.js index 7b3b3fba..2dfc59dc 100644 --- a/packages/redux-devtools-inspector/demo/src/js/reducers.js +++ b/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 }])] ]); diff --git a/packages/redux-devtools-instrument/src/instrument.js b/packages/redux-devtools-instrument/src/instrument.js index ac199cbb..d0157767 100644 --- a/packages/redux-devtools-instrument/src/instrument.js +++ b/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'); } diff --git a/packages/redux-devtools-instrument/test/instrument.spec.js b/packages/redux-devtools-instrument/test/instrument.spec.js index f2adf89a..5720ec69 100644 --- a/packages/redux-devtools-instrument/test/instrument.spec.js +++ b/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( - counter, - compose( - instrument(), - instrument() - ) - ); + createStore(counter, compose(instrument(), instrument())); }).toThrow( 'DevTools instrumentation should not be applied more than once. ' + 'Check your store configuration.' diff --git a/packages/redux-devtools/examples/todomvc/containers/TodoApp.js b/packages/redux-devtools/examples/todomvc/containers/TodoApp.js index 9b29d548..8ce5a977 100644 --- a/packages/redux-devtools/examples/todomvc/containers/TodoApp.js +++ b/packages/redux-devtools/examples/todomvc/containers/TodoApp.js @@ -30,7 +30,4 @@ function mapDispatch(dispatch) { }; } -export default connect( - mapState, - mapDispatch -)(TodoApp); +export default connect(mapState, mapDispatch)(TodoApp); diff --git a/packages/redux-devtools/test/persistState.spec.js b/packages/redux-devtools/test/persistState.spec.js index ea816ecc..bba24584 100644 --- a/packages/redux-devtools/test/persistState.spec.js +++ b/packages/redux-devtools/test/persistState.spec.js @@ -41,10 +41,7 @@ describe('persistState', () => { it('should persist state', () => { const store = createStore( reducer, - compose( - instrument(), - persistState('id') - ) + compose(instrument(), persistState('id')) ); expect(store.getState()).toBe(0); @@ -54,35 +51,20 @@ describe('persistState', () => { const store2 = createStore( reducer, - compose( - instrument(), - persistState('id') - ) + compose(instrument(), persistState('id')) ); expect(store2.getState()).toBe(2); }); it('should not persist state if no session id', () => { - const store = createStore( - reducer, - compose( - instrument(), - persistState() - ) - ); + const store = createStore(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( - reducer, - compose( - instrument(), - persistState() - ) - ); + const store2 = createStore(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( - instrument(), - persistState('id', oneLess) - ) + compose(instrument(), persistState('id', oneLess)) ); expect(store.getState()).toBe(0); @@ -103,10 +82,7 @@ describe('persistState', () => { const store2 = createStore( reducer, - compose( - instrument(), - persistState('id', oneLess) - ) + compose(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( - instrument(), - persistState('id', undefined, incToDec) - ) + compose(instrument(), persistState('id', undefined, incToDec)) ); expect(store.getState()).toBe(0); @@ -129,10 +102,7 @@ describe('persistState', () => { const store2 = createStore( reducer, - compose( - instrument(), - persistState('id', undefined, incToDec) - ) + compose(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( - reducer, - compose( - instrument(), - persistState('id') - ) - ); + createStore(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( - instrument(), - persistState('id') - ) + compose(instrument(), persistState('id')) ); store.dispatch({ type: 'INCREMENT' }); diff --git a/packages/redux-slider-monitor/examples/todomvc/containers/TodoApp.js b/packages/redux-slider-monitor/examples/todomvc/containers/TodoApp.js index 75087768..33bfb1f2 100755 --- a/packages/redux-slider-monitor/examples/todomvc/containers/TodoApp.js +++ b/packages/redux-slider-monitor/examples/todomvc/containers/TodoApp.js @@ -30,7 +30,4 @@ function mapDispatch(dispatch) { }; } -export default connect( - mapState, - mapDispatch -)(TodoApp); +export default connect(mapState, mapDispatch)(TodoApp); diff --git a/packages/redux-slider-monitor/examples/todomvc/webpack.config.js b/packages/redux-slider-monitor/examples/todomvc/webpack.config.js index 9115bb54..2f6b80a2 100755 --- a/packages/redux-slider-monitor/examples/todomvc/webpack.config.js +++ b/packages/redux-slider-monitor/examples/todomvc/webpack.config.js @@ -20,9 +20,7 @@ module.exports = { path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, - plugins: [ - new webpack.HotModuleReplacementPlugin() - ], + plugins: [new webpack.HotModuleReplacementPlugin()], module: { rules: [ {