Merge pull request oliverschwendener#7 from olivereisenhut/migration-…

…to-typescript

Move renderer.js to typescript

.gitignore

@@ -1,8 +1,5 @@
-#Transpiled js files
-src/js
-
-#Compiled css files
-src/styles/css
+#Compiled files
+build/
 
 #Packaged apps
 dist/

gulpfile.js

@@ -6,7 +6,7 @@ const sourceFiles = {
 }
 
 const outputFolders = {
-    css: './src/styles/css',
+    css: './build/styles/css',
 }
 
 gulp.task('styles', () => {

src/main.html → main.html

@@ -45,9 +45,7 @@
         </div>
     </div>
 
-    <script src="./../node_modules/vue/dist/vue.min.js"></script>
-    <script src="./renderer.js"></script>
-
+    <script src="./build/js/renderer.js"></script>
 </body>
 
 </html>

package.json

@@ -8,12 +8,13 @@
     "url": "https://github.com/oliverschwendener"
   },
   "description": "A cross-platform alt+space launcher",
-  "main": "src/js/main.js",
+  "main": "./build/js/main.js",
   "scripts": {
     "scss:watch": "./node_modules/.bin/gulp --watch",
     "tsc:watch": "./node_modules/.bin/tsc --watch",
     "build": "./node_modules/.bin/tsc && ./node_modules/.bin/gulp build",
     "start": "./node_modules/.bin/electron .",
+    "start:dev": "yarn build && yarn start",
     "dev": "./node_modules/.bin/electron . --enable-logging",
     "test:unit": "./node_modules/.bin/mocha -r ./node_modules/ts-node/register ./tests/unit/**/*.test.ts",
     "test:integration": "./node_modules/.bin/mocha -r ./node_modules/ts-node/register ./tests/integration/**/*.test.ts",

src/ts/main.ts

@@ -30,7 +30,7 @@ function createMainWindow(): void {
         backgroundColor: '#00000000',
     });
 
-    mainWindow.loadURL(`file://${__dirname}/../main.html`);
+    mainWindow.loadURL(`file://${__dirname}/../../main.html`);
     mainWindow.setSize(Config.windowWith, Config.minWindowHeight);
 
     mainWindow.on("close", quitApp);

src/renderer.js → src/ts/renderer.ts

@@ -1,21 +1,22 @@
-let os = require('os');
-let ipcRenderer = require('electron').ipcRenderer;
-let delayOnExecution = 50; // in milliseconds
+const Vue = require("vue/dist/vue.min.js")
+const os = require("os")
+const ipcRenderer = require("electron").ipcRenderer
+const delayOnExecution = 50; // in milliseconds
 
 document.addEventListener('keyup', handleGlobalKeyPress);
 
-let vue = new Vue({
+const vue = new Vue({
     el: '#vue-root',
     data: {
-        stylesheetPath: os.platform() === 'win32' ? './styles/css/windows.css' : './styles/css/mac.css',
+        stylesheetPath: os.platform() === 'win32' ? __dirname + '/build/styles/css/windows.css' : __dirname + '/build/styles/css/mac.css',
         userInput: '',
         autoFocus: true,
         searchIcon: '',
-        searchResults: [],
-        commandLineOutput: []
+        searchResults: Array<any>(),
+        commandLineOutput: Array<any>()
     },
     methods: {
-        handleKeyPress: (event) => {
+        handleKeyPress: (event: KeyboardEvent) => {
             if (event.key === 'Enter') {
                 handleEnterPress();
             }
@@ -40,35 +41,35 @@ let vue = new Vue({
         }
     },
     watch: {
-        userInput: (val) => {
+        userInput: (val:any) => {
             vue.commandLineOutput = [];
             ipcRenderer.send('get-search', val);
         }
     }
 });
 
-ipcRenderer.on('get-search-response', (event, arg) => {
+ipcRenderer.on('get-search-response', (event: Electron.Event, arg: any) => {
     updateSearchResults(arg);
 });
 
 ipcRenderer.send('get-search-icon');
 
-ipcRenderer.on('get-search-icon-response', (event, arg) => {
+ipcRenderer.on('get-search-icon-response', (event: Electron.Event, arg: any) => {
     vue.searchIcon = arg;
 });
 
-ipcRenderer.on("auto-complete-response", (event, arg) => {
+ipcRenderer.on("auto-complete-response", (event: Electron.Event, arg: any) => {
     vue.userInput = arg;
 });
 
-ipcRenderer.on('command-line-output', (event, arg) => {
+ipcRenderer.on('command-line-output', (event: Electron.Event, arg: any) => {
     vue.commandLineOutput.push(arg);
 });
 
-function updateSearchResults(searchResults) {
+function updateSearchResults(searchResults: any) {
     let idIndex = 0;
 
-    searchResults.forEach((s) => {
+    searchResults.forEach((s: any) => {
         s.id = `search-result-item-${idIndex}`;
         s.active = false;
         idIndex++;
@@ -85,7 +86,7 @@ function updateSearchResults(searchResults) {
     }
 }
 
-function changeActiveItem(direction) {
+function changeActiveItem(direction: any) {
     if (vue.searchResults.length === 0) {
         return;
     }
@@ -98,10 +99,11 @@ function changeActiveItem(direction) {
         }
     }
 
-    vue.searchResults.forEach((s) => {
+    vue.searchResults.forEach((s:any) => {
         s.active = false;
     });
 
+    if (next == undefined) return
     if (next < 0) {
         next = vue.searchResults.length - 1;
     }
@@ -113,8 +115,8 @@ function changeActiveItem(direction) {
     scrollIntoView(vue.searchResults[next]);
 }
 
-function scrollIntoView(searchResult) {
-    el = document.getElementById(searchResult.id);
+function scrollIntoView(searchResult: any) {
+    const el = document.getElementById(searchResult.id);
     if (el !== undefined && el !== null) {
         el.scrollIntoView();
     }
@@ -148,7 +150,7 @@ function handleAutoCompletion() {
 }
 
 function getActiveItem() {
-    let activeSearchResults = vue.searchResults.filter((s) => {
+    let activeSearchResults = vue.searchResults.filter((s: any) => {
         return s.active;
     });
 
@@ -157,20 +159,23 @@ function getActiveItem() {
     }
 }
 
-function execute(executionArgument) {
+function execute(executionArgument: any) {
     ipcRenderer.send('execute', executionArgument);
 }
 
 function resetUserInput() {
     vue.userInput = '';
 }
 
-function handleGlobalKeyPress(event) {
+function handleGlobalKeyPress(event: any) {
     if (event.key === 'F6' || (event.key === 'l' && event.ctrlKey)) {
         focusOnInput();
     }
 }
 
 function focusOnInput() {
-    document.getElementById('user-input').focus();
+    const userInput = document.getElementById('user-input')
+    if (userInput != null) {
+        userInput.focus()
+    }
 }

tsconfig.json

@@ -10,7 +10,7 @@
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "./src/js",                        /* Redirect output structure to the directory. */
+    "outDir": "./build/js",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */