chore: update templates to align with the style guide

Implements the majority of style guide #316
Moves systemjs configuration our of index.html #429

Author: Brocco

addon/ng2/blueprints/component/files/__path__/__name__.css renamed to addon/ng2/blueprints/component/files/__path__/__name__.component.__styleext__

@@ -1,24 +1,25 @@
 import {
-  it,
-  iit,
+  beforeEachProviders,
   describe,
   ddescribe,
   expect,
+  iit,
+  it,
   inject,
   injectAsync,
-  TestComponentBuilder,
-  beforeEachProviders
+  ComponentFixture,
+  TestComponentBuilder
 } from 'angular2/testing';
 import {provide} from 'angular2/core';
-import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>';
+import {<%= classifiedModuleName %>Component} from './<%= dasherizedModuleName %>.component';
 
 describe('<%= classifiedModuleName %> Component', () => {
 
   beforeEachProviders((): any[] => []);
 
 
   it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-    return tcb.createAsync(<%= classifiedModuleName %>).then((fixture) => {
+    return tcb.createAsync(<%= classifiedModuleName %>Component).then((fixture: ComponentFixture) => {
       fixture.detectChanges();
     });
   }));

addon/ng2/blueprints/component/files/__path__/__name__.html renamed to addon/ng2/blueprints/component/files/__path__/__name__.component.html

@@ -0,0 +1,16 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  moduleId: __moduleName,
+  selector: '<%= dasherizedModuleName %>',
+  templateUrl: '<%= dasherizedModuleName %>.component.html',
+  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']
+})
+export class <%= classifiedModuleName %>Component {
+
+  constructor() {}
+  
+  ngOnInit() {
+  }
+
+}

addon/ng2/blueprints/component/files/__path__/__name__.spec.ts renamed to addon/ng2/blueprints/component/files/__path__/__name__.component.spec.ts

@@ -0,0 +1 @@
+export {<%= classifiedModuleName %>Component} from './<%= dasherizedModuleName %>.component';

addon/ng2/blueprints/component/files/__path__/__name__.component.ts

@@ -1,11 +1,14 @@
 var path = require('path');
+var Blueprint = require('ember-cli/lib/models/blueprint');
 var dynamicPathParser = require('../../utilities/dynamic-path-parser');
 
+var getFiles = Blueprint.prototype.files;
+
 module.exports = {
   description: '',
 
   availableOptions: [
-    { name: 'flat', type: Boolean, default: false, aliases: ['f'] }
+    { name: 'flat', type: Boolean, default: false }
   ],
 
   normalizeEntityName: function (entityName) {
@@ -16,22 +19,59 @@ module.exports = {
   },
 
   locals: function (options) {
+    //TODO: pull value from config
+    this.styleExt = 'css';
+    
     return {
       dynamicPath: this.dynamicPath.dir.replace(this.dynamicPath.appRoot, ''),
-      flat: options.flat
+      flat: options.flat,
+      styleExt: this.styleExt,
+      isLazyRoute: !!options.isLazyRoute,
+      isAppComponent: !!options.isAppComponent
     };
   },
+  
+  files: function() {
+    var fileList = getFiles.call(this);
+    
+    if (this.options.flat) {
+      fileList = fileList.filter(p => p.indexOf('index.ts') <= 0);
+    }
 
+    return fileList;
+  },
+  
   fileMapTokens: function (options) {
     // Return custom template variables here.
     return {
       __path__: () => {
         var dir = this.dynamicPath.dir;
         if (!options.locals.flat) {
           dir += path.sep + options.dasherizedModuleName;
+          
+          if (options.locals.isLazyRoute) {
+            var dirParts = dir.split(path.sep);
+            dirParts[dirParts.length - 1] = `+${dirParts[dirParts.length - 1]}`;
+            dir = dirParts.join(path.sep);
+          }
         }
+        this.appDir = dir.replace(`src${path.sep}client${path.sep}`, '');
         return dir;
+      },
+      __styleext__: () => {
+        return options.locals.styleExt;
       }
     };
+  },
+  
+  afterInstall: function(options) {
+    if (!options.flat) {
+      var filePath = path.join('src', 'client', 'system-config.ts');
+      return this.insertIntoFile(
+        filePath,
+        `  '${this.appDir}',`,
+        { before: '  //barrel registration' }
+      );
+    }
   }
 };

addon/ng2/blueprints/component/files/__path__/__name__.ts

@@ -1,16 +1,17 @@
 import {
-  it,
-  iit,
+  beforeEachProviders,
   describe,
   ddescribe,
   expect,
+  iit,
+  it,
   inject,
   injectAsync,
-  TestComponentBuilder,
-  beforeEachProviders
+  ComponentFixture,
+  TestComponentBuilder
 } from 'angular2/testing';
 import {provide, Component} from 'angular2/core';
-import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>';
+import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>.directive';
 
 
 @Component({
@@ -25,7 +26,7 @@ describe('<%= classifiedModuleName %> Directive', () => {
 
 
   it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-    return tcb.createAsync(TestComponent).then((fixture) => {
+    return tcb.createAsync(TestComponent).then((fixture: ComponentFixture) => {
       fixture.detectChanges();
     });
   }));

addon/ng2/blueprints/component/files/__path__/index.ts

@@ -1,11 +1,7 @@
 import {Directive} from 'angular2/core';
 
-
 @Directive({
-  selector: '<%= dasherizedModuleName %>',
-  providers: [],
-  host: {},
-  
+  selector: '<%= rawEntityName %>'
 })
 export class <%= classifiedModuleName %> {
 

addon/ng2/blueprints/component/index.js

@@ -5,20 +5,22 @@ module.exports = {
   description: '',
 
   availableOptions: [
-    { name: 'flat', type: Boolean, default: false, aliases: ['f'] }
+    { name: 'flat', type: Boolean, default: false }
   ],
 
   normalizeEntityName: function (entityName) {
     var parsedPath = dynamicPathParser(this.project, entityName);
 
     this.dynamicPath = parsedPath;
+    this.rawEntityName = parsedPath.name;
     return parsedPath.name;
   },
 
   locals: function (options) {
     return {
       dynamicPath: this.dynamicPath.dir,
-      flat: options.flat
+      flat: options.flat,
+      rawEntityName: this.rawEntityName
     };
   },
 

addon/ng2/blueprints/directive/files/__path__/__name__.spec.ts renamed to addon/ng2/blueprints/directive/files/__path__/__name__.directive.spec.ts

@@ -1,49 +1,59 @@
 /*global jasmine, __karma__, window*/
 Error.stackTraceLimit = Infinity;
-
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
 __karma__.loaded = function () {
 };
 
-System.config({
-  packages: {
-    'base/dist/app': {
-      defaultExtension: false,
-      format: 'register',
-      map: Object.keys(window.__karma__.files)
-        .filter(onlyAppFiles)
-        .reduce(function (pathsMapping, appPath) {
-          var moduleName = appPath.replace(/^\/base\/dist\/app\//, './').replace(/\.js$/, '');
-          pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
-          return pathsMapping;
-        }, {})
-    }
-  }
-});
+var distPath = '/base/dist/';
+var appPath = distPath + 'app/';
 
-System.import('angular2/testing').then(function (testing) {
-  return System.import('angular2/platform/testing/browser').then(function (providers) {
-    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS,
-      providers.TEST_BROWSER_APPLICATION_PROVIDERS);
-  });
-}).then(function () {
-  return Promise.all(
-    Object.keys(window.__karma__.files)
-      .filter(onlySpecFiles)
-      .map(function (moduleName) {
-        return System.import(moduleName);
-      }));
-}).then(function () {
-  __karma__.start();
-}, function (error) {
-  __karma__.error(error.stack || error);
-});
-
-function onlyAppFiles(filePath) {
-  return /^\/base\/dist\/app\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$/.test(filePath);
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
 }
 
-function onlySpecFiles(path) {
-  return /\.spec\.js$/.test(path);
+function isSpecFile(path) {
+  return path.slice(-8) == '.spec.js';
 }
+
+function isAppFile(path) {
+  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isAppFile);
+
+// Load our SystemJS configuration.
+System.import('base/dist/system-config.js').then(function(systemJsConfig) {
+  // We need to add the distPrefix to our system config packages.
+  var config = systemJsConfig.config;
+  Object.keys(config.packages).forEach(function(pkgName) {
+    if (pkgName[0] != '/' && pkgName[0] != '.') {
+      var pkg = config.packages[pkgName];
+      delete config.packages[pkgName];
+      config.packages[distPath + pkgName] = pkg;
+    }
+  });
+
+  System.config(config);
+}).then(function() {
+  // Load and configure the TestComponentBuilder.
+  return Promise.all([
+    System.import('angular2/testing'),
+    System.import('angular2/platform/testing/browser')
+  ]).then(function (providers) {
+    var testing = providers[0];
+    var testingBrowser = providers[1];
+
+    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_PLATFORM_PROVIDERS,
+      testingBrowser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  });
+}).then(function() {
+  // Finally, load all spec files.
+  // This will run the tests directly.
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    }));
+}).then(__karma__.start, __karma__.error);

addon/ng2/blueprints/directive/files/__path__/__name__.ts renamed to addon/ng2/blueprints/directive/files/__path__/__name__.directive.ts

@@ -2,9 +2,11 @@ import {Component} from 'angular2/core';
 import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
 
 @Component({
+  moduleId: __moduleName,
   selector: '<%= htmlComponentName %>-app',
   providers: [ROUTER_PROVIDERS],
-  templateUrl: 'app/<%= htmlComponentName %>.html',
+  templateUrl: '<%= htmlComponentName %>.html',
+  styleUrls: ['<%= dasherizedModuleName %>.<%= styleExt %>'],
   directives: [ROUTER_DIRECTIVES],
   pipes: []
 })

addon/ng2/blueprints/directive/index.js

@@ -31,17 +31,14 @@
   <script src="vendor/angular2/bundles/angular2.dev.js"></script>
   <script src="vendor/angular2/bundles/http.dev.js"></script>
   <script src="vendor/angular2/bundles/router.dev.js"></script>
-
+  
+  <script src="system-config.js"></script>
   <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app.js').then(null, console.error.bind(console));
+    System.import('system-config.js').then(function(systemConfig) {
+      System.config(systemConfig.config);
+    }).then(function () {
+      System.import('main.js')
+    }).catch(console.error.bind(console));
   </script>
 </body>
 </html>

addon/ng2/blueprints/ng2/files/karma-test-shim.js

@@ -0,0 +1,23 @@
+const barrels: string[] = [
+  'app',
+  //barrel registration
+];
+
+function createPackageConfig(barrels: string[]): any {
+  return barrels.reduce((barrelConfig: any, barrelName: string) => {
+    barrelConfig[barrelName] = {
+      format: 'register',
+      defaultExtension: 'js',
+      main: 'index'
+    };
+    return barrelConfig;
+  }, {});
+}
+
+
+// Add your custom SystemJS configuration here.
+export const config: any = {
+  packages: Object.assign({
+    // Add your custom SystemJS packages here.
+  }, createPackageConfig(barrels))
+};

addon/ng2/blueprints/ng2/files/src/client/app/__name__.__styleext__

@@ -1 +1,3 @@
 /// <reference path="../../typings/browser.d.ts" />
+
+declare var __moduleName: string;