Fix typescript watch script

3 files changed, 85 insertions, 36 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')));
diff --git a/gui/yarn.lock b/gui/yarn.lock
index 29007dbd94..49679a0bd1 100644
--- a/gui/yarn.lock
+++ b/gui/yarn.lock
@@ -3308,7 +3308,7 @@ etag@1.8.1, etag@^1.8.1, etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
-event-stream@~3.3.0:
+event-stream@=3.3.4, event-stream@~3.3.0:
   version "3.3.4"
   resolved "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz#4ab4c9a0f5a54db9338b4c34d86bfce8f4b35571"
   integrity sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=
@@ -5538,6 +5538,11 @@ nise@^1.4.6:
     path-to-regexp "^1.7.0"
     text-encoding "^0.6.4"
 
+node-cleanup@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
+  integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
+
 node-fetch@^1.0.1, node-fetch@^1.3.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -6325,6 +6330,13 @@ ps-tree@^1.1.0:
   dependencies:
     event-stream "~3.3.0"
 
+ps-tree@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"
+  integrity sha512-0VnamPPYHl4uaU/nSFeZZpR21QAWRz+sRv4iW9+v/GS/J5U5iZB5BNN6J0RMoOvdx2gWM2+ZFMIm58q24e4UYA==
+  dependencies:
+    event-stream "=3.3.4"
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -7510,6 +7522,11 @@ stream-throttle@^0.1.3:
     commander "^2.2.0"
     limiter "^1.0.5"
 
+string-argv@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.1.1.tgz#66bd5ae3823708eaa1916fa5412703150d4ddfaf"
+  integrity sha512-El1Va5ehZ0XTj3Ekw4WFidXvTmt9SrC0+eigdojgtJMVtPkF0qbBe9fyNSl9eQf+kUHnTSQxdQYzuHfZy8V+DQ==
+
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -7848,6 +7865,17 @@ ts-node@^7.0.1:
     source-map-support "^0.5.6"
     yn "^2.0.0"
 
+tsc-watch@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/tsc-watch/-/tsc-watch-2.1.1.tgz#fdc140c31b496a3c7af7f9793ccea1346cc65069"
+  integrity sha512-YqCmAYV3KXd37L47iQqJAwaJq92u3amPOkQbNsJvm2AdjA4dgX9yT0PBkC8LJNAggJIO93uwi+w26HnH4XP1vQ==
+  dependencies:
+    cross-spawn "^5.1.0"
+    node-cleanup "^2.1.2"
+    ps-tree "^1.2.0"
+    string-argv "^0.1.1"
+    strip-ansi "^4.0.0"
+
 tslib@^1.8.0, tslib@^1.8.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"