Skip to content

Commit 04b5f49

Browse files
linuswillnerlinuswillner
authored
1 parent 57d615d commit 04b5f49

13 files changed

+329
-67
lines changed

‎CHANGELOG.md

+45-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,36 @@
1+
# v5.0.0
2+
3+
This version brings with it several new major features to react-console-emulator.
4+
5+
### Breaking changes
6+
7+
The recommended method for terminal input text styling has been moved. Terminal input text should now be styled using the `inputTextStyle` and `inputTextClassName` props. **Note:** If using the newly-introduced styling persistence options for command echoes, leaving text styling in `inputStyle` or `inputClassName` may cause unexpected styling bugs.
8+
9+
The `styleEchoBack` prop no longer accepts boolean input. Instead, one should either omit it (For default behaviour) or define one of the string types detailed in the [options](docs/CONFIG.md#options).
10+
11+
### Main changes
12+
13+
Async command executor support is here! You can now use async functions as command handlers and their outputs will function identically to synchronous functions.
14+
15+
Added the ability to hide the prompt area entirely when the terminal is disabled either manually through the `disabled` prop or on process if `disableOnProcess` is enabled. ([#639](https://github.com/linuswillner/react-console-emulator/issues/639))
16+
17+
Added the ability to set the terminal to read-only mode with the `readOnly` prop, which disables input entirely and hides the prompt area. ([#639](https://github.com/linuswillner/react-console-emulator/issues/639))
18+
19+
Added the ability to lock terminal output to updating the last line only. This could be useful for, among other things, creating progress bars. ([#638](https://github.com/linuswillner/react-console-emulator/issues/638))
20+
21+
### Other changes
22+
23+
Fixed a bug where newline parsing did not recognise newline literals properly. ([#632](https://github.com/linuswillner/react-console-emulator/issues/632))
24+
25+
Full run-down of prop changes:
26+
```diff
27+
+ inputTextStyle
28+
+ inputTextClassName
29+
+ hidePromptWhenDisabled
30+
+ readOnly
31+
+ locked
32+
```
33+
134
# v4.0.1
235

336
Correct eslint-config-standard-react getting installed as a production dependency as opposed to a development one.
@@ -16,14 +49,14 @@ Renamed `noAutomaticStdout` prop to `noEchoBack` for added clarity.
1649

1750
### Main changes
1851

19-
Terminal message styling is here! You can now re-style the messages output by the terminal (Including echoes, optionally with the `styleEchoBack` prop) using the `messageStyle` and `messageClassName` props ([#518](https://github.com/linuswillner/react-console-emulator/issues/518)).
52+
Terminal message styling is here! You can now re-style the messages output by the terminal (Including echoes, optionally with the `styleEchoBack` prop) using the `messageStyle` and `messageClassName` props. ([#518](https://github.com/linuswillner/react-console-emulator/issues/518))
2053

21-
JSX prompt labels! Prompt labels now support elements instead of just plain old strings ([#210](https://github.com/linuswillner/react-console-emulator/issues/210)).
54+
JSX prompt labels! Prompt labels now support elements instead of just plain old strings. ([#210](https://github.com/linuswillner/react-console-emulator/issues/210))
2255

23-
Newline parsing is now possible! The terminal can now parse newline characters in terminal messages - anything with a \n character in it will be rendered as a separate line in the response message. This does of course not apply to command back-echoes. This behaviour can also be disabled, if desired, using the `noNewlineParsing` prop ([#519](https://github.com/linuswillner/react-console-emulator/issues/519)).
56+
Newline parsing is now possible! The terminal can now parse newline characters in terminal messages - anything with a \n character in it will be rendered as a separate line in the response message. This does of course not apply to command back-echoes. This behaviour can also be disabled, if desired, using the `noNewlineParsing` prop. ([#519](https://github.com/linuswillner/react-console-emulator/issues/519))
2457

2558

26-
Case-insensitive command matching! You can now supply the `ignoreCommandCase` prop to allow matching commands even when their casing is not correct. Do note that for security reasons, enabling case-insensitive command matching restricts command names to letters, numbers and dashes/underscores ([#415](https://github.com/linuswillner/react-console-emulator/issues/415)).
59+
Case-insensitive command matching! You can now supply the `ignoreCommandCase` prop to allow matching commands even when their casing is not correct. Do note that for security reasons, enabling case-insensitive command matching restricts command names to letters, numbers and dashes/underscores. ([#415](https://github.com/linuswillner/react-console-emulator/issues/415))
2760

2861
### Other changes
2962

@@ -47,19 +80,19 @@ A full run-down of the prop changes is as follows:
4780

4881
# v3.0.4
4982

50-
Fixed a bug preventing users from selecting text in the terminal output ([#414](https://github.com/linuswillner/react-console-emulator/issues/414)).
83+
Fixed a bug preventing users from selecting text in the terminal output. ([#414](https://github.com/linuswillner/react-console-emulator/issues/414))
5184

5285
# v3.0.3
5386

54-
Removed redundant `stringify-object` dependency to properly enable command re-validation based on raw objects alone. This was supposed to have been fixed in 3.0.2, but due to a mishap the old validation was left dangling. This has now been fixed ([#411](https://github.com/linuswillner/react-console-emulator/issues/411)).
87+
Removed redundant `stringify-object` dependency to properly enable command re-validation based on raw objects alone. This was supposed to have been fixed in 3.0.2, but due to a mishap the old validation was left dangling. This has now been fixed. ([#411](https://github.com/linuswillner/react-console-emulator/issues/411))
5588

5689
# v3.0.2
5790

58-
Fixed command re-validation reliability issues relating to source-identical commands ([#35](https://github.com/linuswillner/react-console-emulator/issues/35)).
91+
Fixed command re-validation reliability issues relating to source-identical commands. ([#35](https://github.com/linuswillner/react-console-emulator/issues/35))
5992

6093
# v3.0.1
6194

62-
Fixed input outline showing on Safari ([#258](https://github.com/linuswillner/react-console-emulator/pull/258)) ([Herve07h22](https://github.com/Herve07h22)).
95+
Fixed input outline showing on Safari. ([Herve07h22](https://github.com/Herve07h22)) ([#258](https://github.com/linuswillner/react-console-emulator/pull/258))
6396

6497
# v3.0.0
6598

@@ -119,19 +152,19 @@ Enabled module transpilation to widen the support amongst Node versions for dist
119152

120153
# v1.7.2
121154

122-
Re-added Babel into build flow in a different format to improve compatibility ([#39, comment](https://github.com/linuswillner/react-console-emulator/issues/39#issuecomment-440973765)).
155+
Re-added Babel into build flow in a different format to improve compatibility. ([#39, comment](https://github.com/linuswillner/react-console-emulator/issues/39#issuecomment-440973765))
123156

124157
# v1.7.1
125158

126-
Removed Babel from the build flow in order to allow the inclusion of the helper files ([#39](https://github.com/linuswillner/react-console-emulator/issues/39)).
159+
Removed Babel from the build flow in order to allow the inclusion of the helper files. ([#39](https://github.com/linuswillner/react-console-emulator/issues/39))
127160

128161
# v1.7.0
129162

130163
Internal refactoring for better maintainability.
131164

132-
Added default-enabled automatic scrolling to the bottom of the terminal when a command is run ([#36](https://github.com/linuswillner/react-console-emulator/issues/36)).
165+
Added default-enabled automatic scrolling to the bottom of the terminal when a command is run. ([#36](https://github.com/linuswillner/react-console-emulator/issues/36))
133166

134-
Added command callback support to run a function each time a command is executed ([#36](https://github.com/linuswillner/react-console-emulator/issues/36)).
167+
Added command callback support to run a function each time a command is executed. ([#36](https://github.com/linuswillner/react-console-emulator/issues/36))
135168

136169
Added `noAutoScroll` and `commandCallback` props.
137170

‎demo/App.jsx

+92-11
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,14 @@ import Terminal from '../src/Terminal' // In your app, import from 'react-consol
1414
export default class App extends Component {
1515
constructor (props) {
1616
super(props)
17+
this.state = {
18+
locked: false,
19+
increment: 0,
20+
isProgressing: false,
21+
progress: 0
22+
}
1723
this.terminal = React.createRef()
24+
this.progressTerminal = React.createRef()
1825
}
1926

2027
generateTerminalDemos = (terminals) => {
@@ -50,7 +57,7 @@ export default class App extends Component {
5057
const terminals = [
5158
{
5259
title: 'Default terminal (With autoFocus enabled)',
53-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L55-L57',
60+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L61-L65',
5461
component: <Terminal
5562
style={globalStyles}
5663
commands={commands}
@@ -59,7 +66,7 @@ export default class App extends Component {
5966
},
6067
{
6168
title: 'Default welcome message (With danger mode enabled)',
62-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L64-L67',
69+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L70-L75',
6370
component: <Terminal
6471
style={globalStyles}
6572
commands={commands}
@@ -69,7 +76,7 @@ export default class App extends Component {
6976
},
7077
{
7178
title: 'Custom welcome message as an array, overriding of default commands enabled, custom error message and command callback',
72-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L74-L87',
79+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L80-L95',
7380
component: <Terminal
7481
style={globalStyles}
7582
commands={{
@@ -89,7 +96,7 @@ export default class App extends Component {
8996
},
9097
{
9198
title: 'Custom styles on the terminal elements (Incl. restyling the background) and JSX as prompt label',
92-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L94-L105',
99+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#100-L114',
93100
component: <Terminal
94101
commands={commands}
95102
welcomeMessage={[
@@ -101,13 +108,14 @@ export default class App extends Component {
101108
style={{ backgroundColor: null, background: 'url(\'https://storage.needpix.com/rsynced_images/abstract-wallpaper-1442844111BON.jpg\')' }} // Terminal background
102109
contentStyle={{ color: '#FF8E00' }} // Text colour
103110
promptLabelStyle={{ color: '#FFFFFF' }} // Prompt label colour
104-
inputStyle={{ color: 'red' }} // Prompt text colour
111+
inputTextStyle={{ color: 'red' }} // Prompt text colour
105112
promptLabel={<b>root@React:~$</b>}
113+
styleEchoBack='fullInherit' // Inherit echo styling from prompt
106114
/>
107115
},
108116
{
109117
title: 'Manual pushing with no echo back (Due to manual pushing) and custom terminal message colours',
110-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L112-L129',
118+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L119-L138',
111119
component: <Terminal
112120
style={globalStyles}
113121
ref={this.terminal}
@@ -131,7 +139,7 @@ export default class App extends Component {
131139
},
132140
{
133141
title: 'History demo',
134-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L136-L138',
142+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L143-L147',
135143
component: <Terminal
136144
style={globalStyles}
137145
commands={commands}
@@ -140,7 +148,7 @@ export default class App extends Component {
140148
},
141149
{
142150
title: 'EOL parsing enabled',
143-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L145-L151',
151+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L152-L160',
144152
component: <Terminal
145153
style={globalStyles}
146154
commands={commands}
@@ -153,7 +161,7 @@ export default class App extends Component {
153161
},
154162
{
155163
title: 'EOL parsing disabled',
156-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L158-L164',
164+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L165-L173',
157165
component: <Terminal
158166
style={globalStyles}
159167
commands={commands}
@@ -166,7 +174,7 @@ export default class App extends Component {
166174
},
167175
{
168176
title: 'Case sensitive command validation',
169-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L171-L176',
177+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L178-L185',
170178
component: <Terminal
171179
style={globalStyles}
172180
commands={casingCommands}
@@ -178,7 +186,7 @@ export default class App extends Component {
178186
},
179187
{
180188
title: 'Case insensitive command validation',
181-
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L183-L189',
189+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L190-L198',
182190
component: <Terminal
183191
style={globalStyles}
184192
commands={casingCommands}
@@ -188,6 +196,79 @@ export default class App extends Component {
188196
]}
189197
ignoreCommandCase
190198
/>
199+
},
200+
{
201+
title: 'Read-only terminal',
202+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L203-L208',
203+
component: <Terminal
204+
style={globalStyles}
205+
commands={commands}
206+
welcomeMessage='This terminal is read-only, and does not take any input.'
207+
readOnly
208+
/>
209+
},
210+
{
211+
title: 'Terminal that disables input on process',
212+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L213-L219',
213+
component: <Terminal
214+
style={globalStyles}
215+
commands={commands}
216+
welcomeMessage='This terminal hides the input when the terminal is disabled on command process. Try running the "delay" command and see what happens!'
217+
hidePromptWhenDisabled
218+
disableOnProcess
219+
/>
220+
},
221+
{
222+
title: 'Terminal with conditionally locked output',
223+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L224-L239',
224+
component: <Terminal
225+
style={globalStyles}
226+
commands={{
227+
increment: {
228+
description: 'Increments a number by one.',
229+
fn: () => {
230+
this.setState({ locked: true }) // This is just here so the welcome message or anything run before 'increment' doesn't go away
231+
const newIncrement = this.state.increment + 1
232+
this.setState({ increment: newIncrement })
233+
return newIncrement
234+
}
235+
}
236+
}}
237+
welcomeMessage='This terminal updates the output of the "increment" command when run multiple times in succession.'
238+
locked={this.state.locked}
239+
/>
240+
},
241+
{
242+
title: 'Progress demo',
243+
link: 'https://github.com/linuswillner/react-console-emulator/blob/master/demo/App.jsx#L244-L271',
244+
component: <Terminal
245+
style={globalStyles}
246+
ref={this.progressTerminal}
247+
commands={{
248+
progress: {
249+
description: 'Displays a progress counter.',
250+
fn: () => {
251+
this.setState({ isProgressing: true }, () => {
252+
const terminal = this.progressTerminal.current
253+
254+
const interval = setInterval(() => {
255+
if (this.state.progress === 100) { // Stop at 100%
256+
clearInterval(interval)
257+
this.setState({ isProgressing: false, progress: 0 })
258+
} else {
259+
this.setState({ progress: this.state.progress + 1 }, () => terminal.pushToStdout(`Progress: ${this.state.progress}%`))
260+
}
261+
}, 15)
262+
})
263+
264+
return ''
265+
}
266+
}
267+
}}
268+
welcomeMessage='This terminal displays a progress counter when you run the "progress" command.'
269+
disabled={this.state.isProgressing}
270+
locked={this.state.isProgressing}
271+
/>
191272
}
192273
]
193274

‎demo/extra/config.js

+18-2
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,31 @@ export default {
44
},
55
commands: {
66
echo: {
7-
description: 'Echo a passed string.',
7+
description: 'Echoes a passed string.',
88
usage: 'echo <string>',
99
fn: function () {
1010
return `${Array.from(arguments).join(' ')}`
1111
}
1212
},
1313
danger: {
14-
description: 'This command returns HTML. It will only work with terminals that have dangerous mode.',
14+
description: 'This command returns HTML. It will only work with terminals that have danger mode enabled.',
1515
fn: () => 'I can<br/>use HTML in this<br/>and it will be parsed'
16+
},
17+
async: {
18+
description: 'This command runs an asynchronous task.',
19+
fn: async () => {
20+
const asyncTask = async () => 'Hello from a promise!'
21+
const result = await asyncTask()
22+
return result
23+
}
24+
},
25+
delay: {
26+
description: 'Delays return of value by 1000 ms.',
27+
fn: () => {
28+
return new Promise(resolve => {
29+
setTimeout(() => resolve('Finished!'), 1000)
30+
})
31+
}
1632
}
1733
},
1834
casingCommands: {

0 commit comments

Comments
 (0)