Merge branch 'release/9.0.0'

w3tecch · May 1, 2018 · 0e274e4 · 0e274e4
2 parents 6d650a1 + 29a2393
commit 0e274e4
Show file tree

Hide file tree

Showing 50 changed files with 4,270 additions and 2,291 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,7 @@ yarn-error.log
 /test/*coverage
 /test/coverage*
 /.chrome
+.wwp-cache
 
 # Logs #
 logs
@@ -26,10 +27,6 @@ Thumbs.db
 /bower_components
 npm-debug.log
 
-# OS generated files #
-.DS_Store
-Thumbs.db
-
 # Typing #
 /typings/
 

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -5,6 +5,12 @@
     "steoates.autoimport",
     "EditorConfig.EditorConfig",
     "christian-kohler.path-intellisense",
-    "behzad88.Aurelia"
+    "behzad88.Aurelia",
+    "mike-co.import-sorter",
+    "christian-kohler.npm-intellisense",
+    "eg2.tslint",
+    "formulahendry.auto-close-tag",
+    "formulahendry.auto-rename-tag",
+    "mkaufman.htmlhint"
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,25 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "files.trimTrailingWhitespace": true,
+  "search.exclude": {
+    "**/node_modules": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "importSorter.generalConfiguration.sortOnBeforeSave": true,
+  "importSorter.generalConfiguration.exclude": [
+    "main.ts"
+  ],
+  "importSorter.importStringConfiguration.tabSize": 2,
+  "htmlhint.options": {
+    "tagname-lowercase": true,
+    "attr-lowercase": true,
+    "attr-value-double-quotes": true,
+    "doctype-first": false,
+    "tag-pair": true,
+    "spec-char-escape": true,
+    "id-unique": true,
+    "src-not-empty": true,
+    "attr-no-duplication": true,
+    "title-require": true
+  }
 }
diff --git a/README.md b/README.md
@@ -1,9 +1,46 @@
-[![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)
-
-## Getting started
+<p align="center">
+  <img src="./w3tec-logo.png" alt="w3tec" width="400" />
+</p>
+
+<h1 align="center">Aurelia Typescript Boilerplate</h1>
+
+<p align="center">
+  <a href="https://david-dm.org/w3tecch/aurelia-typescript-boilerplate">
+    <img src="https://david-dm.org/w3tecch/aurelia-typescript-boilerplate/status.svg?style=flat" alt="dependency" />
+  </a>
+  <a href="https://travis-ci.org/w3tecch/aurelia-typescript-boilerplate">
+    <img src="https://travis-ci.org/w3tecch/aurelia-typescript-boilerplate.svg?branch=master" alt="travis" />
+  </a>
+  <a href="https://ci.appveyor.com/project/dweber019/aurelia-typescript-boilerplate/branch/master">
+    <img src="https://ci.appveyor.com/api/projects/status/7oyx5vxl6ue6oqsf/branch/master?svg=true&passingText=Windows%20passing&pendingText=Windows%20pending&failingText=Windows%20failing" alt="appveyor" />
+  </a>
+</p>
+
+<p align="center">
+  <b>A full configured and ready to go boilerplate/skeleton for an Aurelia app</b></br>
+  Heavily inspired by <a href="https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-typescript-webpack">Aurelia Skeleton</a>.<br>
+  <sub>Made with ❤️ by <a href="https://github.com/w3tecch">w3tech</a>, <a href="https://www.linkedin.com/in/david-weber-6a0819b7/">David Weber</a> and <a href="https://github.com/w3tecch/template-gen/graphs/contributors">contributors</a></sub>
+</p>
+
+<br />
+
+## ❯ Why
+
+The skeletons provided by Aurelia are great but aren't ready for an enterprise grade app. This boilerplate provides a lot of features out of the box like i18n or an optin Cordova setup.
+
+## ❯ Table of Contents
+- [Getting Started](#-getting-started)
+- [Feature configuration](#-feature-configuration)
+- [Bundling](#-bundling)
+- [Running tests](#-running-tests)
+- [App configuration](#-app-configuration)
+- [HTML5 pushState routing](#-html5-pushstate-routing)
+- [Cordova - Mobile development](#-cordova-mobile-development)
+- [Docker](#-docker)
+- [Additional features](#-additional-features)
+
+
+## ❯ Getting started
 
 Before you start, make sure you have a recent version of [NodeJS](http://nodejs.org/) environment *>=6.0* with NPM 3 or Yarn.
 
@@ -34,12 +71,12 @@ If you wish to try out the experimental Hot Module Reload, you may run your appl
 npm start -- webpack.server.hmr
 ```
 
-## Feature configuration
+## ❯ Feature configuration
 
 Most of the configuration will happen in the `webpack.config.js` file.
 There, you may configure advanced loader features or add direct SASS or LESS loading support.
 
-## Bundling
+## ❯ Bundling
 
 To build an optimized, minified production bundle (output to /dist) execute:
 
@@ -57,7 +94,7 @@ npm start -- serve
 
 The production bundle includes all files that are required for deployment.
 
-## Running The Tests
+## ❯ Running tests
 
 This skeleton provides three frameworks for running tests.
 
@@ -96,26 +133,6 @@ To run the Jest watcher (re-runs tests on changes), run:
 npm start -- test.jest.watch
 ```
 
-### Karma + Jasmine 2
-
-Karma is also a powerful test runner, which by default runs in the browser. This means that whatever works in real browsers, should also work the same way in the unit tests. But it also means the framework is heavier to execute and not as lean to work with.
-
-To ease transitioning between Jest and Karma, Jasmine 2 is configured with Jest's matchers.
-
-To create new Karma tests, create files with the extension `.spec.ts`, either in the `src` directory or in the `test/unit` directory.
-
-To run the Karma unit tests, run:
-
-```shell
-npm start -- test.karma
-```
-
-To run the Karma watcher (re-runs tests on changes), run:
-
-```shell
-npm start -- test.karma.watch
-```
-
 ### Protractor (E2E / integration tests)
 
 Integration tests can be performed with [Protractor](http://angular.github.io/protractor/#/).
@@ -128,23 +145,23 @@ Integration tests can be performed with [Protractor](http://angular.github.io/pr
 npm start -- e2e
 ```
 
-## Running all test suites
+### Running all test suites
 
 To run all the unit test suites and the E2E tests, you may simply run:
 
 ```shell
 npm start -- test.all
 ```
 
-## App confugration
-There is an app configuration management in place. Two standart environments are already set (devlopment and production).
+## ❯ App configuration
+There is an app configuration management in place. Two standard environments are already set (development and production).
 You can for example build the production with:
 
 ```shell
 npm start -- webpack.build.production
 ```
 
-If you like to add an additional configuaration you have to do the following two steps:
+If you like to add an additional configuration you have to do the following two steps:
 1. Add the configuration json to ```app/config```, example preprod.json
 2. Add the corresponding command to ```package-script.js``` and pass the right argument like ```--env.config=preprod```
 
@@ -166,11 +183,11 @@ preprod: {
 }
 ```
 
-## HTML5 pushState routing
+## ❯ HTML5 pushState routing
 By default pushState, also known as html5 routing, is enabled. The Webpack server is already configured to handle this but many webserver need
-extra confuration to enable this.
+extra configuration to enable this.
 
-## Cordova - Mobile Development
+## ❯ Cordova - Mobile development
 
 ### Installation
 Initiate cordova with the following commands:
@@ -181,15 +198,15 @@ npm start -- mobile.setup
 
 ### Run and build
 Cordova takes the ```www``` folder source to create the Cordova app. This ```www``` folder is a symlink pointing to the ```dist``` folder.
-So make sure you run for example ```npm start -- build``` first before runing/building a Cordova app.
+So make sure you run for example ```npm start -- build``` first before running/building a Cordova app.
 
 Sometimes the ```www``` symlink is removed (e.g. git clone). Run this command to fix this:
 ```shell
 npm start -- mobile.link
 ```
 
-## Docker
-There is a ```Dockerfile``` unsing the [nginx](https://hub.docker.com/_/nginx/) image to build the docker image.
+## ❯ Docker
+There is a ```Dockerfile``` using the [nginx](https://hub.docker.com/_/nginx/) image to build the docker image.
 
 ### Getting started
 First build your aurelia app with
@@ -213,22 +230,22 @@ If you like to update the source do this
 docker cp ./dist/. mycontainer:/usr/share/nginx/html
 ```
 
-## Additional features
-This repo houses some additional features which provd to be very useful in projects.
+## ❯ Additional features
+This repository houses some additional features which prove to be very useful in projects.
 
-## String polyfill
+### 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
+String.isEmpty('Teststring') => false
+String.isEmpty('') => true
+String.isEmpty(undefined) => true
 ```
 
-## Validation
-The file `utils/validation.utils.ts` contains some validatoin helper functions and regex patterns.
+### Validation
+The file `utils/validation.utils.ts` contains some validation 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 `validateFilledFieldsWithValidationRules` us really useful as you can check a object which is already prefilled if it's valid and if not show errors.
 
 The function `controllerValidByRules` will check if a validation controller is valid.
 
@@ -266,19 +283,19 @@ class FormExample {
       .ensure((user: User) => user.email)
         .displayName('USER.EMAIL')
         .email()
-      .on(this.customerContact).rules;
+      .on(this.user).rules;
   }
 }
 ```
 
 ### i18n integration
-You can pass a tranlation string into the `displayName('USER.LAST_NAME')` and it will be translated for you.
+You can pass a translation 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.
+Additionally you can translate methods like `.required()` in `src/local/*` as demonstrated 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
+### Route generator service
 If you have router tree like this
 ```
      root
@@ -287,7 +304,7 @@ 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.
+One solution is to use `this.router.navigate(...)` but this is unsafe as if the route configuration is changed the navigation is broken as it's hard coded.
 
 The `route-generator.service.ts` will provide a type safe solution for save navigation.
 
@@ -312,11 +329,11 @@ this.routeGeneratorService.navigateByRouteNames(
 );
 ```
 
-## Class transfomer (model handling)
+### Class transformer (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.
+### Dialog service
+There is a custom dialog implementation for simpler usage of elements in dialogs.
 
 The Service is named `generic-dialog.service.ts` and an example can be found in `welcome.vm.ts`.
diff --git a/package-scripts.js b/package-scripts.js
@@ -41,11 +41,11 @@ module.exports = {
         development: {
           default: series(
             'nps webpack.build.before',
-            'webpack --progress -d --env.extractCss --env.config=development'
+            'webpack --progress --mode development --env.extractCss --env.config=development'
           ),
           inlineCss: series(
             'nps webpack.build.before',
-            'webpack --progress -d --env.config=development'
+            'webpack --progress --mode development --env.config=development'
           ),
           serve: series.nps(
             'webpack.build.development',
@@ -55,11 +55,11 @@ module.exports = {
         production: {
           inlineCss: series(
             'nps webpack.build.before',
-            'webpack --progress -p --env.production --env.config=production'
+            'webpack --progress --mode production --env.production --env.config=production'
           ),
           default: series(
             'nps webpack.build.before',
-            'webpack --progress -p --env.production --env.extractCss --env.config=production'
+            'webpack --progress --mode production --env.production --env.extractCss --env.config=production'
           ),
           serve: series.nps(
             'webpack.build.production',
@@ -68,9 +68,9 @@ module.exports = {
         }
       },
       server: {
-        default: `webpack-dev-server -d --inline --env.server --env.extractCss`,
-        inlineCss: `webpack-dev-server -d --inline --env.server`,
-        hmr: `webpack-dev-server -d --inline --hot --env.server`
+        default: `webpack-dev-server --mode development --inline --env.server --env.extractCss`,
+        inlineCss: `webpack-dev-server --mode development --inline --env.server`,
+        hmr: `webpack-dev-server --mode development --inline --hot --env.server`
       },
     },
     serve: 'http-server dist --cors --gzip',
@@ -118,6 +118,18 @@ module.exports = {
           'cd ./cordova && ./../node_modules/.bin/cordova platform add browser'
         ),
       }
+    },
+    analyse: "webpack --progress --mode production --env.production --env.extractCss --env.config=development --env.analyse",
+    tg: {
+      vm: 'tg -d ./scripts/templates vm',
+      route: 'tg -d ./scripts/templates route',
+      element: 'tg -d ./scripts/templates element',
+      template: 'tg -d ./scripts/templates template',
+      attribute: 'tg -d ./scripts/templates attribute',
+      converter: 'tg -d ./scripts/templates converter',
+      pipeline: 'tg -d ./scripts/templates pipeline',
+      service: 'tg -d ./scripts/templates service',
+      restservice: 'tg -d ./scripts/templates restservice'
     }
-  },
+  }
 }