Remove unnecessary watcher in dev server (#3896)

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?.()
+            },
+        },
+    })
 }
 
 /**

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:;

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,
+})

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"
   }
 }

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
 }

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()
+}