use react-inspector for console logging. fixes #191 #331

package.json

@@ -65,8 +65,9 @@
 		"preact-compat": "^3.17.0",
 		"preact-portal": "^1.1.3",
 		"preact-router": "^2.5.7",
-		"split.js": "1.3.4",
+		"prettier": "^1.10.2",
-		"prettier": "^1.10.2"
+		"react-inspector": "^2.3.0",
+		"split.js": "1.3.4"
 	},
 	"jest": {
 		"verbose": true,

src/components/Console.jsx

@@ -1,19 +1,41 @@
-import { h } from 'preact';
+import { h, Component } from 'preact';
-import CodeMirrorBox from './CodeMirrorBox';
+
+import { ObjectInspector, chromeDark } from 'react-inspector';
+
+class LogRow extends Component {
+	shouldComponentUpdate() {
+		return false;
+	}
+	render() {
+		const theme = {
+			...chromeDark,
+			...{
+				OBJECT_VALUE_STRING_COLOR: 'green',
+				BASE_FONT_SIZE: '20px',
+				TREENODE_FONT_SIZE: '20px'
+			}
+		};
+
+		return (
+			<ObjectInspector
+				theme={theme}
+				theme="chromeDark"
+				data={this.props.data}
+			/>
+		);
+	}
+}
 
 export function Console({
+	logs,
 	isConsoleOpen,
 	onConsoleHeaderDblClick,
 	onClearConsoleBtnClick,
 	toggleConsole,
-	onEvalInputKeyup,
+	onEvalInputKeyup
-	onReady
 }) {
 	return (
-		<div
+		<div id="consoleEl" class={`console ${true ? '' : 'is-minimized'}`}>
-			id="consoleEl"
-			class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
-		>
 			<div id="consoleLogEl" class="console__log">
 				<div
 					class="js-console__header  code-wrap__header"
@@ -21,7 +43,7 @@ export function Console({
 					onDblClick={onConsoleHeaderDblClick}
 				>
 					<span class="code-wrap__header-label">
-						Console (<span id="logCountEl">0</span>)
+						Console (<span>{logs.length}</span>)
 					</span>
 					<div class="code-wrap__header-right-options">
 						<a
@@ -40,17 +62,7 @@ export function Console({
 						/>
 					</div>
 				</div>
-				<CodeMirrorBox
+				<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul>
-					options={{
-						mode: 'javascript',
-						lineWrapping: true,
-						theme: 'monokai',
-						foldGutter: true,
-						readOnly: true,
-						gutters: ['CodeMirror-foldgutter']
-					}}
-					onCreation={el => onReady(el)}
-				/>
 			</div>
 			<div
 				id="consolePromptEl"

src/components/ContentWrap.jsx

@@ -19,7 +19,8 @@ export default class ContentWrap extends Component {
 		super(props);
 		this.state = {
 			isConsoleOpen: false,
-			isCssSettingsModalOpen: false
+			isCssSettingsModalOpen: false,
+			logs: []
 		};
 		this.updateTimer = null;
 		this.updateDelay = 500;
@@ -31,7 +32,6 @@ export default class ContentWrap extends Component {
 		this.codeInPreview = { html: null, css: null, js: null };
 		this.cmCodes = { html: props.currentItem.html, css: '', js: '' };
 		this.cm = {};
-		this.logCount = 0;
 
 		window.onMessageFromConsole = this.onMessageFromConsole.bind(this);
 		window.previewException = this.previewException.bind(this);
@@ -42,6 +42,7 @@ export default class ContentWrap extends Component {
 		return (
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
 			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
+			this.state.logs !== nextState.logs ||
 			this.state.codeSplitSizes !== nextState.codeSplitSizes ||
 			this.state.mainSplitSizes !== nextState.mainSplitSizes ||
 			this.props.currentLayoutMode !== nextProps.currentLayoutMode ||
@@ -50,9 +51,6 @@ export default class ContentWrap extends Component {
 		);
 	}
 	componentDidUpdate() {
-		// HACK: becuase its a DOM manipulation
-		this.updateLogCount();
-
 		// log('🚀', 'didupdate', this.props.currentItem);
 		// if (this.isValidItem(this.props.currentItem)) {
 		// this.refreshEditor();
@@ -288,11 +286,11 @@ export default class ContentWrap extends Component {
 		]).then(() => this.setPreviewContent(true));
 	}
 	applyCodemirrorSettings(prefs) {
-		if (window.consoleEl) {
+		/* if (window.consoleEl) {
 			window.consoleEl.querySelector(
 				'.CodeMirror'
 			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
-		}
+		} */
 
 		// Replace correct css file in LINK tags's href
 		if (prefs.editorTheme) {
@@ -556,46 +554,21 @@ export default class ContentWrap extends Component {
 		}, 500);
 	}
 
-	updateLogCount() {
-		if (window.logCountEl) {
-			logCountEl.textContent = this.logCount;
-		}
-	}
-
 	onMessageFromConsole() {
-		/* eslint-disable no-param-reassign */
+		const logs = [...arguments].map(arg => {
-		[...arguments].forEach(arg => {
 			if (
 				arg &&
 				arg.indexOf &&
 				arg.indexOf('filesystem:chrome-extension') !== -1
 			) {
-				arg = arg.replace(
+				return arg.replace(
 					/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g,
 					'script $1:$2'
 				);
 			}
-			try {
+			return arg;
-				this.consoleCm.replaceRange(
-					arg +
-						' ' +
-						((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
-						'\n',
-					{
-						line: Infinity
-					}
-				);
-			} catch (e) {
-				this.consoleCm.replaceRange('🌀\n', {
-					line: Infinity
-				});
-			}
-			this.consoleCm.scrollTo(0, Infinity);
-			this.logCount++;
 		});
-		this.updateLogCount();
+		this.setState({ logs: [...this.state.logs, ...logs] });
-
-		/* eslint-enable no-param-reassign */
 	}
 
 	previewException(error) {
@@ -615,9 +588,7 @@ export default class ContentWrap extends Component {
 		this.toggleConsole();
 	}
 	clearConsole() {
-		this.consoleCm.setValue('');
+		this.setState({ logs: [] });
-		this.logCount = 0;
-		this.updateLogCount();
 	}
 	clearConsoleBtnClickHandler() {
 		this.clearConsole();
@@ -864,6 +835,7 @@ export default class ContentWrap extends Component {
 						allowfullscreen
 					/>
 					<Console
+						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}
 						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
 							this
@@ -871,7 +843,6 @@ export default class ContentWrap extends Component {
 						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
 						toggleConsole={this.toggleConsole.bind(this)}
 						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
-						onReady={el => (this.consoleCm = el)}
 					/>
 					<CssSettingsModal
 						show={this.state.isCssSettingsModalOpen}

src/components/ContentWrapFiles.jsx

@@ -28,6 +28,7 @@ export default class ContentWrapFiles extends Component {
 		this.state = {
 			isConsoleOpen: false,
 			isCssSettingsModalOpen: false,
+			logs: [],
 			editorOptions: this.getEditorOptions()
 		};
 
@@ -38,7 +39,6 @@ export default class ContentWrapFiles extends Component {
 		this.prefs = {};
 		this.codeInPreview = { html: null, css: null, js: null };
 		this.cmCodes = { html: props.currentItem.html, css: '', js: '' };
-		this.logCount = 0;
 
 		window.onMessageFromConsole = this.onMessageFromConsole.bind(this);
 		window.previewException = this.previewException.bind(this);
@@ -49,6 +49,7 @@ export default class ContentWrapFiles extends Component {
 		return (
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
 			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
+			this.state.logs !== nextState.logs ||
 			this.state.mainSplitSizes !== nextState.mainSplitSizes ||
 			this.state.selectedFile !== nextState.selectedFile ||
 			this.props.currentLayoutMode !== nextProps.currentLayoutMode ||
@@ -294,9 +295,9 @@ export default class ContentWrapFiles extends Component {
 	}
 	applyCodemirrorSettings(prefs) {
 		if (window.consoleEl) {
-			window.consoleEl.querySelector(
+			// window.consoleEl.querySelector(
-				'.CodeMirror'
+			// '.CodeMirror'
-			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
+			// ).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
 		}
 
 		// Replace correct css file in LINK tags's href
@@ -493,46 +494,21 @@ export default class ContentWrapFiles extends Component {
 		this.cm.focus();
 	}
 
-	updateLogCount() {
-		if (window.logCountEl) {
-			logCountEl.textContent = this.logCount;
-		}
-	}
-
 	onMessageFromConsole() {
-		/* eslint-disable no-param-reassign */
+		const logs = [...arguments].map(arg => {
-		[...arguments].forEach(arg => {
 			if (
 				arg &&
 				arg.indexOf &&
 				arg.indexOf('filesystem:chrome-extension') !== -1
 			) {
-				arg = arg.replace(
+				return arg.replace(
 					/filesystem:chrome-extension.*\.js:(\d+):*(\d*)/g,
 					'script $1:$2'
 				);
 			}
-			try {
+			return arg;
-				this.consoleCm.replaceRange(
-					arg +
-						' ' +
-						((arg + '').match(/\[object \w+]/) ? JSON.stringify(arg) : '') +
-						'\n',
-					{
-						line: Infinity
-					}
-				);
-			} catch (e) {
-				this.consoleCm.replaceRange('🌀\n', {
-					line: Infinity
-				});
-			}
-			this.consoleCm.scrollTo(0, Infinity);
-			this.logCount++;
 		});
-		this.updateLogCount();
+		this.setState({ logs: [...this.state.logs, ...logs] });
-
-		/* eslint-enable no-param-reassign */
 	}
 
 	previewException(error) {
@@ -552,9 +528,7 @@ export default class ContentWrapFiles extends Component {
 		this.toggleConsole();
 	}
 	clearConsole() {
-		this.consoleCm.setValue('');
+		this.setState({ logs: [] });
-		this.logCount = 0;
-		this.updateLogCount();
 	}
 	clearConsoleBtnClickHandler() {
 		this.clearConsole();
@@ -654,6 +628,7 @@ export default class ContentWrapFiles extends Component {
 						allowfullscreen
 					/>
 					<Console
+						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}
 						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
 							this
@@ -661,7 +636,6 @@ export default class ContentWrapFiles extends Component {
 						onClearConsoleBtnClick={this.clearConsoleBtnClickHandler.bind(this)}
 						toggleConsole={this.toggleConsole.bind(this)}
 						onEvalInputKeyup={this.evalConsoleExpr.bind(this)}
-						onReady={el => (this.consoleCm = el)}
 					/>
 				</div>
 			</SplitPane>

src/components/app.jsx

@@ -309,7 +309,11 @@ export default class App extends Component {
 			item = {
 				...item,
 				files: assignFilePaths([
-					{ name: 'index.html', content: '' },
+					{
+						name: 'index.html',
+						content:
+							'hello\n<link rel="stylesheet" href="styles/style.css">\n<script src="script.js"></script>'
+					},
 					{
 						name: 'styles',
 						isFolder: true,

src/style.css

@@ -1418,12 +1418,6 @@ body > #demo-frame {
 	transform: translateY(calc(100% - 29px));
 }
 
-.console .CodeMirror {
-	flex-grow: 1;
-	/* flex-basis of 0 to trigger overflow https://stackoverflow.com/a/52489012/891962 */
-	flex-basis: 0;
-}
-
 .console__log {
 	flex: 1;
 	display: flex;
@@ -1442,6 +1436,20 @@ body > #demo-frame {
 .console:not(.is-minimized) .code-wrap__header {
 	cursor: ns-resize;
 }
+.console__items {
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	flex-grow: 1;
+	/* flex-basis of 0 to trigger overflow https://stackoverflow.com/a/52489012/891962 */
+	flex-basis: 0;
+}
+.console__items li {
+	font-size: 1em !important;
+	line-height: inherit !important;
+	padding: 5px 10px !important;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
 
 /* Detached mode */
 

yarn.lock

@@ -5088,6 +5088,10 @@ is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
 
+is-dom@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.0.9.tgz#483832d52972073de12b9fe3f60320870da8370d"
+
 is-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -7973,6 +7977,13 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-inspector@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.0.tgz#fc9c1d38ab687fc0d190dcaf133ae40158968fc8"
+  dependencies:
+    babel-runtime "^6.26.0"
+    is-dom "^1.0.9"
+
 read-all-stream@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"