Merge branch 'release/3.0.0'

Author: dweber019

README.md

@@ -144,38 +144,13 @@ To run the unit tests:
 npm test
 ```
 
-## Running The E2E Tests
-Integration tests are performed with [Protractor](http://angular.github.io/protractor/#/).
-
-1. Place your E2E-Tests into the folder ```test/e2e/src```
-
-2. Run the tests by invoking
-
-  ```shell
-  npm run e2e
-  ```
-
-### Running e2e tests manually
-
-1. Make sure your app runs and is accessible
-
-  ```shell
-  WEBPACK_PORT=19876 npm start
-  ```
-
-3. Once bundle is ready, run the E2E-Tests in another console
-
-  ```shell
-  npm run e2e:start
-  ```
-
 ## Environment confugration
 There is a configuration management in place. Three standart environments are already set (devlopment, test and production).
 You can also add more environments with ```--env.target <env-name>``` but there is a catch: You have to add ```--``` for each npm command you
 run throw so if your like to set the evnirnment for ```npm start``` you have to do this like so:
 
   ```shell
-  npm start -- -- --env.target <json-file-name-without-extension>
+  npm start -- -- -- --env.target <json-file-name-without-extension>
   ```
 
 This because ```npm start``` runs ```npm run server:dev``` and then the target command, so we have to to pass the ```--env.target``` by providing two times ```--```.
@@ -226,6 +201,7 @@ Typedoc is generated with command ```npm run build:docs``` into directoy ```docs
 - [X] Add typedocs
 - [ ] Add greenkeeper
 - [ ] Add electron
-- [ ] VSC frontend debugging https://github.com/AngularClass/angular2-webpack-starter/blob/master/.vscode/launch.json
-- [ ] VSC add tasks https://code.visualstudio.com/docs/editor/tasks
-
+- [X] Add pipline example
+- [X] Add utility converters https://www.npmjs.com/package/aurelia-utility-converters
+- [X] Add validation example
+- [X] Add configure http client example

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aurelia-ts-boilerplate",
   "title": "Aurelia TS Boilerplate",
-  "version": "2.1.3",
+  "version": "3.0.0",
   "description": "A starter kit for building a standard navigation-style app with Aurelia, typescript and webpack.",
   "main": "dist/app.js",
   "scripts": {
@@ -79,18 +79,20 @@
     "aurelia-fetch-client": "^1.0.1",
     "aurelia-framework": "^1.0.7",
     "aurelia-history-browser": "^1.0.0",
-    "aurelia-i18n": "^1.2.1",
+    "aurelia-i18n": "^1.3.0",
     "aurelia-loader-webpack": "^2.0.0",
     "aurelia-logging-console": "^1.0.0",
     "aurelia-pal-browser": "^1.0.0",
     "aurelia-polyfills": "^1.1.1",
     "aurelia-route-recognizer": "^1.1.0",
-    "aurelia-router": "^1.0.7",
-    "aurelia-templating-binding": "^1.1.0",
+    "aurelia-router": "^1.1.1",
+    "aurelia-templating-binding": "^1.2.0",
     "aurelia-templating-resources": "^1.2.0",
     "aurelia-templating-router": "^1.0.0",
+    "aurelia-validation": "^1.0.0-beta.1.0.1",
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
+    "i18next-browser-languagedetector": "^1.0.1",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.1.1",
     "moment": "^2.16.0"
@@ -113,12 +115,12 @@
     "@easy-webpack/config-typescript": "5.1.0",
     "@easy-webpack/config-uglify": "2.2.3",
     "@easy-webpack/core": "2.0.1",
-    "aurelia-template-lint-loader": "1.0.0",
+    "aurelia-template-lint-loader": "1.0.1",
     "chalk": "^1.1.3",
     "compression-webpack-plugin": "0.3.2",
     "concurrently": "3.1.0",
-    "cross-env": "3.1.3",
-    "electron": "1.4.13",
+    "cross-env": "3.1.4",
+    "electron": "1.4.14",
     "favicons-webpack-plugin": "0.0.7",
     "fs": "0.0.1-security",
     "http-server": "0.9.0",
@@ -140,7 +142,7 @@
     "typedoc-webpack-plugin": "^1.1.3",
     "typescript": "^2.1",
     "wait-on": "2.0.1",
-    "wallaby-webpack": "0.0.27",
+    "wallaby-webpack": "0.0.30",
     "webpack": "2.1.0-beta.27",
     "webpack-dev-server": "2.1.0-beta.12",
     "webpack-notifier": "1.5.0"

src/app/app.vm.html

@@ -3,7 +3,7 @@
   <nav-bar router.bind="router"></nav-bar>
 
   <div class="page-host">
-    <router-view></router-view>
+    <router-view swap-order="after"></router-view>
   </div>
 
 </template>

src/app/app.vm.ts

@@ -1,22 +1,46 @@
-import { autoinject } from 'aurelia-framework';
+import { Lazy, inject } from 'aurelia-framework';
 import { Router, RouterConfiguration } from 'aurelia-router';
 import { I18N } from 'aurelia-i18n';
+import { HttpClient } from 'aurelia-fetch-client';
+
+import { LogManager, Logger} from './services/logger.service';
 import { AppConfigService } from './services/app-config.service';
+import { CordovaService } from './services/cordova.service';
+import { EventBusService, EventBusEvents } from './services/event-bus.service';
+import { LanguageService } from './services/language.service';
+import { ExampleStep } from './piplines/example.step';
 
-@autoinject
+@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService, HttpClient)
 export class AppViewModel {
+
+  private logger: Logger;
+
   public router: Router;
 
   constructor(
     private i18n: I18N,
-    private appConfigService: AppConfigService
-  ) { }
+    private appConfigService: AppConfigService,
+    private cordovaServiceFn: () => CordovaService,
+    private eventBusService: EventBusService,
+    private languageService: LanguageService,
+    private httpClient: HttpClient
+  ) {
+    this.logger = LogManager.getLogger('AppViewModel');
+    this.configureHttpClient();
+  }
+
+  public attached(): void {
+    this.configureMoment();
+  }
 
   public configureRouter(config: RouterConfiguration, router: Router): void {
     config.title = this.i18n.tr('TITLE');
-    if (this.appConfigService.getPlatform() === 'web') {
+    if (this.appConfigService.platformIsBrowser()) {
       config.options.pushState = true;
     }
+    if (this.appConfigService.platformIsMobile()) {
+      this.cordovaServiceFn();
+    }
     config.map([
       {
         route: ['', 'welcome'],
@@ -40,7 +64,29 @@ export class AppViewModel {
         title: 'Child Router'
       }
     ]);
+    config.mapUnknownRoutes({ route: '', redirect: '' });
+
+    config.addAuthorizeStep(ExampleStep);
 
     this.router = router;
   }
+
+  private configureMoment(): void {
+    const locale = this.languageService.getCurrentLocale();
+    moment.locale(locale);
+    this.eventBusService.addSubscription(EventBusEvents.IDS.i18n.locale.changed, (a) => moment.locale(a.newValue));
+  }
+
+  private configureHttpClient(): void {
+    this.httpClient.configure(config => {
+      config
+        .useStandardConfiguration()
+        .withInterceptor({
+          request: (request: Request) => {
+            this.logger.debug('Request interceptor hit: ', request.url);
+            return request;
+          }
+        });
+    });
+  }
 }

src/app/main.ts

@@ -18,12 +18,14 @@ import { ConsoleAppender } from 'aurelia-logging-console';
 /**
  * Locals i18n imports
  */
-import i18nEnglish from './../locales/en.json';
+import en_USTranslation from './../locales/en_US.json';
+import de_CHTranslation from './../locales/de_CH.json';
 
 /**
- * Polyfill fetch
+ * Third Party Libraries and polyfill
  */
 import 'isomorphic-fetch';
+import LanguageDetector from 'i18next-browser-languagedetector';
 
 /**
  * Aurelia configruation
@@ -42,20 +44,42 @@ export async function configure(aurelia: Aurelia): Promise<void> {
      * See: https://github.com/aurelia/i18n
      */
     .plugin('aurelia-i18n', (instance) => {
+      instance.i18next.use(LanguageDetector);
       // adapt options to your needs (see http://i18next.com/docs/options/)
       // make sure to return the promise of the setup method, in order to guarantee proper loading
       return instance.setup({
         resources: {
-          en: {
-            translation:  i18nEnglish
+          'en-US': {
+            translation: en_USTranslation
+          },
+          'de-CH': {
+            translation: de_CHTranslation
           }
         },
-        lng: 'en',
-        fallbackLng: 'en'
+        fallbackLng: {
+          'de': ['de-CH', 'en-US'],
+          'de-DE': ['de-CH', 'en-US'],
+          'default': ['en-US']
+        },
+        debug: false,
+        detection: {
+          order: ['localStorage', 'navigator'],
+          lookupCookie: 'i18next',
+          lookupLocalStorage: 'i18nextLng',
+          caches: ['localStorage']
+        }
       });
     })
+    /**
+     * Aurelia Validation plugin
+     * See: https://github.com/aurelia/validation
+     *
+     * Configure i18n for aurelia-validation error messages.
+     * See: http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics
+     */
+    .plugin('aurelia-validation')
     // Uncomment the line below to enable animation.
-    // .plugin('aurelia-animator-css');
+    .plugin('aurelia-animator-css')
     // if the css animator is enabled, add swap-order="after" to all router-view elements
 
     // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.

src/app/models/platforms.ts

@@ -0,0 +1,4 @@
+export const platforms = {
+  BROWSER: 'browser',
+  MOBILE: 'mobile'
+};

src/app/modules/users/users.vm.html

@@ -1,5 +1,4 @@
 <template>
-
   <section class="au-animate">
     <h2>${heading}</h2>
     <div class="row au-stagger">

src/app/modules/welcome/welcome.vm.html

@@ -25,5 +25,19 @@ <h3>Custom global attribute</h3>
 
     <h3>Global value converter</h3>
     <p>${currentDate | dateFormat}</p>
+
+    <h3>Switch Language</h3>
+    <button click.delegate="switchLanguage()" class="btn btn-primary">Click me!</button>
+    <br/><br/>
+    <p>Everything is: <span t="TR_ATTR"></span></p>
+    <p>Signalr example: ${ 'TR_SIGNALER' | t & signal:'locale:changed' }</p>
+
+    <h3>Converter utility</h3>
+    <p>${ jsonProperty | json }</p>
+    <p>Available converters are: filter, json, limit, md5 and sort</p>
+
+    <h3>Validation</h3>
+    <p>Validation is: ${validationValid}</p>
+    <button class="btn btn-primary" click.delegate="validateFirstName()">validate</button>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,28 +1,55 @@
 import { autoinject } from 'aurelia-framework';
-import { LogManager, Logger} from './../../services/logging.service';
+import { ValidationControllerFactory, ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
+
+import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
+import { LanguageService } from './../../services/language.service';
 
 @autoinject
 export class Welcome {
   private logger: Logger;
+  private vController: ValidationController;
 
 	public heading: string = 'Welcome to the Aurelia Navigation App';
 	public firstName: string = 'John';
 	public lastName: string = 'Doe';
 	public previousValue: string = this.fullName;
   public currentDate: Date = new Date();
+  public jsonProperty: Object = { key1: 'value1', key2: 'value2' };
+  public validationValid: boolean = false;
 
 	constructor(
-    private appConfigService: AppConfigService
+    private appConfigService: AppConfigService,
+    private languageService: LanguageService,
+    validationControllerFactory: ValidationControllerFactory
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
 		this.logger.info('appConfig => name:', appConfigService.getName());
 		this.logger.info('appConfig => version:', appConfigService.getVersion());
 		this.logger.info('appConfig => env:', appConfigService.getEnv());
 		this.logger.info('appConfig => platform:', appConfigService.getPlatform());
 		this.logger.info('appConfig => config:', appConfigService.getConfig());
+
+    this.vController = validationControllerFactory.createForCurrentScope();
+    this.vController.validateTrigger = validateTrigger.manual;
+	}
+
+  public canDeactivate(): boolean {
+		if (this.fullName !== this.previousValue) {
+			return confirm('Are you sure you want to leave?');
+		}
+    return true;
 	}
 
+  public validateFirstName(): void {
+    this.vController
+      .validate({
+        object: this,
+        rules: ValidationRules.ensure('firstName').required().rules
+      })
+      .then(r => this.validationValid = r.valid);
+  }
+
 	//Getters can't be directly observed, so they must be dirty checked.
 	//However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
 	//To optimize by declaring the properties that this getter is computed from, uncomment the line below
@@ -37,12 +64,14 @@ export class Welcome {
 		alert(`Welcome, ${this.fullName}!`);
 	}
 
-	public canDeactivate(): boolean {
-		if (this.fullName !== this.previousValue) {
-			return confirm('Are you sure you want to leave?');
-		}
-    return true;
-	}
+  public switchLanguage(): void {
+    const lang = this.languageService.getCurrentLang();
+    if (lang === this.languageService.getSupportedLanguages()[0]) {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[1]);
+    } else {
+      this.languageService.setLocale(this.languageService.getSupportedLanguages()[0]);
+    }
+  }
 }
 
 export class UpperValueConverter {

src/app/piplines/example.step.ts

@@ -0,0 +1,19 @@
+import { autoinject } from 'aurelia-framework';
+import { NavigationInstruction, Next } from 'aurelia-router';
+import { LogManager, Logger } from './../services/logger.service';
+
+@autoinject
+export class ExampleStep {
+
+  private logger: Logger;
+
+  constructor() {
+    this.logger = LogManager.getLogger('ExampleStep');
+    this.logger.debug('initialized');
+  }
+
+  public run(navigationInstruction: NavigationInstruction, next: Next): any {
+    this.logger.debug('Middleware hit on:', navigationInstruction.fragment);
+    return next();
+  }
+}