Merge branch 'release/8.0.0'

.travis.yml

@@ -1,12 +1,14 @@
 language: node_js
 node_js:
-  - "6.9.1"
+  - "8.9.4"
 install:
   - yarn install
 script:
   - npm test
-  - npm start -- build
-  - npm start -- mobile.setup
+  - npm start build
+  - npm start mobile.setup
+  - npm start mobile.cordova.addbowser
+  - npm start mobile.build
 notifications:
   email: false
   hipchat: 861e4f14f03ed33d069f1083a6c9f5@2679708

README.md

@@ -1,4 +1,5 @@
 [![Build Status](https://api.travis-ci.org/w3tecch/aurelia-typescript-boilerplate.svg?branch=master)](https://travis-ci.org/w3tecch/aurelia-typescript-boilerplate)
+[![Build status](https://ci.appveyor.com/api/projects/status/7oyx5vxl6ue6oqsf/branch/master?svg=true)](https://ci.appveyor.com/project/dweber019/aurelia-typescript-boilerplate/branch/master)
 [![Dependency Status](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate.svg)](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate)
 [![devDependency Status](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate/dev-status.svg)](https://david-dm.org/w3tecch/aurelia-typescript-boilerplate#info=devDependencies)
 
@@ -211,3 +212,111 @@ If you like to update the source do this
 ```shell
 docker cp ./dist/. mycontainer:/usr/share/nginx/html
 ```
+
+## Additional features
+This repo houses some additional features which provd to be very useful in projects.
+
+## String polyfill
+The file `utils/polyfills.utils.ts` contains a string polyfills.
+With this polyfill you can do this:
+```
+'Teststring'.isEmpty() => false
+''.isEmpty() => true
+undefined.isEmpty() => true
+```
+
+## Validation
+The file `utils/validation.utils.ts` contains some validatoin helper functions and regex patterns.
+
+The function `validateFilledFieldsWithValidationRules` us really useful as you can check a object which is already prefiled if it's valid and if not show errors.
+
+The function `controllerValidByRules` will check if a validation controller is valid.
+
+This could be an example implementation
+```
+class FormExample {
+
+  @bindable({ defaultBindingMode: bindingMode.twoWay }) public user: User;
+
+  private controller: ValidationController;
+  private rules: Rule<CustomerContactRestModel, any>[][];
+
+  public constructor(
+    private validationControllerFactory: ValidationControllerFactory
+  ) {
+    this.controller = this.validationControllerFactory.createForCurrentScope();
+    this.controller.validateTrigger = validateTrigger.changeOrBlur;
+  }
+
+  public bind(): void {
+    this.setupValidationRules();
+    validateFilledFieldsWithValidationRules(this.rules, this.user, this.controller);
+  }
+
+  @computedFrom('user')
+  public get isValid(): boolean {
+    return controllerValidByRules(this.rules, this.user, this.controller);
+  }
+
+  private setupValidationRules(): void {
+    this.rules = ValidationRules
+      .ensure((user: User) => user.lastName)
+        .displayName('USER.LAST_NAME')
+        .required()
+      .ensure((user: User) => user.email)
+        .displayName('USER.EMAIL')
+        .email()
+      .on(this.customerContact).rules;
+  }
+}
+```
+
+### i18n integration
+You can pass a tranlation string into the `displayName('USER.LAST_NAME')` and it will be translated for you.
+
+Additionally you can translate methods like `.required()` in `src/local/*` as demostrated in the files.
+
+If you use the the method `withMessageKey('YOUR.TRANSLATION')` you can pass a translation string and it will be translated for you.
+
+## Route generator service
+If you have router tree like this
+```
+     root
+    /    \
+left      right
+```
+You can't navigate from `left` to `right` with `this.router.navigateToRoute(...)` as `right` is in a branch which `left` is unaware of. This is due to the injection of the router service.
+
+One solution is to use `this.router.navigate(...)` but this is unsave as if the route configuration is changed the navigation is broken as it's hardcoded.
+
+The `route-generator.service.ts` will provide a type safe solution for save navigation.
+
+Check the following files to get an idea how to use it:
+- `route-generator.service.ts`
+- `app.vm.ts` and `app.routes.ts`
+- `child-router.vm.ts` and `child-router.routes.ts`
+
+As an example you could navigate like this from `left` to `right`
+```
+this.routeGeneratorService.navigateByRouteNames(
+  { routeName: 'root' },
+  { routeName: 'right' }
+);
+```
+
+You can also pass route parameters like this but remember that query parameter have to attached to the last element
+```
+this.routeGeneratorService.navigateByRouteNames(
+  { routeName: 'root', params: { id: '1' }},
+  { routeName: 'right' }
+);
+```
+
+## Class transfomer (model handling)
+We have included the [class transformer](https://github.com/typestack/class-transformer) which helps creating models (`src/app/models/*`). This transformation can be done
+in both direction (rest to model, model to rest).
+
+## Dialog service
+There is a custom dialog implementation for simpler useage of elements in dialogs.
+
+The Service is named `generic-dialog.service.ts` and an example can be found in `welcome.vm.ts`.

appveyor.yml

@@ -0,0 +1,13 @@
+environment:
+  nodejs_version: "8"
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - yarn install
+
+test_script:
+  - npm test
+  - npm start build
+  - npm start mobile.setup
+  - npm start mobile.cordova.addbowser
+  - npm start mobile.build

package-scripts.js

@@ -112,7 +112,11 @@ module.exports = {
         clean: series(
           rimraf('./cordova/platforms'),
           rimraf('./cordova/plugins')
-        )
+        ),
+        addbowser: ifWindows(
+          'cd .\\cordova && .\\..\\node_modules\\.bin\\cordova platform add browser',
+          'cd ./cordova && ./../node_modules/.bin/cordova platform add browser'
+        ),
       }
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-typescript-boilerplate",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "title": "Aurelia Typescript Boilerplate",
   "description": "A starter kit for building a standard navigation-style app with Aurelia and Webpack.",
   "main": "dist/app.bundle.js",
@@ -56,7 +56,7 @@
     ],
     "testEnvironment": "node",
     "moduleNameMapper": {
-      "aurelia-(.*)": "<rootDir>/node_modules/aurelia-$1"
+      "^.*\\.scss$": "<rootDir>/test/unit/stubs/sass-stub.js"
     },
     "collectCoverage": true,
     "collectCoverageFrom": [
@@ -77,7 +77,7 @@
   "devDependencies": {
     "@types/cordova": "^0.0.34",
     "@types/i18next-browser-languagedetector": "^2.0.0",
-    "@types/jest": "^20.0.8",
+    "@types/jest": "^22.1.2",
     "@types/jquery": "^3.2.12",
     "@types/lodash": "^4.14.74",
     "@types/node": "^8.0.26",
@@ -88,7 +88,7 @@
     "aurelia-template-lint-webpack-loader": "^1.0.3",
     "aurelia-testing": "^1.0.0-beta.3.0.1",
     "aurelia-webpack-plugin": "^2.0.0-rc.5",
-    "autoprefixer": "^7.1.3",
+    "autoprefixer": "^8.0.0",
     "awesome-typescript-loader": "^3.2.3",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "chalk": "^2.1.0",
@@ -104,13 +104,9 @@
     "http-server": "^0.11.1",
     "img-loader": "^2.0.0",
     "istanbul-instrumenter-loader": "^3.0.0",
-    "jest": "^20.0.4",
-    "jest-cli": "^20.0.4",
+    "jest": "^22.3.0",
+    "jest-cli": "^22.3.0",
     "json-loader": "^0.5.7",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-jasmine": "^1.1.0",
-    "karma-mocha-reporter": "^2.2.4",
-    "karma-webpack": "^2.0.4",
     "loader-utils": "^1.1.0",
     "ncp": "^2.0.0",
     "node-sass": "^4.5.3",
@@ -120,7 +116,7 @@
     "protractor": "^5.1.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.20.1",
-    "ts-jest": "^20.0.14",
+    "ts-jest": "^22.0.4",
     "ts-node": "^4.1.0",
     "tslib": "^1.7.1",
     "tslint": "^5.7.0",
@@ -155,11 +151,13 @@
     "aurelia-validation": "^1.1.1",
     "bluebird": "^3.5.0",
     "bootstrap": "^4.0.0",
+    "class-transformer": "^0.1.9",
     "i18next-browser-languagedetector": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "jquery": "^3.2.1",
     "moment": "^2.18.1",
-    "normalize.css": "^7.0.0",
-    "popper.js": "^1.12.9"
+    "normalize.css": "^8.0.0",
+    "popper.js": "^1.12.9",
+    "reflect-metadata": "^0.1.12"
   }
 }

src/app/app.routes.ts

@@ -0,0 +1,27 @@
+import { PLATFORM } from 'aurelia-framework';
+
+export type RouteNames = 'welcome' | 'users' | 'child-router';
+
+export const welcome = {
+  route: ['', 'welcome'],
+  name: 'welcome',
+  moduleId: PLATFORM.moduleName('modules/welcome/welcome.vm', 'welcome'),
+  nav: true,
+  title: 'Welcome'
+};
+
+export const users = {
+  route: 'users',
+  name: 'users',
+  moduleId: PLATFORM.moduleName('modules/users/users.vm', 'users'),
+  nav: true,
+  title: 'Github Users'
+};
+
+export const childRouter = {
+  route: 'child-router',
+  name: 'child-router',
+  moduleId: PLATFORM.moduleName('modules/child-router/child-router.vm', 'child-router'),
+  nav: true,
+  title: 'Child Router'
+};

src/app/app.vm.html

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

src/app/app.vm.ts

@@ -1,4 +1,4 @@
-import { Lazy, inject, PLATFORM } 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';
@@ -10,21 +10,23 @@ 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';
+import { RouteGeneratorService } from './services/route-generator.service';
 
-@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService, HttpClient)
+@inject(I18N, AppConfigService, Lazy.of(CordovaService), EventBusService, LanguageService, HttpClient, RouteGeneratorService)
 export class AppViewModel {
 
   private logger: Logger;
 
-  public router: Router;
+  public router!: Router;
 
   constructor(
     private i18n: I18N,
     private appConfigService: AppConfigService,
     private cordovaServiceFn: () => CordovaService,
     private eventBusService: EventBusService,
     private languageService: LanguageService,
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private routeGeneratorService: RouteGeneratorService,
   ) {
     this.logger = LogManager.getLogger('AppViewModel');
     this.configureHttpClient();
@@ -42,29 +44,7 @@ export class AppViewModel {
     if (this.appConfigService.platformIsMobile()) {
       this.cordovaServiceFn();
     }
-    config.map([
-      {
-        route: ['', 'welcome'],
-        name: 'welcome',
-        moduleId: PLATFORM.moduleName('./modules/welcome/welcome.vm', 'welcome'),
-        nav: true,
-        title: 'Welcome'
-      },
-      {
-        route: 'users',
-        name: 'users',
-        moduleId: PLATFORM.moduleName('./modules/users/users.vm', 'users'),
-        nav: true,
-        title: 'Github Users'
-      },
-      {
-        route: 'child-router',
-        name: 'child-router',
-        moduleId: PLATFORM.moduleName('./modules/child-router/child-router.vm', 'child-router'),
-        nav: true,
-        title: 'Child Router'
-      }
-    ]);
+    config.map(this.routeGeneratorService.getRootRoutesConfig());
     config.mapUnknownRoutes({ route: '', redirect: '' });
 
     config.addAuthorizeStep(ExampleStep);

src/app/main.ts

@@ -15,6 +15,9 @@ const appConfigService = new AppConfigService();
  */
 import { Aurelia, LogManager, PLATFORM } from 'aurelia-framework';
 import { ConsoleAppender } from 'aurelia-logging-console';
+import { ValidationMessageProvider } from 'aurelia-validation';
+import { Expression } from 'aurelia-binding';
+import { I18N } from 'aurelia-i18n';
 
 /**
  * Locals i18n imports
@@ -28,6 +31,12 @@ import de_CHTranslation from './../locales/de_CH.json';
 import 'isomorphic-fetch';
 import LanguageDetector from 'i18next-browser-languagedetector';
 
+/**
+ * Polyfills
+ */
+import 'reflect-metadata';
+import 'utils/polyfills.utils';
+
 // Fontawesome setup
 import fontawesome from '@fortawesome/fontawesome';
 import fontawesomeSolid from '@fortawesome/fontawesome-free-solid';
@@ -128,4 +137,19 @@ export async function configure(aurelia: Aurelia): Promise<void> {
   const offline = await System.import('offline-plugin/runtime');
   offline.install();
   */
+
+  // Configure validation translations
+  ValidationMessageProvider.prototype.getMessage = function (key): Expression {
+    const i18n = aurelia.container.get(I18N);
+    const translationId = `VALIDATIONS.${key}`;
+    let translation = i18n.tr(translationId);
+    if (translation === translationId) {
+      translation = i18n.tr(key);
+    }
+    return (this as any).parser.parse(translation);
+  };
+  ValidationMessageProvider.prototype.getDisplayName = function (...args): string {
+    const i18n = aurelia.container.get(I18N);
+    return i18n.tr(args[1]);
+  };
 }