Add Hot Swap for JavaScript modules

ryanmcdermott · ryanmcdermott · commit 8954684cb329 · 2022-12-31T16:25:22.000-08:00
diff --git a/README.md b/README.md
@@ -7,6 +7,7 @@ use.
 ## Features
 
 *   Live-reload via `ibazel` and a custom live-reload script.
+*   Hot swappable JavaScript modules.
 *   Custom routes for any dependency in the BUILD rule's `data` attribute.
 
 ## Pre-requisites
@@ -68,3 +69,13 @@ ibazel run //:serve
 ```
 
 Whenever a file in the `data` attribute is changed, the server will be live-reloaded.
+
+## Hot Swap JavaScript Modules.
+
+To hot swap a JavaScript module, add the a data attribute on the `<script>` tag in the HTML file. For example:
+
+```
+<script type="module" data-hot-swap="true" src="/scripts/bundle.js"></script>
+```
+
+When the server is live-reloaded, the browser will hot swap the JavaScript module, and the hot page itself will not reload.
diff --git a/devserver/devserver_loader.js b/devserver/devserver_loader.js
@@ -1,3 +1,18 @@
+function maybeReplaceJavaScript(src) {
+    const script = document.querySelector(`script[src="${src}"]`);
+    if (script) {
+        const newScript = document.createElement("script");
+        newScript.src = src;
+        newScript.dataset.hotSwap = "true";
+        script.parentNode.replaceChild(newScript, script);
+    }
+}
+
+function liveReload(path) {
+    console.log("Reloading due to change in " + path);
+    window.location.reload();
+}
+
 setInterval(() => {
     fetch("/devserver/manifest")
         .then(function (response) {
@@ -9,11 +24,21 @@ setInterval(() => {
                 return;
             }
 
-            for (let key in manifest) {
-                if (manifest[key] !== __DEVSERVER_MANIFEST__[key]) {
-                    console.log("Reloading due to change in " + key);
-                    window.location.reload();
+            for (const path in manifest) {
+                if (manifest[path] !== __DEVSERVER_MANIFEST__[path]) {
+                    if (path.endsWith(".js")) {
+                        let script = document.querySelector(`script[src="${path}"]`);
+                        if (script && script.dataset.hotSwap === "true") {
+                            maybeReplaceJavaScript(path);
+                            __DEVSERVER_MANIFEST__ = manifest;
+                        } else {
+                            liveReload(path);
+                        }
+                    } else {
+                        liveReload(path);
+                    }
                 }
             }
         })
 }, 1000);
+
diff --git a/examples/js_serve/BUILD b/examples/js_serve/BUILD
@@ -1,8 +1,14 @@
 load("//devserver:defs.bzl", "devserver")
 
 filegroup(
-    name = "hello_world",
-    srcs = ["hello_world.js"],
+    name = "hot_swap",
+    srcs = ["hot_swap.js"],
+    visibility = ["//visibility:public"],
+)
+
+filegroup(
+    name = "counter",
+    srcs = ["counter.js"],
     visibility = ["//visibility:public"],
 )
 
@@ -18,8 +24,9 @@ devserver(
     workspace_name = "rules_devserver",
     static_files = {
         "/": [":index", "index.html"],
-        "/js/hello_world.js": [":hello_world", "hello_world.js"]
+        "/js/hot_swap.js": [":hot_swap", "hot_swap.js"],
+        "/js/counter.js": [":counter", "counter.js"]
     },
     debug = True,
-    data = [":index", ":hello_world"]
+    data = [":index", ":hot_swap", ":counter"]
 )
diff --git a/examples/js_serve/counter.js b/examples/js_serve/counter.js
@@ -0,0 +1,11 @@
+(function () {
+    const container = document.getElementById('counter-container');
+    if (container) {
+        let count = 0;
+        container.innerHTML = `Count: ${count}`;
+        setInterval(() => {
+            count++;
+            container.innerHTML = `Count: ${count}`;
+        }, 1000);
+    }
+})();
diff --git a/examples/js_serve/hello_world.js b/examples/js_serve/hello_world.js
diff --git a/examples/js_serve/hot_swap.js b/examples/js_serve/hot_swap.js
@@ -0,0 +1,6 @@
+(function () {
+    const container = document.getElementById('hot-swap-container');
+    if (container) {
+        container.innerHTML = 'Filled by hot_swap.js';
+    }
+})();
diff --git a/examples/js_serve/index.html b/examples/js_serve/index.html
@@ -2,11 +2,13 @@
 
 <head>
     <title>JavaScript Serve Example</title>
-    <script defer src="/js/hello_world.js"></script>
+    <script defer src="/js/hot_swap.js" data-hot-swap="true"></script>
+    <script defer src="/js/counter.js"></script>
 </head>
 
 <body>
     <h1>JavaScript Serve Example</h1>
-    <div id="container"></div>
+    <div id="hot-swap-container"></div>
+    <div id="counter-container"></div>
 
 </html>
