These are chat archives for aurelia-tools/monterey-electron/monterey-playground

26th
Jun 2016
Vegar Ringdal
@vegarringdal
Jun 26 2016 00:23

In our app we will have the option to install the dependencies also as one of the choises
So I was thinking we could have a log window/frame for that.

https://github.com/aurelia/cli/blob/master/lib/npm.js
If we take this and add modify it a little by adding this:

npm.registry.log.on('log', function (message) {
                        console.log(message)
                    })

We can use the ipcRenderer/ipcMain for sending the events

Jeroen Vinke
@JeroenVinke
Jun 26 2016 06:03
Very usefull, mentioned it [here](
Vegar Ringdal
@vegarringdal
Jun 26 2016 12:55
@JeroenVinke
Suggestion for NPM
gist
Jeroen Vinke
@JeroenVinke
Jun 26 2016 12:57
it's not even running NPM for me :P
need to look into that
oh, I think I know
Vegar Ringdal
@vegarringdal
Jun 26 2016 12:57
you have to run it in the background..
Jeroen Vinke
@JeroenVinke
Jun 26 2016 12:57
I need to supply the project folder path, not the folder where the project has been created in
Vegar Ringdal
@vegarringdal
Jun 26 2016 12:58
yes
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:12
perhaps we shouldn't write the log to the console, but to a screen instead
npm tends to throw errors
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:13
yes.. I just added that to show how to get the messages from the npm :-)
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:13
ah ok :)
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:13
Why I had //here we could maybe send messages back to GUI with progress :joy:
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:14
oh lol :P
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:14
I need to make some dinner and eat, then I want to look more at what you have made, kinda cool we got something that actually makes a project
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:15
yep :)
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:17
Added source for where I got the code for generating the project to monterey-framework/shell#5
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:17
yep, thanks :+1:
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:17
Would have been nice if that code was not so integrated in the cli, so we could just call it, making changes they do more flexible
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:18
I see it differently, we can do a lot already, so they did a good job :)
some things can be improved on their side so we can use more of the cli, but it's great already
Vegar Ringdal
@vegarringdal
Jun 26 2016 13:23
:-)
Jeroen Vinke
@JeroenVinke
Jun 26 2016 13:30
did the log thing work for you?
npm.registry.log.on('log', function (message) {
                        console.log(message)
                    })
Vegar Ringdal
@vegarringdal
Jun 26 2016 14:39
Yes, it returns a object, you need to filter out the "install" messages.
I tried npm.on('log', (e)=>{consol.log(e)}) too, but never got that one to work
But need to make a custom NPM module from the one in the CLI...
Jeroen Vinke
@JeroenVinke
Jun 26 2016 14:42
ahh thats why I didn't work for me
Vegar Ringdal
@vegarringdal
Jun 26 2016 14:49
Thats why I put the entire code for the npm module in the gist link
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:02

@JeroenVinke
Suggestions for build tasks

watch-r.js

Code:


var gulp = require('gulp');
var paths = require('../paths');
var electron = require('electron-connect').server.create();

// outputs changes to files to the console
function reportChange(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
}

// this task wil watch for changes
// to js, html, and css files and call the
// reportChange method.
gulp.task('watch-r', ['build'], function() {
  electron.start();

  gulp.watch(paths.source, ['build-system', electron.reload]).on('change', reportChange);
  gulp.watch('index.js', electron.restart).on('change', reportChange);
  gulp.watch('index.html', electron.restart).on('change', reportChange);
  gulp.watch(paths.html, ['build-html', electron.reload]).on('change', reportChange);
  gulp.watch(paths.less, ['build-less', electron.reload]).on('change', reportChange);
});

Also need to add
<script>require('electron-connect').client.create()</script> to index.html header

The way we can do gulp watch-r if we want it to reload on modifications to gui, and restart on modifications to index.html/js

Vegar Ringdal
@vegarringdal
Jun 26 2016 15:08
I can make a pull request of you want it..
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:08
yeah i've tried that but when you're in your editor and hit ctrl+s then you lose focus of the editor
which is a pain
but if we can keep gulp watch then i'm fine by adding it yep
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:11
Ill make a pull request then, one of the reasons why I made at it as own task, so you can choose what to do :-)
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:11
:+1:
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:15
I have no issues with webstorm loosing focus when I use ctrl+s
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:15
hmm weird
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:16
have the electron app on the other screen, Ill try and have it on the same screen and see what happen
no, works great here too.
I know I had some issues with the reload until I took and added the electron.connect to the html file, esp when in unbuntu
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:18
hmm, that will probably give us issues when we're going to deploy
because electron-connect is a development dependency, not an app dependency
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:20
Yes, but for now its very useful, so removing it by then, or have a own html file for build process ?
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:21
merged it
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:22
Where should the project be created? -> Where should the project folder be created?
I was a bit unsure if I needed to create the project folder for all the files or not
Jeroen Vinke
@JeroenVinke
Jun 26 2016 15:22
Yeah, it's a bit weird that aurelia-cli creates the folder for you
you can change that message if you want
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:24
You can override that it does not create the folder, the hasFlag need to be true, or the path, dont remember what I did yesterday, was late :-)
Vegar Ringdal
@vegarringdal
Jun 26 2016 15:58

Looked into how to not let it create the folder automatically
Sample:

// line 8
let options = {
      hasFlag: function() {
        return true;
      }
    };

    let project = new ProjectTemplate(model, options);
    project.root.name = __dirname + '\\tmp'; <- using tmp dir here just to show where Im going with it

//line 35, here you dont pass in 2'nd param
project.create({});

But I kinda liked how it created the folder for us, just havet be clear in steps when creating the project

Jeroen Vinke
@JeroenVinke
Jun 26 2016 16:02
yeah lets just stick to the default for now
in the project description screen we can make it more clear where the project will be created
Vegar Ringdal
@vegarringdal
Jun 26 2016 16:02
agree