Stream terminal output

Fixes #19

main.js

@@ -78,7 +78,7 @@ function createPackageWindow(packageName) {
 function createCreateWindow() {
 	mainWindow.close();
 	createWindow = BrowserWindowFactory.createWindow(`file://${__dirname}/windows/create/create.html`, 600, windowIcon);
-	// packageWindow.webContents.openDevTools();
+	createWindow.webContents.openDevTools();
 	createWindow.on('closed', () => {
 		refreshProjectList();
 		activeProject = null;

models/Package.js

@@ -1,7 +1,9 @@
 'use strict';
 var Package = function (json) {
 	this.json = json;
-	this.getVersion = () => { return this.json.version; }
+	this.__get = (key) => { return this.json[key]};
+	this.getVersion = () => { return this.json.version; };
+	this.getName = () => { return this.json.name };
 };
 Package.prototype.json = {};
 module.exports = Package;

scss/styles.scss

@@ -161,6 +161,12 @@ button {
 .project__output {
   flex: 1;
   border: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: scroll;
+  p {
+	padding: 1px;
+  }
 }
 
 ::-webkit-scrollbar {
@@ -226,3 +232,11 @@ button {
 .hidden {
   display: none !important;
 }
+
+.log--error {
+  background: #A94443;
+  color: white;
+}
+.log--output {
+  color: #FFFF91;
+}

utils/Composer.js

@@ -3,55 +3,59 @@
 /**
  *
  * @param {String} projectPath
- * @param {String} appPath
  * @constructor
  */
 let Composer = function(projectPath) {
-	let bin = null;
+	var bin = this.binPath + '/composer.phar';
 
-	if (!this.isAsar) {
-		bin = process.cwd() + '/composer.phar';
-	} else {
-		bin = this.resourcesPath + '/composer.phar';
-	}
-
-	this.path = projectPath;
-	this.install = (opts, callback) => {
-		this._runCommand(bin + ' install --no-progress', opts, callback);
+	this.install = (opts) => {
+		return this._runCommand(['install', '--no-progress'], opts);
 	};
-	this.update = (dependency, opts, callback) => {
-		var command = bin + ' update --no-progress';
+	this.update = (dependency, opts) => {
+		let command = ['update', '--no-progress'];
 		if (typeof dependency === 'string') {
-			command += ' ' + dependency;
+			command.push(dependency);
 		}
-		this._runCommand(command, opts, callback);
+		return this._runCommand(command, opts);
 	};
-	this.validate = (opts, callback) => {
-		this._runCommand(bin + ' validate', opts, callback);
+	this.validate = (opts) => {
+		return this._runCommand(['validate'], opts);
 	};
-	this.show = (dependency, opts, callback) => {
-		this._runCommand(bin + ' show ' + dependency, opts, callback);
+	/**
+	 *
+	 * @param dependency
+	 * @param opts
+	 * @returns {ChildProcess}
+	 */
+	this.show = (dependency, opts) => {
+		return this._runCommand(['show', dependency], opts);
 	};
-	this.remove = (dependency, opts, callback) => {
-		this._runCommand(bin + ' remove ' + dependency, opts, callback);
+	this.remove = (dependency, opts) => {
+		return this._runCommand(['remove', dependency], opts);
 	};
-	this.createProject = (project, destination, opts, callback) => {
-		this._runCommand(bin + ' create-project ' + project + ' ' + destination + ' --stability dev', opts, callback)
+	this.createProject = (project, destination, opts) => {
+		return this._runCommand(['create-project', project, destination,'--stability', 'dev', '--no-interaction'], opts)
 	};
-	this._runCommand = (command, opts, callback) => {
-		opts['cwd'] = this.path;
-		console.log(command);
-		this.exec(command, opts, callback)
-	}
-};
-Composer.prototype.exec = require('child_process').exec;
-Composer.prototype.path = '';
-Composer.prototype.isAsar = process.mainModule.filename.indexOf('app.asar') !== -1;
-Composer.prototype.resourcesPath = process.resourcesPath;
-Composer.prototype.cleanUpOutput = (output) => {
-	if (output.length > 0 && typeof output === 'string') {
-		return output.replace('You are running composer with xdebug enabled. This has a major impact on runtime performance. See https://getcomposer.org/xdebug', '');
+	this._normalizeOpts = (opts) => {
+		if (typeof opts === 'undefined' || opts.length === 0) {
+			opts = {};
+		}
+		opts['cwd'] = projectPath;
+		return opts;
+	};
+	/**
+	 *
+	 * @param command
+	 * @param opts
+	 * @returns {ChildProcess}
+	 * @private
+	 */
+	this._runCommand = (command, opts) => {
+		opts = this._normalizeOpts(opts);
+		return this.spawn(bin, command, opts);
 	}
-	return output;
 };
+
+Composer.prototype.spawn = require('child_process').spawn;
+Composer.prototype.binPath = (process.mainModule.filename.indexOf('app.asar') !== -1) ? process.resourcesPath : process.cwd();
 module.exports = Composer;

utils/misc.js

@@ -1,7 +1,29 @@
+const readline = require('readline');
 
 exports.$addEventListener = (elId, event, callback) => {
 	document.getElementById(elId).addEventListener(event, callback);
 };
 exports.$onClick = (elId, callback) => {
 	this.$addEventListener(elId, 'click', callback);
 };
+
+const outputLogMessage = (message, lineClass) => {
+	let p = document.createElement('p');
+	p.classList.add(lineClass);
+	p.innerText = message;
+	return p;
+};
+exports.outputLogMessage = outputLogMessage;
+
+exports.outputReadLine = (stream, lineClass, elOutput) => {
+	readline.createInterface({
+		input     : stream,
+		terminal  : false
+	}).on('line', line => {
+		elOutput.appendChild(outputLogMessage(line, lineClass));
+	});
+};
+
+exports.findButtonicon = (el) => {
+	return el.childNodes[1];
+};

windows/create/create.html

@@ -26,7 +26,7 @@
 	<div class="flex flex--row button__actions">
 		<button class="flex" id="project-create">Create project! <i class="fa fa-spin fa-circle-o-notch hidden"></i></button>
 	</div>
-	<textarea title="Composer output" class="project__output" id="composer-output" disabled></textarea>
+	<div class="project__output" id="composer-output"></div>
 </div>
 <script>
 	require('./createWindow')

windows/create/createWindow.js

@@ -13,19 +13,6 @@ let elPackageName = document.getElementById('packageName');
 let elProjectName = document.getElementById('projectName');
 let elOutput = document.getElementById('composer-output');
 
-let composerOutputHandler = (error, stdout, stderr) => {
-	if (error !== null) {
-		elOutput.value = composer.cleanUpOutput(error);
-	} else {
-		if (stdout.length > 0) {
-			elOutput.value += composer.cleanUpOutput(stdout);
-		}
-		if (stderr.length > 0) {
-			elOutput.value += composer.cleanUpOutput(stderr);
-		}
-	}
-};
-
 utils.$onClick('project-destination', projectDestinationBrowse);
 utils.$addEventListener('project-destination', 'onfocus', projectDestinationBrowse);
 
@@ -43,19 +30,23 @@ utils.$onClick('project-create', (e) => {
 	let packageName = elPackageName.value;
 	let projectDest = elDestDir.value + '/' + elProjectName.value;
 
-	let opts = ['--no-interaction'];
-
-	elOutput.value = '';
-	var el = /** @type {Element} */ e.srcElement;
-	var elIcon = el.childNodes[1];
-
+	elOutput.innerHTML = '';
+	var elIcon = utils.findButtonicon(e.srcElement);
 	elIcon.classList.remove('hidden');
-	composer.createProject(packageName, projectDest, opts, (error, stdout, stderr) => {
-		composerOutputHandler(error, stdout, stderr);
+
+	const createProject = composer.createProject(packageName, projectDest);
+	createProject.on('close', (code) => {
+		console.log(code);
 		elIcon.classList.add('hidden');
-		if (fs.existsSync(projectDest + '/composer.json')) {
+		if (code === 0 && fs.existsSync(projectDest + '/composer.json')) {
 			mainProcess.fromNewProject(projectDest);
 			thisWindow.close();
 		}
 	});
+	createProject.on('error', (data) => {
+		console.log(data);
+		elOutput.appendChild(utils.outputLogMessage(data, 'log--error'));
+	});
+	utils.outputReadLine(createProject.stdout, 'log--output', elOutput);
+	utils.outputReadLine(createProject.stderr, 'log--output', elOutput);
 });

windows/package/package.html

@@ -29,7 +29,7 @@ <h1 id="package-name"></h1>
 		<button class="flex" id="action-composer-remove">Remove <i class="fa fa-spin fa-circle-o-notch hidden"></i></button>
 		<button class="flex" id="action-composer-show">Show <i class="fa fa-spin fa-circle-o-notch hidden"></i></button>
 	</div>
-	<textarea title="Composer output" class="project__output" id="composer-output" disabled></textarea>
+	<div class="project__output" id="composer-output"></div>
 </div>
 </body>
 <script>