feat(app): update to latest dependencies, provide testing helpers, se…

…tup latest codelyzer

.codelyzer.js

@@ -0,0 +1,11 @@
+module.exports = {
+  // Transformation of the templates. This hooks is quite useful
+  // if you're using any other templating language, for instance
+  // jade, markdown, haml, etc.
+  //
+  // NOTE that this method WILL NOT throw an error in case of invalid template.
+  //
+  transformTemplate(code, url, decorator) {
+    return {code: code.replace(/\$ctrl\./g, ''), url, decorator};
+  },
+}

package.json

@@ -2,10 +2,7 @@
   "name": "angular1-scaffold",
   "version": "1.0.0",
   "description": "Angular 1 scaffold with Typescript and ng-metadata",
-  "main": "app/app.js",
-  "config": {
-    "port": "9000"
-  },
+  "main": "src/app/main.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ngParty/Angular1-scaffold.git"
@@ -18,7 +15,7 @@
     "test:ci": "karma start --browsers Firefox",
     "test:watch": "npm run test -- --auto-watch --no-single-run",
     "clean": "rimraf doc/ coverage/ dist/",
-    "server": "webpack-dev-server --port $npm_package_config_port --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/"
+    "server": "webpack-dev-server --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/"
   },
   "keywords": [],
   "contributors": [
@@ -27,23 +24,25 @@
   ],
   "license": "ISC",
   "dependencies": {
-    "@types/angular": "1.5.16",
-    "@types/core-js": "0.9.34",
+    "@types/angular": "1.5.22",
+    "@types/core-js": "0.9.35",
     "angular": "1.6.1",
     "core-js": "2.4.1",
     "ng-metadata": "4.0.0",
     "reflect-metadata": "0.1.9",
     "rxjs": "5.0.2",
-    "ts-helpers": "1.1.2"
+    "tslib": "1.4.0"
   },
   "devDependencies": {
-    "@types/angular-mocks": "1.5.5",
-    "@types/jasmine": "2.5.35",
+    "@angular/compiler": "2.4.1",
+    "@angular/core": "2.4.1",
+    "@types/angular-mocks": "1.5.8",
+    "@types/jasmine": "2.5.38",
     "@types/lodash": "4.14.37",
-    "@types/node": "6.0.45",
+    "@types/node": "6.0.53",
     "angular-mocks": "1.6.1",
-    "awesome-typescript-loader": "2.2.4",
-    "codelyzer": "0.0.28",
+    "awesome-typescript-loader": "3.0.0-beta.17",
+    "codelyzer": "2.0.0-beta.4",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "0.26.1",
     "html-webpack-plugin": "2.24.1",
@@ -61,7 +60,6 @@
     "karma-webpack": "1.8.1",
     "lodash": "4.17.3",
     "node-sass": "4.1.1",
-    "phantomjs-prebuilt": "2.1.14",
     "raw-loader": "0.5.1",
     "remap-istanbul": "0.8.4",
     "rimraf": "2.5.4",
@@ -72,7 +70,8 @@
     "tslint-loader": "3.3.0",
     "typescript": "2.1.4",
     "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2"
+    "webpack-dev-server": "1.16.2",
+    "zone.js": "0.7.4"
   },
   "engines": {
     "node": ">= 6.x",

src/app/app.component.spec.ts

@@ -1,15 +1,15 @@
 import * as angular from 'angular';
-import { kebabCase } from 'lodash';
 import { IRender, renderFactory } from 'ng-metadata/testing';
-import { NgModule, Component, getInjectableName, bundle } from 'ng-metadata/core';
+import { NgModule, Component } from 'ng-metadata/core';
 
+import { queryByDirective, createAngular1Module } from './shared/test-helpers';
 import { AppComponent } from './app.component';
 
 describe( `AppComponent`, () => {
 
   @Component( {
-    selector: 'test-component',
-    template: `<my-app></my-app>`
+    selector: 'np-test-component',
+    template: `<np-app></np-app>`
   } )
   class TestComponent {
   }
@@ -20,7 +20,7 @@ describe( `AppComponent`, () => {
   class TestModule {
   }
 
-  const TestModuleName = bundle( TestModule ).name;
+  const TestModuleName = createAngular1Module( TestModule );
 
 
   let render: IRender<TestComponent>;
@@ -45,22 +45,9 @@ describe( `AppComponent`, () => {
     const { debugElement, componentInstance } = queryByDirective( compiledElement, AppComponent );
 
     expect( componentInstance instanceof AppComponent ).toBe( true );
-    expect( debugElement.text() ).toContain( 'Hello from Pluto!!!' );
+    expect( debugElement.text() ).toContain( 'Hello from Pluto !' );
 
   } );
 
 
 } );
-
-/**
- * helper for getting tested components
- * - this is just temporary and will be removed when it's part if ngMetadata
- */
-export function queryByDirective<T extends Function>( host: ng.IAugmentedJQuery, Type: T ) {
-  const ctrlName = getInjectableName( Type );
-  const selector = kebabCase( ctrlName );
-  const debugElement = host.find( selector );
-  const componentInstance = debugElement.controller( ctrlName ) as T;
-
-  return { debugElement, componentInstance };
-}

src/app/app.component.ts

@@ -1,14 +1,15 @@
 import { Component, OnInit, Inject } from 'ng-metadata/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'np-app',
   styles: [ require( './app.scss' ) ],
   template: `
-    <h1>Hello from Pluto!!!</h1>
+    <h1>Hello from {{ $ctrl.planet }} !</h1>
   `
 })
 export class AppComponent implements OnInit {
 
+  planet = 'Pluto';
   constructor( @Inject( '$log' ) private _$log: ng.ILogService ) {}
 
   ngOnInit() {

src/app/shared/test-helpers.ts

@@ -0,0 +1,30 @@
+import { getInjectableName, bundle } from 'ng-metadata/core';
+import { kebabCase } from 'lodash';
+
+interface Type extends Function {
+    new (...args: any[]): any;
+}
+
+/**
+ * helper for getting tested components
+ * - this is just temporary and will be removed when it's part if ngMetadata
+ */
+export function queryByDirective<T extends Function>( host: ng.IAugmentedJQuery, Type: T ) {
+  const ctrlName = getInjectableName( Type );
+  const selector = kebabCase( ctrlName );
+  const debugElement = host.find( selector );
+  const componentInstance = debugElement.controller( ctrlName ) as T;
+
+  return { debugElement, componentInstance };
+}
+
+
+export function createAngular1Module(NgMetadataModule: Type) {
+  if (typeof NgMetadataModule !== 'function') {
+    throw new Error(`
+      [Angular module creation Error]
+      You have to provide ngMetadata Module class with @NgModule decorator. You provided ${NgMetadataModule}
+    `)
+  }
+  return bundle(NgMetadataModule).name
+}

src/globals.d.ts

@@ -1,8 +1,8 @@
-// @FIXME remove this line when https://github.com/ngParty/ng-metadata/issues/175 is resolved
-/// <reference path="../node_modules/ng-metadata/manual_typings/globals.d.ts" />
+// we import angular type definition to support 'provide' ng-metadata function
+/// <reference path="../node_modules/ng-metadata/manual_typings/angular-extension.d.ts" />
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
-declare var ENV: string;
+declare const ENV: string;
 interface GlobalEnvironment {
   ENV: typeof ENV
 }

src/index.html

@@ -16,9 +16,9 @@
 
 <body>
 
-<my-app>
+<np-app>
     Loading...
-</my-app>
+</np-app>
 
 <img src="images/pluto-the-planet.jpg">
 

src/polyfills.ts

@@ -19,5 +19,4 @@ import 'core-js/es6/reflect';
 
 import 'reflect-metadata';
 
-// Typescript emit helpers polyfill
-import 'ts-helpers';
+import 'tslib';

tslint.json

@@ -4,19 +4,21 @@
   ],
   "rules": {
 
-    "directive-selector-name": [true, "camelCase"],
-    "component-selector-name": [true, "kebab-case"],
-    "directive-selector-type": [true, "attribute"],
-    "component-selector-type": [true, "element"],
+    "directive-selector": [true, "attribute", "np", "camelCase"],
+    "component-selector": [true, "element", "np", "kebab-case"],
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,
     "use-host-property-decorator": true,
     "no-attribute-parameter-decorator": true,
     "no-output-rename": true,
     "use-life-cycle-interface": true,
     "use-pipe-transform-interface": true,
+    "pipe-naming": [true, "camelCase", "np"],
     "component-class-suffix": true,
     "directive-class-suffix": true,
+    "templates-use-public": true,
+    "no-access-missing-member": true,
+    "invoke-injectable": true,
 
     "class-name": true,
     "radix": true,
@@ -37,10 +39,8 @@
       "log",
       "error"
     ],
-    "no-unreachable": true,
     "no-use-before-declare": true,
     "no-unused-expression": true,
-    "no-duplicate-key": true,
     "no-debugger": true,
     "no-conditional-assignment": true,
     "no-duplicate-variable": true,

webpack.config.js

@@ -63,7 +63,7 @@ const webpackConfigEntryPoints = {
  * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
  */
 // const webpackDevtool = 'source-map';
-const webpackDevtool =  'cheap-module-source-map';
+const webpackDevtool =  '#cheap-module-source-map';
 
 const webpackPreLoaders = [