Update template for UI

templates/common/_gitignore

@@ -50,3 +50,5 @@ bower_components
 # Releases
 dist
 
+# Package Lock for NPM
+package-lock.json

templates/ui-package/package.json

@@ -14,14 +14,54 @@
     "url": "https://github.com/LabShare/<%= appNameSlug %>/issues"
   },
   "license": "MIT",
-  "scripts": {},
+  "scripts": {
+    "test": "karma start ./test/karma.conf.js",
+    "lint": "tslint -p tsconfig.json -c tslint.json",
+    "lint:fix": "tslint --fix -p tsconfig.json -c tslint.json",
+    "build": "lsc build web",
+    "commitmsg": "commitlint -e $GIT_PARAMS",
+    "semantic-release": "semantic-release"
+  },
   "packageDependencies": {
     "@labshare/shell": "*"
   },
   "dependencies": {
-    "@labshare/shell": "https://github.com/LabShare/shell",
-    "lodash": "^4.6.1"
+    "@labshare/shell": "^3.0.8",
+    "@labshare/ng-core": "^3.0.4",
+    "lodash": "^4.6.1",
+    "hammerjs": "^2.0.8",
+    "@angular/core": "^6.0.4",
+    "@angular/common": "^6.0.4"
   },
   "devDependencies": {
+    "@angular/compiler": "^6.0.4",
+    "@angular/compiler-cli": "^6.0.4",
+    "@angular/platform-browser": "^6.0.4",
+    "@angular/platform-browser-dynamic": "^6.0.4",
+    "@commitlint/cli": "^6.2.0",
+    "@commitlint/config-conventional": "^6.1.3",
+    "@labshare/semantic-release-config": "^1.0.0",
+    "@types/jasmine": "^2.5.54",
+    "hard-source-webpack-plugin": "^0.10.1",
+    "html-loader": "0.5.5",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "^0.14.3",
+    "istanbul-instrumenter-loader": "^3.0.1",
+    "jasmine-core": "^3.1.0",
+    "karma": "^2.0.2",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-coverage": "^1.1.1",
+    "karma-coverage-istanbul-reporter": "^2.0.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-typescript": "^3.0.8",
+    "karma-webpack": "^4.0.0-beta.0",
+    "null-loader": "^0.1.1",
+    "semantic-release": "^15.5.0",
+    "ts-loader": "^4.3.0",
+    "tslint-angular": "^1.1.0",
+    "typescript": "^2.7.2",
+    "webpack": "4.10.1"
   }
 }

templates/ui-package/test/karma.conf.js

@@ -0,0 +1,119 @@
+'use strict';
+
+const {join} = require('path');
+const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
+
+module.exports = function (config) {
+
+    let configuration = {
+        basePath: '../',
+        frameworks: ['jasmine'],
+        files: [
+            'test/main-index.ts'
+        ],
+        customLaunchers: {
+            Chrome_travis_ci: {
+                base: 'Chrome',
+                flags: ['--no-sandbox']
+            }
+        },
+        reporters: ['progress', 'coverage-istanbul'],
+        coverageIstanbulReporter: {
+            // reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
+            reports: ['html', 'lcovonly', 'text-summary'],
+
+            // base output directory. If you include %browser% in the path it will be replaced with the karma browser name
+            dir: join('test', 'ui', 'coverage'),
+
+            // Combines coverage information from multiple browsers into one report rather than outputting a report
+            // for each browser.
+            combineBrowserReports: true,
+
+            // if using webpack and pre-loaders, work around webpack breaking the source path
+            fixWebpackSourcePaths: true,
+
+            // stop istanbul outputting messages like `File [filename] ignored, nothing could be mapped`
+            skipFilesWithNoCoverage: false,
+
+            verbose: false // output config used by istanbul for debugging
+        },
+        preprocessors: {
+            'test/main-index.ts': ['webpack']
+        },
+        webpackMiddleware: {
+            stats: 'errors-only'
+        },
+        exclude: [],
+        port: 8080,
+        browsers: ['ChromeHeadless'],
+        singleRun: true,
+        browserConsoleLogOptions: {
+            level: 'log',
+            format: '%b %T: %m',
+            terminal: true
+        },
+        // Workaround for test timeout issue: https://github.com/jasmine/jasmine/issues/1327#issuecomment-332939551
+        browserNoActivityTimeout: 150000,
+        mime: {  // Chrome version 55+ has a bug with TS. See: https://stackoverflow.com/a/41054760
+            'text/x-typescript': ['ts', 'tsx']
+        },
+        colors: true,
+        // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
+        logLevel: config.LOG_INFO,
+        webpack: {
+            mode: 'development',
+            resolve: {
+                // Add '.ts' and '.tsx' as a resolvable extension.
+                extensions: [".ts", ".tsx", ".js"]
+            },
+            module: {
+                rules: [
+                    {
+                        test: /\.tsx?$/,
+                        use: {
+                            loader: 'ts-loader',
+                            options: {}
+                        },
+                        exclude: '/node_modules'
+                    },
+                    {
+                        test: /ui\/.+(\.ts|\.js)$/,
+                        exclude: /(node_modules|spec\.ts$|spec.js$)/,
+                        loader: 'istanbul-instrumenter-loader',
+                        enforce: 'post',
+                        options: {
+                            esModules: true
+                        }
+                    },
+                    {
+                        test: /\.html$/,
+                        use: ['html-loader']
+                    },
+                    {
+                        test: /\.css$/,
+                        use: ['null-loader']
+                    },
+                    {
+                        test: /\.scss$/,
+                        use: ['null-loader']
+                    },
+                    {
+                        test: /\.(jpe|jpg|png|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
+                        loader: 'null-loader'
+                    }
+                ]
+            },
+            plugins: [
+                new HardSourceWebpackPlugin()
+            ],
+            cache: true,
+            devtool: 'inline-source-map'
+        }
+    };
+
+    if (process.env.TRAVIS) {
+        configuration.browsers = ['Chrome_travis_ci'];
+    }
+
+    config.set(configuration);
+};

templates/ui-package/test/main-index.ts

@@ -0,0 +1,56 @@
+Error.stackTraceLimit = 5;
+
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';
+
+/* https://github.com/angular/angular/issues/15763#issuecomment-301618043 */
+import 'reflect-metadata';
+
+import 'zone.js/dist/zone';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+// Avoid missing dependencies in tests
+import 'hammerjs/hammer';
+
+
+import { getTestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+    BrowserDynamicTestingModule,
+    platformBrowserDynamicTesting()
+);
+
+// Then we find all the tests.
+const context = require.context('../ui', true, /spec$/i);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

templates/ui-package/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "inlineSourceMap": true,
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": false,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "inlineSources": true,
+    "stripInternal": true,
+    "lib": [
+      "es2015",
+      "es2017",
+      "dom"
+    ]
+  },
+  "files": [
+    "ui/app.ts"
+  ],
+  "paths": {
+    "@angular/*": [
+      "../node_modules/@angular/*"
+    ]
+  },
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "exclude": [
+    "node_modules",
+    "dist",
+    "test"
+  ]
+}

templates/ui-package/tslint.json

@@ -0,0 +1,5 @@
+{
+    "extends": [
+        "tslint-angular"
+    ]
+}

templates/ui-package/ui/app.ts

@@ -4,7 +4,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {UIRouterModule} from '@uirouter/angular';
-import {HttpModule} from '@angular/http';
+import {HttpClientModule} from '@angular/common/http';
 import {states} from './home/states';
 import {HomeComponent} from './home/home.component';
 
@@ -16,7 +16,7 @@ import {HomeComponent} from './home/home.component';
     entryComponents: [],
     exports: [],
     imports: [
-        HttpModule,
+        HttpClientModule,
         CommonModule,
         UIRouterModule.forChild({
             states

templates/ui-package/ui/home/home.component.spec.ts

@@ -0,0 +1,28 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HomeComponent} from './home.component';
+
+describe('HomeComponent', () => {
+    let component: HomeComponent;
+    let fixture: ComponentFixture<HomeComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          imports: [
+          ],
+          declarations: [
+            HomeComponent
+          ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(HomeComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

templates/ui-package/ui/home/home.component.ts

@@ -2,14 +2,15 @@
 
 'use strict';
 
-import {Component} from '@angular/core'
+import {Component} from '@angular/core';
+import {OnInit} from '@angular/core';
 
 @Component({
-    selector: 'home',
+    selector: 'app-home',
     template: require('./home.component.html'),
     providers: []
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
 
     public message = '<%= appNameSlug %>\'s home page';
 
@@ -18,4 +19,4 @@ export class HomeComponent {
 
     ngOnInit() {
     }
-}
+}

templates/ui-package/ui/home/states.ts

@@ -1,4 +1,4 @@
-import {HomeComponent} from "./home.component";
+import {HomeComponent} from './home.component';
 
 export const states = [
     {
@@ -9,4 +9,4 @@ export const states = [
         url: '/<%= appNameSlug %>/home',
         component: HomeComponent
     }
-]; 
+];