lwc 2.11.1 → 2.12.1

package/dist/engine-dom/umd/es2017/engine-dom_debug.js

@@ -293,7 +293,7 @@
   const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.11.1 */
+  /** version: 2.12.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -436,7 +436,7 @@
    */
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.11.1 */
+  /** version: 2.12.1 */
 
   /* proxy-compat-disable */
 
@@ -471,6 +471,23 @@
       }
       return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
   }
+  // Borrowed from Vue template compiler.
+  // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+  const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+  const PROPERTY_DELIMITER = /:(.+)/;
+  function parseStyleText(cssText) {
+      const styleMap = {};
+      const declarations = cssText.split(DECLARATION_DELIMITER);
+      for (const declaration of declarations) {
+          if (declaration) {
+              const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+              if (prop !== undefined && value !== undefined) {
+                  styleMap[prop.trim()] = value.trim();
+              }
+          }
+      }
+      return styleMap;
+  }
   // Make a shallow copy of an object but omit the given key
   function cloneAndOmitKey(object, keyToOmit) {
       const result = {};
@@ -819,8 +836,8 @@
           console[method](e);
       }
   }
-  function logWarn(message, vm) {
-      log('warn', message, vm);
+  function logError(message, vm) {
+      log('error', message, vm);
   }
 
   /*
@@ -3942,100 +3959,6 @@
       }
   }
 
-  /*
-   * Copyright (c) 2022, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  function hydrate(vnode, node) {
-      switch (vnode.type) {
-          case 0 /* Text */:
-              hydrateText(vnode, node);
-              break;
-          case 1 /* Comment */:
-              hydrateComment(vnode, node);
-              break;
-          case 2 /* Element */:
-              hydrateElement(vnode, node);
-              break;
-          case 3 /* CustomElement */:
-              hydrateCustomElement(vnode, node);
-              break;
-      }
-  }
-  function hydrateText(vnode, node) {
-      var _a;
-      // always set the text value to the one from the vnode.
-      setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-      vnode.elm = node;
-  }
-  function hydrateComment(vnode, node) {
-      var _a;
-      // always set the text value to the one from the vnode.
-      setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-      vnode.elm = node;
-  }
-  function hydrateElement(vnode, node) {
-      const elm = node;
-      vnode.elm = elm;
-      const { context } = vnode.data;
-      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
-      if (isDomManual) {
-          // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
-          // remove the innerHTML from props so it reuses the existing dom elements.
-          const { props } = vnode.data;
-          if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
-              if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
-                  // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
-                  vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
-              }
-              else {
-                  logWarn(`Mismatch hydrating element <${getProperty$1(elm, 'tagName').toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
-              }
-          }
-      }
-      patchElementPropsAndAttrs(vnode);
-      if (!isDomManual) {
-          hydrateChildren(getChildNodes$1(vnode.elm), vnode.children, vnode.owner);
-      }
-  }
-  function hydrateCustomElement(vnode, node) {
-      const elm = node;
-      const { sel, mode, ctor, owner } = vnode;
-      const vm = createVM(elm, ctor, {
-          mode,
-          owner,
-          tagName: sel,
-      });
-      vnode.elm = elm;
-      vnode.vm = vm;
-      allocateChildren(vnode, vm);
-      patchElementPropsAndAttrs(vnode);
-      runConnectedCallback(vm);
-      if (vm.renderMode !== 0 /* Light */) {
-          // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
-          // Note: for Light DOM, this is handled while hydrating the VM
-          hydrateChildren(getChildNodes$1(vnode.elm), vnode.children);
-      }
-      hydrateVM(vm);
-  }
-  function hydrateChildren(elmChildren, children, vm) {
-      let childNodeIndex = 0;
-      for (let i = 0; i < children.length; i++) {
-          const childVnode = children[i];
-          if (!isNull(childVnode)) {
-              const childNode = elmChildren[childNodeIndex];
-              hydrate(childVnode, childNode);
-              childNodeIndex++;
-          }
-      }
-  }
-  function patchElementPropsAndAttrs(vnode) {
-      applyEventListeners(vnode);
-      patchProps(null, vnode);
-  }
-
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -4081,32 +4004,12 @@
     /* GlobalHydrate */
     , vm);
   }
-  function hydrateRootElement(elm) {
-    const vm = getAssociatedVM(elm);
-    runConnectedCallback(vm);
-    hydrateVM(vm);
-  }
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
   }
   function appendVM(vm) {
     rehydrate(vm);
-  }
-  function hydrateVM(vm) {
-    if (isTrue(vm.isDirty)) {
-      // manually diffing/patching here.
-      // This routine is:
-      // patchShadowRoot(vm, children);
-      //  -> addVnodes.
-      const children = renderComponent(vm);
-      vm.children = children;
-      const vmChildren = vm.renderMode === 0
-      /* Light */
-      ? getChildNodes$1(vm.elm) : getChildNodes$1(vm.elm.shadowRoot);
-      hydrateChildren(vmChildren, children);
-      runRenderedCallback(vm);
-    }
   } // just in case the component comes back, with this we guarantee re-rendering it
   // while preventing any attempt to rehydration until after reinsertion.
 
@@ -4372,7 +4275,6 @@
       , vm);
     }
   }
-
   let rehydrateQueue = [];
 
   function flushRehydrationQueue() {
@@ -4993,6 +4895,237 @@
       return reactiveMembrane.getReadOnlyProxy(obj);
   }
 
+  /*
+   * Copyright (c) 2022, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+  // flag indicating if the hydration recovered from the DOM mismatch
+  let hasMismatch = false;
+  function hydrateRoot(vm) {
+      hasMismatch = false;
+      runConnectedCallback(vm);
+      hydrateVM(vm);
+      if (hasMismatch) {
+          logError('Hydration completed with errors.', vm);
+      }
+  }
+  function hydrateVM(vm) {
+      const children = renderComponent(vm);
+      vm.children = children;
+      const parentNode = vm.renderRoot;
+      hydrateChildren(getFirstChild$1(parentNode), children, parentNode);
+      runRenderedCallback(vm);
+  }
+  function hydrateNode(node, vnode) {
+      let hydratedNode;
+      switch (vnode.type) {
+          case 0 /* Text */:
+              hydratedNode = hydrateText(node, vnode);
+              break;
+          case 1 /* Comment */:
+              hydratedNode = hydrateComment(node, vnode);
+              break;
+          case 2 /* Element */:
+              hydratedNode = hydrateElement(node, vnode);
+              break;
+          case 3 /* CustomElement */:
+              hydratedNode = hydrateCustomElement(node, vnode);
+              break;
+      }
+      return nextSibling$1(hydratedNode);
+  }
+  function hydrateText(node, vnode) {
+      var _a;
+      if (!hasCorrectNodeType(vnode, node, 3 /* TEXT */)) {
+          return handleMismatch(node, vnode);
+      }
+      setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+      vnode.elm = node;
+      return node;
+  }
+  function hydrateComment(node, vnode) {
+      var _a;
+      if (!hasCorrectNodeType(vnode, node, 8 /* COMMENT */)) {
+          return handleMismatch(node, vnode);
+      }
+      setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+      vnode.elm = node;
+      return node;
+  }
+  function hydrateElement(elm, vnode) {
+      if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+          !isMatchingElement(vnode, elm)) {
+          return handleMismatch(elm, vnode);
+      }
+      vnode.elm = elm;
+      const { context } = vnode.data;
+      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual" /* Manual */);
+      if (isDomManual) {
+          // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+          // remove the innerHTML from props so it reuses the existing dom elements.
+          const { props } = vnode.data;
+          if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+              if (getProperty$1(elm, 'innerHTML') === props.innerHTML) {
+                  // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+                  vnode.data = Object.assign(Object.assign({}, vnode.data), { props: cloneAndOmitKey(props, 'innerHTML') });
+              }
+          }
+      }
+      patchElementPropsAndAttrs(vnode);
+      if (!isDomManual) {
+          hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vnode.owner);
+      }
+      return elm;
+  }
+  function hydrateCustomElement(elm, vnode) {
+      if (!hasCorrectNodeType(vnode, elm, 1 /* ELEMENT */) ||
+          !isMatchingElement(vnode, elm)) {
+          return handleMismatch(elm, vnode);
+      }
+      const { sel, mode, ctor, owner } = vnode;
+      const vm = createVM(elm, ctor, {
+          mode,
+          owner,
+          tagName: sel,
+      });
+      vnode.elm = elm;
+      vnode.vm = vm;
+      allocateChildren(vnode, vm);
+      patchElementPropsAndAttrs(vnode);
+      runConnectedCallback(vm);
+      if (vm.renderMode !== 0 /* Light */) {
+          // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+          // Note: for Light DOM, this is handled while hydrating the VM
+          hydrateChildren(getFirstChild$1(elm), vnode.children, elm);
+      }
+      hydrateVM(vm);
+      return elm;
+  }
+  function hydrateChildren(node, children, parentNode, owner) {
+      let nextNode = node;
+      let anchor = null;
+      for (let i = 0; i < children.length; i++) {
+          const childVnode = children[i];
+          if (!isNull(childVnode)) {
+              if (nextNode) {
+                  nextNode = hydrateNode(nextNode, childVnode);
+                  anchor = childVnode.elm;
+              }
+              else {
+                  hasMismatch = true;
+                  mount(childVnode, parentNode, anchor);
+                  anchor = childVnode.elm;
+              }
+          }
+      }
+      if (nextNode) {
+          hasMismatch = true;
+          do {
+              const current = nextNode;
+              nextNode = nextSibling$1(nextNode);
+              removeNode(current, parentNode);
+          } while (nextNode);
+      }
+  }
+  function handleMismatch(node, vnode, msg) {
+      hasMismatch = true;
+      const parentNode = getProperty$1(node, 'parentNode');
+      mount(vnode, parentNode, node);
+      removeNode(node, parentNode);
+      return vnode.elm;
+  }
+  function patchElementPropsAndAttrs(vnode) {
+      applyEventListeners(vnode);
+      patchProps(null, vnode);
+  }
+  function hasCorrectNodeType(vnode, node, nodeType) {
+      if (getProperty$1(node, 'nodeType') !== nodeType) {
+          return false;
+      }
+      return true;
+  }
+  function isMatchingElement(vnode, elm) {
+      if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+          return false;
+      }
+      const hasIncompatibleAttrs = validateAttrs(vnode, elm);
+      const hasIncompatibleClass = validateClassAttr(vnode, elm);
+      const hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+      return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+  }
+  function validateAttrs(vnode, elm) {
+      const { data: { attrs = {} }, } = vnode;
+      let nodesAreCompatible = true;
+      // Validate attributes, though we could always recovery from those by running the update mods.
+      // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+      for (const [attrName, attrValue] of Object.entries(attrs)) {
+          const elmAttrValue = getAttribute$1(elm, attrName);
+          if (String(attrValue) !== elmAttrValue) {
+              nodesAreCompatible = false;
+          }
+      }
+      return nodesAreCompatible;
+  }
+  function validateClassAttr(vnode, elm) {
+      const { data: { className, classMap }, } = vnode;
+      let nodesAreCompatible = true;
+      if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
+          // className is used when class is bound to an expr.
+          nodesAreCompatible = false;
+      }
+      else if (!isUndefined$1(classMap)) {
+          // classMap is used when class is set to static value.
+          const classList = getClassList$1(elm);
+          let computedClassName = '';
+          // all classes from the vnode should be in the element.classList
+          for (const name in classMap) {
+              computedClassName += ' ' + name;
+              if (!classList.contains(name)) {
+                  nodesAreCompatible = false;
+              }
+          }
+          computedClassName.trim();
+          if (classList.length > keys(classMap).length) {
+              nodesAreCompatible = false;
+          }
+      }
+      return nodesAreCompatible;
+  }
+  function validateStyleAttr(vnode, elm) {
+      const { data: { style, styleDecls }, } = vnode;
+      const elmStyle = getAttribute$1(elm, 'style') || '';
+      let nodesAreCompatible = true;
+      if (!isUndefined$1(style) && style !== elmStyle) {
+          nodesAreCompatible = false;
+      }
+      else if (!isUndefined$1(styleDecls)) {
+          const parsedVnodeStyle = parseStyleText(elmStyle);
+          const expectedStyle = [];
+          // styleMap is used when style is set to static value.
+          for (let i = 0, n = styleDecls.length; i < n; i++) {
+              const [prop, value, important] = styleDecls[i];
+              expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+              const parsedPropValue = parsedVnodeStyle[prop];
+              if (isUndefined$1(parsedPropValue)) {
+                  nodesAreCompatible = false;
+              }
+              else if (!parsedPropValue.startsWith(value)) {
+                  nodesAreCompatible = false;
+              }
+              else if (important && !parsedPropValue.endsWith('!important')) {
+                  nodesAreCompatible = false;
+              }
+          }
+          if (keys(parsedVnodeStyle).length > styleDecls.length) {
+              nodesAreCompatible = false;
+          }
+          ArrayJoin.call(expectedStyle, ';');
+      }
+      return nodesAreCompatible;
+  }
+
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5005,7 +5138,7 @@
       hooksAreSet = true;
       setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.11.1 */
+  /* version: 2.12.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5325,7 +5458,7 @@
       }
   }
   function createVMWithProps(element, Ctor, props) {
-      createVM(element, Ctor, {
+      const vm = createVM(element, Ctor, {
           mode: 'open',
           owner: null,
           tagName: element.tagName.toLowerCase(),
@@ -5333,6 +5466,7 @@
       for (const [key, value] of Object.entries(props)) {
           element[key] = value;
       }
+      return vm;
   }
   function hydrateComponent(element, Ctor, props = {}) {
       if (!(element instanceof Element)) {
@@ -5353,8 +5487,8 @@
           // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
           // and uses the same algo to create the stylesheets as in SSR.
           setIsHydrating(true);
-          createVMWithProps(element, Ctor, props);
-          hydrateRootElement(element);
+          const vm = createVMWithProps(element, Ctor, props);
+          hydrateRoot(vm);
           // set it back since now we finished hydration.
           setIsHydrating(false);
       }
@@ -5611,7 +5745,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.11.1 */
+  /* version: 2.12.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;