@lwrjs/client-modules - npm Package Compare versions

Comparing version 0.17.2-alpha.12 to 0.17.2-alpha.14

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

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

@@ -15,4 +15,6 @@ import { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
 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;
@@ -22,3 +24,3 @@ }
     // 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
@@ -29,3 +31,3 @@ let timeOfLastYield = globalThis.performance.now();
         const now = globalThis.performance.now();
-        if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
+        if (now - timeOfLastYield > TASK_BATCH_DURATION) {
             timeOfLastYield = now;
@@ -78,30 +80,35 @@ return true;
     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) {
@@ -112,7 +119,2 @@ logOperationStart({ id: INIT_MODULE, specifier, specifierIndex });
                 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] || {});
@@ -122,3 +124,3 @@ logOperationEnd({
                         specifier,
-                        specifierIndex: index,
+                        specifierIndex,
                         metadata: { renderMode: 'ssr' },
@@ -142,7 +144,10 @@ });
                 // 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({
@@ -155,4 +160,4 @@ id: INIT_MODULE,
             }
-        })();
-    }
+        }
+    })();
     logOperationEnd({ id: INIT });
@@ -159,0 +164,0 @@ logOperationStart({ id: BOOTSTRAP_END });

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

@@ -38,3 +38,3 @@ var Phase;
     if (customDispatcher) {
-        customDispatcher({ id, phase: Phase.Start, specifier, metadata });
+        customDispatcher({ id, phase: Phase.Start, specifier, metadata, specifierIndex });
         return;
@@ -53,3 +53,3 @@ }
     if (customDispatcher) {
-        customDispatcher({ id, phase: Phase.End, specifier, metadata });
+        customDispatcher({ id, phase: Phase.End, specifier, metadata, specifierIndex });
     }
@@ -56,0 +56,0 @@ else if (isPerfSupported) {

build/modules/lwr/init/init.js

@@ -22,4 +22,9 @@ // eslint-disable-next-line lwr/only-allowed-type-imports
 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;
@@ -30,3 +35,3 @@ }
   // 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
@@ -37,3 +42,3 @@ let timeOfLastYield = globalThis.performance.now();
     const now = globalThis.performance.now();
-    if (now - timeOfLastYield > HYDRATION_TASK_BATCH_DURATION) {
+    if (now - timeOfLastYield > TASK_BATCH_DURATION) {
       timeOfLastYield = now;
@@ -92,39 +97,44 @@ return true;
   });
-  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
-      });
+    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);
 
-      // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
-      const component = initializeWebComponent(elementName, ctor);
+      // 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) {
@@ -140,7 +150,2 @@ logOperationStart({
         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] || {});
@@ -150,3 +155,3 @@ logOperationEnd({
             specifier,
-            specifierIndex: index,
+            specifierIndex,
             metadata: {
@@ -178,8 +183,11 @@ renderMode: 'ssr'
         // 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({
@@ -194,4 +202,4 @@ id: INIT_MODULE,
       }
-    })();
-  }
+    }
+  })();
   logOperationEnd({
@@ -198,0 +206,0 @@ id: INIT

build/modules/lwr/profiler/profiler.js

@@ -47,3 +47,4 @@ var Phase = /*#__PURE__*/function (Phase) {
       specifier,
-      metadata
+      metadata,
+      specifierIndex
     });
@@ -75,3 +76,4 @@ return;
       specifier,
-      metadata
+      metadata,
+      specifierIndex
     });
@@ -78,0 +80,0 @@ } else if (isPerfSupported) {

package.json

@@ -7,3 +7,3 @@ {
     },
-    "version": "0.17.2-alpha.12",
+    "version": "0.17.2-alpha.14",
     "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.12"
+        "@lwrjs/shared-utils": "0.17.2-alpha.14"
     },
     "devDependencies": {
-        "@lwrjs/types": "0.17.2-alpha.12",
+        "@lwrjs/types": "0.17.2-alpha.14",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -70,3 +70,3 @@ "@rollup/plugin-sucrase": "^5.0.2",
     "engines": {
-        "node": ">=18.0.0"
+        "node": ">=20.0.0"
     },
@@ -76,3 +76,3 @@ "volta": {
     },
-    "gitHead": "f5d7c20e7aec008c06db8d5e289c8cb1e3467005"
+    "gitHead": "a7d6d67f5453787a8b2428bd11546c334af3f77b"
 }

No alert changes

Improved metrics

Total package byte prevSize

1748321

increased by0.04%

Lines of code

34318

increased by0.04%

Dependency changes

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

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

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

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

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