Enhancement: Live reloading

[nhrones]

I have a simple dev-server called Hot. https://jsr.io/@ndh/hot
It auto builds on src change, and hot-reloads the browser.
On start, it auto-opens the browser with the url : port being served.

I really like dsbuild and think a browser-launch feature would be a great enhancement:
https://jsr.io/@ndh/hot/1.1.5/browser.ts

/**
 * Open a web page with the appropriate browser.
 * 
 * This utility is used by a few dev-servers to 
 * auto-launch the browser with the url being served.
 * @module
 */

/**
 * Get a browser open command based on the os
 * @returns the string for the command to call
 */
function getBrowserCmd(): string {
    switch (Deno.build.os) {
       case "windows":
          return "explorer.exe";
       case "darwin":
          return "open";
       case "linux":
          if (Deno.env.get("WSL_DISTRO_NAME")) {
             // is WSL
             return "explorer.exe";
          } else {
             return "xdg-open";
          }
       default:
          return "Unknown os" 
     }
 }
 
 /**
  * Opens a URL in the default browser
  * 
  * @param url  - the complete url to be opened in the browser
  * 
  * @examples 
  *    openWebsite('https://Deno.com')
  *    openWebsite('http://localhost:8080')
  */
 export function openWebsite(url: string): Deno.CommandOutput {
    return new Deno.Command(getBrowserCmd(), 
    { args: [url] }).outputSync();
 }

USAGE: bottom of my server:
https://jsr.io/@ndh/hot/1.1.5/server.ts

import {  openWebsite } from "./browser.ts"
// ....
// ....
// ....  bottom of my server
// launch the browser with our url
openWebsite(`http://localhost:${cfg.Port}`)

[mattvr]

Hey @nhrones this is a good idea and I just added to the latest version. You can pass --launch-browser now.

[nhrones]

Thanks, After looking this over, I think I'll retire my Hot-server and just use dsBuild. Did you notice how I Hot-Refresh the browser without mutating the index.html? Feel free to use if you wish. A CSS change simple reloads styles without refreshing the page. Makes style changes very easy while maintaining page state.

[mattvr]

@nhrones Yeah! That's a great way develop live.

If you want to keep that hot reloading behavior and use dsbuild, for now you can include a script tag for https://livejs.com/ which does the same CSS reloading logic.

[nhrones]

I'm hot reloading any file change without disturbing the index.html file. I inject a temporary script that communicates with the server via WebSocket.
The following script is injected into the index.html when it is served:

<script type=module id="hot">
   const hotSocket = () => {
      console.log("HOT CONNECTING")
      const socket = new WebSocket(location.origin.replace("http", "ws"))
      socket.onopen = () => console.log("HOT CONNECTED")
      socket.onerror = () => console.log("HOT DISCONNECTED")
      socket.onmessage = (e) => {
         const action = e.data
         console.log("hotSocket recieved action -> ", action)
         if (action === "refreshcss") {
            console.log("Refreshing CSS")
            const sheets = [].slice.call(document.getElementsByTagName("link"))
            const head = document.getElementsByTagName("head")[0]
            for (let i = 0; i < sheets.length; ++i) {
               const elem = sheets[i]
               const parent = elem.parentElement || head
               parent.removeChild(elem)
               parent.appendChild(elem)
            }
         } else if (action === "reload") {
            console.log("Reload requested! ")
            globalThis.location.reload()
         }
      }
   }
   hotSocket()
   </script>

Note that the index.html file is never changed! We just add the text to the response body. When the browser page closes, that injected text is automatically disposed.

Below, the server watches the /src/ and /dist/ folder for changes, and messages the client hotSocket to refresh appropriately.

The server looks like this (note the required debounce logic):

// Watch for file changes in selected folders
const fileWatch = Deno.watchFs(cfg.Watch);  // ["src", "dist"]

// handles all file changes for Hot refresh
const handleFileChange = debounce(
   (event: Deno.FsEvent) => {
      const { kind, paths } = event
      const path = paths[0]
      if (DEV) console.log(`Handling file change: [${kind}]    ${path}`)

      // src changed? -- build and bundle
      if (path.includes(cfg.Watch[0])) {   // /src/  changed
            buildIt(cfg).then(() => {
            if (DEV) console.log('Built bundle.js!')
         }).catch((err: any) => {
            console.info('build err - ', err)
         })
      }
      // web app changed (.js, .css or .html has changed)
      else {
         // trigger Hot action
         const action = (path.endsWith("css"))
            ? 'refreshcss'
            : 'reload';

         if (hotSocket && hotSocket.readyState === 1) { // 1 = open
            if (DEV) console.log(`Action[${action}]  sent to client!`)
            hotSocket.send(action)
         }
      }
   }, 400,
);

// finally, we watch and handle any file change events
for await (const event of fileWatch) {
   handleFileChange(event)
}

That's all that is required to hot-rebuild/refresh!

In the server, we inject the hotsocket <script> tag like so:

         // We intercept the index.html request so that we can
         // inject our hot-refresh service script into it.
         if (isIndexHtml) {
            // inject our hot refresh script
            const body = await inject(fullPath)
            // create appropriate headers    
            const headers = new Headers()
            headers.set("content-type", "text/html; charset=utf-8")
            // don't cache this - we expect frequent dev changes
            headers.append("Cache-Control", "no-store")
            return new Response(body, { status: 200, headers });
         } else { // a file request other than index.html
            // find the file and return it in the response
            const responce = await serveFile(request, fullPath)
            responce.headers.append("Cache-Control", "no-store")
            return responce
         }

[mattvr]

Reopening so we can add the live reloading to an upcoming version of dsbuild.

[TriMoon]

Cool idea to inject the live reload functionality, but i REALLY hope you will do the injection inside the <head> of the html instead of the <body> like most do...