mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-06 02:25:19 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kushagra Gour 2018-10-17 03:05:01 +05:30
parent affbd3541f
commit 7032dfe03f
7 changed files with 87 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -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,

52
src/components/Console.jsx
View File

@ -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 (
<ObjectInspector
theme={theme}
theme="chromeDark"
data={this.props.data}
/>
);
}
}
export function Console({
logs,
isConsoleOpen,
onConsoleHeaderDblClick,
onClearConsoleBtnClick,
toggleConsole,
onEvalInputKeyup,
onReady
onEvalInputKeyup
}) {
return (
<div
id="consoleEl"
class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
>
<div id="consoleEl" class={`console ${true ? '' : '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
options={{
mode: 'javascript',
lineWrapping: true,
theme: 'monokai',
foldGutter: true,
readOnly: true,
gutters: ['CodeMirror-foldgutter']
}}
onCreation={el => onReady(el)}
/>
<ul class="console__items">{logs.map(log => <LogRow data={log} />)}</ul>
</div>
<div
id="consolePromptEl"

51
src/components/ContentWrap.jsx
View File

@ -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 */
[...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
/>
<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}

48
src/components/ContentWrapFiles.jsx
View File

@ -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(
'.CodeMirror'
).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
// window.consoleEl.querySelector(
// '.CodeMirror'
// ).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 */
[...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) {
@ -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
/>
<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>

6
src/components/app.jsx
View File

@ -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,

20
src/style.css
View File

@ -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 */

11
yarn.lock
View File

@ -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"