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

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

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

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

@@ -3,11 +3,24 @@ import { logOperationStart, logOperationEnd } from 'lwr/profiler';
 // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted - tmp
 import { createElement } from 'lwc';
 // <hydrateComponentProxy> - This code is removed in core
+// Note: a build step uses these comments to strip the code for core.
 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;
+    }
+    return false;
+}
 function initializeWebComponent(elementName, Ctor) {
     return createElement(elementName, { is: Ctor });
 }
@@ -73,7 +86,15 @@ export function init(rootModules, serverData = {}) {
             const propsId = element.dataset.lwrPropsId;
             // hydrate SSR'd components
             if (propsId) {
-                hydrateComponentProxy(element, ctor, serverData[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] || {});
+                }
                 logOperationEnd({
                     id: INIT_MODULE,
                     specifier,

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

@@ -5,12 +5,25 @@ import { logOperationStart, logOperationEnd } from 'lwr/profiler';
 import { createElement } from 'lwc';
 
 // <hydrateComponentProxy> - This code is removed in core
+// Note: a build step uses these comments to strip the code for core.
 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;
+  }
+  return false;
+}
 function initializeWebComponent(elementName, Ctor) {
   return createElement(elementName, {
     is: Ctor
@@ -96,7 +109,14 @@ export function init(rootModules, serverData = {}) {
 
       // hydrate SSR'd components
       if (propsId) {
-        hydrateComponentProxy(element, ctor, serverData[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] || {});
+        }
         logOperationEnd({
           id: INIT_MODULE,
           specifier,

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.17.2-alpha.1",
+    "version": "0.17.2-alpha.3",
     "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.3"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.17.2-alpha.1",
+        "@lwrjs/types": "0.17.2-alpha.3",
         "@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": "43757693dfca356cff105d4896a7a3cbf11ac017"
 }