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

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

@@ -1 +1,2 @@
 const o=[];let e;const t=globalThis.LWR;globalThis.LWR.define?globalThis.LWR=Object.freeze({define:globalThis.LWR.define}):delete globalThis.LWR;const n={addLoaderPlugin:()=>{console.warn("API is not supported in ESM format")},handleStaleModule:function(t){o.push(t),e||(e=new WebSocket(`ws://${location.host}`),e.addEventListener("message",(async({data:e})=>{const t=JSON.parse(e);if("moduleUpdate"===t.eventType){const{oldHash:e,newHash:n,module:{specifier:a}}=t.payload;for(let t=0;t<o.length;t++){if(null!==(0,o[t])({name:a,oldHash:e,newHash:n}))break}}})))},appMetadata:function(){const{appId:o,bootstrapModule:e,rootComponent:n,rootComponents:a}=t;return{appId:o,bootstrapModule:e,rootComponent:n,rootComponents:a}}()};export{n as services};
+//# sourceMappingURL=servicesESM.js.map

package/build/modules/lwr/declarativeShadow/declarativeShadow.js

@@ -0,0 +1,22 @@
+// Polyfill the Declarative ShadowDOM spec - call this function AFTER the DOM has been parsed and BEFORE hydrateComponent() is invoked
+// See https://github.com/salesforce/lwc-rfcs/blob/master/text/0129-declarative-shadow-dom-polyfill.md#single-loop-script-shadow-root-attachment-reference
+
+function applyShadowRoots(node) {
+  // if this browser DOES NOT support Declarative ShadowDOM
+  node.querySelectorAll('template[shadowroot]').forEach(template => {
+    const mode = template.getAttribute('shadowroot') || 'open';
+    const shadowRoot = template.parentNode?.attachShadow({
+      mode
+    });
+    shadowRoot.appendChild(template.content);
+    template.remove();
+    applyShadowRoots(shadowRoot);
+  });
+}
+export function polyfillDeclarativeShadowDom(node = document) {
+  // eslint-disable-next-line no-prototype-builtins
+  if (!HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot')) {
+    // if this browser DOES NOT support Declarative ShadowDOM
+    applyShadowRoots(node);
+  }
+}

package/build/modules/lwr/environment/environment.js

@@ -0,0 +1 @@
+export const isServer = process && process.env && (process.env.SSR === 'true' || process.env.SSR);

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

@@ -1,10 +1,20 @@
-import { BOOTSTRAP_END } from 'lwr/metrics';
-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 { BOOTSTRAP_END, INIT, INIT_MODULE } from 'lwr/metrics';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+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
+import { hydrateComponent } from 'lwc';
+function hydrateComponentProxy(customElement, Ctor, props) {
+  hydrateComponent(customElement, Ctor, props);
+}
+// </hydrateComponentProxy>
+
 function initializeWebComponent(elementName, Ctor) {
   return createElement(elementName, {
     is: Ctor
@@ -41,53 +51,110 @@ export function getPropFromAttrName(propName) {
  *                      bare specifier and corresponding LightningElement constructor
  * @example - [['x/appRoot', appCtor], ['x/nav', navCtor]]
  */
-export function init(rootModules) {
-  if (typeof customElements !== 'undefined' && typeof document !== 'undefined') {
-    const container = document.querySelector('[lwr-root]');
-    rootModules.forEach(([moduleSpecifier, ctor]) => {
-      // Kebab-case the specifier
-      const elementName = toKebabCase(moduleSpecifier);
+export function init(rootModules, ssrProps = {}) {
+  if (typeof customElements === 'undefined' || typeof document === 'undefined') {
+    logOperationStart({
+      id: BOOTSTRAP_END
+    });
+    return;
+  }
+  logOperationStart({
+    id: INIT
+  });
+  let index = 0;
+  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
+    if (!document.body.querySelector(elementName)) {
+      logOperationStart({
+        id: INIT_MODULE,
+        specifier,
+        specifierIndex: ++index
+      });
 
-      // Append the root element to the DOM, if it does not exist
       // this is for SPA like routes (one component at the root level) utilizing the lwr-root directive
-      let el = document.body.querySelector(elementName);
-      if (!el) {
-        el = initializeWebComponent(elementName, ctor);
-        if (container) {
-          // Append to a node with the "lwr-root" attribute
-          container.appendChild(el);
-        } else {
-          // Otherwise, add the root to the <body>
-          document.body.appendChild(el);
+      const component = initializeWebComponent(elementName, ctor);
+      const container = document.querySelector('[lwr-root]');
+      container ? container.appendChild(component) : document.body.appendChild(component);
+      logOperationEnd({
+        id: INIT_MODULE,
+        specifier,
+        specifierIndex: index,
+        metadata: {
+          renderMode: 'spa'
         }
-      } else {
-        // We have rendered/ssred an HTML page and we need to reify the components
-        // Due to the bug described on the header, for each custom element
-        // 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;
-            }
-          }
+      });
+      continue;
+    }
 
-          // Move the children
-          while (customElement.childNodes.length > 0) {
-            newElement.appendChild(customElement.childNodes[0]);
+    // the page has been rendered or SSR'd, and each component needs to initialized(or hydrated)
+    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 @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        hydrateComponentProxy(element, ctor, ssrProps[propsId] || {});
+        logOperationEnd({
+          id: INIT_MODULE,
+          specifier,
+          specifierIndex: index,
+          metadata: {
+            renderMode: 'ssr'
           }
-          customElement.parentElement.replaceChild(newElement, customElement);
         });
+        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
   });