Add basic console implementation

See #5

App.css

@@ -15,22 +15,67 @@ body {
 
 .pane-editors,
 .pane-preview {
+  display: flex;
   flex-grow: 1;
   flex-shrink: 0;
   width: 50%;
 }
 
 .pane-editors {
-  display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(0,0,0,0.15);
   box-sizing: border-box;
 }
 
+.pane-preview {
+  display: flex;
+  flex-direction: column;
+}
+
 .preview-container {
-  display:inline-flex;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  height: 100vh;
+  flex-grow: 1;
+}
+
+.preview-frame {
+  flex-grow: 1;
+}
+
+.console-container {
+  display: none;
+  border-top: 1px solid rgba(0,0,0,0.15);
+  width: 100%;
+  height: 25vh;
+  font-size: 14px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.console-container-visible {
+  display: block;
+}
+
+.console-lines > div {
+  font-family: 'SF Mono', 'Inconsolata', 'Monaco', 'Consolas', monospace;
+  font-size: 12px;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+  line-height: 1.5;
+  padding-left: 20px;
+}
+
+.console-input {
+  width: 100%;
+  outline: none;
+  border: 0;
+  box-sizing: border-box;
+  font-family: 'SF Mono', 'Inconsolata', 'Monaco', 'Consolas', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #094650;
+  padding: 2px 5px 2px 20px;
 }
 
 .editors-container {
@@ -46,13 +91,20 @@ body {
 }
 
 .controls-container {
+  display: flex;
+  flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
   border-top: 1px solid rgba(0,0,0,0.15);
   padding: 0.5em 1em;
   color: #094650;
   font-size: 10px;
-  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+}
+
+.controls-container-console {
+  align-self: flex-end;
 }
 
 .editor-name {

main.js

@@ -1,4 +1,3 @@
-// @flow
 const electron = require('electron');
 const {Menu, dialog} = require('electron');
 // Module to control application life.

package.json

@@ -32,6 +32,7 @@
     "codemirror": "^5.20.2",
     "eslint-plugin-flowtype": "^2.25.0",
     "react": "^15.4.0",
+    "react-classset": "^0.0.2",
     "react-dom": "^15.4.0",
     "redux": "^3.6.0"
   },

preview.html

@@ -9,15 +9,17 @@
   </script>
 
   <script>
-    require('electron').ipcRenderer.on('updater', (event, type, content) => {
+  const ipcRenderer = require('electron').ipcRenderer;
+
+  ipcRenderer.on('updater', (event, type, content) => {
       if (type === 'html') {
         document.body.innerHTML = content;
       }
       if (type === 'css') {
         document.head.querySelector('#css').textContent = content;
       }
       if (type === 'javascript') {
-        eval(content);
+        eval.call(null, content);
       }
     })
   </script>

src/fiddlings/FiddlingContainer.js

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import ClassSet from 'react-classset';
 
 import CodeMirror from '../lib/components/CodeMirror';
 
@@ -32,17 +33,32 @@ export default class FiddlingContainer extends React.Component {
 
   webView: any;
 
+  state: {
+    consoleVisible: boolean,
+    consoleInputValue: string,
+    consoleLines: Array<string>
+  }
+
+  constructor() {
+    super();
+    this.state = {
+      consoleVisible: false,
+      consoleInputValue: '',
+      consoleLines: []
+    };
+  }
+
   componentDidMount() {
     const webViewContainer = this.refs.webViewContainer;
 
     this.webView = document.createElement('webview');
-    this.webView.setAttribute('class', 'preview-container');
+    this.webView.setAttribute('class', 'preview-frame');
     this.webView.setAttribute('id', 'preview');
     this.webView.setAttribute('src', './preview.html');
     this.webView.setAttribute('nodeintegration', 'true');
 
     this.webView.addEventListener('console-message', e => {
-      console.log('Preview pane log:', e.message);
+      this.appendToConsoleLog(e.message);
     });
 
     this.webView.addEventListener('dom-ready', () => {
@@ -58,6 +74,14 @@ export default class FiddlingContainer extends React.Component {
     this.webView.send('updater', kind, value);
   }
 
+  appendToConsoleLog(...lines: Array<string>) {
+    this.setState({
+      consoleLines: [...this.state.consoleLines, ...lines]
+    }, () => {
+      this.refs.consoleInput.scrollIntoView();
+    });
+  }
+
   handleHtmlChanged(value: string) {
     this.updatePreview('html', value);
   }
@@ -70,6 +94,36 @@ export default class FiddlingContainer extends React.Component {
     this.updatePreview('javascript', value);
   }
 
+  handleConsoleToggleClick() {
+    this.setState({
+      consoleVisible: !this.state.consoleVisible
+    });
+  }
+
+  handleConsoleInputChange(event: Event) {
+    if (event.target instanceof HTMLInputElement) {
+      const value = event.target.value;
+      this.setState({consoleInputValue: value});
+    }
+  }
+
+  handleConsoleKeyup(event: KeyboardEvent) {
+    if (event.key === 'Enter' && event.target instanceof HTMLInputElement) {
+      const input = event.target;
+      const inputValue = input.value;
+
+      this.webView.executeJavaScript(inputValue, false, (result) => {
+        this.appendToConsoleLog(inputValue, JSON.stringify(result));
+      });
+
+      this.setState({
+        consoleInputValue: ''
+      }, () => {
+        input.focus();
+      });
+    }
+  }
+
   render() {
     return (
       <div className="fiddling-container">
@@ -104,10 +158,30 @@ export default class FiddlingContainer extends React.Component {
             </div>
           </div>
           <div className="controls-container">
-            <div>Controls</div>
+            <div
+              className="controls-container-console"
+              onClick={this.handleConsoleToggleClick.bind(this)}
+              >
+              Console
+            </div>
+          </div>
+        </div>
+        <div className="pane-preview">
+          <div className="preview-container" ref="webViewContainer"></div>
+          <div className={ClassSet({'console-container': true, 'console-container-visible': this.state.consoleVisible})}>
+            <div className="console-lines">
+              {this.state.consoleLines.map((line, idx) => (<div key={idx}>{line}</div>))}
+            </div>
+            <input
+              type="text"
+              ref="consoleInput"
+              className="console-input"
+              value={this.state.consoleInputValue}
+              onChange={this.handleConsoleInputChange.bind(this)}
+              onKeyUp={this.handleConsoleKeyup.bind(this)}
+              />
           </div>
         </div>
-        <div className="pane-preview" ref="webViewContainer" />
       </div>
     );
   }

yarn.lock

@@ -2930,6 +2930,10 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@~1.1.6:
     minimist "^1.2.0"
     strip-json-comments "~1.0.4"
 
+react-classset@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/react-classset/-/react-classset-0.0.2.tgz#adc62798acba8c0b2290506c190ea092a59c1f53"
+
 react-dom@^15.4.0:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"