Merge pull request #332 from chinchang/new-console

New console

.babelrc

@@ -1,5 +1,9 @@
 {
-    "presets": [ 
+  "env": {
+    "test": {
+      "presets": [
         ["preact-cli/babel", { "modules": "commonjs" }]
-    ]
+      ]
+    }
+  }
 }

package.json

@@ -8,7 +8,7 @@
 		"serve": "preact build && preact serve",
 		"dev": "preact watch --template src/index.html --https --no-prerender",
 		"lint": "eslint src",
-		"test": "jest ./tests",
+		"test": "jest",
 		"precommit": "lint-staged"
 	},
 	"eslintConfig": {
@@ -53,8 +53,6 @@
 	},
 	"dependencies": {
 		"@emmetio/codemirror-plugin": "^0.5.4",
-		"babel-preset-env": "^1.7.0",
-		"babel-preset-react": "^6.24.1",
 		"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
 		"codemirror": "^5.37.0",
 		"copy-webpack-plugin": "^4.5.1",
@@ -65,13 +63,19 @@
 		"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,
 		"setupFiles": [
-			"<rootDir>/src/tests/__mocks__/browserMocks.js"
+			"<rootDir>/tests/__mocks__/browserMocks.js"
+		],
+		"testRegex": "(/(__tests__|tests)/.*|(\\.|/)(test|spec))\\.jsx?$",
+		"testPathIgnorePatterns": [
+			"/node_modules/",
+			"<rootDir>/tests/__mocks__/*"
 		],
 		"testURL": "http://localhost:8080",
 		"moduleFileExtensions": [
@@ -82,7 +86,7 @@
 			"node_modules"
 		],
 		"moduleNameMapper": {
-			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
+			"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
 			"\\.(css|less|scss)$": "identity-obj-proxy",
 			"^./style$": "identity-obj-proxy",
 			"^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",

src/components/Console.jsx

@@ -1,70 +1,101 @@
-import { h } from 'preact';
+import { h, Component } from 'preact';
-import CodeMirrorBox from './CodeMirrorBox';
+import { PureComponent } from 'preact-compat';
 
-export function Console({
+import { Inspector, chromeDark } from 'react-inspector';
-	isConsoleOpen,
+
-	onConsoleHeaderDblClick,
+class LogRow extends Component {
-	onClearConsoleBtnClick,
+	shouldComponentUpdate() {
-	toggleConsole,
+		return false;
-	onEvalInputKeyup,
+	}
-	onReady
+	render() {
-}) {
+		const theme = {
-	return (
+			...chromeDark,
-		<div
+			...{
-			id="consoleEl"
+				OBJECT_VALUE_STRING_COLOR: 'green',
-			class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
+				BASE_FONT_SIZE: '20px',
-		>
+				TREENODE_FONT_SIZE: '20px'
-			<div id="consoleLogEl" class="console__log">
+			}
-				<div
+		};
-					class="js-console__header  code-wrap__header"
+
-					title="Double click to toggle console"
+		return (
-					onDblClick={onConsoleHeaderDblClick}
+			<Inspector theme={theme} theme="chromeDark" data={this.props.data} />
-				>
+		);
-					<span class="code-wrap__header-label">
+	}
-						Console (<span id="logCountEl">0</span>)
+}
-					</span>
+
-					<div class="code-wrap__header-right-options">
+export class Console extends Component {
-						<a
+	componentWillUpdate(nextProps) {
-							class="code-wrap__header-btn"
+		if (nextProps.logs != this.props.logs) {
-							title="Clear console (CTRL + L)"
+			// Scroll down after new log dom is inserted
-							onClick={onClearConsoleBtnClick}
+			setTimeout(() => {
-						>
+				this.logContainerEl.scrollTop = this.logContainerEl.scrollHeight;
-							<svg>
+			}, 1);
-								<use xlinkHref="#cancel-icon" />
+		}
-							</svg>
+	}
-						</a>
+	render() {
-						<a
+		const {
-							class="code-wrap__header-btn  code-wrap__collapse-btn"
+			logs,
-							title="Toggle console"
+			isConsoleOpen,
-							onClick={toggleConsole}
+			onConsoleHeaderDblClick,
-						/>
+			onClearConsoleBtnClick,
-					</div>
+			toggleConsole,
-				</div>
+			onEvalInputKeyup
-				<CodeMirrorBox
+		} = this.props;
-					options={{
+
-						mode: 'javascript',
+		return (
-						lineWrapping: true,
+			<div
-						theme: 'monokai',
+				id="consoleEl"
-						foldGutter: true,
+				class={`console ${isConsoleOpen ? '' : 'is-minimized'}`}
-						readOnly: true,
+			>
-						gutters: ['CodeMirror-foldgutter']
+				<div id="consoleLogEl" class="console__log">
-					}}
+					<div
-					onCreation={el => onReady(el)}
+						class="js-console__header  code-wrap__header"
-				/>
+						title="Double click to toggle console"
-			</div>
+						onDblClick={onConsoleHeaderDblClick}
-			<div
+					>
-				id="consolePromptEl"
+						<span class="code-wrap__header-label">
-				class="console__prompt flex flex-v-center flex-shrink-0"
+							Console (<span>{logs.length}</span>)
-			>
+						</span>
-				<svg width="18" height="18" fill="#346fd2">
+						<div class="code-wrap__header-right-options">
-					<use xlinkHref="#chevron-icon" />
+							<a
-				</svg>
+								class="code-wrap__header-btn"
-				<input
+								title="Clear console (CTRL + L)"
-					tabIndex={isConsoleOpen ? 0 : -1}
+								onClick={onClearConsoleBtnClick}
-					onKeyUp={onEvalInputKeyup}
+							>
-					class="console-exec-input"
+								<svg>
-				/>
+									<use xlinkHref="#cancel-icon" />
-			</div>
+								</svg>
-		</div>
+							</a>
-	);
+							<a
+								class="code-wrap__header-btn  code-wrap__collapse-btn"
+								title="Toggle console"
+								onClick={toggleConsole}
+							/>
+						</div>
+					</div>
+					<ul
+						class="console__items"
+						ref={el => {
+							this.logContainerEl = el;
+						}}
+					>
+						{logs.map(log => <LogRow data={log} />)}
+					</ul>
+				</div>
+				<div
+					id="consolePromptEl"
+					class="console__prompt flex flex-v-center flex-shrink-0"
+				>
+					<svg width="18" height="18" fill="#346fd2">
+						<use xlinkHref="#chevron-icon" />
+					</svg>
+					<input
+						tabIndex={isConsoleOpen ? 0 : -1}
+						onKeyUp={onEvalInputKeyup}
+						class="console-exec-input"
+					/>
+				</div>
+			</div>
+		);
+	}
 }

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,10 @@ export default class ContentWrap extends Component {
 		]).then(() => this.setPreviewContent(true));
 	}
 	applyCodemirrorSettings(prefs) {
-		if (window.consoleEl) {
+		document.documentElement.style.setProperty(
-			window.consoleEl.querySelector(
+			'--code-font-size',
-				'.CodeMirror'
+			`${parseInt(prefs.fontSize, 10)}px`
-			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
+		);
-		}
 
 		// Replace correct css file in LINK tags's href
 		if (prefs.editorTheme) {
@@ -556,46 +553,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 +587,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 +834,7 @@ export default class ContentWrap extends Component {
 						allowfullscreen
 					/>
 					<Console
+						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}
 						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
 							this
@@ -871,7 +842,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 ||
@@ -293,11 +294,10 @@ export default class ContentWrapFiles extends Component {
 		);
 	}
 	applyCodemirrorSettings(prefs) {
-		if (window.consoleEl) {
+		document.documentElement.style.setProperty(
-			window.consoleEl.querySelector(
+			'--code-font-size',
-				'.CodeMirror'
+			`${parseInt(prefs.fontSize, 10)}px`
-			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
+		);
-		}
 
 		// Replace correct css file in LINK tags's href
 		if (prefs.editorTheme) {
@@ -493,46 +493,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 +527,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 +627,7 @@ export default class ContentWrapFiles extends Component {
 						allowfullscreen
 					/>
 					<Console
+						logs={this.state.logs}
 						isConsoleOpen={this.state.isConsoleOpen}
 						onConsoleHeaderDblClick={this.consoleHeaderDblClickHandler.bind(
 							this
@@ -661,7 +635,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/UserCodeMirror.jsx

@@ -38,9 +38,6 @@ emmet(CodeMirror);
 export default class UserCodeMirror extends Component {
 	componentDidMount() {
 		this.initEditor();
-		this.textarea.parentNode.querySelector(
-			'.CodeMirror'
-		).style.fontSize = `${parseInt(this.props.prefs.fontSize, 10)}px`;
 	}
 	shouldComponentUpdate(nextProps) {
 		if (nextProps.prefs !== this.props.prefs) {
@@ -60,12 +57,6 @@ export default class UserCodeMirror extends Component {
 			this.cm.setOption('keyMap', prefs.keymap);
 			this.cm.setOption('lineWrapping', prefs.lineWrap);
 
-			if (this.textarea) {
-				this.textarea.parentNode.querySelector(
-					'.CodeMirror'
-				).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
-			}
-
 			this.cm.refresh();
 		}
 

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: var(--code-font-size) !important;
+	line-height: inherit !important;
+	padding: 5px 10px !important;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
 
 /* Detached mode */
 

tests/__mocks__/fileMocks.js

@@ -1,3 +1,3 @@
 // This fixed an error related to the CSS and loading gif breaking my Jest test
-// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets 
+// See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
-module.exports = 'test-file-stub';
+module.exports = 'test-file-stub';

tests/fileUtils.test.js

@@ -6,7 +6,7 @@ import {
 	removeFileAtPath,
 	getParentPath,
 	getExtensionFromFileName
-} from '../fileUtils';
+} from '../src/fileUtils';
 
 function getNestedFiles() {
 	return [

tests/footer.test.js

@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import Footer from '../components/Footer';
+import Footer from '../src/components/Footer';
 import { Link } from 'preact-router/match';
 // See: https://github.com/mzgoddard/preact-render-spy
 import { shallow, deep } from 'preact-render-spy';

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"