@lwrjs/client-modules 0.17.2-alpha.9 → 0.18.0

package/build/bundle/prod/lwr/servicesESM/servicesESM.js

@@ -1,2 +1,2 @@
-const e=[];let o;const n=globalThis.LWR;n.define||n.env?globalThis.LWR=Object.freeze({define:n.define,env:n.env}):delete globalThis.LWR;const t={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(n){e.push(n),o||(o=new WebSocket(`ws://${location.host}`),o.addEventListener("message",(async({data:o})=>{const n=JSON.parse(o);if("moduleUpdate"===n.eventType){const{oldHash:o,newHash:t,module:{specifier:a}}=n.payload;for(let n=0;n<e.length;n++){if(null!==(0,e[n])({name:a,oldHash:o,newHash:t}))break}}})))},appMetadata:function(){const{appId:e,bootstrapModule:o,rootComponent:t,rootComponents:a}=n;return{appId:e,bootstrapModule:o,rootComponent:t,rootComponents:a}}(),addServerDataCallback:function(e){}};export{t as services};
+const e=[];let o;const n=globalThis,t=n.LWR;t.define||t.env?n.LWR=Object.freeze({define:t.define,env:t.env}):delete n.LWR;const a={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(n){e.push(n),o||(o=new WebSocket(`ws://${location.host}`),o.addEventListener("message",(async o=>{const n=o.data,t=JSON.parse(n);if("moduleUpdate"===t.eventType){const{oldHash:o,newHash:n,module:{specifier:a}}=t.payload;for(let t=0;t<e.length;t++){if(null!==(0,e[t])({name:a,oldHash:o,newHash:n}))break}}})))},appMetadata:function(){const{appId:e,bootstrapModule:o,rootComponent:n,rootComponents:a}=t;return{appId:e,bootstrapModule:o,rootComponent:n,rootComponents:a}}(),addServerDataCallback:function(e){}};export{a as services};
 //# sourceMappingURL=servicesESM.js.map

package/build/es/modules/lwr/init/init.js

@@ -12,19 +12,21 @@ function hydrateComponentProxy(customElement, Ctor, props) {
 }
 // </hydrateComponentProxy>
 const shouldYield = (() => {
+    const globalThisLWR = globalThis;
+    const { SSREnabled } = (globalThisLWR.LWR && globalThisLWR.LWR.env) || {};
     // eslint-disable-next-line lwr/no-unguarded-apis
-    if (!globalThis.performance) {
+    if (!globalThis.performance || !SSREnabled) {
         return () => false;
     }
     // Break up hydration tasks into timed batches.
     // Borrowed from https://tinyurl.com/5b4fw7eb
-    const HYDRATION_TASK_BATCH_DURATION = 50;
+    const TASK_BATCH_DURATION = 50;
     // eslint-disable-next-line lwr/no-unguarded-apis
     let timeOfLastYield = globalThis.performance.now();
     return () => {
         // eslint-disable-next-line lwr/no-unguarded-apis
         const now = globalThis.performance.now();
-        if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
+        if (now - timeOfLastYield > TASK_BATCH_DURATION) {
             timeOfLastYield = now;
             return true;
         }
@@ -72,49 +74,49 @@ export function init(rootModules, serverData = {}) {
         return;
     }
     logOperationStart({ id: INIT });
-    let index = 0;
-    // eslint-disable-next-line lwr/no-unguarded-apis
-    const document = globalThis.document;
-    for (const [specifier, ctor] of rootModules) {
-        const elementName = toKebabCase(specifier);
-        // initialize and inject the root module into the LWR Root or DOM if it is missing
+    (async () => {
+        let index = 0;
         // eslint-disable-next-line lwr/no-unguarded-apis
-        if (!document.body.querySelector(elementName)) {
-            logOperationStart({ id: INIT_MODULE, specifier, specifierIndex: ++index });
-            // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
-            const component = initializeWebComponent(elementName, ctor);
+        const document = globalThis.document;
+        for (const [specifier, ctor] of rootModules) {
+            if (shouldYield()) {
+                // Yield to the main thread during long hydration tasks
+                // eslint-disable-next-line no-await-in-loop
+                await yieldToMainThread();
+            }
+            const specifierIndex = ++index;
+            const elementName = toKebabCase(specifier);
+            // initialize and inject the root module into the LWR Root or DOM if it is missing
             // eslint-disable-next-line lwr/no-unguarded-apis
-            const container = document.querySelector('[lwr-root]');
+            if (!document.body.querySelector(elementName)) {
+                logOperationStart({ id: INIT_MODULE, specifier, specifierIndex });
+                // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
+                const component = initializeWebComponent(elementName, ctor);
+                // eslint-disable-next-line lwr/no-unguarded-apis
+                const container = document.querySelector('[lwr-root]');
+                // eslint-disable-next-line lwr/no-unguarded-apis
+                container ? container.appendChild(component) : document.body.appendChild(component);
+                logOperationEnd({
+                    id: INIT_MODULE,
+                    specifier,
+                    specifierIndex,
+                    metadata: { renderMode: 'spa' },
+                });
+                continue;
+            }
+            // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
             // eslint-disable-next-line lwr/no-unguarded-apis
-            container ? container.appendChild(component) : document.body.appendChild(component);
-            logOperationEnd({
-                id: INIT_MODULE,
-                specifier,
-                specifierIndex: index,
-                metadata: { renderMode: 'spa' },
-            });
-            continue;
-        }
-        // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
-        // eslint-disable-next-line lwr/no-unguarded-apis
-        const elements = document.querySelectorAll(elementName);
-        (async () => {
-            const specifierIndex = ++index;
+            const elements = document.querySelectorAll(elementName);
             for (const element of elements) {
                 logOperationStart({ id: INIT_MODULE, specifier, specifierIndex });
                 const propsId = element.dataset.lwrPropsId;
                 // hydrate SSR'd components
                 if (propsId) {
-                    if (shouldYield()) {
-                        // Yield to the main thread during long hydration tasks
-                        // eslint-disable-next-line no-await-in-loop
-                        await yieldToMainThread();
-                    }
                     hydrateComponentProxy(element, ctor, serverData[propsId] || {});
                     logOperationEnd({
                         id: INIT_MODULE,
                         specifier,
-                        specifierIndex: index,
+                        specifierIndex,
                         metadata: { renderMode: 'ssr' },
                     });
                     continue;
@@ -133,11 +135,14 @@ export function init(rootModules, serverData = {}) {
                     }
                 }
                 // save the children
-                while (element.firstChild) {
-                    component.appendChild(element.firstChild);
+                while (element.childNodes.length > 0) {
+                    component.appendChild(element.childNodes[0]);
                 }
                 // swap the element out with the initialized component
-                element.replaceWith(component);
+                const parent = element.parentElement;
+                if (parent) {
+                    parent.replaceChild(component, element);
+                }
                 logOperationEnd({
                     id: INIT_MODULE,
                     specifier,
@@ -145,8 +150,8 @@ export function init(rootModules, serverData = {}) {
                     metadata: { renderMode: 'csr' },
                 });
             }
-        })();
-    }
+        }
+    })();
     logOperationEnd({ id: INIT });
     logOperationStart({ id: BOOTSTRAP_END });
 }

package/build/es/modules/lwr/profiler/profiler.js

@@ -35,7 +35,7 @@ function getDetail(specifier, metadata) {
 // Fallback to the Performance API if there is no custom dispatcher
 export function logOperationStart({ id, specifier, specifierIndex, metadata }) {
     if (customDispatcher) {
-        customDispatcher({ id, phase: Phase.Start, specifier, metadata });
+        customDispatcher({ id, phase: Phase.Start, specifier, metadata, specifierIndex });
         return;
     }
     if (isPerfSupported) {
@@ -49,7 +49,7 @@ export function logOperationStart({ id, specifier, specifierIndex, metadata }) {
 /* istanbul ignore next */
 export function logOperationEnd({ id, specifier, specifierIndex, metadata }) {
     if (customDispatcher) {
-        customDispatcher({ id, phase: Phase.End, specifier, metadata });
+        customDispatcher({ id, phase: Phase.End, specifier, metadata, specifierIndex });
     }
     else if (isPerfSupported) {
         const markName = getMarkName(id, specifier, specifierIndex);

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

@@ -32,7 +32,10 @@ function updateStaleModule({ oldModule, newModule, specifier }) {
         swapStyle(oldModule.default[0], newModule.default[0]);
     } else {
         console.log(`Swapping JS for module "${specifier}"`);
-        swapComponent(oldModule.default, newModule.default);
+        const success = swapComponent(oldModule.default, newModule.default);
+        if (!success) {
+            window.location.reload();
+        }
     }
 }
 

package/build/modules/lwr/init/init.js

@@ -19,20 +19,25 @@ function hydrateComponentProxy(customElement, Ctor, props) {
 // </hydrateComponentProxy>
 
 const shouldYield = (() => {
+  const globalThisLWR = globalThis;
+  const {
+    SSREnabled
+  } = globalThisLWR.LWR && globalThisLWR.LWR.env || {};
+
   // eslint-disable-next-line lwr/no-unguarded-apis
-  if (!globalThis.performance) {
+  if (!globalThis.performance || !SSREnabled) {
     return () => false;
   }
 
   // Break up hydration tasks into timed batches.
   // Borrowed from https://tinyurl.com/5b4fw7eb
-  const HYDRATION_TASK_BATCH_DURATION = 50;
+  const TASK_BATCH_DURATION = 50;
   // eslint-disable-next-line lwr/no-unguarded-apis
   let timeOfLastYield = globalThis.performance.now();
   return () => {
     // eslint-disable-next-line lwr/no-unguarded-apis
     const now = globalThis.performance.now();
-    if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
+    if (now - timeOfLastYield > TASK_BATCH_DURATION) {
       timeOfLastYield = now;
       return true;
     }
@@ -86,43 +91,48 @@ export function init(rootModules, serverData = {}) {
   logOperationStart({
     id: INIT
   });
-  let index = 0;
-  // eslint-disable-next-line lwr/no-unguarded-apis
-  const document = globalThis.document;
-  for (const [specifier, ctor] of rootModules) {
-    const elementName = toKebabCase(specifier);
-
-    // initialize and inject the root module into the LWR Root or DOM if it is missing
+  (async () => {
+    let index = 0;
     // eslint-disable-next-line lwr/no-unguarded-apis
-    if (!document.body.querySelector(elementName)) {
-      logOperationStart({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: ++index
-      });
-
-      // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
-      const component = initializeWebComponent(elementName, ctor);
-      // eslint-disable-next-line lwr/no-unguarded-apis
-      const container = document.querySelector('[lwr-root]');
+    const document = globalThis.document;
+    for (const [specifier, ctor] of rootModules) {
+      if (shouldYield()) {
+        // Yield to the main thread during long hydration tasks
+        // eslint-disable-next-line no-await-in-loop
+        await yieldToMainThread();
+      }
+      const specifierIndex = ++index;
+      const elementName = toKebabCase(specifier);
+
+      // initialize and inject the root module into the LWR Root or DOM if it is missing
       // eslint-disable-next-line lwr/no-unguarded-apis
-      container ? container.appendChild(component) : document.body.appendChild(component);
-      logOperationEnd({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: index,
-        metadata: {
-          renderMode: 'spa'
-        }
-      });
-      continue;
-    }
+      if (!document.body.querySelector(elementName)) {
+        logOperationStart({
+          id: INIT_MODULE,
+          specifier,
+          specifierIndex
+        });
 
-    // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
-    // eslint-disable-next-line lwr/no-unguarded-apis
-    const elements = document.querySelectorAll(elementName);
-    (async () => {
-      const specifierIndex = ++index;
+        // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
+        const component = initializeWebComponent(elementName, ctor);
+        // eslint-disable-next-line lwr/no-unguarded-apis
+        const container = document.querySelector('[lwr-root]');
+        // eslint-disable-next-line lwr/no-unguarded-apis
+        container ? container.appendChild(component) : document.body.appendChild(component);
+        logOperationEnd({
+          id: INIT_MODULE,
+          specifier,
+          specifierIndex,
+          metadata: {
+            renderMode: 'spa'
+          }
+        });
+        continue;
+      }
+
+      // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
+      // eslint-disable-next-line lwr/no-unguarded-apis
+      const elements = document.querySelectorAll(elementName);
       for (const element of elements) {
         logOperationStart({
           id: INIT_MODULE,
@@ -133,16 +143,11 @@ export function init(rootModules, serverData = {}) {
 
         // hydrate SSR'd components
         if (propsId) {
-          if (shouldYield()) {
-            // Yield to the main thread during long hydration tasks
-            // eslint-disable-next-line no-await-in-loop
-            await yieldToMainThread();
-          }
           hydrateComponentProxy(element, ctor, serverData[propsId] || {});
           logOperationEnd({
             id: INIT_MODULE,
             specifier,
-            specifierIndex: index,
+            specifierIndex,
             metadata: {
               renderMode: 'ssr'
             }
@@ -169,12 +174,15 @@ export function init(rootModules, serverData = {}) {
         }
 
         // save the children
-        while (element.firstChild) {
-          component.appendChild(element.firstChild);
+        while (element.childNodes.length > 0) {
+          component.appendChild(element.childNodes[0]);
         }
 
         // swap the element out with the initialized component
-        element.replaceWith(component);
+        const parent = element.parentElement;
+        if (parent) {
+          parent.replaceChild(component, element);
+        }
         logOperationEnd({
           id: INIT_MODULE,
           specifier,
@@ -184,8 +192,8 @@ export function init(rootModules, serverData = {}) {
           }
         });
       }
-    })();
-  }
+    }
+  })();
   logOperationEnd({
     id: INIT
   });