@lwrjs/client-modules 0.10.0-alpha.2 → 0.10.0-alpha.4

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

@@ -1 +1 @@
-import{BOOTSTRAP_END as e}from"lwr/metrics";import{logOperationStart as t}from"lwr/profiler";import{createElement as o}from"lwc";function r(e,t){return o(e,{is:t})}function n(e){return e.replace(/\/v\/[a-zA-Z0-9-_.]+$/,"").replace("/","-").replace(/([A-Z])/g,(e=>`-${e.toLowerCase()}`))}const c=/-([a-z])/g;function l(e){return e.replace(c,(e=>e[1].toUpperCase()))}function i(o){if("undefined"!=typeof customElements&&"undefined"!=typeof document){const e=document.querySelector("[lwr-root]");o.forEach((([t,o])=>{const c=n(t);let i=document.body.querySelector(c);if(i){document.querySelectorAll(c).forEach((e=>{const t=r(c,o);for(const{name:o,value:r}of e.attributes){t.setAttribute(o,r);const e=l(o);e in t&&(t[e]=r)}for(;e.childNodes.length>0;)t.appendChild(e.childNodes[0]);e.parentElement.replaceChild(t,e)}))}else i=r(c,o),e?e.appendChild(i):document.body.appendChild(i)}))}t({id:e})}export{l as getPropFromAttrName,i as init,n as toKebabCase};
+import{BOOTSTRAP_END as e}from"lwr/metrics";import{logOperationStart as t}from"lwr/profiler";import{createElement as o,hydrateComponent as r}from"lwc";function n(e,t){return o(e,{is:t})}function c(e){return e.replace(/\/v\/[a-zA-Z0-9-_.]+$/,"").replace("/","-").replace(/([A-Z])/g,(e=>`-${e.toLowerCase()}`))}const l=/-([a-z])/g;function d(e){return e.replace(l,(e=>e[1].toUpperCase()))}function i(o,l={}){if("undefined"!=typeof customElements&&"undefined"!=typeof document){const e=document.querySelector("[lwr-root]");o.forEach((([t,o])=>{const i=c(t);let p=document.body.querySelector(i);if(p){document.querySelectorAll(i).forEach((e=>{const t=e.dataset.lwrPropsId;if(t){const n=l[t]||{};r(e,o,n)}else{const t=n(i,o);for(const{name:o,value:r}of e.attributes){t.setAttribute(o,r);const e=d(o);e in t&&(t[e]=r)}for(;e.childNodes.length>0;)t.appendChild(e.childNodes[0]);e.parentElement.replaceChild(t,e)}}))}else p=n(i,o),e?e.appendChild(p):document.body.appendChild(p)}))}t({id:e})}export{d as getPropFromAttrName,i as init,c as toKebabCase};

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

@@ -4,7 +4,7 @@ import { logOperationStart } from 'lwr/profiler';
 // TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2083 is sorted
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { createElement } from 'lwc';
+import { createElement, hydrateComponent } from 'lwc';
 function initializeWebComponent(elementName, Ctor) {
   return createElement(elementName, {
     is: Ctor
@@ -41,7 +41,7 @@ export function getPropFromAttrName(propName) {
  *                      bare specifier and corresponding LightningElement constructor
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
  */
-export function init(rootModules) {
+export function init(rootModules, ssrProps = {}) {
   if (typeof customElements !== 'undefined' && typeof document !== 'undefined') {
     const container = document.querySelector('[lwr-root]');
     rootModules.forEach(([moduleSpecifier, ctor]) => {
@@ -66,24 +66,32 @@ export function init(rootModules) {
         // we collect the attributes and we replace the element with the new synthetic contructor
         const customElements = document.querySelectorAll(elementName);
         customElements.forEach(customElement => {
-          const newElement = initializeWebComponent(elementName, ctor);
-          for (const {
-            name,
-            value
-          } of customElement.attributes) {
-            newElement.setAttribute(name, value);
-            const prop = getPropFromAttrName(name);
-            if (prop in newElement) {
-              // Set attributes as properties too for reactivity
-              newElement[prop] = value;
+          const propsId = customElement.dataset.lwrPropsId;
+          if (propsId) {
+            // Hydrate an SSRed component
+            const props = ssrProps[propsId] || {};
+            hydrateComponent(customElement, ctor, props);
+          } else {
+            // Create a CSRed component
+            const newElement = initializeWebComponent(elementName, ctor);
+            for (const {
+              name,
+              value
+            } of customElement.attributes) {
+              newElement.setAttribute(name, value);
+              const prop = getPropFromAttrName(name);
+              if (prop in newElement) {
+                // Set attributes as properties too for reactivity
+                newElement[prop] = value;
+              }
             }
-          }
 
-          // Move the children
-          while (customElement.childNodes.length > 0) {
-            newElement.appendChild(customElement.childNodes[0]);
+            // Move the children and replace the custom element
+            while (customElement.childNodes.length > 0) {
+              newElement.appendChild(customElement.childNodes[0]);
+            }
+            customElement.parentElement.replaceChild(newElement, customElement);
           }
-          customElement.parentElement.replaceChild(newElement, customElement);
         });
       }
     });

package/package.json

@@ -4,7 +4,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.10.0-alpha.2",
+    "version": "0.10.0-alpha.4",
     "homepage": "https://developer.salesforce.com/docs/platform/lwr/overview",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@locker/sandbox": "0.19.0",
-        "@lwrjs/shared-utils": "0.10.0-alpha.2"
+        "@lwrjs/shared-utils": "0.10.0-alpha.4"
     },
     "devDependencies": {
         "rollup-plugin-terser": "^7.0.2"
@@ -47,7 +47,6 @@
             "lwr/hmr",
             "lwr/preInit",
             "lwr/init",
-            "lwr/initSsr",
             "lwr/servicesESM",
             "lwr/lockerDefine",
             "lwr/lockerSandbox",
@@ -58,5 +57,5 @@
     "engines": {
         "node": ">=16.0.0 <20"
     },
-    "gitHead": "592cda0637513885477829beea35a86407b342d4"
+    "gitHead": "f39a534d92fd3980b87839820f484729172e1067"
 }

package/build/modules/lwr/initSsr/initSsr.js

@@ -1,31 +0,0 @@
-// TODO: This is a temporal workaround until https://github.com/salesforce/lwc/pull/2564 is sorted
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { hydrateComponent } from 'lwc';
-export function toKebabCase(specifier) {
-  return specifier.replace(/\/v\/[a-zA-Z0-9-_.]+$/, '').replace('/', '-').replace(/([A-Z])/g, c => `-${c.toLowerCase()}`);
-}
-
-/**
- * Hydrate the given component(s) which were server-side rendered (see the lwc-ssr/viewTransformer).
- * @param components - An array of arrays, each one holding:
- *                     0. a bare specifier
- *                     1. the corresponding LightningElement constructor
- * @param ssrProps - map of properties to set on each component
- * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
- */
-export function init(components, ssrProps = {}) {
-  if (typeof document !== 'undefined') {
-    components.forEach(([moduleSpecifier, ctor]) => {
-      // Kebab-case the specifier
-      const elementName = toKebabCase(moduleSpecifier);
-      // Find all instances of the component in the document, and hydrate them all
-      const customElements = document.querySelectorAll(elementName);
-      customElements.forEach(customElement => {
-        const propsId = customElement.dataset.lwrPropsId;
-        const props = ssrProps[propsId] || {};
-        hydrateComponent(customElement, ctor, props);
-      });
-    });
-  }
-}