Clear console preference

Author: Ives van Hoorne

src/app/components/sandbox/Preview/index.js

@@ -196,8 +196,11 @@ export default class Preview extends React.PureComponent {
       module,
       sandboxId,
       externalResources,
+      preferences,
     } = this.props;
-
+    if (preferences.clearConsoleEnabled) {
+      console.clear();
+    }
     if (bundle.externals == null) {
       if (!bundle.processing && !bundle.error) {
         this.fetchBundle();

src/app/pages/Sandbox/Editor/Workspace/Preferences/index.js

@@ -70,6 +70,12 @@ const Preferences = ({ preferences, preferencesActions }: Props) => (
         setValue={preferencesActions.setLivePreview}
         tooltip="Only update on save"
       />
+      <Preference
+        title="Clear console"
+        value={preferences.clearConsoleEnabled}
+        setValue={preferencesActions.setClearConsolePreference}
+        tooltip="Clear console when executing"
+      />
       <Preference
         title="Instant preview"
         value={preferences.instantPreviewEnabled}

src/app/store/preferences/actions.js

@@ -8,6 +8,7 @@ import {
   LINT_ENABLED,
   INSTANT_PREVIEW,
   FONT_SIZE,
+  CLEAR_CONSOLE,
 } from './keys';
 
 export const SET_PREFERENCE_AUTOCOMPLETE = 'SET_PREFERENCE_AUTOCOMPLETE';
@@ -18,6 +19,7 @@ export const SET_PREFERENCE_PRETTIFY_ON_SAVE =
   'SET_PREFERENCE_PRETTIFY_ON_SAVE';
 export const SET_PREFERENCE_LINT = 'SET_PREFERENCE_LINT';
 export const SET_INSTANT_PREVIEW = 'SET_INSTANT_PREVIEW';
+export const SET_CLEAR_CONSOLE = 'SET_CLEAR_CONSOLE';
 
 const setOption = (key, val) => {
   try {
@@ -68,6 +70,17 @@ export default {
     });
   },
 
+  setClearConsolePreference: (clearConsole: boolean) => (
+    dispatch: Function,
+  ) => {
+    setOption(CLEAR_CONSOLE, clearConsole);
+
+    dispatch({
+      type: SET_CLEAR_CONSOLE,
+      option: clearConsole,
+    });
+  },
+
   setLintPreference: (lint: boolean) => (dispatch: Function) => {
     setOption(LINT_ENABLED, lint);
 

src/app/store/preferences/keys.js

@@ -5,3 +5,4 @@ export const INSTANT_PREVIEW = 'settings.instantpreview';
 export const PRETTIFY_ON_SAVE = 'settings.prettifyonsave';
 export const LINT_ENABLED = 'settings.lintenabled';
 export const FONT_SIZE = 'settings.fontsize';
+export const CLEAR_CONSOLE = 'settings.clearconsole';

src/app/store/preferences/reducer.js

@@ -11,6 +11,7 @@ import {
   SET_PREFERENCE_LINT,
   SET_INSTANT_PREVIEW,
   SET_PREFERENCE_FONT_SIZE,
+  SET_CLEAR_CONSOLE,
 } from './actions';
 import {
   AUTO_COMPLETE,
@@ -20,6 +21,7 @@ import {
   LINT_ENABLED,
   INSTANT_PREVIEW,
   FONT_SIZE,
+  CLEAR_CONSOLE,
 } from './keys';
 
 const getKey = (key, defaultVal) => {
@@ -40,6 +42,7 @@ const initialState: Preferences = {
   lintEnabled: getKey(LINT_ENABLED, false),
   instantPreviewEnabled: getKey(INSTANT_PREVIEW, false),
   fontSize: getKey(FONT_SIZE, 14),
+  clearConsoleEnabled: getKey(CLEAR_CONSOLE, false),
 };
 
 export default (state: Preferences = initialState, action): Preferences => {
@@ -58,6 +61,8 @@ export default (state: Preferences = initialState, action): Preferences => {
       return { ...state, instantPreviewEnabled: action.option };
     case SET_PREFERENCE_FONT_SIZE:
       return { ...state, fontSize: action.option };
+    case SET_CLEAR_CONSOLE:
+      return { ...state, clearConsoleEnabled: action.option };
     default: {
       return state;
     }

src/common/types.js

@@ -92,6 +92,8 @@ export type Preferences = {
   prettifyOnSaveEnabled: boolean,
   lintEnabled: boolean,
   instantPreviewEnabled: boolean,
+  fontSize: number,
+  clearConsoleEnabled: boolean,
 };
 
 export type NotificationButton = {