From 7032dfe03f2a12803a09b83438871a651e0528e4 Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 17 Oct 2018 03:05:01 +0530 Subject: [PATCH] use react-inspector for console logging. fixes #191 #331 --- package.json | 5 +-- src/components/Console.jsx | 52 ++++++++++++++++++----------- src/components/ContentWrap.jsx | 51 ++++++---------------------- src/components/ContentWrapFiles.jsx | 48 ++++++-------------------- src/components/app.jsx | 6 +++- src/style.css | 20 +++++++---- yarn.lock | 11 ++++++ 7 files changed, 87 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index ac496b6..ab3e3a5 100644 --- a/package.json +++ b/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, diff --git a/src/components/Console.jsx b/src/components/Console.jsx index eda09bd..2f23035 100644 --- a/src/components/Console.jsx +++ b/src/components/Console.jsx @@ -1,19 +1,41 @@ -import { h } from 'preact'; -import CodeMirrorBox from './CodeMirrorBox'; +import { h, Component } from 'preact'; + +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 ( + + ); + } +} export function Console({ + logs, isConsoleOpen, onConsoleHeaderDblClick, onClearConsoleBtnClick, toggleConsole, - onEvalInputKeyup, - onReady + onEvalInputKeyup }) { return ( -
+
- Console (0) + Console ({logs.length})
- onReady(el)} - /> +
    {logs.map(log => )}
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 */ - [...arguments].forEach(arg => { + const logs = [...arguments].map(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 { - 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++; + return arg; }); - this.updateLogCount(); - - /* eslint-enable no-param-reassign */ + this.setState({ logs: [...this.state.logs, ...logs] }); } previewException(error) { @@ -615,9 +588,7 @@ export default class ContentWrap extends Component { this.toggleConsole(); } clearConsole() { - this.consoleCm.setValue(''); - this.logCount = 0; - this.updateLogCount(); + this.setState({ logs: [] }); } clearConsoleBtnClickHandler() { this.clearConsole(); @@ -864,6 +835,7 @@ export default class ContentWrap extends Component { allowfullscreen /> (this.consoleCm = el)} /> { + const logs = [...arguments].map(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 { - 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++; + return arg; }); - this.updateLogCount(); - - /* eslint-enable no-param-reassign */ + this.setState({ logs: [...this.state.logs, ...logs] }); } previewException(error) { @@ -552,9 +528,7 @@ export default class ContentWrapFiles extends Component { this.toggleConsole(); } clearConsole() { - this.consoleCm.setValue(''); - this.logCount = 0; - this.updateLogCount(); + this.setState({ logs: [] }); } clearConsoleBtnClickHandler() { this.clearConsole(); @@ -654,6 +628,7 @@ export default class ContentWrapFiles extends Component { allowfullscreen /> (this.consoleCm = el)} />
diff --git a/src/components/app.jsx b/src/components/app.jsx index 401d3c3..f414d1d 100644 --- a/src/components/app.jsx +++ b/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\n' + }, { name: 'styles', isFolder: true, diff --git a/src/style.css b/src/style.css index 54b5fea..2c8b772 100644 --- a/src/style.css +++ b/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 */ diff --git a/yarn.lock b/yarn.lock index fc95c24..8d65c7f 100644 --- a/yarn.lock +++ b/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"