@lwrjs/client-modules 0.7.0-alpha.8 → 0.7.1

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

package/build/modules/lwr/initSsr/initSsr.js

@@ -10,18 +10,20 @@ export function toKebabCase(specifier) {
  * @param components - An array of arrays, each one holding:
  *                     0. a bare specifier
  *                     1. the corresponding LightningElement constructor
- *                     2. properties to set on the component
+ * @param ssrProps - map of properties to set on each component
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
  */
 
-export function init(components) {
+export function init(components, ssrProps = {}) {
   if (typeof document !== 'undefined') {
-    components.forEach(([moduleSpecifier, ctor, props]) => {
+    components.forEach(([moduleSpecifier, ctor]) => {
       // Kebab-case the specifier
       const elementName = toKebabCase(moduleSpecifier); // Find all instances of the component in the document, and hydrate them all
 
       const customElements = document.querySelectorAll(elementName);
       customElements.forEach(customElement => {
+        const propsId = customElement.dataset.lwrPropsId;
+        const props = ssrProps[propsId] || {};
         hydrateComponent(customElement, ctor, props);
       });
     });