Typescript: Add support for react

package.json

@@ -107,6 +107,7 @@
     "jest": "23.6.0",
     "jest-html-reporter": "2.4.2",
     "ncp": "2.0.0",
+    "react": "^16.6.0",
     "robotjs": "0.5.1",
     "selenium-webdriver": "3.6.0",
     "spectron": "5.0.0",
@@ -132,6 +133,7 @@
     "lodash.omit": "4.5.0",
     "lodash.pick": "4.4.0",
     "node-osascript": "2.1.0",
+    "react-dom": "^16.6.0",
     "ref": "1.3.5",
     "shell-path": "2.1.0",
     "winreg": "1.2.4"

src/browser/main.ts

@@ -8,6 +8,7 @@ import { autoLaunchInstance } from './auto-launch-controller';
 import setChromeFlags from './chrome-flags';
 import { config } from './config-handler';
 import { windowHandler } from './window-handler';
+import { createComponentWindow } from './window-utils';
 
 const allowMultiInstance: string | boolean = getCommandLineArgs(process.argv, '--multiInstance', true) || isDevEnv;
 const singleInstanceLock: boolean = allowMultiInstance ? true : app.requestSingleInstanceLock();
@@ -37,6 +38,8 @@ async function main() {
         await autoLaunchInstance.handleAutoLaunch();
     }
 
+    createComponentWindow('about-app');
+
     /**
      * Sets chrome flags from global config
      */

src/browser/window-utils.ts

@@ -0,0 +1,57 @@
+import { BrowserWindow } from 'electron';
+import * as url from 'url';
+import { windowHandler } from './window-handler';
+
+/**
+ * Creates components windows
+ *
+ * @param componentName
+ * @param opts
+ */
+export function createComponentWindow(
+    componentName: string,
+    opts?: Electron.BrowserWindowConstructorOptions): BrowserWindow {
+
+    const parent = windowHandler.getMainWindow() || undefined;
+    const options = {
+        center: true,
+        height: 300,
+        maximizable: false,
+        minimizable: false,
+        parent,
+        resizable: false,
+        show: false,
+        width: 300,
+        ...opts,
+    };
+
+    const browserWindow = new BrowserWindow(options);
+    browserWindow.on('ready-to-show', () => browserWindow.show());
+    browserWindow.setMenu(null as any);
+
+    const targetUrl = url.format({
+        pathname: require.resolve('../renderer/react-window.html'),
+        protocol: 'file',
+        query: { componentName },
+        slashes: true,
+    });
+
+    browserWindow.loadURL(targetUrl);
+    preventWindowNavigation(browserWindow);
+    return browserWindow;
+}
+
+/**
+ * Prevents window from navigating
+ * @param browserWindow
+ */
+export function preventWindowNavigation(browserWindow: Electron.BrowserWindow) {
+    const listener = (e: Electron.Event, winUrl: string) => {
+        if (browserWindow.isDestroyed()
+            || browserWindow.webContents.isDestroyed()
+            || winUrl === browserWindow.webContents.getURL()) return;
+        e.preventDefault();
+    };
+
+    browserWindow.webContents.on('will-navigate', listener);
+}

src/renderer/about-app.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+/**
+ * Window that display app version and copyright info
+ */
+export default class AboutBox extends React.Component {
+
+    private readonly eventHandlers = {
+        onSubmit: () => this.handleSubmit(),
+    };
+
+    constructor() {
+        super();
+    }
+
+    /**
+     * test
+     */
+    public handleSubmit(): void {
+        console.log('test');
+    }
+
+    /**
+     * main render function
+     */
+    public render() {
+        return (
+            <div className='content'>
+                <img className='logo' src='symphony-logo.png'/>
+                <span id='app-name' className='name'>Symphony</span>
+                <span id='version' className='version-text'/>
+                <span id='copyright' className='copyright-text' onclick={this.eventHandlers.onSubmit()}/>
+            </div>
+        );
+    }
+}

src/renderer/react-window.html

@@ -0,0 +1,39 @@
+<!--
+# Copyright 2018 . All Rights Reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+
+    <link rel="stylesheet" type="text/css" href="../renderer/styles/about-app.css" />
+</head>
+<body style="overflow: hidden; background-color: white; margin: 0">
+    <div id="Root"></div>
+</body>
+<script>
+    import * as React from 'react';
+    import * as ReactDOM from 'react-dom';
+    import { URL } from 'url';
+
+    const query = new URL(window.location.href).searchParams;
+    const componentName = query.get('component');
+    const componentPath = `../renderer/${componentName}`;
+
+    const component = require(componentPath)[componentName];
+    const element = React.createElement(component);
+    ReactDOM.render(element, document.getElementById('Root'));
+</script>
+</html>

src/renderer/styles/about-app.css

@@ -0,0 +1,35 @@
+html, body {
+    margin: 0;
+    height: 100%;
+    font-family: sans-serif;
+}
+.name {
+    flex: 1;
+    font-size: 1.3em;
+    padding: 10px;
+    font-weight: bold;
+}
+
+.version-text {
+    flex: 1;
+    font-size: 1em;
+    color: #2f2f2f;
+}
+
+.copyright-text {
+    flex: 1;
+    padding: 10px;
+    font-size: 0.6em;
+    color: #7f7f7f;
+}
+
+.content {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    padding-top: 20px
+}
+
+.logo {
+    margin: auto;
+}

tsconfig.json

@@ -3,6 +3,7 @@
     "module": "commonjs",
     "pretty": true,
     "target": "ES2016",
+    "jsx": "react",
     "lib": [
       "es2016",
       "dom"
@@ -13,7 +14,7 @@
     "preserveConstEnums": true,
     "sourceMap": true,
     "declaration": true,
-    "noImplicitAny": true,
+    "noImplicitAny": false,
     "noImplicitReturns": true,
     "suppressImplicitAnyIndexErrors": true,
     "strictNullChecks": true,