Skip to content

Commit 9be114a

Browse files
christianalfonichristianalfoni
committed
refactor(overmind-devtools): refactor to new overmind components
1 parent ceb40dc commit 9be114a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1394
-1483
lines changed

‎packages/node_modules/overmind-components/src/Component.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,7 @@ export class Component {
208208
return this.vtree instanceof Null
209209
}
210210
getElement() {
211-
return this.vtree instanceof Component
212-
? this.vtree.getElement()
213-
: this.vtree.el
211+
return this.vtree.getElement()
214212
}
215213
getChild() {
216214
return this.vtree instanceof Component ? this.vtree.getChild() : this.vtree

‎packages/node_modules/overmind-components/src/Element.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export class Element {
108108
this.addKey(cachedChild)
109109

110110
const el = cachedChild.getElement()
111-
if (prevChild.isNull()) {
111+
if (el && prevChild.isNull()) {
112112
const insertBefore = this.getNextChildElement(cachedChild)
113113
this.el.insertBefore(el, insertBefore)
114114
} else if (el && prevChild.getElement()) {
@@ -158,7 +158,7 @@ export class Element {
158158
prevChild.unmount()
159159
nextChild.mount(component, component.context)
160160
const el = nextChild.getElement()
161-
if (prevChild.isNull()) {
161+
if (el && prevChild.isNull()) {
162162
const insertBefore = this.getNextChildElement(component)
163163
this.el.insertBefore(el, insertBefore)
164164
} else if (el) {

‎packages/node_modules/overmind-components/src/Events.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,16 @@ export class Events {
1212
)
1313
}
1414
register(type, element, cb) {
15+
if (!cb) {
16+
return
17+
}
18+
1519
if (!this.events[type]) {
1620
this.events[type] = new Map()
1721
this.factory.addEventListener(type, (event) => {
1822
let node = event.target
19-
while (node.parentNode) {
23+
24+
while (node) {
2025
if (this.events[type].has(node)) {
2126
let breakOut = false
2227
const eventToDispatch = new Proxy(event, {

‎packages/node_modules/overmind-devtools/package.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,14 @@
2727
"color-hash": "^1.0.3",
2828
"electron": "^2.0.4",
2929
"electron-json-storage": "^4.1.0",
30-
"overmind-react": "next",
30+
"overmind-components": "next",
3131
"overmind-themes": "next",
32-
"react": "16.7.0-alpha.1",
33-
"react-dom": "16.7.0-alpha.1",
34-
"styled-components": "^3.3.3",
32+
"emotion": "^9.2.12",
3533
"ws": "^5.2.1"
3634
},
3735
"devDependencies": {
3836
"@types/jest": "^23.1.4",
3937
"@types/react": "^16.4.6",
40-
"@types/react-dom": "^16.0.6",
4138
"jest": "^23.5.0",
4239
"ts-jest": "^23.10.4",
4340
"ts-loader": "^4.4.2",

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Overmind, TConfig } from 'overmind'
2-
import { TConnect, createConnect } from 'overmind-react'
2+
import { TComponent } from 'overmind-components'
33

44
import * as actions from './actions'
55
import * as effects from './effects'
@@ -20,8 +20,6 @@ const app = new Overmind(config, {
2020
devtools: false,
2121
})
2222

23-
export type Connect = TConnect<typeof app>
24-
25-
export const connect = createConnect(app)
23+
export type Component<Props = {}> = TComponent<typeof app, Props>
2624

2725
export default app

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

Lines changed: 0 additions & 32 deletions
This file was deleted.

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

Lines changed: 51 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,64 @@
1-
import * as React from 'react'
2-
import { Connect, connect } from '../../app'
3-
import { Wrapper, Container, ExpandAll } from './elements'
4-
import Operator from '../ActionOperator'
1+
import { h } from 'overmind-components'
2+
import { Component } from '../../app'
3+
import * as styles from './styles'
4+
import ActionOperator from '../ActionOperator'
55
import Flush from '../ActionFlush'
66
import { getActionId, getOperatorId } from '../../app/utils'
7+
import { css } from 'emotion'
78

8-
const ignoreOperatorValues = ['when', 'try', 'fork', 'compose', 'parallel']
9-
10-
const Action: React.SFC<Connect> = ({ app }) => {
9+
const Action: Component = ({ state, actions }) => {
1110
const flushReference =
12-
app.state.currentApp.flushByActionId[getActionId(app.state.currentAction)]
11+
state.currentApp.flushByActionId[getActionId(state.currentAction)]
1312
const flush =
14-
flushReference && app.state.currentApp.flushes[flushReference.flushId]
13+
flushReference && state.currentApp.flushes[flushReference.flushId]
1514

1615
return (
17-
<Wrapper>
18-
<Container>
19-
<ExpandAll
20-
isActive={app.state.expandAllActionDetails}
21-
onClick={() => app.actions.toggleExpandAllActions()}
22-
>
23-
expand all
24-
</ExpandAll>
25-
{app.state.currentAction.operators.map((operator, index) => {
26-
const prevOperator = app.state.currentAction.operators[index - 1]
27-
const value =
28-
index === 0
29-
? app.state.currentAction.value
30-
: ignoreOperatorValues.includes(prevOperator.type)
31-
? undefined
32-
: prevOperator.result
33-
const flushReference =
34-
app.state.currentApp.flushByOperatorId[getOperatorId(operator)]
35-
const flush =
36-
flushReference &&
37-
app.state.currentApp.flushes[flushReference.flushId]
38-
39-
if (flush) {
40-
return (
41-
<React.Fragment key={operator.operatorId}>
42-
<Operator
43-
prevOperator={prevOperator}
44-
operator={operator}
45-
value={value}
46-
operatorIndex={index}
47-
/>
48-
<Flush flush={flush} />
49-
</React.Fragment>
50-
)
51-
}
16+
<div className={styles.wrapper}>
17+
<div
18+
className={css(
19+
styles.expandAll,
20+
state.expandAllActionDetails && styles.expandAllActive
21+
)}
22+
onClick={() => actions.toggleExpandAllActions()}
23+
>
24+
expand all
25+
</div>
26+
{state.currentAction.operators.map((operator, index) => {
27+
const prevOperator = state.currentAction.operators[index - 1]
28+
const value =
29+
index === 0 ? state.currentAction.value : prevOperator.result
30+
const flushReference =
31+
state.currentApp.flushByOperatorId[getOperatorId(operator)]
32+
const flush =
33+
flushReference && state.currentApp.flushes[flushReference.flushId]
5234

35+
if (flush) {
5336
return (
54-
<Operator
55-
key={operator.operatorId}
56-
prevOperator={prevOperator}
57-
operator={operator}
58-
value={value}
59-
operatorIndex={index}
60-
/>
37+
<div key={operator.actionId + '_' + operator.operatorId}>
38+
<ActionOperator
39+
prevOperator={prevOperator}
40+
operator={operator}
41+
value={value}
42+
operatorIndex={index}
43+
/>
44+
<Flush flush={flush} />
45+
</div>
6146
)
62-
})}
63-
{!app.state.currentAction.isRunning && flush ? (
64-
<Flush flush={flush} />
65-
) : null}
66-
</Container>
67-
</Wrapper>
47+
}
48+
49+
return (
50+
<ActionOperator
51+
key={operator.actionId + '_' + operator.operatorId}
52+
prevOperator={prevOperator}
53+
operator={operator}
54+
value={value}
55+
operatorIndex={index}
56+
/>
57+
)
58+
})}
59+
{!state.currentAction.isRunning && flush ? <Flush flush={flush} /> : null}
60+
</div>
6861
)
6962
}
7063

71-
export default connect(Action)
64+
export default Action

‎packages/node_modules/overmind-devtools/src/components/Action/styles.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { css } from 'emotion'
2+
3+
export const wrapper = css`
4+
padding: var(--padding-4);
5+
background-color: var(--color-white-1);
6+
overflow-y: scroll;
7+
`
8+
9+
export const pipe = css`
10+
display: flex;
11+
align-items: center;
12+
margin: var(--padding-3) 0;
13+
`
14+
15+
export const expandAll = css`
16+
display: flex;
17+
justify-content: flex-end;
18+
font-size: var(--font-size-2);
19+
cursor: pointer;
20+
color: var(--color-black-1);
21+
opacity: 0.5;
22+
:hover {
23+
opacity: 0.75;
24+
}
25+
`
26+
27+
export const expandAllActive = css`
28+
opacity: 1;
29+
:hover {
30+
opacity: 1;
31+
}
32+
`

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

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

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,68 @@
1-
import * as React from 'react'
2-
import { connect, Connect } from '../../app'
3-
import { Flush as FlushType, FlushReference } from '../../app/types'
4-
import { Pipe } from '../Action/elements'
5-
import { Flush, FlushHeader } from './elements'
1+
import { h } from 'overmind-components'
2+
import { Component } from '../../app'
3+
import { Flush as FlushType } from '../../app/types'
4+
import * as actionStyles from '../Action/styles'
5+
import * as styles from './styles'
6+
import * as textStyles from '../../styles/text'
67
import Path from '../ActionPath'
7-
import Text from '../common/Text'
88
import Icon from '../common/Icon'
99

1010
type Props = {
1111
flush: FlushType
12-
} & Connect
12+
}
1313

14-
const ActionFlush: React.SFC<Props> = ({ flush, app }) => {
15-
const isExpanded = app.state.expandAllActionDetails || !flush.isCollapsed
14+
const ActionFlush: Component<Props> = ({ flush, state, actions }) => {
15+
const isExpanded = state.expandAllActionDetails || !flush.isCollapsed
1616

1717
return flush.components.length || flush.derived.length ? (
18-
<Pipe>
18+
<div className={actionStyles.pipe}>
1919
<Path />
20-
<Flush>
21-
<FlushHeader
22-
onClick={() => app.actions.toggleCollapsedFlush(flush.flushId)}
20+
<div className={styles.flush}>
21+
<div
22+
className={styles.flushHeader}
23+
onClick={() => actions.toggleCollapsedFlush(flush.flushId)}
2324
>
24-
<Text variant="hint">
25+
<span className={textStyles.hint}>
2526
<Icon>code</Icon> {flush.components.length}
26-
</Text>
27-
<Text variant="hint">
27+
</span>
28+
<span className={textStyles.hint}>
2829
<Icon>chain</Icon> {flush.derived.length}
29-
</Text>
30-
<Text variant="hint">
30+
</span>
31+
<span className={textStyles.hint}>
3132
<Icon>flask</Icon> {flush.reactions.length}
32-
</Text>
33-
<Text variant="hint">
33+
</span>
34+
<span className={textStyles.hint}>
3435
{isExpanded ? <Icon>chevron-down</Icon> : <Icon>chevron-up</Icon>}
35-
</Text>
36-
</FlushHeader>
36+
</span>
37+
</div>
3738
{isExpanded ? (
3839
<div>
3940
{flush.components.map((componentId) => (
4041
<div key={componentId}>
41-
<Text variant="hint">
42+
<span className={textStyles.hint}>
4243
<Icon>code</Icon>{' '}
43-
{app.state.currentApp.components[componentId].name}
44-
</Text>
44+
{state.currentApp.components[componentId].name}
45+
</span>
4546
</div>
4647
))}
4748
{flush.derived.map((derivedPath) => (
4849
<div key={derivedPath}>
49-
<Text variant="hint">
50+
<span className={textStyles.hint}>
5051
<Icon>chain</Icon> {derivedPath}
51-
</Text>
52+
</span>
5253
</div>
5354
))}
5455
{flush.reactions.map((reactionPath) => (
5556
<div key={reactionPath}>
56-
<Text variant="hint">
57+
<span className={textStyles.hint}>
5758
<Icon>flask</Icon> {reactionPath}
58-
</Text>
59+
</span>
5960
</div>
6061
))}
6162
</div>
6263
) : null}
63-
</Flush>
64-
</Pipe>
64+
</div>
65+
</div>
6566
) : null
6667
}
67-
export default connect(ActionFlush)
68+
export default ActionFlush

0 commit comments

Comments
 (0)