Merged chore/webpack2 into canary

Author: Awk34

templates/app/_package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     <%# CLIENT %>
+    "@angularclass/hmr-loader": "^3.0.2",
     "@angularclass/match-control": "^2.0.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.12",
@@ -62,8 +63,7 @@
     <%#"@angular/material": "^2.0.0-alpha.10",%>
     "@angular/platform-browser": "^2.3.0",
     "@angular/platform-browser-dynamic": "^2.3.0",
-    <% if(filters.ngroute) { %>
-    "@angular/router": "^3.3.0",<% } %>
+    "@angular/router": "^3.4.7",
     "@angularclass/hmr": "^1.2.1",
     "angular2-universal": "2.1.0-rc.1",
     "angular2-jwt": "^0.1.24",
@@ -95,14 +95,14 @@
     "babel-core": "^6.6.5",
     "babel-eslint": "^6.0.4",
     "babel-register": "^6.16.0",
-    "browser-sync": "^2.8.0",
     "bs-fullscreen-message": "^1.0.0",
     <%_ if(filters.flow) { -%>
     "flow-bin": "^0.31.0",
     "babel-plugin-syntax-flow": "^6.8.0",
     "babel-plugin-transform-flow-comments": "^6.8.0",<% } %>
     "babel-plugin-transform-class-properties": "^6.6.0",
     "babel-plugin-transform-runtime": "^6.6.0",
+    "babel-plugin-istanbul": "^3.1.0",
     "babel-preset-es2015": "^6.6.0",
     "eslint": "^2.12.0",
     "del": "^2.0.2",
@@ -137,11 +137,10 @@
     "run-sequence": "^1.1.0",
     "lazypipe": "^1.0.1",
     <%# WEBPACK %>
-    "webpack": "^1.12.14",
-    "webpack-dev-middleware": "^1.5.1",
-    "webpack-stream": "^3.2.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "html-webpack-plugin": "^2.16.0",
+    "webpack": "2.2.0",
+    "webpack-dev-server": "^2.2.0",
+    "extract-text-webpack-plugin": "2.0.0",
+    "html-webpack-plugin": "^2.24.1",
     "html-webpack-harddisk-plugin": "~0.0.2",
     <%_ if(filters.pug) { _%>
     "pug-html-loader": "^1.0.8",<% } %>
@@ -167,7 +166,7 @@
     <%_ if(filters.stylus) { _%>
     "stylus": "^0.54.5",
     "stylus-loader": "^2.1.1",<% } %>
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "^1.8.1",
     <%# END WEBPACK %>
     "through2": "^2.0.1",
     "open": "~0.0.4",

templates/app/client/app/account(auth)/account.module.js

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
 <%_ if (filters.uirouter) { -%>
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 <%_ if (filters.ngroute) { -%><% } %>
@@ -15,6 +16,7 @@ import { SettingsComponent } from './settings/settings.component';
 @NgModule({
     imports: [
         FormsModule,
+        BrowserModule,
         <%_ if (filters.uirouter) { -%>
         UIRouterModule.forChild({
             states: STATES,

templates/app/client/app/app.js

@@ -1,4 +1,4 @@
-import '!!style!css!sass!./app.<%= styleExt %>';
+import '!!style-loader!css-loader!sass-loader!./app.scss';
 
 import './polyfills';
 

templates/app/client/app/app.module.js

@@ -44,14 +44,26 @@
 //   })<% } %>;
 
 
-import { NgModule, ErrorHandler, Injectable } from '@angular/core';
+import {
+  NgModule,
+  ErrorHandler,
+  Injectable,
+  ApplicationRef,
+} from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {
   HttpModule,
   BaseRequestOptions,
   RequestOptions,
   RequestOptionsArgs,
 } from '@angular/http';
+import {
+  removeNgStyles,
+  createNewHosts,
+  disposeOldHosts,
+  createInputTransfer,
+  restoreInputValues,
+} from '@angularclass/hmr';
 <%_ if (filters.uirouter) { -%>
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 import { provideAuth } from 'angular2-jwt';
@@ -99,4 +111,45 @@ if(constants.env === 'development') {
     ],
     bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+  static parameters = [ApplicationRef];
+  constructor(appRef/*: ApplicationRef*/) {
+    this.appRef = appRef;
+  }
+
+  hmrOnInit(store) {
+    if (!store || !store.state) return;
+    console.log('HMR store', store);
+    console.log('store.state.data:', store.state.data)
+    // inject AppStore here and update it
+    // this.AppStore.update(store.state)
+    if ('restoreInputValues' in store) {
+      store.restoreInputValues();
+    }
+    // change detection
+    this.appRef.tick();
+    delete store.state;
+    delete store.restoreInputValues;
+  }
+
+  hmrOnDestroy(store) {
+    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    // recreate elements
+    store.disposeOldHosts = createNewHosts(cmpLocation)
+    // inject your AppStore and grab state then set it on store
+    // var appState = this.AppStore.get()
+    store.state = {data: 'yolo'};
+    // store.state = Object.assign({}, appState)
+    // save input values
+    store.restoreInputValues  = createInputTransfer();
+    // remove styles
+    removeNgStyles();
+  }
+
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts()
+    delete store.disposeOldHosts;
+    // anything you need done the component is removed
+  }
+}

templates/app/client/app/main/main.module.js

@@ -6,7 +6,7 @@ import { UIRouterModule } from 'ui-router-ng2';<% } %>
 <%_ if(filters.ngroute) { %>
 import { RouterModule, Routes } from '@angular/router';<% } %>
 <%_ if(filters.uibootstrap) { %>
-import { TooltipModule } from 'ng2-bootstrap/ng2-bootstrap';<% } %>
+import { TooltipModule } from 'ng2-bootstrap';<% } %>
 
 import { MainComponent } from './main.component';
 <%_ if(filters.socketio) { -%>
@@ -32,7 +32,7 @@ export const STATES = [
             states: STATES,
         }),<% } %>
         <%_ if(filters.uibootstrap) { %>
-        TooltipModule,<% } %>
+        TooltipModule.forRoot(),<% } %>
     ],
     declarations: [
         MainComponent,

templates/app/client/components/directives.module.js

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UIRouterModule } from 'ui-router-ng2';
-import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
+import { CollapseModule } from 'ng2-bootstrap';
 
 import { AuthModule } from './auth/auth.module';
 

templates/app/gulpfile.babel.js

@@ -16,7 +16,7 @@ import {Server as KarmaServer} from 'karma';
 import runSequence from 'run-sequence';
 import {protractor, webdriver_update} from 'gulp-protractor';
 import {Instrumenter} from 'isparta';
-import webpack from 'webpack-stream';
+import webpack from 'webpack';
 import makeWebpackConfig from './webpack.make';
 
 var plugins = gulpLoadPlugins();
@@ -223,37 +223,25 @@ gulp.task('inject:<%= styleExt %>', () => {
         .pipe(gulp.dest(`${clientPath}/app`));
 });
 
-gulp.task('webpack:dev', function() {
-    const webpackDevConfig = makeWebpackConfig({ DEV: true });
-    return gulp.src(webpackDevConfig.entry.app)
-        .pipe(plugins.plumber())
-        .pipe(webpack(webpackDevConfig))
-        .pipe(gulp.dest('.tmp'));
-});
+function webpackCompile(options, cb) {
+    let compiler = webpack(makeWebpackConfig(options));
 
-gulp.task('webpack:dist', function() {
-    const webpackDistConfig = makeWebpackConfig({ BUILD: true });
-    return gulp.src(webpackDistConfig.entry.app)
-        .pipe(webpack(webpackDistConfig))
-        .on('error', (err) => {
-          this.emit('end'); // Recover from errors
-        })
-        .pipe(gulp.dest(`${paths.dist}/client`));
-});
+    compiler.run((err, stats) => {
+        if(err) return cb(err);
 
-gulp.task('webpack:test', function() {
-    const webpackTestConfig = makeWebpackConfig({ TEST: true });
-    return gulp.src(webpackTestConfig.entry.app)
-        .pipe(webpack(webpackTestConfig))
-        .pipe(gulp.dest('.tmp'));
-});
+        plugins.util.log(stats.toString({
+            colors: true,
+            timings: true,
+            chunks: options.BUILD
+        }));
+        cb();
+    });
+}
 
-gulp.task('webpack:e2e', function() {
-    const webpackE2eConfig = makeWebpackConfig({ E2E: true });
-    return gulp.src(webpackE2eConfig.entry.app)
-        .pipe(webpack(webpackE2eConfig))
-        .pipe(gulp.dest('.tmp'));
-});<% if(filters.ts) { %>
+gulp.task('webpack:dev', cb => webpackCompile({ DEV: true }, cb));
+gulp.task('webpack:dist', cb => webpackCompile({ BUILD: true }, cb));
+gulp.task('webpack:test', cb => webpackCompile({ TEST: true }, cb));
+<%_ if(filters.ts) { -%>
 
 // Install DefinitelyTyped TypeScript definition files
 gulp.task('typings', () => {
@@ -282,7 +270,7 @@ gulp.task('lint:scripts', cb => runSequence(['lint:scripts:client', 'lint:script
 gulp.task('lint:scripts:client', () => {
     return gulp.src(_.union(
         paths.client.scripts,
-        _.map(paths.client.test, blob => '!' + blob)
+        _.map(paths.client.test, blob => `!${blob}`)
     ))
         .pipe(lintClientScripts());
 });
@@ -311,8 +299,8 @@ gulp.task('jscs', () => {
 gulp.task('clean:tmp', () => del(['.tmp/**/*'], {dot: true}));
 
 gulp.task('start:client', cb => {
-    whenServerReady(() => {
-        open('http://localhost:' + config.browserSyncPort);
+    return require('./webpack.server').start(config.clientPort).then(() => {
+        open(`http://localhost:${config.clientPort}`);
         cb();
     });
 });
@@ -461,7 +449,7 @@ gulp.task('coverage:integration', () => {
 // Downloads the selenium webdriver
 gulp.task('webdriver_update', webdriver_update);
 
-gulp.task('test:e2e', ['webpack:e2e', 'env:all', 'env:test', 'start:server', 'webdriver_update'], cb => {
+gulp.task('test:e2e', ['webpack:dist', 'env:all', 'env:test', 'start:server', 'webdriver_update'], cb => {
     gulp.src(paths.client.e2e)
         .pipe(protractor({
             configFile: 'protractor.conf.js',

templates/app/server/config/environment/index.js

@@ -19,8 +19,8 @@ var all = {
   // Root path of server
   root: path.normalize(`${__dirname}/../../..`),
 
-  // Browser-sync port
-  browserSyncPort: process.env.BROWSER_SYNC_PORT || 3000,
+  // dev client port
+  clientPort: process.env.CLIENT_PORT || 3000,
 
   // Server port
   port: process.env.PORT || <%= devPort %>,

templates/app/server/config/express.js

@@ -86,64 +86,6 @@ export default function(app) {
     }));
   }<% } %>
 
-  if(env === 'development') {
-    const webpackDevMiddleware = require('webpack-dev-middleware');
-    const stripAnsi = require('strip-ansi'); 
-    const webpack = require('webpack');
-    const makeWebpackConfig = require('../../webpack.make');
-    const webpackConfig = makeWebpackConfig({ DEV: true });
-    const compiler = webpack(webpackConfig);
-    const browserSync = require('browser-sync').create();
-
-    app.use(cors({
-      origin: true,
-      credentials: true,
-    }));
-
-    app.use(function(req, res, next) {
-      res.setHeader('Access-Control-Allow-Origin', `http://localhost:${config.browserSyncPort}`);
-      next();
-    });
-
-    /**
-     * Run Browsersync and use middleware for Hot Module Replacement
-     */
-    browserSync.init({
-      open: false,
-      logFileChanges: false,
-      proxy: `localhost:${config.port}`,
-      ws: true,
-      middleware: [
-        webpackDevMiddleware(compiler, {
-          noInfo: false,
-          stats: {
-            colors: true,
-            timings: true,
-            chunks: false   
-          }
-        })
-      ],
-      port: config.browserSyncPort,
-      plugins: ['bs-fullscreen-message']
-    });
-
-    /**
-     * Reload all devices when bundle is complete
-     * or send a fullscreen error message to the browser instead
-     */
-    compiler.plugin('done', function(stats) {
-      console.log('webpack done hook');
-      if(stats.hasErrors() || stats.hasWarnings()) {
-        return browserSync.sockets.emit('fullscreen:message', {
-          title: "Webpack Error:",
-          body: stripAnsi(stats.toString()),
-          timeout: 100000
-        });
-      }
-      browserSync.reload();
-    });
-  }
-
   if(env === 'development' || env === 'test') {
     app.use(errorHandler()); // Error handler - has to be last
   }