Fix typescript watch script

2 files changed, 56 insertions, 35 deletions

diff --git a/gui/packages/desktop/package.json b/gui/packages/desktop/package.json
index 37e360b76b..b3e658dd8a 100644
--- a/gui/packages/desktop/package.json
+++ b/gui/packages/desktop/package.json
@@ -68,6 +68,7 @@
     "rimraf": "^2.5.4",
     "sinon": "^7.1.1",
     "ts-node": "^7.0.1",
+    "tsc-watch": "^2.1.1",
     "tslint": "^5.12.1",
     "typescript": "^3.3.3"
   },
@@ -75,7 +76,7 @@
     "postinstall": "electron-builder install-app-deps",
     "build": "run-s private:clean private:copy-assets private:compile",
     "lint": "tslint -t stylish -p .",
-    "develop": "cross-env run-s private:copy-assets private:compile:dev && run-p -r private:watch private:serve",
+    "develop": "cross-env run-s private:copy-assets private:watch",
     "test": "electron-mocha --renderer -R spec --require ts-node/register --require-main ts-node/register --require-main \"test/setup/main.ts\" --preload \"test/setup/renderer.ts\" \"test/*.spec.ts\" \"test/**/*.spec.ts\" \"test/**/*.spec.tsx\" || true",
     "pack:mac": "run-s build private:build:mac private:postbuild:mac",
     "pack:win": "run-s build private:build:win",
@@ -89,10 +90,8 @@
     "private:assets:main": "cross-env mkdir -p ./build/assets && cp -R ./assets ./build",
     "private:assets:html": "cross-env mkdir -p ./build/src/renderer && cp ./src/renderer/index.html ./build/src/renderer",
     "private:assets:css": "cross-env mkdir -p ./build/src/renderer/components && cp ./src/renderer/components/*.css ./build/src/renderer/components",
-    "private:watch": "cross-env yarn run private:compile:dev --watch --preserveWatchOutput",
-    "private:serve": "cross-env node scripts/serve.js",
+    "private:watch": "cross-env node \"scripts/serve.js\"",
     "private:compile": "tsc",
-    "private:compile:dev": "tsc --sourceMap",
     "private:clean": "rimraf build"
   }
 }
diff --git a/gui/packages/desktop/scripts/serve.js b/gui/packages/desktop/scripts/serve.js
index effbc93446..10c0cd2086 100644
--- a/gui/packages/desktop/scripts/serve.js
+++ b/gui/packages/desktop/scripts/serve.js
@@ -1,8 +1,9 @@
 const { spawn } = require('child_process');
+const path = require('path');
+const TscWatchClient = require('tsc-watch/client');
 const electron = require('electron');
 const browserSync = require('browser-sync');
 const browserSyncConnectUtils = require('browser-sync/dist/connect-utils');
-
 const bsync = browserSync.create();
 
 const getRootUrl = (options) => {
@@ -26,8 +27,7 @@ function runElectron(browserSyncUrl) {
     },
     stdio: 'inherit',
   });
-
-  child.on('close', onCloseElectron);
+  child.once('close', onCloseElectron);
 
   return child;
 }
@@ -36,37 +36,59 @@ function onCloseElectron() {
   process.exit();
 }
 
-bsync.init(
-  {
-    ui: false,
-    // Port 35829 = LiveReload's default port 35729 + 100.
-    // If the port is occupied, Browsersync uses next free port automatically.
-    port: 35829,
-    ghostMode: false,
-    open: false,
-    notify: false,
-    logSnippet: false,
-    socket: {
-      // Use the actual port here.
-      domain: getRootUrl,
+function startBrowserSync() {
+  bsync.init(
+    {
+      ui: false,
+      // Port 35829 = LiveReload's default port 35729 + 100.
+      // If the port is occupied, Browsersync uses next free port automatically.
+      port: 35829,
+      ghostMode: false,
+      open: false,
+      notify: false,
+      logSnippet: false,
+      socket: {
+        // Use the actual port here.
+        domain: getRootUrl,
+      },
+    },
+    (err, bs) => {
+      if (err) return console.error(err);
+
+      const browserSyncUrl = getClientUrl(bs.options);
+
+      let child = runElectron(browserSyncUrl);
+
+      bsync
+        .watch(['build/src/config.json', 'build/src/main/**/*', 'build/src/shared/**/*'])
+        .on('change', () => {
+          child.removeListener('close', onCloseElectron);
+          child.once('close', () => {
+            child = runElectron(browserSyncUrl);
+          });
+          child.kill();
+        });
+
+      bsync
+        .watch(['build/src/renderer/**/*', path.resolve('../components/build/**')])
+        .on('change', bsync.reload);
     },
-  },
-  (err, bs) => {
-    if (err) return console.error(err);
+  );
+}
 
-    const browserSyncUrl = getClientUrl(bs.options);
+function prepareWatchArguments(projectPath) {
+  return ['--noClear', '--sourceMap', '--project', projectPath];
+}
 
-    let child = runElectron(browserSyncUrl);
+const appWatcher = new TscWatchClient();
+const componentsWatcher = new TscWatchClient();
 
-    bsync
-      .watch(['build/src/config.json', 'build/src/main/**/*', 'build/src/shared/**/*'])
-      .on('change', () => {
-        child.removeListener('close', onCloseElectron);
-        child.kill();
+componentsWatcher.on('first_success', () => {
+  appWatcher.start(...prepareWatchArguments(path.resolve(__dirname, '..')));
+});
 
-        child = runElectron(browserSyncUrl);
-      });
+appWatcher.on('first_success', () => {
+  startBrowserSync();
+});
 
-    bsync.watch('build/src/renderer/**/*').on('change', bsync.reload);
-  },
-);
+componentsWatcher.start(...prepareWatchArguments(path.resolve(__dirname, '../../components')));