From ae9380856f6b9357eb541b78f14d0961c06882a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Grabarz?= <frizi09@gmail.com>
Date: Tue, 22 Nov 2022 16:07:58 +0100
Subject: [PATCH] Remove unnecessary watcher in dev server (#3896)

---
 app/ide-desktop/lib/content/esbuild-config.ts | 18 ++++---
 app/ide-desktop/lib/content/src/index.html    |  5 +-
 app/ide-desktop/lib/content/watch.ts          |  8 ++-
 app/ide-desktop/lib/server/package.json       |  7 ++-
 app/ide-desktop/lib/server/src/index.mjs      | 49 +++++++++++--------
 app/ide-desktop/lib/server/src/live-reload.js |  9 ++++
 6 files changed, 60 insertions(+), 36 deletions(-)
 create mode 100644 app/ide-desktop/lib/server/src/live-reload.js

diff --git a/app/ide-desktop/lib/content/esbuild-config.ts b/app/ide-desktop/lib/content/esbuild-config.ts
index 1499b50ff7..eea68edf47 100644
--- a/app/ide-desktop/lib/content/esbuild-config.ts
+++ b/app/ide-desktop/lib/content/esbuild-config.ts
@@ -110,11 +110,6 @@ const config: esbuild.BuildOptions = {
     publicPath: '/assets',
     incremental: true,
     color: true,
-    watch: {
-        onRebuild(error, result) {
-            if (error) console.error('watch build failed:', error)
-        },
-    },
     logOverride: {
         // Happens in ScalaJS-generated parser (scala-parser.js):
         //    6 │   "fileLevelThis": this
@@ -134,8 +129,17 @@ const config: esbuild.BuildOptions = {
 /**
  * Spawn the esbuild watch process. It continuously runs, rebuilding the package.
  */
-export async function watch() {
-    return esbuild.build(config)
+export async function watch(onRebuild?: () => void, inject?: esbuild.BuildOptions['inject']) {
+    return esbuild.build({
+        ...config,
+        inject: [...(config.inject ?? []), ...(inject ?? [])],
+        watch: {
+            onRebuild(error, result) {
+                if (error) console.error('watch build failed:', error)
+                else onRebuild?.()
+            },
+        },
+    })
 }
 
 /**
diff --git a/app/ide-desktop/lib/content/src/index.html b/app/ide-desktop/lib/content/src/index.html
index e6a2469af7..b515b9b8ed 100644
--- a/app/ide-desktop/lib/content/src/index.html
+++ b/app/ide-desktop/lib/content/src/index.html
@@ -6,15 +6,12 @@
     <!-- FIXME https://github.com/validator/validator/issues/917 -->
     <!-- FIXME Security Vulnerabilities: https://github.com/enso-org/ide/issues/226 -->
     <!-- NOTE `frame-src` section of `http-equiv` required only for authorization -->
-    <!-- The sha-256 hash for `script-src` below is for the code injected by the live-server.
-         In case of bumping the server, it might need to be updated.
-         Fortunately, the error message gives an updated hash. -->
     <meta
       http-equiv="Content-Security-Policy"
       content="
             default-src 'self';
             frame-src   'self' data: https://accounts.google.com https://enso-org.firebaseapp.com;
-            script-src  'self' 'unsafe-eval' data: https://* 'sha256-iN7wpJdxHlpujRppkOA8N0+Mzp0ZqZr3lCtxM00Y63c=';
+            script-src  'self' 'unsafe-eval' data: https://*;
             style-src   'self' 'unsafe-inline' data: https://*;
             connect-src 'self' data: ws://localhost:* ws://127.0.0.1:* http://localhost:* https://*;
             worker-src  'self' blob:;
diff --git a/app/ide-desktop/lib/content/watch.ts b/app/ide-desktop/lib/content/watch.ts
index a3724bda04..7f3fb4de59 100644
--- a/app/ide-desktop/lib/content/watch.ts
+++ b/app/ide-desktop/lib/content/watch.ts
@@ -2,5 +2,9 @@ import bundler from './esbuild-config.js'
 // @ts-ignore
 import * as server from 'enso-gui-server'
 
-await bundler.watch()
-await server.start({ root: bundler.output_path, assets: bundler.output_path })
+await bundler.watch(() => liveServer?.reload(), [server.LIVE_RELOAD_LISTENER_PATH])
+
+const liveServer = await server.start({
+    root: bundler.output_path,
+    assets: bundler.output_path,
+})
diff --git a/app/ide-desktop/lib/server/package.json b/app/ide-desktop/lib/server/package.json
index eeeb692198..b674756459 100644
--- a/app/ide-desktop/lib/server/package.json
+++ b/app/ide-desktop/lib/server/package.json
@@ -16,7 +16,10 @@
     "url": "https://github.com/enso-org/enso/issues"
   },
   "dependencies": {
-    "live-server": "^1.2.2",
-    "portfinder": "^1.0.28"
+    "connect": "^3.7.0",
+    "morgan": "^1.10.0",
+    "portfinder": "^1.0.28",
+    "serve-static": "^1.15.0",
+    "ws": "^8.11.0"
   }
 }
diff --git a/app/ide-desktop/lib/server/src/index.mjs b/app/ide-desktop/lib/server/src/index.mjs
index f5e334ce55..1f5b7230e7 100644
--- a/app/ide-desktop/lib/server/src/index.mjs
+++ b/app/ide-desktop/lib/server/src/index.mjs
@@ -1,30 +1,37 @@
 import path from 'node:path'
-import liveServer from 'live-server'
-import * as portfinder from 'portfinder'
+import url from 'node:url'
+import portfinder from 'portfinder'
+import connect from 'connect'
+import { WebSocketServer } from 'ws'
+import serveStatic from 'serve-static'
+import logger from 'morgan'
 
 export const DEFAULT_PORT = 8080
 
-async function findPort(startPort = DEFAULT_PORT) {
-    return portfinder.getPortPromise({ startPort, port: startPort })
-}
+let dirname = path.dirname(url.fileURLToPath(import.meta.url))
+// Path of a file that needs to be injected into the bundle for live-reload to work.
+export const LIVE_RELOAD_LISTENER_PATH = path.join(dirname, 'live-reload.js')
 
 export async function start({ root, assets, port }) {
     assets = assets ?? path.join(root, 'assets')
-    const parameters = {
-        cors: true,
-        open: false, // When false, it won't load your browser by default.
-        // When set, serve this file (server root relative) for every 404 (useful for single-page
-        // applications).
-        file: '/assets/index.html',
-        wait: 0, // Waits for all changes, before reloading. Defaults to 0 sec.
-        logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
-        port: await findPort(port ?? DEFAULT_PORT),
-        root: root ?? '.',
-        assets,
-        mount: [['/assets', assets]], // Mount a directory to a route.
+
+    const freePort = await portfinder.getPortPromise({ port: port ?? DEFAULT_PORT })
+
+    const app = connect()
+        .use(logger('dev', { skip: (req, res) => res.statusCode < 400 }))
+        .use(serveStatic(root))
+        .use('/assets', serveStatic(assets))
+
+    const server = app.listen(freePort)
+    const wsServer = new WebSocketServer({ server, clientTracking: true, path: '/live-reload' })
+
+    var serverUrl = `http://localhost:${freePort}`
+    console.log('Serving %s', serverUrl)
+
+    return {
+        port: freePort,
+        reload() {
+            wsServer.clients.forEach(sock => sock.send('reload'))
+        },
     }
-    console.log(`Server configuration:`, parameters)
-    const server = liveServer.start(parameters)
-    console.log(`Server started.`)
-    return parameters.port
 }
diff --git a/app/ide-desktop/lib/server/src/live-reload.js b/app/ide-desktop/lib/server/src/live-reload.js
new file mode 100644
index 0000000000..ad2a84eb6d
--- /dev/null
+++ b/app/ide-desktop/lib/server/src/live-reload.js
@@ -0,0 +1,9 @@
+// This file is injected into every entry point, but it needs to run only once.
+// A global variable is used to ensure that.
+if (!window.live_reload_listening) {
+    window.live_reload_listening = true
+    const protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'
+    const address = protocol + window.location.host + '/live-reload'
+    const socket = new WebSocket(address)
+    socket.onmessage = msg => msg.data == 'reload' && window.location.reload()
+}