Skip to content

Commit ce04326

Browse files
christianalfonichristianalfoni
authored
Merge pull request cerebral#15 from cerebral/flushes
feat(overmind-devtools): add flushes tab
2 parents a077cea + 67d8f00 commit ce04326

File tree

19 files changed

+318
-50
lines changed

19 files changed

+318
-50
lines changed

‎packages/node_modules/overmind-devtools/src/app/actions.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export default (action: Action) => {
3636

3737
const openComponents = action().mutation(mutations.openComponents)
3838

39+
const openFlushes = action().mutation(mutations.openFlushes)
40+
3941
const openApp = action<string>()
4042

4143
const toggleExpandState = action<string[]>().mutation(
@@ -50,6 +52,7 @@ export default (action: Action) => {
5052
openState,
5153
openConsole,
5254
openComponents,
55+
openFlushes,
5356
openApp,
5457
toggleExpandState,
5558
}

‎packages/node_modules/overmind-devtools/src/app/derived.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,22 @@ export const componentsStatePathCount = derived((state: State) =>
3131
0
3232
)
3333
)
34+
35+
export const flushes = derived((state: State) =>
36+
state.currentApp.flushes.slice(1).reverse()
37+
)
38+
39+
export const flushesMutationsCount = derived((state: State) =>
40+
state.flushes.reduce((aggr, flush) => aggr + flush.mutations.length, 0)
41+
)
42+
43+
export const flushesStatePathCount = derived(
44+
(state: State) =>
45+
state.flushes.reduce((aggr, flush) => {
46+
return flush.mutations.reduce(
47+
(aggr, mutation) =>
48+
aggr.includes(mutation.path) ? aggr : aggr.concat(mutation.path),
49+
aggr
50+
)
51+
}, []).length
52+
)

‎packages/node_modules/overmind-devtools/src/app/mutations.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ export const openConsole = (_, state: State) => (state.currentTab = Tab.Console)
4848
export const openComponents = (_, state: State) =>
4949
(state.currentTab = Tab.Components)
5050

51+
export const openFlushes = (_, state: State) => (state.currentTab = Tab.Flushes)
52+
5153
export const toggleExpandStatePath = (path: string[], state: State) => {
5254
const pathString = path.join('.')
5355

‎packages/node_modules/overmind-devtools/src/app/state.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export enum Tab {
5050
State = 'State',
5151
Console = 'Console',
5252
Components = 'Components',
53+
Flushes = 'Flushes',
5354
}
5455

5556
export type State = {
@@ -65,6 +66,9 @@ export type State = {
6566
componentsMounted: Component[]
6667
componentsUpdateCount: number
6768
componentsStatePathCount: number
69+
flushes: Flush[]
70+
flushesMutationsCount: number
71+
flushesStatePathCount: number
6872
}
6973

7074
const state: State = {
@@ -80,6 +84,9 @@ const state: State = {
8084
componentsMounted: derived.componentsMounted,
8185
componentsUpdateCount: derived.componentsUpdateCount,
8286
componentsStatePathCount: derived.componentsStatePathCount,
87+
flushes: derived.flushes,
88+
flushesMutationsCount: derived.flushesMutationsCount,
89+
flushesStatePathCount: derived.flushesStatePathCount,
8390
}
8491

8592
export default state

‎packages/node_modules/overmind-devtools/src/components/Components/elements.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ export const Wrapper = styled.div`
44
display: flex;
55
flex-direction: column;
66
padding: ${({ theme }) => theme.padding.normal};
7+
height: 100%;
8+
box-sizing: border-box;
9+
overflow-y: scroll;
710
`
811

912
export const Panels = styled.div`

‎packages/node_modules/overmind-devtools/src/components/Components/index.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,34 @@ import { Wrapper, Panels, Panel } from './elements'
77

88
const Components: React.SFC<Connect> = ({ appState }) => (
99
<Wrapper>
10-
<Panels>
11-
<Panel>
12-
<Text variant="label" dense>
13-
connected
14-
</Text>
15-
<Text variant="header" dense>
16-
{appState.componentsMounted.length}
17-
</Text>
18-
</Panel>
19-
<Panel>
20-
<Text variant="label" dense>
21-
updates
22-
</Text>
23-
<Text variant="header" dense>
24-
{appState.componentsUpdateCount}
25-
</Text>
26-
</Panel>
27-
<Panel>
28-
<Text variant="label" dense>
29-
values watched
30-
</Text>
31-
<Text variant="header" dense>
32-
{appState.componentsStatePathCount}
33-
</Text>
34-
</Panel>
35-
</Panels>
10+
<div>
11+
<Panels>
12+
<Panel>
13+
<Text variant="label" dense>
14+
connected
15+
</Text>
16+
<Text variant="header" dense>
17+
{appState.componentsMounted.length}
18+
</Text>
19+
</Panel>
20+
<Panel>
21+
<Text variant="label" dense>
22+
update count
23+
</Text>
24+
<Text variant="header" dense>
25+
{appState.componentsUpdateCount}
26+
</Text>
27+
</Panel>
28+
<Panel>
29+
<Text variant="label" dense>
30+
paths watched
31+
</Text>
32+
<Text variant="header" dense>
33+
{appState.componentsStatePathCount}
34+
</Text>
35+
</Panel>
36+
</Panels>
37+
</div>
3638
<Table headers={['name', 'updates', 'values']}>
3739
{appState.componentsMounted.map((component) => {
3840
return (

‎packages/node_modules/overmind-devtools/src/components/Flushes/elements.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import styled from '../../styled-components'
2+
3+
export const Wrapper = styled.div`
4+
display: flex;
5+
flex-direction: column;
6+
padding: ${({ theme }) => theme.padding.normal};
7+
height: 100%;
8+
box-sizing: border-box;
9+
overflow-y: scroll;
10+
`
11+
12+
export const Panels = styled.div`
13+
display: flex;
14+
justify-content: space-around;
15+
`
16+
17+
export const Panel = styled.div`
18+
padding: ${({ theme }) => theme.padding.smaller};
19+
`
20+
21+
export const FlushWrapper = styled.div`
22+
margin: ${({ theme }) => `${theme.padding.smaller} ${theme.padding.normal}`};
23+
`
24+
25+
export const Mutation = styled.div`
26+
display: flex;
27+
align-items: center;
28+
> * {
29+
margin-right: 10px;
30+
}
31+
`
32+
33+
export const Method = styled.span`
34+
color: ${({ theme }) => theme.color.primary};
35+
font-weight: bold;
36+
`
37+
38+
export const FlushDivider = styled.div`
39+
border-bottom: 1px solid
40+
${({ theme }) => theme.color.fade(theme.color.black, 0.9)};
41+
color: ${({ theme }) => theme.color.fade(theme.color.black, 0.5)};
42+
`

‎packages/node_modules/overmind-devtools/src/components/Flushes/index.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import * as React from 'react'
2+
import { connect, Connect } from '../../app'
3+
import Text from '../common/Text'
4+
import {
5+
Wrapper,
6+
Panels,
7+
Panel,
8+
FlushWrapper,
9+
Mutation,
10+
Method,
11+
FlushDivider,
12+
} from './elements'
13+
import Inspector from '../Inspector'
14+
15+
type State = {
16+
expandedPaths: string[]
17+
}
18+
19+
class Args extends React.Component<
20+
{
21+
args: any
22+
},
23+
State
24+
> {
25+
state = {
26+
expandedPaths: [],
27+
}
28+
onToggleExpand = (path) => {
29+
const pathString = path.join('')
30+
31+
if (this.state.expandedPaths.includes(pathString)) {
32+
this.setState({
33+
expandedPaths: this.state.expandedPaths.filter(
34+
(currentPath) => currentPath !== pathString
35+
),
36+
})
37+
} else {
38+
this.setState({
39+
expandedPaths: this.state.expandedPaths.concat(pathString),
40+
})
41+
}
42+
}
43+
render() {
44+
return (
45+
<Inspector
46+
value={this.props.args}
47+
expandedPaths={this.state.expandedPaths}
48+
onToggleExpand={this.onToggleExpand}
49+
/>
50+
)
51+
}
52+
}
53+
54+
const Flushes: React.SFC<Connect> = ({ appState }) => (
55+
<Wrapper>
56+
<div>
57+
<Panels>
58+
<Panel>
59+
<Text variant="label" dense>
60+
flush count
61+
</Text>
62+
<Text variant="header" dense>
63+
{appState.flushes.length}
64+
</Text>
65+
</Panel>
66+
<Panel>
67+
<Text variant="label" dense>
68+
mutations count
69+
</Text>
70+
<Text variant="header" dense>
71+
{appState.flushesMutationsCount}
72+
</Text>
73+
</Panel>
74+
<Panel>
75+
<Text variant="label" dense>
76+
paths updated
77+
</Text>
78+
<Text variant="header" dense>
79+
{appState.flushesStatePathCount}
80+
</Text>
81+
</Panel>
82+
</Panels>
83+
</div>
84+
{appState.flushes.map((flush, index) => (
85+
<FlushWrapper key={index}>
86+
<FlushDivider>
87+
<Text variant="text" dense>
88+
#{appState.flushes.length - index}
89+
</Text>
90+
</FlushDivider>
91+
{flush.mutations.map((mutation, index) => {
92+
return (
93+
<Mutation key={index}>
94+
<Text variant="text" dense>
95+
<Method>{mutation.method}</Method>
96+
</Text>
97+
<Text variant="text" dense>
98+
{mutation.path}
99+
</Text>
100+
<React.Fragment>
101+
{mutation.args.map((arg, index) => (
102+
<Args key={index} args={arg} />
103+
))}
104+
</React.Fragment>
105+
</Mutation>
106+
)
107+
})}
108+
</FlushWrapper>
109+
))}
110+
</Wrapper>
111+
)
112+
113+
export default connect(Flushes)

‎packages/node_modules/overmind-devtools/src/components/Inspector/index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,18 @@ class ValueComponent extends React.Component<ValueComponentProps> {
8282
if (typeof this.props.value === 'string') {
8383
return (
8484
<StringValue>
85-
<Key>{this.props.path[this.props.path.length - 1]}:</Key> "{
86-
this.props.value
87-
}"
85+
{this.props.path.length ? (
86+
<Key>{this.props.path[this.props.path.length - 1]}:</Key>
87+
) : null}{' '}
88+
"{this.props.value}"
8889
</StringValue>
8990
)
9091
}
9192
return (
9293
<GenericValue>
93-
<Key>{this.props.path[this.props.path.length - 1]}:</Key>{' '}
94+
{this.props.path.length ? (
95+
<Key>{this.props.path[this.props.path.length - 1]}:</Key>
96+
) : null}{' '}
9497
{String(this.props.value)}
9598
</GenericValue>
9699
)

‎packages/node_modules/overmind-devtools/src/components/State/elements.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,7 @@ import styled from '../../styled-components'
22

33
export const Wrapper = styled.div`
44
padding: ${({ theme }) => theme.padding.normal};
5+
height: 100%;
6+
box-sizing: border-box;
7+
overflow-y: scroll;
58
`

0 commit comments

Comments
 (0)