Skip to content

Commit a69f407

Browse files
rmevans9rmevans9
committed
Merge branch 'beta'
2 parents 62151e5 + 01f5301 commit a69f407

File tree

12 files changed

+531
-48
lines changed

12 files changed

+531
-48
lines changed

‎examples/ReactotronTester/app/config/ReactotronConfig.ts

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Reactotron from "reactotron-react-native"
33
import { reactotronRedux as reduxPlugin } from "reactotron-redux"
44
import sagaPlugin from "reactotron-redux-saga"
55
import { mst } from "reactotron-mst"
6-
import { ArgType } from "reactotron-core-client";
6+
import { ArgType } from "reactotron-core-client"
77

88
Reactotron.configure({
99
name: "Demo App",
@@ -47,3 +47,23 @@ const selfRemoving = Reactotron.onCustomCommand({
4747

4848
Reactotron.connect()
4949
Reactotron.clear()
50+
51+
const aThing = {
52+
aFunc: () => {
53+
return 10
54+
},
55+
aVal: "Test",
56+
aObj: {
57+
nested: true,
58+
num: 12312314,
59+
},
60+
aArr: [1, "two", { three: true }],
61+
}
62+
63+
Reactotron.repl("thing", aThing)
64+
65+
Reactotron.repl("aString", "Hello")
66+
67+
const anotherTHing = [1, 2, { how: { awesome: { iz: { allThis: true } } } }]
68+
69+
Reactotron.repl("anotherThing", anotherTHing)

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"start": "cross-env NODE_ENV=production electron ./src/main.prod.js",
3434
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./src/main.dev.js",
3535
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
36-
"postinstall": "electron-builder install-app-deps package.json && yarn build-dll",
36+
"postinstall": "electron-builder install-app-deps package.json && patch-package && yarn build-dll",
3737
"ci:test": "yarn test",
3838
"ci:publish": "yarn semantic-release",
3939
"semantic-release": "semantic-release"
@@ -52,6 +52,7 @@
5252
"electron-updater": "4.0.6",
5353
"electron-window-state": "5.0.3",
5454
"font-awesome": "4.7.0",
55+
"javascript-terminal": "^1.0.2",
5556
"mobx": "5.9.4",
5657
"mobx-react": "5.4.4",
5758
"mousetrap": "1.6.3",
@@ -66,6 +67,7 @@
6667
"react-icons": "3.7.0",
6768
"react-json-tree": "0.11.2",
6869
"react-modal": "3.8.1",
70+
"react-terminal-component": "^1.4.0",
6971
"react-tooltip": "3.10.0",
7072
"reactotron-core-server": "3.0.1",
7173
"source-map-support": "0.5.12",
@@ -121,6 +123,7 @@
121123
"minimist": "1.2.0",
122124
"node-libs-browser": "2.2.0",
123125
"optimize-css-assets-webpack-plugin": "5.0.1",
126+
"patch-package": "^6.1.2",
124127
"prettier": "1.17.1",
125128
"semantic-release": "16.0.0-beta.19",
126129
"style-loader": "0.23.1",

‎patches/react-terminal-component+1.4.0.patch

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
diff --git a/node_modules/react-terminal-component/lib/react-terminal-component.js b/node_modules/react-terminal-component/lib/react-terminal-component.js
2+
index f568bf0..8257f81 100644
3+
--- a/node_modules/react-terminal-component/lib/react-terminal-component.js
4+
+++ b/node_modules/react-terminal-component/lib/react-terminal-component.js
5+
@@ -41142,7 +41142,7 @@ function (_Component) {
6+
}
7+
});
8+
9+
- _this.emulator = new javascript_terminal__WEBPACK_IMPORTED_MODULE_3__["Emulator"]();
10+
+ _this.emulator = _ref.altEmulator || new javascript_terminal__WEBPACK_IMPORTED_MODULE_3__["Emulator"]();
11+
_this.historyKeyboardPlugin = new javascript_terminal__WEBPACK_IMPORTED_MODULE_3__["HistoryKeyboardPlugin"](_emulatorState);
12+
_this.plugins = [_this.historyKeyboardPlugin];
13+
_this.inputRef = null;
14+
@@ -41559,7 +41559,7 @@ __webpack_require__.r(__webpack_exports__);
15+
var HeaderOutput = function HeaderOutput(_ref) {
16+
var content = _ref.content,
17+
promptSymbol = _ref.promptSymbol;
18+
- return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(output_OutputContainer__WEBPACK_IMPORTED_MODULE_3__["default"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(PromptSymbol__WEBPACK_IMPORTED_MODULE_2__["default"], null, promptSymbol), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(output_TextCommandWrapper__WEBPACK_IMPORTED_MODULE_4__["default"], null, content.command));
19+
+ return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(output_OutputContainer__WEBPACK_IMPORTED_MODULE_3__["default"], null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(PromptSymbol__WEBPACK_IMPORTED_MODULE_2__["default"], null, content.prompt), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(output_TextCommandWrapper__WEBPACK_IMPORTED_MODULE_4__["default"], null, content.command));
20+
};
21+
22+
HeaderOutput.propTypes = {

‎src/Foundation/App.js

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import Colors from "../Theme/Colors"
1919
import Timeline from "../Timeline/Timeline"
2020
import Sidebar from "./Sidebar"
2121
import StatusBar from "./StatusBar"
22-
import CustomCommandsList from "../CustomCommands/CustomCommandsList";
22+
import CustomCommandsList from "../CustomCommands/CustomCommandsList"
23+
import ReactotronTerminal from "./ReactotronTerminal"
2324

2425
const session = new SessionStore(config.get("server.port", 9090))
2526

@@ -62,32 +63,43 @@ export default class App extends Component {
6263
<Provider session={session}>
6364
<div style={Styles.container}>
6465
<div style={Styles.content}>
65-
<div style={Styles.body}>
66-
<Sidebar />
67-
<div style={Styles.app}>
68-
<div style={showHome ? Styles.page : Styles.pageHidden}>
69-
<Home />
66+
{!ui.inTerminal && (
67+
<div style={Styles.body}>
68+
<Sidebar />
69+
<div style={Styles.app}>
70+
<div style={showHome ? Styles.page : Styles.pageHidden}>
71+
<Home />
72+
</div>
73+
<div style={showTimeline ? Styles.page : Styles.pageHidden}>
74+
<Timeline />
75+
</div>
76+
<div style={showState ? Styles.page : Styles.pageHidden}>
77+
<State />
78+
</div>
79+
<div style={showHelp ? Styles.page : Styles.pageHidden}>
80+
<Help />
81+
</div>
82+
<div style={showNative ? Styles.page : Styles.pageHidden}>
83+
<Native />
84+
</div>
85+
<div style={showCustomCommands ? Styles.page : Styles.pageHidden}>
86+
<CustomCommandsList />
87+
</div>
88+
<div style={showSettings ? Styles.page : Styles.pageHidden}>
89+
<h1>Settings</h1>
90+
</div>
7091
</div>
71-
<div style={showTimeline ? Styles.page : Styles.pageHidden}>
72-
<Timeline />
73-
</div>
74-
<div style={showState ? Styles.page : Styles.pageHidden}>
75-
<State />
76-
</div>
77-
<div style={showHelp ? Styles.page : Styles.pageHidden}>
78-
<Help />
79-
</div>
80-
<div style={showNative ? Styles.page : Styles.pageHidden}>
81-
<Native />
82-
</div>
83-
<div style={showCustomCommands ? Styles.page : Styles.pageHidden}>
84-
<CustomCommandsList />
85-
</div>
86-
<div style={showSettings ? Styles.page : Styles.pageHidden}>
87-
<h1>Settings</h1>
92+
</div>
93+
)}
94+
{ui.inTerminal && (
95+
<div style={Styles.body}>
96+
<div style={Styles.app}>
97+
<div style={Styles.page}>
98+
<ReactotronTerminal />
99+
</div>
88100
</div>
89101
</div>
90-
</div>
102+
)}
91103
<StatusBar />
92104
</div>
93105
<StateKeysAndValuesDialog />

‎src/Foundation/ReactotronTerminal/index.tsx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import * as React from "react"
2+
import { inject, observer } from "mobx-react"
3+
import { ReactTerminalStateless, ReactThemes, ReactOutputRenderers } from "react-terminal-component"
4+
import { EmulatorState, OutputFactory } from "javascript-terminal"
5+
import ReactotronEmulator from "../../Shared/ReactotronEmulator"
6+
import Session from "../../Stores/SessionStore"
7+
import Colors from "../../Theme/Colors"
8+
import customerRenderers, { renderTypes } from "./renderers"
9+
10+
const Styles = {
11+
header: {
12+
WebkitAppRegion: "drag",
13+
height: "30px",
14+
width: "100%",
15+
backgroundColor: Colors.backgroundSubtleLight,
16+
},
17+
}
18+
19+
interface Props {
20+
session: Session
21+
}
22+
23+
interface State {
24+
emulatorState: any
25+
inputStr: string
26+
promptSymbol: string
27+
}
28+
29+
function addOutput(state, type, content) {
30+
return state.setOutputs(
31+
state.getOutputs().push(
32+
new OutputFactory.OutputRecord({
33+
type,
34+
content,
35+
})
36+
)
37+
)
38+
}
39+
40+
@inject("session")
41+
@observer
42+
export default class ReactotronTerminal extends React.Component<Props, State> {
43+
state = {
44+
emulatorState: EmulatorState.createEmpty(),
45+
inputStr: "",
46+
promptSymbol: ">",
47+
}
48+
49+
emulator: ReactotronEmulator
50+
51+
constructor(props) {
52+
super(props)
53+
54+
this.emulator = new ReactotronEmulator(this.commandHandler)
55+
this.emulator.setCurrentPrompt(this.state.promptSymbol)
56+
}
57+
58+
componentDidMount() {
59+
this.props.session.ui.replResponseHandler = this.responseHandler
60+
61+
this.setState({
62+
emulatorState: addOutput(
63+
this.state.emulatorState,
64+
renderTypes.OBJECT_TYPE,
65+
"All REPLs are available on `this`"
66+
),
67+
})
68+
}
69+
70+
commandHandler = (state, commandStrToExecute) => {
71+
const {
72+
session: { ui },
73+
} = this.props
74+
75+
if (commandStrToExecute === "exit") {
76+
ui.openTerminal(false)
77+
return state
78+
}
79+
80+
if (!this.props.session.selectedConnection) {
81+
return addOutput(state, renderTypes.OBJECT_TYPE, "There is no connected device!")
82+
}
83+
84+
if (commandStrToExecute === "ls") {
85+
ui.server.send("repl.ls")
86+
return state
87+
}
88+
89+
if (commandStrToExecute.substr(0, 3) === "cd ") {
90+
ui.server.send("repl.cd", commandStrToExecute.substr(3))
91+
92+
const newPrompt = `${commandStrToExecute.substr(3)}>`
93+
94+
this.setState({
95+
promptSymbol: newPrompt,
96+
})
97+
this.emulator.setCurrentPrompt(newPrompt)
98+
return state
99+
}
100+
101+
ui.server.send("repl.execute", commandStrToExecute)
102+
103+
return state
104+
}
105+
106+
responseHandler = response => {
107+
let newEmulator = this.state.emulatorState
108+
109+
switch (response.type) {
110+
case "repl.ls.response":
111+
newEmulator = addOutput(newEmulator, renderTypes.LS_TYPE, response.payload)
112+
break
113+
case "repl.cd.response":
114+
case "repl.execute.response":
115+
newEmulator = addOutput(newEmulator, renderTypes.OBJECT_TYPE, response.payload)
116+
break
117+
}
118+
119+
this.setState({
120+
emulatorState: newEmulator,
121+
})
122+
}
123+
124+
render() {
125+
return (
126+
<div>
127+
<div style={Styles.header} />
128+
<ReactTerminalStateless
129+
altEmulator={this.emulator}
130+
theme={{ ...ReactThemes.default, background: "rgb(30, 30, 30)", height: "100vh" }}
131+
emulatorState={this.state.emulatorState}
132+
inputStr={this.state.inputStr}
133+
promptSymbol={this.state.promptSymbol}
134+
onInputChange={inputStr => this.setState({ inputStr })}
135+
onStateChange={emulatorState => this.setState({ emulatorState, inputStr: "" })}
136+
outputRenderers={{
137+
...ReactOutputRenderers,
138+
...customerRenderers,
139+
}}
140+
/>
141+
</div>
142+
)
143+
}
144+
}

‎src/Foundation/ReactotronTerminal/renderers/LsRenderer.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import { colorForValue } from "../../../Shared/MakeTable"
3+
4+
export const LS_TYPE = "ls"
5+
6+
const LsOutput = ({ content }) => {
7+
return (
8+
<div>
9+
{content.map(a => {
10+
const color = colorForValue(content)
11+
12+
return (
13+
<div key={a} style={{ color }}>
14+
{a}
15+
</div>
16+
)
17+
})}
18+
</div>
19+
)
20+
}
21+
22+
export default {
23+
[LS_TYPE]: LsOutput,
24+
}

‎src/Foundation/ReactotronTerminal/renderers/ObjectRenderer.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react"
2+
import ObjectTree from "../../../Shared/ObjectTree"
3+
import { textForValue, colorForValue } from "../../../Shared/MakeTable"
4+
5+
export const OBJECT_TYPE = "jsobject"
6+
7+
const ObjectOutput = ({ content }) => {
8+
if (typeof content === "object") {
9+
return <ObjectTree object={{ value: content }} />
10+
}
11+
12+
const color = colorForValue(content)
13+
14+
return <div style={{ color }}>{textForValue(content)}</div>
15+
}
16+
17+
export default {
18+
[OBJECT_TYPE]: ObjectOutput,
19+
}

‎src/Foundation/ReactotronTerminal/renderers/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import objectRenderer, { OBJECT_TYPE } from "./ObjectRenderer"
2+
import LsRenderer, { LS_TYPE } from "./LsRenderer"
3+
4+
export const renderTypes = {
5+
OBJECT_TYPE,
6+
LS_TYPE,
7+
}
8+
9+
export default {
10+
...objectRenderer,
11+
...LsRenderer,
12+
}

0 commit comments

Comments
 (0)