lwc 2.11.1 → 2.12.1

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

@@ -52,6 +52,8 @@
 
   function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -348,7 +350,7 @@
   var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.11.1 */
+  /** version: 2.12.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -518,7 +520,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.11.1 */
+  /** version: 2.12.1 */
 
   /* proxy-compat-disable */
 
@@ -561,6 +563,42 @@
 
     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
+
+
+  var DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+  var PROPERTY_DELIMITER = /:(.+)/;
+
+  function parseStyleText(cssText) {
+    var styleMap = {};
+    var declarations = cssText.split(DECLARATION_DELIMITER);
+
+    var _iterator = _createForOfIteratorHelper(declarations),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var declaration = _step.value;
+
+        if (declaration) {
+          var _declaration$split = declaration.split(PROPERTY_DELIMITER),
+              _declaration$split2 = _slicedToArray(_declaration$split, 2),
+              prop = _declaration$split2[0],
+              value = _declaration$split2[1];
+
+          if (prop !== undefined && value !== undefined) {
+            styleMap[prop.trim()] = value.trim();
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return styleMap;
+  } // Make a shallow copy of an object but omit the given key
 
 
   function cloneAndOmitKey(object, keyToOmit) {
@@ -1033,8 +1071,8 @@
     }
   }
 
-  function logWarn(message, vm) {
-    log('warn', message, vm);
+  function logError(message, vm) {
+    log('error', message, vm);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5057,140 +5095,6 @@
       cbs[_i22].call(undefined, component, {}, def, context);
     }
   }
-  /*
-   * 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;
-
-
-    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-  }
-
-  function hydrateComment(vnode, node) {
-    var _a;
-
-
-    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-  }
-
-  function hydrateElement(vnode, node) {
-
-    var elm = node;
-    vnode.elm = elm;
-    var context = vnode.data.context;
-    var 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.
-      var props = vnode.data.props;
-
-      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 <".concat(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) {
-
-    var elm = node;
-    var sel = vnode.sel,
-        mode = vnode.mode,
-        ctor = vnode.ctor,
-        owner = vnode.owner;
-    var vm = createVM(elm, ctor, {
-      mode: mode,
-      owner: owner,
-      tagName: sel
-    });
-    vnode.elm = elm;
-    vnode.vm = vm;
-    allocateChildren(vnode, vm);
-    patchElementPropsAndAttrs(vnode); // Insert hook section:
-
-    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) {
-
-    var childNodeIndex = 0;
-
-    for (var _i23 = 0; _i23 < children.length; _i23++) {
-      var childVnode = children[_i23];
-
-      if (!isNull(childVnode)) {
-        var childNode = elmChildren[childNodeIndex];
-        hydrate(childVnode, childNode);
-        childNodeIndex++;
-      }
-    }
-  }
-
-  function patchElementPropsAndAttrs(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -5241,12 +5145,6 @@
     , vm);
   }
 
-  function hydrateRootElement(elm) {
-    var vm = getAssociatedVM(elm);
-    runConnectedCallback(vm);
-    hydrateVM(vm);
-  }
-
   function disconnectRootElement(elm) {
     var vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
@@ -5254,22 +5152,6 @@
 
   function appendVM(vm) {
     rehydrate(vm);
-  }
-
-  function hydrateVM(vm) {
-    if (isTrue(vm.isDirty)) {
-      // manually diffing/patching here.
-      // This routine is:
-      // patchShadowRoot(vm, children);
-      //  -> addVnodes.
-      var children = renderComponent(vm);
-      vm.children = children;
-      var 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.
 
@@ -5535,19 +5417,19 @@
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i26 = 0, _len8 = vms.length; _i26 < _len8; _i26 += 1) {
-      var vm = vms[_i26];
+    for (var _i23 = 0, _len8 = vms.length; _i23 < _len8; _i23 += 1) {
+      var vm = vms[_i23];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i26 + 1 < _len8) {
+        if (_i23 + 1 < _len8) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i26 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i23 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -5646,8 +5528,8 @@
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i27 = vCustomElementCollection.length - 1; _i27 >= 0; _i27 -= 1) {
-      var elm = vCustomElementCollection[_i27].elm; // There are two cases where the element could be undefined:
+    for (var _i24 = vCustomElementCollection.length - 1; _i24 >= 0; _i24 -= 1) {
+      var elm = vCustomElementCollection[_i24].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -5681,8 +5563,8 @@
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i28 = 0, _len9 = vnodes.length; _i28 < _len9; _i28 += 1) {
-      var vnode = vnodes[_i28];
+    for (var _i25 = 0, _len9 = vnodes.length; _i25 < _len9; _i25 += 1) {
+      var vnode = vnodes[_i25];
 
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
         switch (vnode.type) {
@@ -5713,8 +5595,8 @@
     var children = vm.children,
         renderRoot = vm.renderRoot;
 
-    for (var _i29 = 0, _len10 = children.length; _i29 < _len10; _i29++) {
-      var child = children[_i29];
+    for (var _i26 = 0, _len10 = children.length; _i26 < _len10; _i26++) {
+      var child = children[_i26];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         remove$1(child.elm, renderRoot);
@@ -6064,8 +5946,8 @@
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i30 = 0, _len11 = wiredConnecting.length; _i30 < _len11; _i30 += 1) {
-      wiredConnecting[_i30]();
+    for (var _i27 = 0, _len11 = wiredConnecting.length; _i27 < _len11; _i27 += 1) {
+      wiredConnecting[_i27]();
     }
   }
 
@@ -6073,8 +5955,8 @@
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i31 = 0, _len12 = wiredDisconnecting.length; _i31 < _len12; _i31 += 1) {
-        wiredDisconnecting[_i31]();
+      for (var _i28 = 0, _len12 = wiredDisconnecting.length; _i28 < _len12; _i28 += 1) {
+        wiredDisconnecting[_i28]();
       }
     }, noop);
   }
@@ -6144,6 +6026,327 @@
 
     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
+
+
+  var hasMismatch = false;
+
+  function hydrateRoot(vm) {
+    hasMismatch = false;
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+
+    if (hasMismatch) {
+      logError('Hydration completed with errors.', vm);
+    }
+  }
+
+  function hydrateVM(vm) {
+    var children = renderComponent(vm);
+    vm.children = children;
+    var parentNode = vm.renderRoot;
+    hydrateChildren(getFirstChild$1(parentNode), children, parentNode);
+    runRenderedCallback(vm);
+  }
+
+  function hydrateNode(node, vnode) {
+    var 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;
+    var context = vnode.data.context;
+    var 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.
+      var props = vnode.data.props;
+
+      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);
+    }
+
+    var sel = vnode.sel,
+        mode = vnode.mode,
+        ctor = vnode.ctor,
+        owner = vnode.owner;
+    var vm = createVM(elm, ctor, {
+      mode: mode,
+      owner: owner,
+      tagName: sel
+    });
+    vnode.elm = elm;
+    vnode.vm = vm;
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode); // Insert hook section:
+
+    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) {
+    var nextNode = node;
+    var anchor = null;
+
+    for (var _i29 = 0; _i29 < children.length; _i29++) {
+      var childVnode = children[_i29];
+
+      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 {
+        var current = nextNode;
+        nextNode = nextSibling$1(nextNode);
+        removeNode(current, parentNode);
+      } while (nextNode);
+    }
+  }
+
+  function handleMismatch(node, vnode, msg) {
+    hasMismatch = true;
+
+    var 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;
+    }
+
+    var hasIncompatibleAttrs = validateAttrs(vnode, elm);
+    var hasIncompatibleClass = validateClassAttr(vnode, elm);
+    var hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+  }
+
+  function validateAttrs(vnode, elm) {
+    var _vnode$data$attrs = vnode.data.attrs,
+        attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs;
+    var 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 (var _i30 = 0, _Object$entries = Object.entries(attrs); _i30 < _Object$entries.length; _i30++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i30], 2),
+          attrName = _Object$entries$_i[0],
+          attrValue = _Object$entries$_i[1];
+
+      var elmAttrValue = getAttribute$1(elm, attrName);
+
+      if (String(attrValue) !== elmAttrValue) {
+
+        nodesAreCompatible = false;
+      }
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function validateClassAttr(vnode, elm) {
+    var _vnode$data = vnode.data,
+        className = _vnode$data.className,
+        classMap = _vnode$data.classMap;
+    var 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.
+      var classList = getClassList$1(elm);
+      var computedClassName = ''; // all classes from the vnode should be in the element.classList
+
+      for (var 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) {
+    var _vnode$data2 = vnode.data,
+        style = _vnode$data2.style,
+        styleDecls = _vnode$data2.styleDecls;
+    var elmStyle = getAttribute$1(elm, 'style') || '';
+    var nodesAreCompatible = true;
+
+    if (!isUndefined$1(style) && style !== elmStyle) {
+      nodesAreCompatible = false;
+    } else if (!isUndefined$1(styleDecls)) {
+      var parsedVnodeStyle = parseStyleText(elmStyle);
+      var expectedStyle = []; // styleMap is used when style is set to static value.
+
+      for (var _i31 = 0, n = styleDecls.length; _i31 < n; _i31++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i31], 3),
+            prop = _styleDecls$_i2[0],
+            value = _styleDecls$_i2[1],
+            important = _styleDecls$_i2[2];
+
+        expectedStyle.push("".concat(prop, ": ").concat(value + (important ? ' important!' : '')));
+        var 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.
@@ -6159,7 +6362,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.11.1 */
+  /* version: 2.12.1 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6546,7 +6749,7 @@
   }
 
   function createVMWithProps(element, Ctor, props) {
-    createVM(element, Ctor, {
+    var vm = createVM(element, Ctor, {
       mode: 'open',
       owner: null,
       tagName: element.tagName.toLowerCase()
@@ -6559,6 +6762,8 @@
 
       element[key] = value;
     }
+
+    return vm;
   }
 
   function hydrateComponent(element, Ctor) {
@@ -6586,8 +6791,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); // set it back since now we finished hydration.
+      var vm = createVMWithProps(element, Ctor, props);
+      hydrateRoot(vm); // set it back since now we finished hydration.
 
       setIsHydrating(false);
     } catch (e) {
@@ -6902,7 +7107,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.11.1 */
+  /* version: 2.12.1 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;