@lwrjs/client-modules 0.7.0-alpha.13 → 0.7.0-alpha.16

package/build/modules/lwr/hmr/hmr.js

@@ -34,14 +34,44 @@ function viewUpdate(payload, metadata) {
     }
 }
 
+async function waitForSuccessfulPing(socketUrl) {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        try {
+            // Fetching for the socket URL reject with a network error if not available. If the dev
+            // server comes back online, it resolve with 404 HTTP response.
+            await fetch(`http://${socketUrl}`);
+            break;
+        } catch (error) {
+            await new Promise((resolve) => setTimeout(resolve, 1_000));
+        }
+    }
+}
+
 export function initHMR(serverURI = '', metadata) {
     const normalizedMeta = {
         ...{ assetReferences: [], templates: [] },
         ...metadata,
     };
+
     // {apiVersion}/hmr/{format}/{compat}?debug
     const host = serverURI.startsWith('/') ? location.host : '';
-    const socket = new WebSocket(`ws://${host}${serverURI}`);
+    const socketUrl = `${host}${serverURI}`;
+
+    const socket = new WebSocket(`ws://${socketUrl}`);
+
+    socket.addEventListener('close', async (evt) => {
+        // Don't do anything is the socket close event was initiated by the client.
+        if (evt.wasClean) {
+            return;
+        }
+
+        // Otherwise wait until the server comes back online and reload the page.
+        console.log('Lost connection with server, start polling...');
+        await waitForSuccessfulPing(socketUrl);
+        location.reload();
+    });
+
     socket.addEventListener('message', async ({ data }) => {
         const { eventType, payload } = JSON.parse(data);