@lwrjs/client-modules 0.17.2-alpha.3 → 0.17.2-alpha.30

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

@@ -1,26 +1,38 @@
 import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
 import { logOperationStart, logOperationEnd } from 'lwr/profiler';
 // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
+// eslint-disable-next-line lwr/only-allowed-imports
 import { createElement } from 'lwc';
 // <hydrateComponentProxy> - This code is removed in core
 // Note: a build step uses these comments to strip the code for core.
+// eslint-disable-next-line lwr/only-allowed-imports
 import { hydrateComponent } from 'lwc';
 function hydrateComponentProxy(customElement, Ctor, props) {
     hydrateComponent(customElement, Ctor, props);
 }
 // </hydrateComponentProxy>
-// Break up hydration tasks into timed batches.
-// Borrowed from https://tinyurl.com/5b4fw7eb
-const HYDRATION_TASK_BATCH_DURATION = 50;
-let timeOfLastYield = performance.now();
-function shouldYield() {
-    const now = performance.now();
-    if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
-        timeOfLastYield = now;
-        return true;
+const shouldYield = (() => {
+    const globalThisLWR = globalThis;
+    const { SSREnabled } = (globalThisLWR.LWR && globalThisLWR.LWR.env) || {};
+    // eslint-disable-next-line lwr/no-unguarded-apis
+    if (!globalThis.performance || !SSREnabled) {
+        return () => false;
     }
-    return false;
-}
+    // Break up hydration tasks into timed batches.
+    // Borrowed from https://tinyurl.com/5b4fw7eb
+    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 > TASK_BATCH_DURATION) {
+            timeOfLastYield = now;
+            return true;
+        }
+        return false;
+    };
+})();
 function initializeWebComponent(elementName, Ctor) {
     return createElement(elementName, { is: Ctor });
 }
@@ -56,84 +68,97 @@ export function getPropFromAttrName(propName) {
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
  */
 export function init(rootModules, serverData = {}) {
-    if (typeof customElements === 'undefined' || typeof document === 'undefined') {
+    // eslint-disable-next-line lwr/no-unguarded-apis
+    if (typeof globalThis.customElements === 'undefined' || typeof globalThis.document === 'undefined') {
         logOperationStart({ id: BOOTSTRAP_END });
         return;
     }
     logOperationStart({ id: INIT });
-    let index = 0;
-    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
-        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 container = document.querySelector('[lwr-root]');
-            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)
-        const elements = document.querySelectorAll(elementName);
-        for (const element of elements) {
-            logOperationStart({ id: INIT_MODULE, specifier, specifierIndex: ++index });
-            const propsId = element.dataset.lwrPropsId;
-            // hydrate SSR'd components
-            if (propsId) {
-                if (shouldYield()) {
-                    // give room for the browser to render during long hydration tasks
-                    setTimeout(() => {
-                        hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-                    }, 0);
-                }
-                else {
-                    hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-                }
+    (async () => {
+        let index = 0;
+        // eslint-disable-next-line lwr/no-unguarded-apis
+        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
+            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: index,
-                    metadata: { renderMode: 'ssr' },
+                    specifierIndex,
+                    metadata: { renderMode: 'spa' },
                 });
                 continue;
             }
-            // Note: due to the bug described at the top of this file, each CSR'd custom element
-            // must be replaced with the new synthetic constructor. Attributes and children are
-            // copied over to the new component.
-            const component = initializeWebComponent(elementName, ctor);
-            // copy the attributes
-            for (const { name, value } of element.attributes) {
-                component.setAttribute(name, value);
-                const prop = getPropFromAttrName(name);
-                if (prop in component) {
-                    // set attributes as properties for reactivity
-                    component[prop] = value;
+            // 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, specifier, specifierIndex });
+                const propsId = element.dataset.lwrPropsId;
+                // hydrate SSR'd components
+                if (propsId) {
+                    hydrateComponentProxy(element, ctor, serverData[propsId] || {});
+                    logOperationEnd({
+                        id: INIT_MODULE,
+                        specifier,
+                        specifierIndex,
+                        metadata: { renderMode: 'ssr' },
+                    });
+                    continue;
                 }
+                // Note: due to the bug described at the top of this file, each CSR'd custom element
+                // must be replaced with the new synthetic constructor. Attributes and children are
+                // copied over to the new component.
+                const component = initializeWebComponent(elementName, ctor);
+                // copy the attributes
+                for (const { name, value } of element.attributes) {
+                    component.setAttribute(name, value);
+                    const prop = getPropFromAttrName(name);
+                    if (prop in component) {
+                        // set attributes as properties for reactivity
+                        component[prop] = value;
+                    }
+                }
+                // save the children
+                while (element.childNodes.length > 0) {
+                    component.appendChild(element.childNodes[0]);
+                }
+                // swap the element out with the initialized component
+                const parent = element.parentElement;
+                if (parent) {
+                    parent.replaceChild(component, element);
+                }
+                logOperationEnd({
+                    id: INIT_MODULE,
+                    specifier,
+                    specifierIndex,
+                    metadata: { renderMode: 'csr' },
+                });
             }
-            // save the children
-            while (element.childNodes.length > 0) {
-                component.appendChild(element.childNodes[0]);
-            }
-            // swap the element out with the initialized component
-            const parent = element.parentElement;
-            if (parent) {
-                parent.replaceChild(component, element);
-            }
-            logOperationEnd({
-                id: INIT_MODULE,
-                specifier,
-                specifierIndex: index,
-                metadata: { renderMode: 'csr' },
-            });
         }
-    }
+    })();
     logOperationEnd({ id: INIT });
     logOperationStart({ id: BOOTSTRAP_END });
 }
+// Allows the browser to yield to the main thread during long-running tasks, improving responsiveness.
+async function yieldToMainThread() {
+    const scheduler = globalThis.scheduler;
+    // eslint-disable-next-line lwr/no-unguarded-apis
+    return scheduler?.yield ? scheduler.yield() : new Promise((resolve) => setTimeout(resolve, 0));
+}
 //# sourceMappingURL=init.js.map

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

@@ -10,6 +10,7 @@ export function attachDispatcher(dispatcher) {
 }
 // Check if the Performance API is available
 // e.g. JSDom (used in Jest) doesn't implement these
+// eslint-disable-next-line
 const perf = globalThis.performance;
 const isPerfSupported = typeof perf !== 'undefined' &&
     typeof perf.mark === 'function' &&
@@ -34,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) {
@@ -48,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

@@ -1,29 +1,49 @@
+// eslint-disable-next-line lwr/only-allowed-type-imports
+
+// eslint-disable-next-line lwr/only-allowed-type-imports
+
 import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
 import { logOperationStart, logOperationEnd } from 'lwr/profiler';
 
 // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
+// eslint-disable-next-line lwr/only-allowed-imports
 import { createElement } from 'lwc';
 
 // <hydrateComponentProxy> - This code is removed in core
 // Note: a build step uses these comments to strip the code for core.
+// eslint-disable-next-line lwr/only-allowed-imports
 import { hydrateComponent } from 'lwc';
 function hydrateComponentProxy(customElement, Ctor, props) {
   hydrateComponent(customElement, Ctor, props);
 }
 // </hydrateComponentProxy>
 
-// Break up hydration tasks into timed batches.
-// Borrowed from https://tinyurl.com/5b4fw7eb
-const HYDRATION_TASK_BATCH_DURATION = 50;
-let timeOfLastYield = performance.now();
-function shouldYield() {
-  const now = performance.now();
-  if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
-    timeOfLastYield = now;
-    return true;
+const shouldYield = (() => {
+  const globalThisLWR = globalThis;
+  const {
+    SSREnabled
+  } = globalThisLWR.LWR && globalThisLWR.LWR.env || {};
+
+  // eslint-disable-next-line lwr/no-unguarded-apis
+  if (!globalThis.performance || !SSREnabled) {
+    return () => false;
   }
-  return false;
-}
+
+  // Break up hydration tasks into timed batches.
+  // Borrowed from https://tinyurl.com/5b4fw7eb
+  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 > TASK_BATCH_DURATION) {
+      timeOfLastYield = now;
+      return true;
+    }
+    return false;
+  };
+})();
 function initializeWebComponent(elementName, Ctor) {
   return createElement(elementName, {
     is: Ctor
@@ -61,7 +81,8 @@ export function getPropFromAttrName(propName) {
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
  */
 export function init(rootModules, serverData = {}) {
-  if (typeof customElements === 'undefined' || typeof document === 'undefined') {
+  // eslint-disable-next-line lwr/no-unguarded-apis
+  if (typeof globalThis.customElements === 'undefined' || typeof globalThis.document === 'undefined') {
     logOperationStart({
       id: BOOTSTRAP_END
     });
@@ -70,106 +91,120 @@ export function init(rootModules, serverData = {}) {
   logOperationStart({
     id: INIT
   });
-  let index = 0;
-  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
-    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 container = document.querySelector('[lwr-root]');
-      container ? container.appendChild(component) : document.body.appendChild(component);
-      logOperationEnd({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: index,
-        metadata: {
-          renderMode: 'spa'
-        }
-      });
-      continue;
-    }
+  (async () => {
+    let index = 0;
+    // eslint-disable-next-line lwr/no-unguarded-apis
+    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);
 
-    // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
-    const elements = document.querySelectorAll(elementName);
-    for (const element of elements) {
-      logOperationStart({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: ++index
-      });
-      const propsId = element.dataset.lwrPropsId;
-
-      // hydrate SSR'd components
-      if (propsId) {
-        if (shouldYield()) {
-          // give room for the browser to render during long hydration tasks
-          setTimeout(() => {
-            hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-          }, 0);
-        } else {
-          hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-        }
+      // initialize and inject the root module into the LWR Root or DOM if it is missing
+      // eslint-disable-next-line lwr/no-unguarded-apis
+      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: index,
+          specifierIndex,
           metadata: {
-            renderMode: 'ssr'
+            renderMode: 'spa'
           }
         });
         continue;
       }
 
-      // Note: due to the bug described at the top of this file, each CSR'd custom element
-      // must be replaced with the new synthetic constructor. Attributes and children are
-      // copied over to the new component.
-      const component = initializeWebComponent(elementName, ctor);
-
-      // copy the attributes
-      for (const {
-        name,
-        value
-      } of element.attributes) {
-        component.setAttribute(name, value);
-        const prop = getPropFromAttrName(name);
-        if (prop in component) {
-          // set attributes as properties for reactivity
-          component[prop] = value;
+      // 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,
+          specifier,
+          specifierIndex
+        });
+        const propsId = element.dataset.lwrPropsId;
+
+        // hydrate SSR'd components
+        if (propsId) {
+          hydrateComponentProxy(element, ctor, serverData[propsId] || {});
+          logOperationEnd({
+            id: INIT_MODULE,
+            specifier,
+            specifierIndex,
+            metadata: {
+              renderMode: 'ssr'
+            }
+          });
+          continue;
         }
-      }
 
-      // save the children
-      while (element.childNodes.length > 0) {
-        component.appendChild(element.childNodes[0]);
-      }
+        // Note: due to the bug described at the top of this file, each CSR'd custom element
+        // must be replaced with the new synthetic constructor. Attributes and children are
+        // copied over to the new component.
+        const component = initializeWebComponent(elementName, ctor);
 
-      // swap the element out with the initialized component
-      const parent = element.parentElement;
-      if (parent) {
-        parent.replaceChild(component, element);
-      }
-      logOperationEnd({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: index,
-        metadata: {
-          renderMode: 'csr'
+        // copy the attributes
+        for (const {
+          name,
+          value
+        } of element.attributes) {
+          component.setAttribute(name, value);
+          const prop = getPropFromAttrName(name);
+          if (prop in component) {
+            // set attributes as properties for reactivity
+            component[prop] = value;
+          }
         }
-      });
+
+        // save the children
+        while (element.childNodes.length > 0) {
+          component.appendChild(element.childNodes[0]);
+        }
+
+        // swap the element out with the initialized component
+        const parent = element.parentElement;
+        if (parent) {
+          parent.replaceChild(component, element);
+        }
+        logOperationEnd({
+          id: INIT_MODULE,
+          specifier,
+          specifierIndex,
+          metadata: {
+            renderMode: 'csr'
+          }
+        });
+      }
     }
-  }
+  })();
   logOperationEnd({
     id: INIT
   });
   logOperationStart({
     id: BOOTSTRAP_END
   });
+}
+
+// Allows the browser to yield to the main thread during long-running tasks, improving responsiveness.
+async function yieldToMainThread() {
+  const scheduler = globalThis.scheduler;
+  // eslint-disable-next-line lwr/no-unguarded-apis
+  return scheduler?.yield ? scheduler.yield() : new Promise(resolve => setTimeout(resolve, 0));
 }