Skip to content

Commit 9ef8a1c

Browse files
CompuIvesCompuIves
authored
Console Improvements (#4863)
* Debounce updating the status indicator of devtools * Fix clearing the console for the first time * Limit amount of messages we show in the console * Don't clear the console on HMR updates * Don't change unnecessary file * Apply new prettier * Move everything to * Rename 'setStateDebounced' to 'setStateDelayedFlush'
1 parent f334203 commit 9ef8a1c

File tree

7 files changed

+164
-104
lines changed

7 files changed

+164
-104
lines changed

‎packages/app/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@
142142
"humps": "CompuIves/humps",
143143
"ignore": "^5.1.4",
144144
"immer": "^3.2.0",
145-
"immutability-helper": "^2.6.6",
146145
"instantsearch.css": "^7.1.0",
147146
"is-url": "^1.2.2",
148147
"jest-circus": "^22.1.4",

‎packages/app/src/app/components/Preview/DevTools/Console/index.tsx‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Select from '@codesandbox/common/lib/components/Select';
22
import theme from '@codesandbox/common/lib/theme';
33
import { listen, dispatch } from 'codesandbox-api';
44
import { Decode, Console as ConsoleFeed } from 'console-feed';
5-
import update from 'immutability-helper';
5+
import immer from 'immer';
66
import { debounce } from 'lodash-es';
77
import React from 'react';
88
import ClearIcon from 'react-icons/lib/md/block';
@@ -27,17 +27,27 @@ const StyledClearIcon = styled(ClearIcon)`
2727
font-size: 0.8em;
2828
`;
2929

30-
class ConsoleComponent extends React.Component<StyledProps> {
30+
type State = {
31+
messages: any[];
32+
filter: Array<'info' | 'log' | 'warn'>;
33+
searchKeywords: string;
34+
};
35+
36+
/**
37+
* Max amount of messages that we show in the console
38+
*/
39+
const MAX_MESSAGE_COUNT = 500;
40+
41+
class ConsoleComponent extends React.PureComponent<StyledProps, State> {
3142
state = {
3243
messages: [],
33-
initialClear: true,
3444
filter: [],
3545
searchKeywords: '',
3646
};
3747

3848
listener;
3949

40-
constructor(props) {
50+
constructor(props: StyledProps) {
4151
super(props);
4252

4353
this.scrollToBottom = debounce(this.scrollToBottom, 1 / 60);
@@ -75,13 +85,8 @@ class ConsoleComponent extends React.Component<StyledProps> {
7585
break;
7686
}
7787
case 'clear-console': {
78-
if (this.state.initialClear) {
79-
this.setState({
80-
initialClear: false,
81-
});
82-
} else {
83-
this.clearConsole();
84-
}
88+
this.clearConsole();
89+
8590
break;
8691
}
8792
case 'eval-result': {
@@ -147,22 +152,18 @@ class ConsoleComponent extends React.Component<StyledProps> {
147152
}
148153

149154
this.setState(state =>
150-
update(state, {
151-
messages: {
152-
$push: [
153-
{
154-
method,
155-
data,
156-
},
157-
],
158-
},
155+
immer(state, draft => {
156+
draft.messages.push({ method, data });
157+
draft.messages = draft.messages.slice(
158+
Math.max(0, draft.messages.length - MAX_MESSAGE_COUNT)
159+
);
159160
})
160161
);
161162
}
162163

163-
list;
164+
list: HTMLDivElement | undefined;
164165

165-
UNSAFE_componentWillReceiveProps(nextProps) {
166+
UNSAFE_componentWillReceiveProps(nextProps: StyledProps) {
166167
if (nextProps.sandboxId !== this.props.sandboxId) {
167168
this.clearConsole(true);
168169
}
@@ -273,7 +274,7 @@ const ConsoleFilterSelect = props => {
273274
return (
274275
<Select
275276
style={{
276-
fontFamily: 'Roboto',
277+
fontFamily: 'Inter',
277278
fontWeight: 600,
278279
fontSize: '0.875rem',
279280
height: 22,

‎packages/app/src/app/components/Preview/DevTools/Tests/index.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,12 @@ class Tests extends React.Component<DevToolProps, State> {
186186
* Every setState call will have to go through this, otherwise we get race conditions
187187
* where the underlying state has changed, but the draftState didn't change.
188188
*/
189-
setStateDebounced = (setStateFunc, time = 200) => {
189+
setStateDelayedFlush = (
190+
setStateFunc:
191+
| Partial<State>
192+
| ((state: State, props: DevToolProps) => Partial<State>),
193+
time = 200
194+
) => {
190195
const draftState = this.draftState || this.state;
191196

192197
const newState =
@@ -217,7 +222,7 @@ class Tests extends React.Component<DevToolProps, State> {
217222

218223
UNSAFE_componentWillReceiveProps(nextProps: DevToolProps) {
219224
if (nextProps.sandboxId !== this.props.sandboxId) {
220-
this.setStateDebounced(
225+
this.setStateDelayedFlush(
221226
{
222227
files: {},
223228
selectedFilePath: null,
@@ -233,7 +238,7 @@ class Tests extends React.Component<DevToolProps, State> {
233238
}
234239

235240
selectFile = (file: File) => {
236-
this.setStateDebounced(
241+
this.setStateDelayedFlush(
237242
state => ({
238243
selectedFilePath:
239244
file.fileName === state.selectedFilePath ? null : file.fileName,
@@ -243,7 +248,7 @@ class Tests extends React.Component<DevToolProps, State> {
243248
};
244249

245250
toggleFileExpansion = (file: File) => {
246-
this.setStateDebounced(
251+
this.setStateDelayedFlush(
247252
oldState =>
248253
immer(oldState, state => {
249254
state.fileExpansionState[file.fileName] = !state.fileExpansionState[
@@ -278,7 +283,7 @@ class Tests extends React.Component<DevToolProps, State> {
278283
if (this.props.updateStatus) {
279284
this.props.updateStatus('clear');
280285
}
281-
this.setStateDebounced(INITIAL_STATE, 0);
286+
this.setStateDelayedFlush(INITIAL_STATE, 0);
282287
break;
283288
}
284289
case 'test_count': {
@@ -294,7 +299,7 @@ class Tests extends React.Component<DevToolProps, State> {
294299
if (this.props.updateStatus) {
295300
this.props.updateStatus('clear');
296301
}
297-
this.setStateDebounced(
302+
this.setStateDelayedFlush(
298303
{
299304
running: true,
300305
},
@@ -303,7 +308,7 @@ class Tests extends React.Component<DevToolProps, State> {
303308
break;
304309
}
305310
case messages.TOTAL_TEST_END: {
306-
this.setStateDebounced(
311+
this.setStateDelayedFlush(
307312
{
308313
running: false,
309314
},
@@ -333,7 +338,7 @@ class Tests extends React.Component<DevToolProps, State> {
333338
}
334339

335340
case messages.ADD_FILE: {
336-
this.setStateDebounced(oldState =>
341+
this.setStateDelayedFlush(oldState =>
337342
immer(oldState, state => {
338343
state.files[data.path] = {
339344
tests: {},
@@ -346,7 +351,7 @@ class Tests extends React.Component<DevToolProps, State> {
346351
break;
347352
}
348353
case 'remove_file': {
349-
this.setStateDebounced(oldState =>
354+
this.setStateDelayedFlush(oldState =>
350355
immer(oldState, state => {
351356
if (state.files[data.path]) {
352357
delete state.files[data.path];
@@ -358,7 +363,7 @@ class Tests extends React.Component<DevToolProps, State> {
358363
break;
359364
}
360365
case messages.FILE_ERROR: {
361-
this.setStateDebounced(oldState =>
366+
this.setStateDelayedFlush(oldState =>
362367
immer(oldState, state => {
363368
if (state.files[data.path]) {
364369
state.files[data.path].fileError = data.error;
@@ -378,7 +383,7 @@ class Tests extends React.Component<DevToolProps, State> {
378383
case messages.ADD_TEST: {
379384
const testName = [...this.currentDescribeBlocks, data.testName];
380385

381-
this.setStateDebounced(oldState =>
386+
this.setStateDelayedFlush(oldState =>
382387
immer(oldState, state => {
383388
if (!state.files[data.path]) {
384389
state.files[data.path] = {
@@ -404,7 +409,7 @@ class Tests extends React.Component<DevToolProps, State> {
404409
const { test } = data;
405410
const testName = [...test.blocks, test.name];
406411

407-
this.setStateDebounced(oldState =>
412+
this.setStateDelayedFlush(oldState =>
408413
immer(oldState, state => {
409414
if (!state.files[test.path]) {
410415
state.files[test.path] = {
@@ -435,7 +440,7 @@ class Tests extends React.Component<DevToolProps, State> {
435440
const { test } = data;
436441
const testName = [...test.blocks, test.name];
437442

438-
this.setStateDebounced(oldState =>
443+
this.setStateDelayedFlush(oldState =>
439444
immer(oldState, state => {
440445
if (!state.files[test.path]) {
441446
return;
@@ -524,22 +529,22 @@ class Tests extends React.Component<DevToolProps, State> {
524529
};
525530

526531
toggleWatching = () => {
527-
this.setStateDebounced(state => ({ watching: !state.watching }), 0);
532+
this.setStateDelayedFlush(state => ({ watching: !state.watching }), 0);
528533
dispatch({
529534
type: 'set-test-watching',
530535
watching: !this.state.watching,
531536
});
532537
};
533538

534539
runAllTests = () => {
535-
this.setStateDebounced({ files: {} }, 0);
540+
this.setStateDelayedFlush({ files: {} }, 0);
536541
dispatch({
537542
type: 'run-all-tests',
538543
});
539544
};
540545

541546
runTests = (file: File) => {
542-
this.setStateDebounced(
547+
this.setStateDelayedFlush(
543548
oldState =>
544549
immer(oldState, state => {
545550
if (state.files[file.fileName]) {

0 commit comments

Comments
 (0)