console: add autoscroll

src/components/Console.jsx

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { PureComponent } from 'preact-compat';
 
 import { ObjectInspector, chromeDark } from 'react-inspector';
 
@@ -26,14 +27,25 @@ class LogRow extends Component {
 	}
 }
 
-export function Console({
+export class Console extends Component {
+	componentWillUpdate(nextProps) {
+		if (nextProps.logs != this.props.logs) {
+			// Scroll down after new log dom is inserted
+			setTimeout(() => {
+				this.logContainerEl.scrollTop = this.logContainerEl.scrollHeight;
+			}, 1);
+		}
+	}
+	render() {
+		const {
 			logs,
 			isConsoleOpen,
 			onConsoleHeaderDblClick,
 			onClearConsoleBtnClick,
 			toggleConsole,
 			onEvalInputKeyup
-}) {
+		} = this.props;
+
 		return (
 			<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
 				<div id="consoleLogEl" class="console__log">
@@ -62,7 +74,14 @@ export function Console({
 							/>
 						</div>
 					</div>
-				<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul>
+					<ul
+						class="console__items"
+						ref={el => {
+							this.logContainerEl = el;
+						}}
+					>
+						{logs.map(log => <LogRow data={log} />)}
+					</ul>
 				</div>
 				<div
 					id="consolePromptEl"
@@ -80,3 +99,4 @@ export function Console({
 			</div>
 		);
 	}
+}