Seperate electron and web target building

web/src/.gitignore

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

web/src/app.module.ts

@@ -0,0 +1,163 @@
+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, KeymapEditComponent, KeymapHeaderComponent } from './shared/components/keymap';
+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 { 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
+    ],
+    bootstrap: [MainAppComponent]
+})
+export class AppModule { }

web/src/components/keymap/index.ts

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

web/src/components/keymap/keymap.routes.ts

@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+
+import { KeymapAddComponent } from '../../shared/components/keymap/add/keymap-add.component';
+import { KeymapEditComponent, 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
+    }
+];

web/src/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Ultimate Hacking Keyboard Configurator</title>
+        <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+        <link rel="shortcut icon" href="images/favicon.ico">
+        <script src="polyfills.uhk.js"></script>
+        <script src="vendor.uhk.js"></script>
+    </head>
+    <body>
+        <!-- Google Tag Manager -->
+        <noscript>
+            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQLCXB" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+        </noscript>
+        <script>
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-PQLCXB');
+        </script>
+        <!-- End Google Tag Manager -->
+
+        <main-app></main-app>
+
+        <script src="app.uhk.js"></script> <!-- This should be moved to the head -->
+    </body>
+</html>

web/src/main-app/index.ts

@@ -0,0 +1,2 @@
+export * from './main-app.component';
+export * from './main-app.routes';

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

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

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

@@ -0,0 +1,18 @@
+import { ModuleWithProviders } from '@angular/core';
+import { RouterModule, Routes }  from '@angular/router';
+
+import { addOnRoutes } from '../shared/components/add-on';
+import { keymapRoutes } from '../components/keymap';
+import { macroRoutes } from '../shared/components/macro';
+import { settingsRoutes } from '../shared/components/settings';
+
+const appRoutes: Routes = [
+    ...keymapRoutes,
+    ...macroRoutes,
+    ...addOnRoutes,
+    ...settingsRoutes
+];
+
+export const appRoutingProviders: any[] = [ ];
+
+export const routing: ModuleWithProviders =  RouterModule.forRoot(appRoutes, { useHash: true });

web/src/main.ts

@@ -0,0 +1,9 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+if (!process.stdout) {
+    process.stdout = require('browser-stdout')();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

web/src/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "config-serializer"
+  ]
+}

web/src/webpack.config.js

@@ -0,0 +1,85 @@
+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, '../');
+console.log(rootDir, __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"
+    },
+    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' }
+        ]
+    },
+    plugins: [
+        //   new webpack.optimize.UglifyJsPlugin({ minimize: true })
+        new SvgStore({
+            svgoOptions: {
+                plugins: [
+                    { removeTitle: true }
+                ]
+            }
+        }),
+        webpackFailPlugin,
+        new CopyWebpackPlugin(
+            [
+                { from: './web/src/index.html', 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'
+                },
+            ],
+            {
+                ignore: ['*.config.js']
+            }
+        ),
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery"
+        }),
+        new CommonsChunkPlugin({
+            name: ['app', 'vendor', 'polyfills']
+        })
+    ]
+
+}