@lwrjs/client-modules - npm Package Compare versions

Comparing version 0.17.2-alpha.6 to 0.17.2-alpha.7

build/bundle/prod/lwr/init/init.js

@@ -1,2 +0,2 @@
-import{BOOTSTRAP_END as e,INIT as o,INIT_MODULE as r}from"lwr/metrics";import{logOperationStart as i,logOperationEnd as t}from"lwr/profiler";import{hydrateComponent as n,createElement as c}from"lwc";function s(e,o,r){n(e,o,r)}const d=(()=>{if(!globalThis.performance)return()=>!1;let e=globalThis.performance.now();return()=>{const o=globalThis.performance.now();return o-e>50&&(e=o,!0)}})();function l(e,o){return c(e,{is:o})}function a(e){return e.replace(/\/v\/[a-zA-Z0-9-_.]+$/,"").replace("/","-").replace(/([A-Z])/g,(e=>`-${e.toLowerCase()}`))}const p=/-([a-z])/g;function f(e){return e.replace(p,(e=>e[1].toUpperCase()))}function u(n,c={}){if(void 0===globalThis.customElements||void 0===globalThis.document)return void i({id:e});i({id:o});let p=0;const u=globalThis.document;for(const[e,o]of n){const n=a(e);if(!u.body.querySelector(n)){i({id:r,specifier:e,specifierIndex:++p});const c=l(n,o),s=u.querySelector("[lwr-root]");s?s.appendChild(c):u.body.appendChild(c),t({id:r,specifier:e,specifierIndex:p,metadata:{renderMode:"spa"}});continue}const m=u.querySelectorAll(n);for(const a of m){i({id:r,specifier:e,specifierIndex:++p});const u=a.dataset.lwrPropsId;if(u){d()&&void 0!==globalThis.setTimeout?globalThis.setTimeout((()=>{s(a,o,c[u]||{})}),0):s(a,o,c[u]||{}),t({id:r,specifier:e,specifierIndex:p,metadata:{renderMode:"ssr"}});continue}const m=l(n,o);for(const{name:e,value:o}of a.attributes){m.setAttribute(e,o);const r=f(e);r in m&&(m[r]=o)}for(;a.childNodes.length>0;)m.appendChild(a.childNodes[0]);const h=a.parentElement;h&&h.replaceChild(m,a),t({id:r,specifier:e,specifierIndex:p,metadata:{renderMode:"csr"}})}}t({id:o}),i({id:e})}export{f as getPropFromAttrName,u as init,a as toKebabCase};
+import{BOOTSTRAP_END as e,INIT as o,INIT_MODULE as r}from"lwr/metrics";import{logOperationStart as i,logOperationEnd as t}from"lwr/profiler";import{hydrateComponent as n,createElement as c}from"lwc";const s=(()=>{if(!globalThis.performance)return()=>!1;let e=globalThis.performance.now();return()=>{const o=globalThis.performance.now();return o-e>50&&(e=o,!0)}})();function l(e,o){return c(e,{is:o})}function a(e){return e.replace(/\/v\/[a-zA-Z0-9-_.]+$/,"").replace("/","-").replace(/([A-Z])/g,(e=>`-${e.toLowerCase()}`))}const d=/-([a-z])/g;function f(e){return e.replace(d,(e=>e[1].toUpperCase()))}function p(c,d={}){if(void 0===globalThis.customElements||void 0===globalThis.document)return void i({id:e});i({id:o});let p=0;const m=globalThis.document;for(const[e,o]of c){const c=a(e);if(!m.body.querySelector(c)){i({id:r,specifier:e,specifierIndex:++p});const n=l(c,o),s=m.querySelector("[lwr-root]");s?s.appendChild(n):m.body.appendChild(n),t({id:r,specifier:e,specifierIndex:p,metadata:{renderMode:"spa"}});continue}const h=m.querySelectorAll(c);(async()=>{const a=++p;for(const w of h){i({id:r,specifier:e,specifierIndex:a});const h=w.dataset.lwrPropsId;if(h){s()&&await u(),m=w,b=o,g=d[h]||{},n(m,b,g),t({id:r,specifier:e,specifierIndex:p,metadata:{renderMode:"ssr"}});continue}const y=l(c,o);for(const{name:e,value:o}of w.attributes){y.setAttribute(e,o);const r=f(e);r in y&&(y[r]=o)}for(;w.firstChild;)y.appendChild(w.firstChild);w.replaceWith(y),t({id:r,specifier:e,specifierIndex:a,metadata:{renderMode:"csr"}})}var m,b,g})()}t({id:o}),i({id:e})}async function u(){const e=globalThis.scheduler;return function(e){let o,r=e[0],i=1;for(;i<e.length;){const t=e[i],n=e[i+1];if(i+=2,("optionalAccess"===t||"optionalCall"===t)&&null==r)return;"access"===t||"optionalAccess"===t?(o=r,r=n(r)):"call"!==t&&"optionalCall"!==t||(r=n(((...e)=>r.call(o,...e))),o=void 0)}return r}([e,"optionalAccess",e=>e.yield])?e.yield():new Promise((e=>setTimeout(e,0)))}export{f as getPropFromAttrName,p as init,a as toKebabCase};
 //# sourceMappingURL=init.js.map

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

@@ -101,55 +101,50 @@ import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
         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) {
-                // eslint-disable-next-line lwr/no-unguarded-apis
-                if (shouldYield() && globalThis.setTimeout !== undefined) {
-                    // give room for the browser to render during long hydration tasks
-                    // eslint-disable-next-line lwr/no-unguarded-apis
-                    globalThis.setTimeout(() => {
-                        hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-                    }, 0);
-                }
-                else {
+        (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' },
-            });
-        }
+        })();
     }
@@ -159,2 +154,8 @@ logOperationEnd({ id: INIT });
 }
+// 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

build/modules/lwr/init/init.js

 // 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';
@@ -122,70 +124,66 @@ import { logOperationStart, logOperationEnd } from 'lwr/profiler';
     const elements = document.querySelectorAll(elementName);
-    for (const element of elements) {
-      logOperationStart({
-        id: INIT_MODULE,
-        specifier,
-        specifierIndex: ++index
-      });
-      const propsId = element.dataset.lwrPropsId;
+    (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) {
-        // eslint-disable-next-line lwr/no-unguarded-apis
-        if (shouldYield() && globalThis.setTimeout !== undefined) {
-          // give room for the browser to render during long hydration tasks
-          // eslint-disable-next-line lwr/no-unguarded-apis
-          globalThis.setTimeout(() => {
-            hydrateComponentProxy(element, ctor, serverData[propsId] || {});
-          }, 0);
-        } else {
+        // 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,
+          specifierIndex,
           metadata: {
-            renderMode: 'ssr'
+            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'
-        }
-      });
-    }
+    })();
   }
@@ -198,2 +196,9 @@ logOperationEnd({
   });
+}
+
+// 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.json

@@ -7,3 +7,3 @@ {
     },
-    "version": "0.17.2-alpha.6",
+    "version": "0.17.2-alpha.7",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
@@ -38,6 +38,6 @@ "repository": {
         "@locker/sandbox": "0.23.6",
-        "@lwrjs/shared-utils": "0.17.2-alpha.6"
+        "@lwrjs/shared-utils": "0.17.2-alpha.7"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.17.2-alpha.6",
+        "@lwrjs/types": "0.17.2-alpha.7",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -75,3 +75,3 @@ "@rollup/plugin-sucrase": "^5.0.2",
     },
-    "gitHead": "e52a06333b7cd8d6d4bdc846ea9019d13f9fb85d"
+    "gitHead": "13d2ef766b72903be7be11a0ddc4704fe649f77a"
 }

No alert changes

Improved metrics

Total package byte prevSize

1747377

increased by0.04%

Lines of code

34298

increased by0.01%

Dependency changes

• + Added@lwrjs/diagnostics@0.17.2-alpha.7(transitive)

• + Added@lwrjs/shared-utils@0.17.2-alpha.7(transitive)

• - Removed@lwrjs/diagnostics@0.17.2-alpha.6(transitive)

• - Removed@lwrjs/shared-utils@0.17.2-alpha.6(transitive)

• Updated@lwrjs/shared-utils@0.17.2-alpha.7