Skip to content

Commit 1f7d24b

Browse files
christianalfonichristianalfoni
committed
feat(overmind-devtools-client): run application inside the devtool
1 parent 715e536 commit 1f7d24b

File tree

16 files changed

+296
-138
lines changed

16 files changed

+296
-138
lines changed

‎packages/node_modules/overmind-devtools-client/DevtoolBackend.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,11 @@ class DevtoolBackend {
9090
case 'relaunch':
9191
this.options.onRelaunch()
9292
break
93+
case 'openChromeDevtools':
94+
this.options.openChromeDevtools();
95+
break;
9396
default:
97+
console.log('DEVTOOL MESSAGE', message)
9498
this.clientSockets[parsedMessage.data.appName].send(
9599
JSON.stringify(parsedMessage.data)
96100
)

‎packages/node_modules/overmind-devtools-client/src/BackendConnector.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,9 @@ export class BackendConnector extends WebsocketConnector {
118118
relaunch() {
119119
this.send('relaunch')
120120
}
121+
openChromeDevtools() {
122+
this.send('openChromeDevtools')
123+
}
121124
}
122125

123126
export default BackendConnector

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { createElement, FunctionComponent, useEffect, useRef } from 'react'
2+
import { useOvermind } from '../../overmind'
3+
4+
const AppHostIFrame: FunctionComponent = () => {
5+
const { state, actions } = useOvermind()
6+
const ref = useRef(null)
7+
8+
useEffect(() => {
9+
const listener = (event: KeyboardEvent) => {
10+
if (event.metaKey && event.keyCode === 82) {
11+
if (state.appHost) {
12+
console.clear()
13+
// eslint-disable-next-line
14+
ref.current.src = ref.current.src
15+
} else {
16+
actions.refreshApp()
17+
}
18+
}
19+
}
20+
document.addEventListener('keydown', listener)
21+
22+
return () => {
23+
document.removeEventListener('keydown', listener)
24+
}
25+
}, [])
26+
27+
if (!state.appHost) {
28+
return null
29+
}
30+
31+
return (
32+
<iframe
33+
ref={ref}
34+
key={state.appHost}
35+
src={state.appHost + '?OVERMIND_DEVTOOL=true'}
36+
onLoad={(event) => {
37+
actions.onAppHostConnected()
38+
}}
39+
style={{
40+
position: 'absolute',
41+
top: -99999
42+
}}
43+
/>
44+
)
45+
}
46+
47+
export default AppHostIFrame

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import { css } from 'emotion'
66

77
const Apps: FunctionComponent = () => {
88
const { state, actions } = useOvermind()
9+
10+
if (!state.currentApp) {
11+
return <div className={styles.wrapper}>N/A</div>
12+
}
913
return (
1014
<div className={styles.wrapper}>
1115
<div

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

Lines changed: 2 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,13 @@
1-
import { createElement, FunctionComponent, Fragment, useEffect } from 'react'
1+
import { createElement, FunctionComponent } from 'react'
22
import { useOvermind } from '../../overmind'
33
import * as styles from './styles'
44
import * as text from '../../styles/text'
5-
import { colors } from '../../theme'
65
import Workspace from '../Workspace'
76
import { css } from 'emotion'
87

98
const Devtools: FunctionComponent = () => {
109
const { state, actions } = useOvermind()
1110

12-
useEffect(() => {
13-
const listener = (event: KeyboardEvent) => {
14-
if (event.metaKey && event.keyCode === 82) {
15-
actions.refreshApp()
16-
}
17-
}
18-
document.addEventListener('keydown', listener)
19-
20-
return () => {
21-
document.removeEventListener('keydown', listener)
22-
}
23-
}, [])
24-
2511
if (state.error) {
2612
return (
2713
<div className={styles.wrapper}>
@@ -35,45 +21,7 @@ const Devtools: FunctionComponent = () => {
3521
)
3622
}
3723

38-
return state.isConnecting ? (
39-
<div className={styles.wrapper}>
40-
<h1>Waiting for an app to connect to {state.port}...</h1>
41-
<pre className={styles.code}>
42-
<span style={{ color: colors.purple }}>const</span> overmind ={' '}
43-
{state.port === 3031 ? (
44-
<Fragment>
45-
<span style={{ color: colors.green }}>createOvermind</span>(config)
46-
</Fragment>
47-
) : (
48-
<Fragment>
49-
<span style={{ color: colors.green }}>createOvermind</span>(config,{' '}
50-
{'{'}
51-
{`\n`}
52-
{' '}devtools:{' '}
53-
<span style={{ color: colors.yellow }}>
54-
"localhost:{state.port}"
55-
</span>
56-
{`\n`}
57-
{'}'})
58-
</Fragment>
59-
)}
60-
</pre>
61-
<h3>Change port</h3>
62-
<input
63-
id="port-input"
64-
className={styles.newPort}
65-
placeholder="Port..."
66-
onKeyDown={(event) => {
67-
if (event.keyCode === 13) {
68-
// @ts-ignore
69-
handleFormSubmit(event)
70-
}
71-
}}
72-
/>
73-
</div>
74-
) : (
75-
<Workspace />
76-
)
24+
return <Workspace />
7725
}
7826

7927
export default Devtools

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

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,18 +25,3 @@ export const input = css({
2525
outline: 'none',
2626
borderRadius: 3,
2727
})
28-
29-
export const code = css({
30-
borderRadius: 3,
31-
padding: '10px',
32-
background: colors.foreground,
33-
})
34-
35-
export const newPort = css({
36-
border: 0,
37-
padding: '1rem',
38-
borderRadius: 3,
39-
outline: 'none',
40-
fontSize: 18,
41-
width: 75,
42-
})

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

Lines changed: 73 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,80 @@ const RuntimeConfig: FunctionComponent = () => {
77
const { state, actions } = useOvermind()
88

99
return (
10-
<div className={styles.wrapper}>
11-
<div
12-
className={styles.overlay}
13-
onClick={() => actions.toggleRuntimeConfig()}
14-
/>
10+
<div className={styles.wrapper} onClick={() => actions.toggleRuntimeConfig()}>
1511
<div className={styles.contentWrapper}>
16-
<strong>{state.currentApp.connectionState}</strong>
17-
<span style={{ margin: '0 5px' }}>on port</span>
18-
<strong>{state.port}</strong>
12+
<div className={styles.configWrapper}>
13+
<div className={styles.configDescription}>
14+
<h4 className={styles.configTitle}>Status</h4>
15+
<div><strong>Refresh</strong> your browser or <strong>run</strong> the application in the devtool below.</div>
16+
</div>
17+
<div className={styles.configValue}>
18+
<strong style={{
19+
color: state.isConnecting ? colors.red : colors.green
20+
}}>{state.isConnecting ? 'Disconnected' : 'Connected'}</strong>
21+
</div>
22+
</div>
23+
<div className={styles.configWrapper}>
24+
<div className={styles.configDescription}>
25+
<h4 className={styles.configTitle}>Run application</h4>
26+
<div>You can run your application inside the devtool, focusing on implementing state and logic.</div>
27+
</div>
28+
<div className={styles.configValue}>
29+
<input
30+
className={styles.appHost}
31+
defaultValue={state.appHost}
32+
placeholder="localhost:4000..."
33+
onClick={(event) => event.stopPropagation()}
34+
onKeyDown={(event) => {
35+
if (event.keyCode === 13) {
36+
// @ts-ignore
37+
const value = event.target.value
38+
actions.setAppHost(value)
39+
}
40+
}}
41+
/>
42+
</div>
43+
</div>
44+
<div className={styles.configWrapper}>
45+
<div className={styles.configDescription}>
46+
<h4 className={styles.configTitle}>Devtool port</h4>
47+
<div>Application has to connect to this port.</div>
48+
<pre className={styles.code}>
49+
<span style={{ color: colors.purple }}>const</span> overmind ={' '}
50+
{state.port === 3031 ? (
51+
<Fragment>
52+
<span style={{ color: colors.green }}>createOvermind</span>(config)
53+
</Fragment>
54+
) : (
55+
<Fragment>
56+
<span style={{ color: colors.green }}>createOvermind</span>(config,{' '}
57+
{'{'}
58+
{`\n`}
59+
{' '}devtools:{' '}
60+
<span style={{ color: colors.yellow }}>
61+
"localhost:{state.port}"
62+
</span>
63+
{`\n`}
64+
{'}'})
65+
</Fragment>
66+
)}
67+
</pre>
68+
</div>
69+
<div className={styles.configValue}>
70+
<input
71+
id="port-input"
72+
className={styles.newPort}
73+
defaultValue={String(state.port)}
74+
onClick={(event) => event.stopPropagation()}
75+
onKeyDown={(event) => {
76+
if (event.keyCode === 13) {
77+
// @ts-ignore
78+
handleFormSubmit(event)
79+
}
80+
}}
81+
/>
82+
</div>
83+
</div>
1984
</div>
2085
</div>
2186
)

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,60 @@ export const contentWrapper = css({
2121
position: 'absolute',
2222
top: 0,
2323
left: 0,
24-
height: '100%',
25-
padding: '0.5rem',
24+
padding: '1rem',
2625
boxSizing: 'border-box',
27-
whiteSpace: 'nowrap',
2826
display: 'flex',
29-
alignItems: 'center',
27+
flexDirection: 'column',
3028
backgroundColor: colors.foreground,
3129
borderRadiusTopRight: 3,
3230
borderRadiusBottomRight: 3,
3331
boxShadow: '5px 5px 20px 5px rgba(0,0,0,0.10)',
3432
})
33+
34+
export const newPort = css({
35+
border: 0,
36+
padding: '0.5rem',
37+
borderRadius: 3,
38+
outline: 'none',
39+
fontSize: 16,
40+
width: 75,
41+
})
42+
43+
export const appHost = css({
44+
border: 0,
45+
padding: '0.5rem',
46+
borderRadius: 3,
47+
outline: 'none',
48+
fontSize: 16,
49+
width: 150,
50+
})
51+
52+
export const configWrapper = css({
53+
display: 'flex',
54+
alignItems: 'center',
55+
marginBottom: '1rem'
56+
})
57+
58+
export const configTitle = css({
59+
margin: 0,
60+
fontSize: 18,
61+
color: colors.blue
62+
})
63+
64+
export const configDescription = css({
65+
display: 'flex',
66+
width: '400px',
67+
flexDirection: 'column'
68+
})
69+
70+
export const configValue = css({
71+
marginLeft: '1rem'
72+
})
73+
74+
75+
export const code = css({
76+
borderRadius: 3,
77+
padding: '10px',
78+
margin: 0,
79+
background: colors.foreground,
80+
})

0 commit comments

Comments
 (0)