Seperate electron and web target building

.travis.yml

@@ -16,7 +16,6 @@ install:
 before_script:
   - npm run build
   - npm run build:test
-  - npm run build:electron
   - npm run lint
 
 script:

electron/README.md

@@ -0,0 +1,2 @@
+### Before build:
+Add symbolic link from shared/src to electron/src/shared with **npm run symlink -- -i**

electron/src/.gitignore

@@ -0,0 +1 @@
+shared

electron/src/app.module.ts

@@ -0,0 +1,166 @@
+import { NgModule, ReflectiveInjector } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { StoreLogMonitorModule, useLogMonitor } from '@ngrx/store-log-monitor';
+
+import { DragulaModule } from 'ng2-dragula/ng2-dragula';
+import { Select2Module } from 'ng2-select2/ng2-select2';
+
+import { AddOnComponent } from './shared/components/add-on';
+import { KeyboardSliderComponent } from './shared/components/keyboard/slider';
+import { KeymapAddComponent, KeymapHeaderComponent } from './shared/components/keymap';
+import { KeymapEditComponent } from './components/keymap/edit';
+import { LayersComponent } from './shared/components/layers';
+import {
+    MacroActionEditorComponent,
+    MacroDelayTabComponent,
+    MacroEditComponent,
+    MacroHeaderComponent,
+    MacroItemComponent,
+    MacroKeyTabComponent,
+    MacroListComponent,
+    MacroMouseTabComponent,
+    MacroNotFoundComponent,
+    MacroTextTabComponent
+} from './shared/components/macro';
+import { NotificationComponent } from './shared/components/notification';
+import { PopoverComponent } from './shared/components/popover';
+import {
+    KeymapTabComponent,
+    KeypressTabComponent,
+    LayerTabComponent,
+    MacroTabComponent,
+    MouseTabComponent,
+    NoneTabComponent
+} from './shared/components/popover/tab';
+import { CaptureKeystrokeButtonComponent } from './shared/components/popover/widgets/capture-keystroke';
+import { IconComponent } from './shared/components/popover/widgets/icon';
+import { SettingsComponent } from './shared/components/settings';
+import { SideMenuComponent } from './shared/components/side-menu';
+import { SvgKeyboardComponent } from './shared/components/svg/keyboard';
+import {
+    SvgIconTextKeyComponent,
+    SvgKeyboardKeyComponent,
+    SvgKeystrokeKeyComponent,
+    SvgMouseClickKeyComponent,
+    SvgMouseKeyComponent,
+    SvgMouseMoveKeyComponent,
+    SvgMouseScrollKeyComponent,
+    SvgMouseSpeedKeyComponent,
+    SvgOneLineTextKeyComponent,
+    SvgSingleIconKeyComponent,
+    SvgSwitchKeymapKeyComponent,
+    SvgTextIconKeyComponent,
+    SvgTwoLineTextKeyComponent
+} from './shared/components/svg/keys';
+import { SvgModuleComponent } from './shared/components/svg/module';
+import { SvgKeyboardWrapComponent } from './shared/components/svg/wrap';
+import { MainAppComponent, appRoutingProviders, routing } from './main-app';
+
+import { CancelableDirective } from './shared/directives';
+
+import { CaptureService } from './shared/services/capture.service';
+import { MapperService } from './shared/services/mapper.service';
+import { UhkDeviceService } from './services/uhk-device.service';
+
+import { KeymapEffects, MacroEffects } from './shared/store/effects';
+import { keymapReducer, macroReducer, presetReducer } from './shared/store/reducers';
+import { DataStorage } from './shared/store/storage';
+
+import { KeymapEditGuard } from './shared/components/keymap/edit';
+import { MacroNotFoundGuard } from './shared/components/macro/not-found';
+
+// Create DataStorage dependency injection
+const storageProvider = ReflectiveInjector.resolve([DataStorage]);
+const storageInjector = ReflectiveInjector.fromResolvedProviders(storageProvider);
+const storageService: DataStorage = storageInjector.get(DataStorage);
+
+// All reducers that are used in application
+const storeConfig = {
+    keymaps: storageService.saveState(keymapReducer),
+    macros: storageService.saveState(macroReducer),
+    presetKeymaps: presetReducer
+};
+
+@NgModule({
+    declarations: [
+        MainAppComponent,
+        KeymapEditComponent,
+        KeymapHeaderComponent,
+        NotificationComponent,
+        SvgIconTextKeyComponent,
+        SvgKeyboardKeyComponent,
+        SvgKeystrokeKeyComponent,
+        SvgMouseKeyComponent,
+        SvgMouseClickKeyComponent,
+        SvgMouseMoveKeyComponent,
+        SvgMouseScrollKeyComponent,
+        SvgMouseSpeedKeyComponent,
+        SvgOneLineTextKeyComponent,
+        SvgSingleIconKeyComponent,
+        SvgSwitchKeymapKeyComponent,
+        SvgTextIconKeyComponent,
+        SvgTwoLineTextKeyComponent,
+        SvgKeyboardKeyComponent,
+        SvgKeyboardWrapComponent,
+        SvgKeyboardComponent,
+        SvgModuleComponent,
+        LayersComponent,
+        PopoverComponent,
+        KeymapAddComponent,
+        SideMenuComponent,
+        KeypressTabComponent,
+        KeymapTabComponent,
+        LayerTabComponent,
+        MacroTabComponent,
+        MouseTabComponent,
+        NoneTabComponent,
+        CaptureKeystrokeButtonComponent,
+        IconComponent,
+        MacroEditComponent,
+        MacroListComponent,
+        MacroHeaderComponent,
+        MacroItemComponent,
+        MacroActionEditorComponent,
+        MacroDelayTabComponent,
+        MacroKeyTabComponent,
+        MacroMouseTabComponent,
+        MacroTextTabComponent,
+        MacroNotFoundComponent,
+        AddOnComponent,
+        SettingsComponent,
+        KeyboardSliderComponent,
+        CancelableDirective
+    ],
+    imports: [
+        BrowserModule,
+        FormsModule,
+        DragulaModule,
+        routing,
+        StoreModule.provideStore(storeConfig, storageService.initialState()),
+        StoreDevtoolsModule.instrumentStore({
+            monitor: useLogMonitor({
+                visible: false,
+                position: 'right'
+            })
+        }),
+        StoreLogMonitorModule,
+        Select2Module,
+        EffectsModule.runAfterBootstrap(KeymapEffects),
+        EffectsModule.runAfterBootstrap(MacroEffects)
+    ],
+    providers: [
+        MapperService,
+        appRoutingProviders,
+        KeymapEditGuard,
+        MacroNotFoundGuard,
+        CaptureService,
+        UhkDeviceService
+    ],
+    bootstrap: [MainAppComponent]
+})
+export class AppModule { }

electron/src/components/keymap/edit/index.ts

@@ -0,0 +1 @@
+export { KeymapEditComponent } from './keymap-edit.component';

electron/src/components/keymap/edit/keymap-edit.component.ts

@@ -4,49 +4,37 @@ import { ActivatedRoute } from '@angular/router';
 import '@ngrx/core/add/operator/select';
 import { Store } from '@ngrx/store';
 
+import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/first';
-import 'rxjs/add/operator/let';
+import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/publishReplay';
 import 'rxjs/add/operator/switchMap';
-import { Observable } from 'rxjs/Observable';
 
-import { Keymap } from '../../../config-serializer/config-items/Keymap';
+import { Keymap } from '../../../shared/config-serializer/config-items/Keymap';
-import { UhkBuffer } from '../../../config-serializer/UhkBuffer';
+import { UhkBuffer } from '../../../shared/config-serializer/UhkBuffer';
-import { AppState } from '../../../store';
+import { AppState } from '../../../shared/store';
-import { getKeymap, getKeymapEntities } from '../../../store/reducers/keymap';
+import { SvgKeyboardWrapComponent } from '../../../shared/components/svg/wrap';
-import { SvgKeyboardWrapComponent } from '../../svg/wrap';
+import { KeymapEditComponent as SharedKeymapEditComponent } from '../../../shared/components/keymap/edit';
 
 import { UhkDeviceService } from '../../../services/uhk-device.service';
 
 @Component({
     selector: 'keymap-edit',
-    template: require('./keymap-edit.component.html'),
+    template: require('../../../shared/components/keymap/edit/keymap-edit.component.html'),
-    styles: [require('./keymap-edit.component.scss')],
+    styles: [require('../../../shared/components/keymap/edit/keymap-edit.component.scss')],
     host: {
         'class': 'container-fluid'
     }
 })
-export class KeymapEditComponent {
+export class KeymapEditComponent extends SharedKeymapEditComponent {
 
     @ViewChild(SvgKeyboardWrapComponent) wrap: SvgKeyboardWrapComponent;
 
-    private keymap$: Observable<Keymap>;
-    private deletable$: Observable<boolean>;
-
     constructor(
-        private store: Store<AppState>,
+        store: Store<AppState>,
-        private route: ActivatedRoute,
+        route: ActivatedRoute,
         private uhkDevice: UhkDeviceService
     ) {
-        this.keymap$ = route
+        super(store, route);
-            .params
-            .select<string>('abbr')
-            .switchMap((abbr: string) => store.let(getKeymap(abbr)))
-            .publishReplay(1)
-            .refCount();
-
-        this.deletable$ = store.let(getKeymapEntities())
-            .map((keymaps: Keymap[]) => keymaps.length > 1);
     }
 
     @HostListener('window:keydown.control.u', ['$event'])

electron/src/components/keymap/index.ts

@@ -0,0 +1 @@
+export * from './keymap.routes';

electron/src/components/keymap/keymap.routes.ts

@@ -0,0 +1,26 @@
+import { Routes } from '@angular/router';
+
+import { KeymapAddComponent } from '../../shared/components/keymap/add/keymap-add.component';
+import { KeymapEditComponent } from './edit';
+import { KeymapEditGuard } from '../../shared/components/keymap/edit';
+
+export const keymapRoutes: Routes = [
+    {
+        path: '',
+        redirectTo: '/keymap',
+        pathMatch: 'full'
+    },
+    {
+        path: 'keymap',
+        component: KeymapEditComponent,
+        canActivate: [KeymapEditGuard]
+    },
+    {
+        path: 'keymap/add',
+        component: KeymapAddComponent
+    },
+    {
+        path: 'keymap/:abbr',
+        component: KeymapEditComponent
+    }
+];

electron/src/electron-main.ts

@@ -16,7 +16,7 @@ function createWindow() {
     });
     win.maximize();
 
-    const indexPath = path.resolve(__dirname, 'index.html');
+    const indexPath = path.resolve(__dirname, './index.html');
     // and load the index.html of the app.
     win.loadURL(`file://${indexPath}`);
 

electron/src/main-app/main-app.component.ts

@@ -14,8 +14,8 @@ import { Component, ViewEncapsulation, HostListener } from '@angular/core';
 
 @Component({
     selector: 'main-app',
-    template: require('./main-app.component.html'),
+    template: require('../shared/main-app/main-app.component.html'),
-    styles: [require('./main-app.component.scss')],
+    styles: [require('../shared/main-app/main-app.component.scss')],
     encapsulation: ViewEncapsulation.None
 })
 export class MainAppComponent {

electron/src/main-app/main-app.routes.ts

@@ -1,10 +1,10 @@
 import { ModuleWithProviders } from '@angular/core';
 import { RouterModule, Routes }  from '@angular/router';
 
-import { addOnRoutes } from '../components/add-on';
+import { addOnRoutes } from '../shared/components/add-on';
 import { keymapRoutes } from '../components/keymap';
-import { macroRoutes } from '../components/macro';
+import { macroRoutes } from '../shared/components/macro';
-import { settingsRoutes } from '../components/settings';
+import { settingsRoutes } from '../shared/components/settings';
 
 const appRoutes: Routes = [
     ...keymapRoutes,

electron/src/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

electron/src/services/uhk-device.service.ts

@@ -16,8 +16,8 @@ import 'rxjs/add/operator/publish';
 
 import { Device, Interface, InEndpoint, OutEndpoint, findByIds } from 'usb';
 
-import { Layer } from '../config-serializer/config-items/Layer';
+import { Layer } from '../shared/config-serializer/config-items/Layer';
-import { UhkBuffer } from '../config-serializer/UhkBuffer';
+import { UhkBuffer } from '../shared/config-serializer/UhkBuffer';
 
 const vendorId = 0x16d3;
 const productId = 0x05ea;
@@ -54,6 +54,9 @@ export class UhkDeviceService {
             return;
         }
         this.device = findByIds(vendorId, productId);
+        if (!this.device) {
+            throw new Error('UhkDevice not found.');
+        }
         this.device.open();
 
         const usbInterface: Interface = this.device.interface(0);

electron/src/tsconfig-electron-main.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "types": [
+      "electron"
+    ]
+  },
+  "files": [
+    "electron-main.ts"
+  ]
+}

electron/src/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "types": [
+      "node",
+      "jquery",
+      "core-js",
+      "select2",
+      "electron",
+      "usb"
+    ]
+  },
+  "exclude": [
+    "../dist",
+    "electron-main.ts",
+    "webpack.config.*"
+  ]
+}

electron/src/webpack.config.electron-main.js

@@ -5,12 +5,12 @@ var path = require('path');
 var rootDir = path.resolve(__dirname, '../');
 
 module.exports = {
-    entry: ['./src/electron-main.ts'],
+    entry: [ path.resolve(rootDir, 'src/electron-main.ts')],
     output: {
         path: rootDir + "/dist",
         filename: "electron-main.js"
     },
-    target: 'electron',
+    target: 'electron-main',
     devtool: 'source-map',
     resolve: {
         extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
@@ -18,7 +18,7 @@ module.exports = {
     },
     module: {
         loaders: [
-            { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
+            { test: /\.ts$/, loader: 'ts-loader?' + JSON.stringify({ configFileName: 'tsconfig-electron-main.json' }), exclude: /node_modules/ },
     ]},
     plugins: [
         //   new webpack.optimize.UglifyJsPlugin({ minimize: true })

electron/src/webpack.config.js

@@ -0,0 +1,94 @@
+var webpack = require("webpack");
+var SvgStore = require('webpack-svgstore-plugin');
+var webpackFailPlugin = require('webpack-fail-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
+var path = require('path');
+var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
+
+var rootDir = path.resolve(__dirname, '../');
+
+module.exports = {
+    entry: {
+        polyfills: path.resolve(rootDir, 'src/shared/polyfills.ts'),
+        vendor: path.resolve(rootDir, 'src/shared/vendor.ts'),
+        app: path.resolve(rootDir, 'src/main.ts')
+    },
+    output: {
+        path: rootDir + "/dist",
+        filename: "[name].uhk.js"
+    },
+    target: 'electron-renderer',
+    externals: {
+        usb: 'usb'
+    },
+    devtool: 'source-map',
+    resolve: {
+        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
+        modules: [path.join(rootDir, "node_modules")],
+        alias: {
+            jquery: 'jquery/dist/jquery.min.js',
+            select2: 'select2/dist/js/select2.full.min.js'
+        }
+    },
+    module: {
+        loaders: [
+            { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
+            { test: /\.html$/, loader: 'html-loader?attrs=false' },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                loaders: ['raw-loader', 'sass-loader']
+            },
+            { test: /jquery/, loader: 'expose?$!expose?jQuery' },
+            { test: require.resolve("usb"), loader: "expose?usb" }
+        ]
+    },
+    plugins: [
+        //   new webpack.optimize.UglifyJsPlugin({ minimize: true })
+        new SvgStore({
+            svgoOptions: {
+                plugins: [
+                    { removeTitle: true }
+                ]
+            }
+        }),
+        webpackFailPlugin,
+        new CopyWebpackPlugin(
+            [
+                { from: './electron/src/**/*.html', flatten: true },
+                { from: './electron/src/**/*.js', flatten: true },
+                {
+                    from: 'node_modules/font-awesome/css/font-awesome.min.css',
+                    to: 'vendor/font-awesome/css/font-awesome.min.css'
+                },
+                {
+                    from: 'node_modules/font-awesome/fonts',
+                    to: 'vendor/font-awesome/fonts'
+                },
+                {
+                    from: 'node_modules/bootstrap/dist/',
+                    to: 'vendor/bootstrap'
+                },
+                {
+                    from: 'images',
+                    to: 'images'
+                },
+                {
+                    from: 'node_modules/usb',
+                    to: 'vendor/usb'
+                }
+            ],
+            {
+                ignore: ['*.config.js']
+            }
+        ),
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery"
+        }),
+        new CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        })
+    ]
+
+}

package.json

@@ -61,14 +61,19 @@
     "zone.js": "0.7.6"
   },
   "scripts": {
-    "postinstall": "electron-rebuild -w usb -p",
+    "postinstall": "run-p build:usb \"symlink -- -i\" ",
-    "tslint": "tslint \"src/**/*.ts\" \"test-serializer/**/*.ts\"",
+    "tslint": "tslint \"electron/**/*.ts\" \"web/**/*.ts\" \"shared/**/*.ts\" \"test-serializer/**/*.ts\"",
-    "stylelint": "stylelint \"src/**/*.scss\" --syntax scss",
+    "stylelint": "stylelint \"electron/**/*.scss\" \"web/**/*.scss\" \"shared/**/*.scss\" --syntax scss",
     "lint": "run-s -scn tslint stylelint",
-    "build": "webpack --config \"src/webpack.config.js\"",
+    "build": "run-p build:web build:electron",
-    "build:electron": "webpack --config \"src/webpack.config.electron.js\"",
+    "build:web": "webpack --config \"web/src/webpack.config.js\"",
+    "build:electron": "run-s -scn build:electron:main build:electron:app",
+    "build:electron:main": "webpack --config \"electron/src/webpack.config.electron-main.js\"",
+    "build:electron:app": "webpack --config \"electron/src/webpack.config.js\"",
+    "build:usb": "electron-rebuild -w usb -p",
     "build:test": "webpack --config \"test-serializer/webpack.config.js\"",
-    "dev": "webpack-dev-server --config \"src/webpack.config.js\" --content-base \"./dist\"",
+    "dev": "webpack-dev-server --config \"web/src/webpack.config.js\" --content-base \"./web/dist\"",
-    "electron": "electron dist/electron-main.js"
+    "electron": "electron electron/dist/electron-main.js",
+    "symlink": "node ./tools/symlinker"
   }
 }

shared/src/components/keymap/edit/keymap-edit.component.ts

@@ -0,0 +1,44 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import '@ngrx/core/add/operator/select';
+import { Store } from '@ngrx/store';
+
+import 'rxjs/add/operator/let';
+import 'rxjs/add/operator/publishReplay';
+import 'rxjs/add/operator/switchMap';
+import { Observable } from 'rxjs/Observable';
+
+import { Keymap } from '../../../config-serializer/config-items/Keymap';
+import { AppState } from '../../../store';
+import { getKeymap, getKeymapEntities } from '../../../store/reducers/keymap';
+
+@Component({
+    selector: 'keymap-edit',
+    template: require('./keymap-edit.component.html'),
+    styles: [require('./keymap-edit.component.scss')],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class KeymapEditComponent {
+
+    protected keymap$: Observable<Keymap>;
+    private deletable$: Observable<boolean>;
+
+    constructor(
+        private store: Store<AppState>,
+        private route: ActivatedRoute
+    ) {
+        this.keymap$ = route
+            .params
+            .select<string>('abbr')
+            .switchMap((abbr: string) => store.let(getKeymap(abbr)))
+            .publishReplay(1)
+            .refCount();
+
+        this.deletable$ = store.let(getKeymapEntities())
+            .map((keymaps: Keymap[]) => keymaps.length > 1);
+    }
+
+}

shared/src/components/keymap/header/keymap-header.component.scss

@@ -1,4 +1,4 @@
-@import '../../../main-app/global-styles';
+@import '../../../global-styles';
 
 :host {
     display: block;

shared/src/components/keymap/index.ts

@@ -1,4 +1,3 @@
-export * from './keymap.routes';
 export * from './add/keymap-add.component';
 export * from './edit/keymap-edit.component';
 export * from './header/keymap-header.component';

shared/src/components/macro/action-editor/macro-action-editor.component.scss

@@ -1,4 +1,4 @@
-@import '../../../main-app/global-styles';
+@import '../../../global-styles';
 
 :host {
     display: block;

shared/src/components/macro/header/macro-header.component.scss

@@ -1,4 +1,4 @@
-@import '../../../main-app/global-styles';
+@import '../../../global-styles';
 
 .macro {
     &__remove {

shared/src/components/macro/item/macro-item.component.scss

@@ -1,4 +1,4 @@
-@import '../../../main-app/global-styles';
+@import '../../../global-styles';
 
 :host {
     overflow: hidden;

shared/src/components/macro/list/macro-list.component.scss

@@ -1,4 +1,4 @@
-@import '../../../main-app/global-styles';
+@import '../../../global-styles';
 
 :host {
     display: flex;