Add browser reload on file change/rebuild

Add browser reload on file change/rebuild

lib/modules/code_generator/code/reload-on-change.js

@@ -0,0 +1,6 @@
+const ws = new WebSocket(`ws://${location.hostname}:${location.port}`);
+ws.addEventListener('message', (evt) => {
+  if(evt.data === 'outputDone') {
+    location.reload(true);
+  }
+});

lib/modules/code_generator/index.js

@@ -311,6 +311,7 @@ class CodeGenerator {
         code += self.generateCommunicationInitialization(true);
         code += self.generateStorageInitialization(true);
         code += self.generateNamesInitialization(true);
+        code += self.getReloadPageCode();
 
         next();
       },
@@ -324,6 +325,10 @@ class CodeGenerator {
     });
   }
 
+  getReloadPageCode() {
+    return this.env === 'development' ? fs.readFileSync(require('path').join(__dirname,'/code/reload-on-change.js'), 'utf8') : '';
+  }
+
   getEmbarkJsProviderCode() {
     return this.plugins.getPluginsFor('embarkjsCode').reduce((code, plugin) => (
       code += plugin.embarkjs_code.join('\n')

lib/modules/webserver/server.js

@@ -4,6 +4,7 @@ const {canonicalHost, defaultHost, dockerHostSwap} = require('../../utils/host')
 const express = require('express');
 const fs = require('../../core/fs');
 require('http-shutdown').extend();
+const webSocket = require('ws');
 
 class Server {
   constructor(options) {
@@ -33,6 +34,15 @@ class Server {
     this.app.use('/coverage', coverage);
     this.app.use(coverageStyle);
     
+    //this.wss = new webSocket.Server({server: this.server});
+    //this.events.on('outputDone', () => {
+    //  this.wss.clients.forEach((ws) => {
+    //    if (ws.readyState === webSocket.OPEN) {
+    //      ws.send('outputDone');
+    //    }
+    //  });
+    //});
+
     const self = this;
 
     async.waterfall([

lib/modules/webserver/templates/embark-building-placeholder.html.ejs

@@ -25,4 +25,12 @@
     </svg>
     <h1 class="loading-msg"><%- buildingMsg %></h1>
     </body>
+    <script>
+      const ws = new WebSocket(`ws://${location.hostname}:${location.port}`);
+      ws.addEventListener('message', (evt) => {
+        if(evt.data === 'outputDone') {
+          location.reload(true);
+        }
+      });
+    </script>
 </html>

npm-shrinkwrap.json

@@ -3957,11 +3957,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3979,11 +3981,13 @@
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4110,17 +4114,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -4137,6 +4144,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4220,6 +4228,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8741,7 +8750,7 @@
     "serve-static": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
-      "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
+      "integrity": "sha1-CV6Ecv1bRiN9tQzkhqQ/S4bGzsE=",
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -9708,6 +9717,18 @@
             "servify": "^0.1.12",
             "ws": "^3.0.0",
             "xhr-request-promise": "^0.1.2"
+          },
+          "dependencies": {
+            "ws": {
+              "version": "3.3.3",
+              "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+              "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+              "requires": {
+                "async-limiter": "~1.0.0",
+                "safe-buffer": "~5.1.0",
+                "ultron": "~1.1.0"
+              }
+            }
           }
         }
       }
@@ -10851,6 +10872,18 @@
             "servify": "^0.1.12",
             "ws": "^3.0.0",
             "xhr-request-promise": "^0.1.2"
+          },
+          "dependencies": {
+            "ws": {
+              "version": "3.3.3",
+              "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+              "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+              "requires": {
+                "async-limiter": "~1.0.0",
+                "safe-buffer": "~5.1.0",
+                "ultron": "~1.1.0"
+              }
+            }
           }
         },
         "underscore": {
@@ -11069,13 +11102,19 @@
       }
     },
     "ws": {
-      "version": "3.3.3",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-3.0.0.tgz",
-      "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+      "integrity": "sha1-mN2wAFbIOQy3Ued4h4hJf5kQO2w=",
       "requires": {
-        "async-limiter": "~1.0.0",
+        "safe-buffer": "~5.0.1",
-        "safe-buffer": "~5.1.0",
         "ultron": "~1.1.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
+          "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c="
+        }
       }
     },
     "xhr": {