@lwrjs/client-modules 0.17.2-alpha.1 → 0.17.2-alpha.11

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,13 +1,36 @@
 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>
+const shouldYield = (() => {
+    // eslint-disable-next-line lwr/no-unguarded-apis
+    if (!globalThis.performance) {
+        return () => false;
+    }
+    // Break up hydration tasks into timed batches.
+    // Borrowed from https://tinyurl.com/5b4fw7eb
+    const HYDRATION_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) {
+            timeOfLastYield = now;
+            return true;
+        }
+        return false;
+    };
+})();
 function initializeWebComponent(elementName, Ctor) {
     return createElement(elementName, { is: Ctor });
 }
@@ -43,20 +66,26 @@ 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;
+    // 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
+        // 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]');
+            // eslint-disable-next-line lwr/no-unguarded-apis
             container ? container.appendChild(component) : document.body.appendChild(component);
             logOperationEnd({
                 id: INIT_MODULE,
@@ -67,52 +96,64 @@ export function init(rootModules, serverData = {}) {
             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, specifier, specifierIndex: ++index });
-            const propsId = element.dataset.lwrPropsId;
-            // hydrate SSR'd components
-            if (propsId) {
-                hydrateComponentProxy(element, ctor, serverData[propsId] || {});
+        (async () => {
+            const specifierIndex = ++index;
+            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,
+                        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.firstChild) {
+                    component.appendChild(element.firstChild);
+                }
+                // swap the element out with the initialized component
+                element.replaceWith(component);
                 logOperationEnd({
                     id: INIT_MODULE,
                     specifier,
-                    specifierIndex: index,
-                    metadata: { renderMode: 'ssr' },
+                    specifierIndex,
+                    metadata: { renderMode: 'csr' },
                 });
-                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: 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' &&

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

@@ -27,7 +27,7 @@ function updateStaleModule({ oldModule, newModule, specifier }) {
     if (specifier.endsWith('html') && newModule.default) {
         console.log(`Swapping HTML template for module "${specifier}"`);
         swapTemplate(oldModule.default, newModule.default);
-    } else if (specifier.endsWith('css') && newModule.default) {
+    } else if ((specifier.endsWith('css') || specifier.endsWith('.css?scoped=true')) && newModule.default) {
         console.log(`Swapping CSS for module "${specifier}"`);
         swapStyle(oldModule.default[0], newModule.default[0]);
     } else {

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

@@ -1,16 +1,44 @@
+// 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>
 
+const shouldYield = (() => {
+  // eslint-disable-next-line lwr/no-unguarded-apis
+  if (!globalThis.performance) {
+    return () => false;
+  }
+
+  // Break up hydration tasks into timed batches.
+  // Borrowed from https://tinyurl.com/5b4fw7eb
+  const HYDRATION_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) {
+      timeOfLastYield = now;
+      return true;
+    }
+    return false;
+  };
+})();
 function initializeWebComponent(elementName, Ctor) {
   return createElement(elementName, {
     is: Ctor
@@ -48,7 +76,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
     });
@@ -58,10 +87,13 @@ export function init(rootModules, serverData = {}) {
     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
+    // eslint-disable-next-line lwr/no-unguarded-apis
     if (!document.body.querySelector(elementName)) {
       logOperationStart({
         id: INIT_MODULE,
@@ -71,7 +103,9 @@ export function init(rootModules, serverData = {}) {
 
       // 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,
@@ -85,66 +119,72 @@ export function init(rootModules, serverData = {}) {
     }
 
     // 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: ++index
-      });
-      const propsId = element.dataset.lwrPropsId;
-
-      // hydrate SSR'd components
-      if (propsId) {
-        hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-        logOperationEnd({
+    (async () => {
+      const specifierIndex = ++index;
+      for (const element of elements) {
+        logOperationStart({
           id: INIT_MODULE,
           specifier,
-          specifierIndex: index,
-          metadata: {
-            renderMode: 'ssr'
-          }
+          specifierIndex
         });
-        continue;
-      }
+        const propsId = element.dataset.lwrPropsId;
 
-      // 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);
+        // 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,
+            metadata: {
+              renderMode: 'ssr'
+            }
+          });
+          continue;
+        }
 
-      // 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;
+        // 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]);
-      }
+        // save the children
+        while (element.firstChild) {
+          component.appendChild(element.firstChild);
+        }
 
-      // swap the element out with the initialized component
-      const parent = element.parentElement;
-      if (parent) {
-        parent.replaceChild(component, element);
+        // swap the element out with the initialized component
+        element.replaceWith(component);
+        logOperationEnd({
+          id: INIT_MODULE,
+          specifier,
+          specifierIndex,
+          metadata: {
+            renderMode: 'csr'
+          }
+        });
       }
-      logOperationEnd({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: index,
-        metadata: {
-          renderMode: 'csr'
-        }
-      });
-    }
+    })();
   }
   logOperationEnd({
     id: INIT
@@ -152,4 +192,11 @@ export function init(rootModules, serverData = {}) {
   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));
 }

package/build/modules/lwr/lockerDefine/lockerDefine.js

@@ -16392,7 +16392,7 @@ function wrapPlatformResourceLoader$LWS(dep$LWS, key$LWS) {
 }
 /*! version: 0.23.6 */
 
-const loaderDefine = globalThis.LWR.define;
+const loaderDefine = (globalThis ).LWR.define;
 
 /**
  * Mark an exports object as "live", see https://github.com/caridy/secure-javascript-environment/pull/87.
@@ -16461,7 +16461,7 @@ function secureExporter(
         }
     }
     if (exportsIndex !== -1 || lwcIndex !== -1 || platformResourceLoaderIndex !== -1) {
-        return function (...args) {
+        return (...args) => {
             if (exportsIndex !== -1) {
                 const arg = args[exportsIndex];
                 args[exportsIndex] = markLiveObject(arg) || arg;
@@ -16483,6 +16483,8 @@ function secureExporter(
                     namespace,
                 );
             }
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             return out.apply(this, args);
         };
     }
@@ -16492,8 +16494,8 @@ function secureExporter(
 
 function registerLockerDefine(trustedNamespaces) {
     // override the global LWR.define() for Locker
-    globalThis.LWR = Object.freeze(
-        Object.assign(Object.assign({}, globalThis.LWR), {
+    (globalThis ).LWR = Object.freeze(
+        Object.assign(Object.assign({}, (globalThis ).LWR), {
             define: function (specifier, dependencies, exporter, signature) {
                 if (typeof dependencies === 'function') {
                     // when the module has no dependency, the bundler only passes 3 parameters, the specifier, exporter and signature

package/build/modules/lwr/preInit/preInit.js

@@ -3,15 +3,16 @@
  * Note: this module should be imported before other dependencies in the ABS
  */
 
-const lwrGlobals = globalThis.LWR;
+const GLOBAL = globalThis;
+const lwrGlobals = GLOBAL.LWR;
 if (lwrGlobals.define || lwrGlobals.env) {
   // AMD only
-  globalThis.LWR = Object.freeze({
+  GLOBAL.LWR = Object.freeze({
     define: lwrGlobals.define,
     env: lwrGlobals.env
   });
 } else {
-  delete globalThis.LWR;
+  delete GLOBAL.LWR;
 }
 export function getClientBootstrapConfig() {
   return lwrGlobals;

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

@@ -11,6 +11,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' && typeof perf.clearMarks === 'function' && typeof perf.measure === 'function' && typeof perf.clearMeasures === 'function';
 function getMeasureName(id, specifier) {

package/build/modules/lwr/servicesESM/handleStaleModuleESM.js

@@ -4,9 +4,8 @@ export function registerHandleStaleModuleHook(callback) {
   handleStaleModuleHooks.push(callback);
   if (!socket) {
     socket = new WebSocket(`ws://${location.host}`);
-    socket.addEventListener('message', async ({
-      data
-    }) => {
+    socket.addEventListener('message', async payload => {
+      const data = payload.data;
       const event = JSON.parse(data);
       if (event.eventType === 'moduleUpdate') {
         const {

package/build/modules/lwr/servicesESM/servicesESM.js

@@ -1,5 +1,9 @@
 import { registerHandleStaleModuleHook } from './handleStaleModuleESM';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { getClientBootstrapConfig } from 'lwr/preInit';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { registerServerDataCallbacks } from 'lwr/serverDataCallback';
 const noop = () => {
   console.warn('API is not supported in ESM format');

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.17.2-alpha.1",
+    "version": "0.17.2-alpha.11",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -34,10 +34,10 @@
     },
     "dependencies": {
         "@locker/sandbox": "0.23.6",
-        "@lwrjs/shared-utils": "0.17.2-alpha.1"
+        "@lwrjs/shared-utils": "0.17.2-alpha.11"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.17.2-alpha.1",
+        "@lwrjs/types": "0.17.2-alpha.11",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-sucrase": "^5.0.2",
         "@rollup/plugin-terser": "^0.4.4",
@@ -70,5 +70,5 @@
     "volta": {
         "extends": "../../../package.json"
     },
-    "gitHead": "bba15ca717a242b0375decaa378af06bdee813b5"
+    "gitHead": "72217912e6c17e617413044743892582be5599a0"
 }