lwc 2.11.0 → 2.12.0

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

@@ -123,7 +123,6 @@
       setPrototypeOf = Object.setPrototypeOf;
   var isArray$1 = Array.isArray;
   var _Array$prototype = Array.prototype,
-      ArrayFilter = _Array$prototype.filter,
       ArrayIndexOf = _Array$prototype.indexOf,
       ArrayJoin = _Array$prototype.join,
       ArrayMap = _Array$prototype.map,
@@ -363,9 +362,9 @@
    */
   // Increment whenever the LWC template compiler changes
 
-  var LWC_VERSION = "2.11.0";
+  var LWC_VERSION = "2.12.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.11.0 */
+  /** version: 2.12.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -543,7 +542,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.11.0 */
+  /** version: 2.12.0 */
 
   /* proxy-compat-disable */
 
@@ -6422,16 +6421,20 @@
    * will prevent this function from being imported by userland code.
    */
 
-  function registerComponent(Ctor, _ref2) {
+  function registerComponent( // We typically expect a LightningElementConstructor, but technically you can call this with anything
+  Ctor, _ref2) {
     var tmpl = _ref2.tmpl;
 
-    if (process.env.NODE_ENV !== 'production') {
-      checkVersionMismatch(Ctor, 'component');
-    }
+    if (isFunction$1(Ctor)) {
+      if (process.env.NODE_ENV !== 'production') {
+        checkVersionMismatch(Ctor, 'component');
+      }
 
-    signedTemplateMap.set(Ctor, tmpl); // chaining this method as a way to wrap existing assignment of component constructor easily,
+      signedTemplateMap.set(Ctor, tmpl);
+    } // chaining this method as a way to wrap existing assignment of component constructor easily,
     // without too much transformation
 
+
     return Ctor;
   }
 
@@ -6543,1353 +6546,1405 @@
     }
   }
   /*
-   * Copyright (c) 2022, salesforce.com, inc.
+   * Copyright (c) 2018, 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;
+  var idx = 0;
+  /** The internal slot used to associate different objects the engine manipulates with the VM */
 
-      case 1
-      /* Comment */
-      :
-        hydrateComment(vnode, node);
-        break;
+  var ViewModelReflection = new WeakMap();
 
-      case 2
-      /* Element */
-      :
-        hydrateElement(vnode, node);
-        break;
+  function callHook(cmp, fn) {
+    var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    return fn.apply(cmp, args);
+  }
 
-      case 3
-      /* CustomElement */
-      :
-        hydrateCustomElement(vnode, node);
-        break;
-    }
+  function setHook(cmp, prop, newValue) {
+    cmp[prop] = newValue;
   }
 
-  function hydrateText(vnode, node) {
-    var _a;
+  function getHook(cmp, prop) {
+    return cmp[prop];
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      validateNodeType(vnode, node, 3
-      /* TEXT */
-      );
-      var nodeValue = getProperty$1(node, 'nodeValue');
+  function rerenderVM(vm) {
+    rehydrate(vm);
+  }
 
-      if (nodeValue !== vnode.text && !(nodeValue === "\u200D" && vnode.text === '')) {
-        logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
-      }
-    } // always set the text value to the one from the vnode.
+  function connectRootElement(elm) {
+    var vm = getAssociatedVM(elm);
+    logGlobalOperationStart(7
+    /* GlobalHydrate */
+    , vm); // Usually means moving the element from one place to another, which is observable via
+    // life-cycle hooks.
 
+    if (vm.state === 1
+    /* connected */
+    ) {
+      disconnectRootElement(elm);
+    }
 
-    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
+    runConnectedCallback(vm);
+    rehydrate(vm);
+    logGlobalOperationEnd(7
+    /* GlobalHydrate */
+    , vm);
   }
 
-  function hydrateComment(vnode, node) {
-    var _a;
-
-    if (process.env.NODE_ENV !== 'production') {
-      validateNodeType(vnode, node, 8
-      /* COMMENT */
-      );
-
-      if (getProperty$1(node, 'nodeValue') !== vnode.text) {
-        logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
-      }
-    } // always set the text value to the one from the vnode.
+  function disconnectRootElement(elm) {
+    var vm = getAssociatedVM(elm);
+    resetComponentStateWhenRemoved(vm);
+  }
 
+  function appendVM(vm) {
+    rehydrate(vm);
+  } // just in case the component comes back, with this we guarantee re-rendering it
+  // while preventing any attempt to rehydration until after reinsertion.
 
-    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
-    vnode.elm = node;
-  }
 
-  function hydrateElement(vnode, node) {
-    if (process.env.NODE_ENV !== 'production') {
-      validateNodeType(vnode, node, 1
-      /* ELEMENT */
-      );
-      validateElement(vnode, node);
-    }
+  function resetComponentStateWhenRemoved(vm) {
+    var state = vm.state;
 
-    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 (state !== 2
+    /* disconnected */
+    ) {
+      var oar = vm.oar,
+          tro = vm.tro; // Making sure that any observing record will not trigger the rehydrated on this vm
 
-    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;
+      tro.reset(); // Making sure that any observing accessor record will not trigger the setter to be reinvoked
 
-      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);
-        }
+      for (var key in oar) {
+        oar[key].reset();
       }
-    }
 
-    patchElementPropsAndAttrs(vnode);
+      runDisconnectedCallback(vm); // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
 
-    if (!isDomManual) {
-      hydrateChildren(getChildNodes$1(vnode.elm), vnode.children, vnode.owner);
+      runChildNodesDisconnectedCallback(vm);
+      runLightChildNodesDisconnectedCallback(vm);
     }
-  }
 
-  function hydrateCustomElement(vnode, node) {
     if (process.env.NODE_ENV !== 'production') {
-      validateNodeType(vnode, node, 1
-      /* ELEMENT */
-      );
-      validateElement(vnode, node);
+      removeActiveVM(vm);
     }
+  } // this method is triggered by the diffing algo only when a vnode from the
+  // old vnode.children is removed from the DOM.
 
-    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:
 
+  function removeVM(vm) {
     if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(vm.state === 0
-      /* created */
-      , "".concat(vm, " cannot be recycled."));
+      assert.isTrue(vm.state === 1
+      /* connected */
+      || vm.state === 2
+      /* disconnected */
+      , "".concat(vm, " must have been connected."));
     }
 
-    runConnectedCallback(vm);
+    resetComponentStateWhenRemoved(vm);
+  }
 
-    if (vm.renderMode !== 0
+  function getNearestShadowAncestor(vm) {
+    var ancestor = vm.owner;
+
+    while (!isNull(ancestor) && ancestor.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, vm);
+      ancestor = ancestor.owner;
     }
 
-    hydrateVM(vm);
+    return ancestor;
   }
 
-  function hydrateChildren(elmChildren, children, vm) {
+  function createVM(elm, ctor, options) {
+    var mode = options.mode,
+        owner = options.owner,
+        tagName = options.tagName;
+    var def = getComponentInternalDef(ctor);
+    var vm = {
+      elm: elm,
+      def: def,
+      idx: idx++,
+      state: 0
+      /* created */
+      ,
+      isScheduled: false,
+      isDirty: true,
+      tagName: tagName,
+      mode: mode,
+      owner: owner,
+      children: EmptyArray,
+      aChildren: EmptyArray,
+      velements: EmptyArray,
+      cmpProps: create(null),
+      cmpFields: create(null),
+      cmpSlots: create(null),
+      oar: create(null),
+      cmpTemplate: null,
+      renderMode: def.renderMode,
+      context: {
+        stylesheetToken: undefined,
+        hasTokenInClass: undefined,
+        hasTokenInAttribute: undefined,
+        hasScopedStyles: undefined,
+        styleVNode: null,
+        tplCache: EmptyObject,
+        wiredConnecting: EmptyArray,
+        wiredDisconnecting: EmptyArray
+      },
+      // Properties set right after VM creation.
+      tro: null,
+      shadowMode: null,
+      // Properties set by the LightningElement constructor.
+      component: null,
+      shadowRoot: null,
+      renderRoot: null,
+      callHook: callHook,
+      setHook: setHook,
+      getHook: getHook
+    };
+    vm.shadowMode = computeShadowMode(vm);
+    vm.tro = getTemplateReactiveObserver(vm);
+
     if (process.env.NODE_ENV !== 'production') {
-      var filteredVNodes = ArrayFilter.call(children, function (vnode) {
-        return !!vnode;
-      });
+      vm.toString = function () {
+        return "[object:vm ".concat(def.name, " (").concat(vm.idx, ")]");
+      };
 
-      if (elmChildren.length !== filteredVNodes.length) {
-        logError("Hydration mismatch: incorrect number of rendered nodes, expected ".concat(filteredVNodes.length, " but found ").concat(elmChildren.length, "."), vm);
-        throwHydrationError();
+      if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
+        vm.shadowMode = 0
+        /* Native */
+        ;
       }
-    }
+    } // Create component instance associated to the vm and the element.
 
-    var childNodeIndex = 0;
 
-    for (var _i23 = 0; _i23 < children.length; _i23++) {
-      var childVnode = children[_i23];
+    invokeComponentConstructor(vm, def.ctor); // Initializing the wire decorator per instance only when really needed
 
-      if (!isNull(childVnode)) {
-        var childNode = elmChildren[childNodeIndex];
-        hydrate(childVnode, childNode);
-        childNodeIndex++;
-      }
+    if (hasWireAdapters(vm)) {
+      installWireAdapters(vm);
     }
-  }
-
-  function patchElementPropsAndAttrs(vnode) {
-    applyEventListeners(vnode);
-    patchProps(null, vnode);
-  }
 
-  function throwHydrationError() {
-    assert.fail('Server rendered elements do not match client side generated elements');
+    return vm;
   }
 
-  function validateNodeType(vnode, node, nodeType) {
-    if (getProperty$1(node, 'nodeType') !== nodeType) {
-      logError('Hydration mismatch: incorrect node type received', vnode.owner);
-      assert.fail('Hydration mismatch: incorrect node type received.');
-    }
-  }
+  function computeShadowMode(vm) {
+    var def = vm.def;
+    var shadowMode;
 
-  function validateElement(vnode, elm) {
-    if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
-      logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(getProperty$1(elm, 'tagName').toLowerCase(), "\"."), vnode.owner);
-      throwHydrationError();
-    }
+    if (isSyntheticShadowDefined$1) {
+      if (def.renderMode === 0
+      /* Light */
+      ) {
+        // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
+        // everything defaults to native when the synthetic shadow polyfill is unavailable.
+        shadowMode = 0
+        /* Native */
+        ;
+      } else if (isNativeShadowDefined$1) {
+        // Not combined with above condition because @lwc/features only supports identifiers in
+        // the if-condition.
+        if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
+          if (def.shadowSupportMode === "any"
+          /* Any */
+          ) {
+            shadowMode = 0
+            /* Native */
+            ;
+          } else {
+            var shadowAncestor = getNearestShadowAncestor(vm);
 
-    var hasIncompatibleAttrs = validateAttrs(vnode, elm);
-    var hasIncompatibleClass = validateClassAttr(vnode, elm);
-    var hasIncompatibleStyle = validateStyleAttr(vnode, elm);
-    var isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
-
-    if (!isVNodeAndElementCompatible) {
-      throwHydrationError();
+            if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
+            /* Native */
+            ) {
+              // Transitive support for native Shadow DOM. A component in native mode
+              // transitively opts all of its descendants into native.
+              shadowMode = 0
+              /* Native */
+              ;
+            } else {
+              // Synthetic if neither this component nor any of its ancestors are configured
+              // to be native.
+              shadowMode = 1
+              /* Synthetic */
+              ;
+            }
+          }
+        } else {
+          shadowMode = 1
+          /* Synthetic */
+          ;
+        }
+      } else {
+        // Synthetic if there is no native Shadow DOM support.
+        shadowMode = 1
+        /* Synthetic */
+        ;
+      }
+    } else {
+      // Native if the synthetic shadow polyfill is unavailable.
+      shadowMode = 0
+      /* Native */
+      ;
     }
+
+    return shadowMode;
   }
 
-  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.
+  function assertIsVM(obj) {
+    if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
+      throw new TypeError("".concat(obj, " is not a VM."));
+    }
+  }
 
-    for (var _i24 = 0, _Object$entries = Object.entries(attrs); _i24 < _Object$entries.length; _i24++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i24], 2),
-          attrName = _Object$entries$_i[0],
-          attrValue = _Object$entries$_i[1];
+  function associateVM(obj, vm) {
+    ViewModelReflection.set(obj, vm);
+  }
 
-      var elmAttrValue = getAttribute$1(elm, attrName);
+  function getAssociatedVM(obj) {
+    var vm = ViewModelReflection.get(obj);
 
-      if (String(attrValue) !== elmAttrValue) {
-        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
-        nodesAreCompatible = false;
-      }
+    if (process.env.NODE_ENV !== 'production') {
+      assertIsVM(vm);
     }
 
-    return nodesAreCompatible;
+    return vm;
   }
 
-  function validateClassAttr(vnode, elm) {
-    var _vnode$data = vnode.data,
-        className = _vnode$data.className,
-        classMap = _vnode$data.classMap;
-    var nodesAreCompatible = true;
-    var vnodeClassName;
+  function getAssociatedVMIfPresent(obj) {
+    var maybeVm = ViewModelReflection.get(obj);
 
-    if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
-      // className is used when class is bound to an expr.
-      nodesAreCompatible = false;
-      vnodeClassName = className;
-    } 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
+    if (process.env.NODE_ENV !== 'production') {
+      if (!isUndefined$1(maybeVm)) {
+        assertIsVM(maybeVm);
+      }
+    }
 
-      for (var name in classMap) {
-        computedClassName += ' ' + name;
+    return maybeVm;
+  }
 
-        if (!classList.contains(name)) {
-          nodesAreCompatible = false;
-        }
-      }
+  function rehydrate(vm) {
+    if (isTrue(vm.isDirty)) {
+      var children = renderComponent(vm);
+      patchShadowRoot(vm, children);
+    }
+  }
 
-      vnodeClassName = computedClassName.trim();
+  function patchShadowRoot(vm, newCh) {
+    var renderRoot = vm.renderRoot,
+        oldCh = vm.children; // caching the new children collection
 
-      if (classList.length > keys(classMap).length) {
-        nodesAreCompatible = false;
+    vm.children = newCh;
+
+    if (newCh.length > 0 || oldCh.length > 0) {
+      // patch function mutates vnodes by adding the element reference,
+      // however, if patching fails it contains partial changes.
+      if (oldCh !== newCh) {
+        runWithBoundaryProtection(vm, vm, function () {
+          // pre
+          logOperationStart(2
+          /* Patch */
+          , vm);
+        }, function () {
+          // job
+          patchChildren(oldCh, newCh, renderRoot);
+        }, function () {
+          // post
+          logOperationEnd(2
+          /* Patch */
+          , vm);
+        });
       }
     }
 
-    if (!nodesAreCompatible) {
-      logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(getProperty$1(elm, 'className'), "\""), vnode.owner);
+    if (vm.state === 1
+    /* connected */
+    ) {
+      // If the element is connected, that means connectedCallback was already issued, and
+      // any successive rendering should finish with the call to renderedCallback, otherwise
+      // the connectedCallback will take care of calling it in the right order at the end of
+      // the current rehydration process.
+      runRenderedCallback(vm);
     }
-
-    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 vnodeStyle;
-    var nodesAreCompatible = true;
+  function runRenderedCallback(vm) {
+    var renderedCallback = vm.def.renderedCallback;
 
-    if (!isUndefined$1(style) && style !== elmStyle) {
-      nodesAreCompatible = false;
-      vnodeStyle = style;
-    } else if (!isUndefined$1(styleDecls)) {
-      var parsedVnodeStyle = parseStyleText(elmStyle);
-      var expectedStyle = []; // styleMap is used when style is set to static value.
+    if (isTrue(ssr$1)) {
+      return;
+    }
 
-      for (var _i25 = 0, n = styleDecls.length; _i25 < n; _i25++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i25], 3),
-            prop = _styleDecls$_i2[0],
-            value = _styleDecls$_i2[1],
-            important = _styleDecls$_i2[2];
+    var rendered = Services.rendered;
 
-        expectedStyle.push("".concat(prop, ": ").concat(value + (important ? ' important!' : '')));
-        var parsedPropValue = parsedVnodeStyle[prop];
+    if (rendered) {
+      invokeServiceHook(vm, rendered);
+    }
 
-        if (isUndefined$1(parsedPropValue)) {
-          nodesAreCompatible = false;
-        } else if (!parsedPropValue.startsWith(value)) {
-          nodesAreCompatible = false;
-        } else if (important && !parsedPropValue.endsWith('!important')) {
-          nodesAreCompatible = false;
-        }
-      }
+    if (!isUndefined$1(renderedCallback)) {
+      logOperationStart(4
+      /* RenderedCallback */
+      , vm);
+      invokeComponentCallback(vm, renderedCallback);
+      logOperationEnd(4
+      /* RenderedCallback */
+      , vm);
+    }
+  }
 
-      if (keys(parsedVnodeStyle).length > styleDecls.length) {
-        nodesAreCompatible = false;
-      }
+  var rehydrateQueue = [];
 
-      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
-    }
+  function flushRehydrationQueue() {
+    logGlobalOperationStart(8
+    /* GlobalRehydrate */
+    );
 
-    if (!nodesAreCompatible) {
-      // style is used when class is bound to an expr.
-      logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+    if (process.env.NODE_ENV !== 'production') {
+      assert.invariant(rehydrateQueue.length, "If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ".concat(rehydrateQueue, "."));
     }
 
-    return nodesAreCompatible;
-  }
-  /*
-   * Copyright (c) 2018, 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
-   */
+    var vms = rehydrateQueue.sort(function (a, b) {
+      return a.idx - b.idx;
+    });
+    rehydrateQueue = []; // reset to a new queue
 
+    for (var _i23 = 0, _len8 = vms.length; _i23 < _len8; _i23 += 1) {
+      var vm = vms[_i23];
 
-  var idx = 0;
-  /** The internal slot used to associate different objects the engine manipulates with the VM */
+      try {
+        rehydrate(vm);
+      } catch (error) {
+        if (_i23 + 1 < _len8) {
+          // pieces of the queue are still pending to be rehydrated, those should have priority
+          if (rehydrateQueue.length === 0) {
+            addCallbackToNextTick(flushRehydrationQueue);
+          }
 
-  var ViewModelReflection = new WeakMap();
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i23 + 1));
+        } // we need to end the measure before throwing.
 
-  function callHook(cmp, fn) {
-    var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    return fn.apply(cmp, args);
-  }
 
-  function setHook(cmp, prop, newValue) {
-    cmp[prop] = newValue;
-  }
+        logGlobalOperationEnd(8
+        /* GlobalRehydrate */
+        ); // re-throwing the original error will break the current tick, but since the next tick is
+        // already scheduled, it should continue patching the rest.
 
-  function getHook(cmp, prop) {
-    return cmp[prop];
-  }
+        throw error; // eslint-disable-line no-unsafe-finally
+      }
+    }
 
-  function rerenderVM(vm) {
-    rehydrate(vm);
+    logGlobalOperationEnd(8
+    /* GlobalRehydrate */
+    );
   }
 
-  function connectRootElement(elm) {
-    var vm = getAssociatedVM(elm);
-    logGlobalOperationStart(7
-    /* GlobalHydrate */
-    , vm); // Usually means moving the element from one place to another, which is observable via
-    // life-cycle hooks.
+  function runConnectedCallback(vm) {
+    var state = vm.state;
 
-    if (vm.state === 1
+    if (state === 1
     /* connected */
     ) {
-      disconnectRootElement(elm);
+      return; // nothing to do since it was already connected
     }
 
-    runConnectedCallback(vm);
-    rehydrate(vm);
-    logGlobalOperationEnd(7
-    /* GlobalHydrate */
-    , vm);
-  }
+    vm.state = 1
+    /* connected */
+    ; // reporting connection
 
-  function hydrateRootElement(elm) {
-    var vm = getAssociatedVM(elm);
-    runConnectedCallback(vm);
-    hydrateVM(vm);
-  }
+    var connected = Services.connected;
 
-  function disconnectRootElement(elm) {
-    var vm = getAssociatedVM(elm);
-    resetComponentStateWhenRemoved(vm);
+    if (connected) {
+      invokeServiceHook(vm, connected);
+    }
+
+    if (hasWireAdapters(vm)) {
+      connectWireAdapters(vm);
+    }
+
+    var connectedCallback = vm.def.connectedCallback;
+
+    if (!isUndefined$1(connectedCallback)) {
+      logOperationStart(3
+      /* ConnectedCallback */
+      , vm);
+      invokeComponentCallback(vm, connectedCallback);
+      logOperationEnd(3
+      /* ConnectedCallback */
+      , vm);
+    }
   }
 
-  function appendVM(vm) {
-    rehydrate(vm);
+  function hasWireAdapters(vm) {
+    return getOwnPropertyNames$1(vm.def.wire).length > 0;
   }
 
-  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, vm);
-      runRenderedCallback(vm);
+  function runDisconnectedCallback(vm) {
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(vm.state !== 2
+      /* disconnected */
+      , "".concat(vm, " must be inserted."));
     }
-  } // just in case the component comes back, with this we guarantee re-rendering it
-  // while preventing any attempt to rehydration until after reinsertion.
 
+    if (isFalse(vm.isDirty)) {
+      // this guarantees that if the component is reused/reinserted,
+      // it will be re-rendered because we are disconnecting the reactivity
+      // linking, so mutations are not automatically reflected on the state
+      // of disconnected components.
+      vm.isDirty = true;
+    }
 
-  function resetComponentStateWhenRemoved(vm) {
-    var state = vm.state;
-
-    if (state !== 2
+    vm.state = 2
     /* disconnected */
-    ) {
-      var oar = vm.oar,
-          tro = vm.tro; // Making sure that any observing record will not trigger the rehydrated on this vm
-
-      tro.reset(); // Making sure that any observing accessor record will not trigger the setter to be reinvoked
+    ; // reporting disconnection
 
-      for (var key in oar) {
-        oar[key].reset();
-      }
+    var disconnected = Services.disconnected;
 
-      runDisconnectedCallback(vm); // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
+    if (disconnected) {
+      invokeServiceHook(vm, disconnected);
+    }
 
-      runChildNodesDisconnectedCallback(vm);
-      runLightChildNodesDisconnectedCallback(vm);
+    if (hasWireAdapters(vm)) {
+      disconnectWireAdapters(vm);
     }
 
-    if (process.env.NODE_ENV !== 'production') {
-      removeActiveVM(vm);
+    var disconnectedCallback = vm.def.disconnectedCallback;
+
+    if (!isUndefined$1(disconnectedCallback)) {
+      logOperationStart(5
+      /* DisconnectedCallback */
+      , vm);
+      invokeComponentCallback(vm, disconnectedCallback);
+      logOperationEnd(5
+      /* DisconnectedCallback */
+      , vm);
     }
-  } // this method is triggered by the diffing algo only when a vnode from the
-  // old vnode.children is removed from the DOM.
+  }
 
+  function runChildNodesDisconnectedCallback(vm) {
+    var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
+    // inserted in reserved order.
 
-  function removeVM(vm) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(vm.state === 1
-      /* connected */
-      || vm.state === 2
-      /* disconnected */
-      , "".concat(vm, " must have been connected."));
+    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.
+      // * when slotted custom element is not used by the element where it is
+      //   slotted into it, as  a result, the custom element was never
+      //   initialized.
+
+      if (!isUndefined$1(elm)) {
+        var childVM = getAssociatedVMIfPresent(elm); // The VM associated with the element might be associated undefined
+        // in the case where the VM failed in the middle of its creation,
+        // eg: constructor throwing before invoking super().
+
+        if (!isUndefined$1(childVM)) {
+          resetComponentStateWhenRemoved(childVM);
+        }
+      }
     }
+  }
 
-    resetComponentStateWhenRemoved(vm);
+  function runLightChildNodesDisconnectedCallback(vm) {
+    var adoptedChildren = vm.aChildren;
+    recursivelyDisconnectChildren(adoptedChildren);
   }
+  /**
+   * The recursion doesn't need to be a complete traversal of the vnode graph,
+   * instead it can be partial, when a custom element vnode is found, we don't
+   * need to continue into its children because by attempting to disconnect the
+   * custom element itself will trigger the removal of anything slotted or anything
+   * defined on its shadow.
+   */
 
-  function getNearestShadowAncestor(vm) {
-    var ancestor = vm.owner;
 
-    while (!isNull(ancestor) && ancestor.renderMode === 0
-    /* Light */
-    ) {
-      ancestor = ancestor.owner;
+  function recursivelyDisconnectChildren(vnodes) {
+    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) {
+          case 2
+          /* Element */
+          :
+            recursivelyDisconnectChildren(vnode.children);
+            break;
+
+          case 3
+          /* CustomElement */
+          :
+            {
+              var vm = getAssociatedVM(vnode.elm);
+              resetComponentStateWhenRemoved(vm);
+              break;
+            }
+        }
+      }
     }
+  } // This is a super optimized mechanism to remove the content of the root node (shadow root
+  // for shadow DOM components and the root element itself for light DOM) without having to go
+  // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
+  // children VNodes might not be representing the current state of the DOM.
 
-    return ancestor;
-  }
 
-  function createVM(elm, ctor, options) {
-    var mode = options.mode,
-        owner = options.owner,
-        tagName = options.tagName;
-    var def = getComponentInternalDef(ctor);
-    var vm = {
-      elm: elm,
-      def: def,
-      idx: idx++,
-      state: 0
-      /* created */
-      ,
-      isScheduled: false,
-      isDirty: true,
-      tagName: tagName,
-      mode: mode,
-      owner: owner,
-      children: EmptyArray,
-      aChildren: EmptyArray,
-      velements: EmptyArray,
-      cmpProps: create(null),
-      cmpFields: create(null),
-      cmpSlots: create(null),
-      oar: create(null),
-      cmpTemplate: null,
-      renderMode: def.renderMode,
-      context: {
-        stylesheetToken: undefined,
-        hasTokenInClass: undefined,
-        hasTokenInAttribute: undefined,
-        hasScopedStyles: undefined,
-        styleVNode: null,
-        tplCache: EmptyObject,
-        wiredConnecting: EmptyArray,
-        wiredDisconnecting: EmptyArray
-      },
-      // Properties set right after VM creation.
-      tro: null,
-      shadowMode: null,
-      // Properties set by the LightningElement constructor.
-      component: null,
-      shadowRoot: null,
-      renderRoot: null,
-      callHook: callHook,
-      setHook: setHook,
-      getHook: getHook
-    };
-    vm.shadowMode = computeShadowMode(vm);
-    vm.tro = getTemplateReactiveObserver(vm);
+  function resetComponentRoot(vm) {
+    var children = vm.children,
+        renderRoot = vm.renderRoot;
 
-    if (process.env.NODE_ENV !== 'production') {
-      vm.toString = function () {
-        return "[object:vm ".concat(def.name, " (").concat(vm.idx, ")]");
-      };
+    for (var _i26 = 0, _len10 = children.length; _i26 < _len10; _i26++) {
+      var child = children[_i26];
 
-      if (runtimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
-        vm.shadowMode = 0
-        /* Native */
-        ;
+      if (!isNull(child) && !isUndefined$1(child.elm)) {
+        remove$1(child.elm, renderRoot);
       }
-    } // Create component instance associated to the vm and the element.
+    }
 
+    vm.children = EmptyArray;
+    runChildNodesDisconnectedCallback(vm);
+    vm.velements = EmptyArray;
+  }
 
-    invokeComponentConstructor(vm, def.ctor); // Initializing the wire decorator per instance only when really needed
+  function scheduleRehydration(vm) {
+    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
+      return;
+    }
 
-    if (hasWireAdapters(vm)) {
-      installWireAdapters(vm);
+    vm.isScheduled = true;
+
+    if (rehydrateQueue.length === 0) {
+      addCallbackToNextTick(flushRehydrationQueue);
     }
 
-    return vm;
+    ArrayPush$1.call(rehydrateQueue, vm);
   }
 
-  function computeShadowMode(vm) {
-    var def = vm.def;
-    var shadowMode;
+  function getErrorBoundaryVM(vm) {
+    var currentVm = vm;
 
-    if (isSyntheticShadowDefined$1) {
-      if (def.renderMode === 0
-      /* Light */
-      ) {
-        // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
-        // everything defaults to native when the synthetic shadow polyfill is unavailable.
-        shadowMode = 0
-        /* Native */
-        ;
-      } else if (isNativeShadowDefined$1) {
-        // Not combined with above condition because @lwc/features only supports identifiers in
-        // the if-condition.
-        if (runtimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-          if (def.shadowSupportMode === "any"
-          /* Any */
-          ) {
-            shadowMode = 0
-            /* Native */
-            ;
-          } else {
-            var shadowAncestor = getNearestShadowAncestor(vm);
-
-            if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
-            /* Native */
-            ) {
-              // Transitive support for native Shadow DOM. A component in native mode
-              // transitively opts all of its descendants into native.
-              shadowMode = 0
-              /* Native */
-              ;
-            } else {
-              // Synthetic if neither this component nor any of its ancestors are configured
-              // to be native.
-              shadowMode = 1
-              /* Synthetic */
-              ;
-            }
-          }
-        } else {
-          shadowMode = 1
-          /* Synthetic */
-          ;
-        }
-      } else {
-        // Synthetic if there is no native Shadow DOM support.
-        shadowMode = 1
-        /* Synthetic */
-        ;
+    while (!isNull(currentVm)) {
+      if (!isUndefined$1(currentVm.def.errorCallback)) {
+        return currentVm;
       }
-    } else {
-      // Native if the synthetic shadow polyfill is unavailable.
-      shadowMode = 0
-      /* Native */
-      ;
-    }
-
-    return shadowMode;
-  }
 
-  function assertIsVM(obj) {
-    if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
-      throw new TypeError("".concat(obj, " is not a VM."));
+      currentVm = currentVm.owner;
     }
   }
 
-  function associateVM(obj, vm) {
-    ViewModelReflection.set(obj, vm);
-  }
+  function runWithBoundaryProtection(vm, owner, pre, job, post) {
+    var error;
+    pre();
 
-  function getAssociatedVM(obj) {
-    var vm = ViewModelReflection.get(obj);
+    try {
+      job();
+    } catch (e) {
+      error = Object(e);
+    } finally {
+      post();
 
-    if (process.env.NODE_ENV !== 'production') {
-      assertIsVM(vm);
-    }
+      if (!isUndefined$1(error)) {
+        addErrorComponentStack(vm, error);
+        var errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
 
-    return vm;
-  }
+        if (isUndefined$1(errorBoundaryVm)) {
+          throw error; // eslint-disable-line no-unsafe-finally
+        }
 
-  function getAssociatedVMIfPresent(obj) {
-    var maybeVm = ViewModelReflection.get(obj);
+        resetComponentRoot(vm); // remove offenders
 
-    if (process.env.NODE_ENV !== 'production') {
-      if (!isUndefined$1(maybeVm)) {
-        assertIsVM(maybeVm);
+        logOperationStart(6
+        /* ErrorCallback */
+        , vm); // error boundaries must have an ErrorCallback
+
+        var errorCallback = errorBoundaryVm.def.errorCallback;
+        invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
+        logOperationEnd(6
+        /* ErrorCallback */
+        , vm);
       }
     }
-
-    return maybeVm;
   }
 
-  function rehydrate(vm) {
-    if (isTrue(vm.isDirty)) {
-      var children = renderComponent(vm);
-      patchShadowRoot(vm, children);
+  function forceRehydration(vm) {
+    // if we must reset the shadowRoot content and render the template
+    // from scratch on an active instance, the way to force the reset
+    // is by replacing the value of old template, which is used during
+    // to determine if the template has changed or not during the rendering
+    // process. If the template returned by render() is different from the
+    // previous stored template, the styles will be reset, along with the
+    // content of the shadowRoot, this way we can guarantee that all children
+    // elements will be throw away, and new instances will be created.
+    vm.cmpTemplate = function () {
+      return [];
+    };
+
+    if (isFalse(vm.isDirty)) {
+      // forcing the vm to rehydrate in the next tick
+      markComponentAsDirty(vm);
+      scheduleRehydration(vm);
     }
   }
+  /*
+   * Copyright (c) 2018, 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 patchShadowRoot(vm, newCh) {
-    var renderRoot = vm.renderRoot,
-        oldCh = vm.children; // caching the new children collection
-
-    vm.children = newCh;
 
-    if (newCh.length > 0 || oldCh.length > 0) {
-      // patch function mutates vnodes by adding the element reference,
-      // however, if patching fails it contains partial changes.
-      if (oldCh !== newCh) {
-        runWithBoundaryProtection(vm, vm, function () {
-          // pre
-          logOperationStart(2
-          /* Patch */
-          , vm);
-        }, function () {
-          // job
-          patchChildren(oldCh, newCh, renderRoot);
-        }, function () {
-          // post
-          logOperationEnd(2
-          /* Patch */
-          , vm);
-        });
-      }
-    }
+  var DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
+  var DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
+  var WireMetaMap = new Map();
 
-    if (vm.state === 1
-    /* connected */
-    ) {
-      // If the element is connected, that means connectedCallback was already issued, and
-      // any successive rendering should finish with the call to renderedCallback, otherwise
-      // the connectedCallback will take care of calling it in the right order at the end of
-      // the current rehydration process.
-      runRenderedCallback(vm);
-    }
-  }
+  var WireContextRegistrationEvent = /*#__PURE__*/function (_CustomEvent) {
+    _inherits(WireContextRegistrationEvent, _CustomEvent);
 
-  function runRenderedCallback(vm) {
-    var renderedCallback = vm.def.renderedCallback;
+    var _super6 = _createSuper(WireContextRegistrationEvent);
 
-    if (isTrue(ssr$1)) {
-      return;
-    }
+    function WireContextRegistrationEvent(adapterToken, _ref3) {
+      var _this5;
 
-    var rendered = Services.rendered;
+      var setNewContext = _ref3.setNewContext,
+          setDisconnectedCallback = _ref3.setDisconnectedCallback;
 
-    if (rendered) {
-      invokeServiceHook(vm, rendered);
-    }
+      _classCallCheck(this, WireContextRegistrationEvent);
 
-    if (!isUndefined$1(renderedCallback)) {
-      logOperationStart(4
-      /* RenderedCallback */
-      , vm);
-      invokeComponentCallback(vm, renderedCallback);
-      logOperationEnd(4
-      /* RenderedCallback */
-      , vm);
+      _this5 = _super6.call(this, adapterToken, {
+        bubbles: true,
+        composed: true
+      });
+      defineProperties(_assertThisInitialized(_this5), {
+        setNewContext: {
+          value: setNewContext
+        },
+        setDisconnectedCallback: {
+          value: setDisconnectedCallback
+        }
+      });
+      return _this5;
     }
-  }
 
-  var rehydrateQueue = [];
+    return _createClass(WireContextRegistrationEvent);
+  }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
 
-  function flushRehydrationQueue() {
-    logGlobalOperationStart(8
-    /* GlobalRehydrate */
-    );
+  function createFieldDataCallback(vm, name) {
+    var cmpFields = vm.cmpFields;
+    return function (value) {
+      if (value !== vm.cmpFields[name]) {
+        // storing the value in the underlying storage
+        cmpFields[name] = value;
+        componentValueMutated(vm, name);
+      }
+    };
+  }
 
-    if (process.env.NODE_ENV !== 'production') {
-      assert.invariant(rehydrateQueue.length, "If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ".concat(rehydrateQueue, "."));
-    }
+  function createMethodDataCallback(vm, method) {
+    return function (value) {
+      // dispatching new value into the wired method
+      runWithBoundaryProtection(vm, vm.owner, noop, function () {
+        // job
+        method.call(vm.component, value);
+      }, noop);
+    };
+  }
 
-    var vms = rehydrateQueue.sort(function (a, b) {
-      return a.idx - b.idx;
-    });
-    rehydrateQueue = []; // reset to a new queue
+  function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
+    var hasPendingConfig = false; // creating the reactive observer for reactive params when needed
 
-    for (var _i26 = 0, _len8 = vms.length; _i26 < _len8; _i26 += 1) {
-      var vm = vms[_i26];
+    var ro = new ReactiveObserver(function () {
+      if (hasPendingConfig === false) {
+        hasPendingConfig = true; // collect new config in the micro-task
 
-      try {
-        rehydrate(vm);
-      } catch (error) {
-        if (_i26 + 1 < _len8) {
-          // pieces of the queue are still pending to be rehydrated, those should have priority
-          if (rehydrateQueue.length === 0) {
-            addCallbackToNextTick(flushRehydrationQueue);
-          }
+        Promise.resolve().then(function () {
+          hasPendingConfig = false; // resetting current reactive params
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i26 + 1));
-        } // we need to end the measure before throwing.
+          ro.reset(); // dispatching a new config due to a change in the configuration
 
+          computeConfigAndUpdate();
+        });
+      }
+    });
 
-        logGlobalOperationEnd(8
-        /* GlobalRehydrate */
-        ); // re-throwing the original error will break the current tick, but since the next tick is
-        // already scheduled, it should continue patching the rest.
+    var computeConfigAndUpdate = function computeConfigAndUpdate() {
+      var config;
+      ro.observe(function () {
+        return config = configCallback(component);
+      }); // eslint-disable-next-line lwc-internal/no-invalid-todo
+      // TODO: dev-mode validation of config based on the adapter.configSchema
+      // @ts-ignore it is assigned in the observe() callback
 
-        throw error; // eslint-disable-line no-unsafe-finally
-      }
-    }
+      callbackWhenConfigIsReady(config);
+    };
 
-    logGlobalOperationEnd(8
-    /* GlobalRehydrate */
-    );
+    return {
+      computeConfigAndUpdate: computeConfigAndUpdate,
+      ro: ro
+    };
   }
 
-  function runConnectedCallback(vm) {
-    var state = vm.state;
+  function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
+    var adapter = wireDef.adapter;
+    var adapterContextToken = getAdapterToken(adapter);
 
-    if (state === 1
-    /* connected */
-    ) {
-      return; // nothing to do since it was already connected
+    if (isUndefined$1(adapterContextToken)) {
+      return; // no provider found, nothing to be done
     }
 
-    vm.state = 1
-    /* connected */
-    ; // reporting connection
-
-    var connected = Services.connected;
-
-    if (connected) {
-      invokeServiceHook(vm, connected);
-    }
+    var elm = vm.elm,
+        _vm$context = vm.context,
+        wiredConnecting = _vm$context.wiredConnecting,
+        wiredDisconnecting = _vm$context.wiredDisconnecting; // waiting for the component to be connected to formally request the context via the token
 
-    if (hasWireAdapters(vm)) {
-      connectWireAdapters(vm);
-    }
+    ArrayPush$1.call(wiredConnecting, function () {
+      // This event is responsible for connecting the host element with another
+      // element in the composed path that is providing contextual data. The provider
+      // must be listening for a special dom event with the name corresponding to the value of
+      // `adapterContextToken`, which will remain secret and internal to this file only to
+      // guarantee that the linkage can be forged.
+      var contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
+        setNewContext: function setNewContext(newContext) {
+          // eslint-disable-next-line lwc-internal/no-invalid-todo
+          // TODO: dev-mode validation of config based on the adapter.contextSchema
+          callbackWhenContextIsReady(newContext);
+        },
+        setDisconnectedCallback: function setDisconnectedCallback(disconnectCallback) {
+          // adds this callback into the disconnect bucket so it gets disconnected from parent
+          // the the element hosting the wire is disconnected
+          ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
+        }
+      });
+      dispatchEvent$1(elm, contextRegistrationEvent);
+    });
+  }
 
-    var connectedCallback = vm.def.connectedCallback;
+  function createConnector(vm, name, wireDef) {
+    var method = wireDef.method,
+        adapter = wireDef.adapter,
+        configCallback = wireDef.configCallback,
+        dynamic = wireDef.dynamic;
+    var dataCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+    var context;
+    var connector; // Workaround to pass the component element associated to this wire adapter instance.
 
-    if (!isUndefined$1(connectedCallback)) {
-      logOperationStart(3
-      /* ConnectedCallback */
-      , vm);
-      invokeComponentCallback(vm, connectedCallback);
-      logOperationEnd(3
-      /* ConnectedCallback */
-      , vm);
-    }
-  }
+    defineProperty(dataCallback, DeprecatedWiredElementHost, {
+      value: vm.elm
+    });
+    defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
+      value: dynamic
+    });
+    runWithBoundaryProtection(vm, vm, noop, function () {
+      // job
+      connector = new adapter(dataCallback);
+    }, noop);
 
-  function hasWireAdapters(vm) {
-    return getOwnPropertyNames$1(vm.def.wire).length > 0;
-  }
+    var updateConnectorConfig = function updateConnectorConfig(config) {
+      // every time the config is recomputed due to tracking,
+      // this callback will be invoked with the new computed config
+      runWithBoundaryProtection(vm, vm, noop, function () {
+        // job
+        connector.update(config, context);
+      }, noop);
+    }; // Computes the current wire config and calls the update method on the wire adapter.
+    // If it has params, we will need to observe changes in the next tick.
 
-  function runDisconnectedCallback(vm) {
-    if (process.env.NODE_ENV !== 'production') {
-      assert.isTrue(vm.state !== 2
-      /* disconnected */
-      , "".concat(vm, " must be inserted."));
-    }
 
-    if (isFalse(vm.isDirty)) {
-      // this guarantees that if the component is reused/reinserted,
-      // it will be re-rendered because we are disconnecting the reactivity
-      // linking, so mutations are not automatically reflected on the state
-      // of disconnected components.
-      vm.isDirty = true;
-    }
+    var _createConfigWatcher = createConfigWatcher(vm.component, configCallback, updateConnectorConfig),
+        computeConfigAndUpdate = _createConfigWatcher.computeConfigAndUpdate,
+        ro = _createConfigWatcher.ro; // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
 
-    vm.state = 2
-    /* disconnected */
-    ; // reporting disconnection
 
-    var disconnected = Services.disconnected;
+    if (!isUndefined$1(adapter.contextSchema)) {
+      createContextWatcher(vm, wireDef, function (newContext) {
+        // every time the context is pushed into this component,
+        // this callback will be invoked with the new computed context
+        if (context !== newContext) {
+          context = newContext; // Note: when new context arrives, the config will be recomputed and pushed along side the new
+          // context, this is to preserve the identity characteristics, config should not have identity
+          // (ever), while context can have identity
 
-    if (disconnected) {
-      invokeServiceHook(vm, disconnected);
+          if (vm.state === 1
+          /* connected */
+          ) {
+            computeConfigAndUpdate();
+          }
+        }
+      });
     }
 
-    if (hasWireAdapters(vm)) {
-      disconnectWireAdapters(vm);
-    }
+    return {
+      // @ts-ignore the boundary protection executes sync, connector is always defined
+      connector: connector,
+      computeConfigAndUpdate: computeConfigAndUpdate,
+      resetConfigWatcher: function resetConfigWatcher() {
+        return ro.reset();
+      }
+    };
+  }
 
-    var disconnectedCallback = vm.def.disconnectedCallback;
+  var AdapterToTokenMap = new Map();
 
-    if (!isUndefined$1(disconnectedCallback)) {
-      logOperationStart(5
-      /* DisconnectedCallback */
-      , vm);
-      invokeComponentCallback(vm, disconnectedCallback);
-      logOperationEnd(5
-      /* DisconnectedCallback */
-      , vm);
-    }
+  function getAdapterToken(adapter) {
+    return AdapterToTokenMap.get(adapter);
   }
 
-  function runChildNodesDisconnectedCallback(vm) {
-    var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
-    // inserted in reserved order.
+  function setAdapterToken(adapter, token) {
+    AdapterToTokenMap.set(adapter, token);
+  }
 
-    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:
-      // * 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.
-      // * when slotted custom element is not used by the element where it is
-      //   slotted into it, as  a result, the custom element was never
-      //   initialized.
+  function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
+    // support for callable adapters
+    if (adapter.adapter) {
+      adapter = adapter.adapter;
+    }
 
-      if (!isUndefined$1(elm)) {
-        var childVM = getAssociatedVMIfPresent(elm); // The VM associated with the element might be associated undefined
-        // in the case where the VM failed in the middle of its creation,
-        // eg: constructor throwing before invoking super().
+    var method = descriptor.value;
+    var def = {
+      adapter: adapter,
+      method: method,
+      configCallback: configCallback,
+      dynamic: dynamic
+    };
+    WireMetaMap.set(descriptor, def);
+  }
 
-        if (!isUndefined$1(childVM)) {
-          resetComponentStateWhenRemoved(childVM);
-        }
-      }
+  function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
+    // support for callable adapters
+    if (adapter.adapter) {
+      adapter = adapter.adapter;
     }
-  }
 
-  function runLightChildNodesDisconnectedCallback(vm) {
-    var adoptedChildren = vm.aChildren;
-    recursivelyDisconnectChildren(adoptedChildren);
+    var def = {
+      adapter: adapter,
+      configCallback: configCallback,
+      dynamic: dynamic
+    };
+    WireMetaMap.set(descriptor, def);
   }
-  /**
-   * The recursion doesn't need to be a complete traversal of the vnode graph,
-   * instead it can be partial, when a custom element vnode is found, we don't
-   * need to continue into its children because by attempting to disconnect the
-   * custom element itself will trigger the removal of anything slotted or anything
-   * defined on its shadow.
-   */
-
 
-  function recursivelyDisconnectChildren(vnodes) {
-    for (var _i28 = 0, _len9 = vnodes.length; _i28 < _len9; _i28 += 1) {
-      var vnode = vnodes[_i28];
+  function installWireAdapters(vm) {
+    var context = vm.context,
+        wire = vm.def.wire;
+    var wiredConnecting = context.wiredConnecting = [];
+    var wiredDisconnecting = context.wiredDisconnecting = [];
 
-      if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
-        switch (vnode.type) {
-          case 2
-          /* Element */
-          :
-            recursivelyDisconnectChildren(vnode.children);
-            break;
+    for (var fieldNameOrMethod in wire) {
+      var descriptor = wire[fieldNameOrMethod];
+      var wireDef = WireMetaMap.get(descriptor);
 
-          case 3
-          /* CustomElement */
-          :
-            {
-              var vm = getAssociatedVM(vnode.elm);
-              resetComponentStateWhenRemoved(vm);
-              break;
-            }
-        }
+      if (process.env.NODE_ENV !== 'production') {
+        assert.invariant(wireDef, "Internal Error: invalid wire definition found.");
       }
-    }
-  } // This is a super optimized mechanism to remove the content of the root node (shadow root
-  // for shadow DOM components and the root element itself for light DOM) without having to go
-  // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
-  // children VNodes might not be representing the current state of the DOM.
 
+      if (!isUndefined$1(wireDef)) {
+        (function () {
+          var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
+              connector = _createConnector.connector,
+              computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
+              resetConfigWatcher = _createConnector.resetConfigWatcher;
 
-  function resetComponentRoot(vm) {
-    var children = vm.children,
-        renderRoot = vm.renderRoot;
+          var hasDynamicParams = wireDef.dynamic.length > 0;
+          ArrayPush$1.call(wiredConnecting, function () {
+            connector.connect();
 
-    for (var _i29 = 0, _len10 = children.length; _i29 < _len10; _i29++) {
-      var child = children[_i29];
+            if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
+              if (hasDynamicParams) {
+                Promise.resolve().then(computeConfigAndUpdate);
+                return;
+              }
+            }
 
-      if (!isNull(child) && !isUndefined$1(child.elm)) {
-        remove$1(child.elm, renderRoot);
+            computeConfigAndUpdate();
+          });
+          ArrayPush$1.call(wiredDisconnecting, function () {
+            connector.disconnect();
+            resetConfigWatcher();
+          });
+        })();
       }
     }
-
-    vm.children = EmptyArray;
-    runChildNodesDisconnectedCallback(vm);
-    vm.velements = EmptyArray;
   }
 
-  function scheduleRehydration(vm) {
-    if (isTrue(ssr$1) || isTrue(vm.isScheduled)) {
-      return;
-    }
-
-    vm.isScheduled = true;
+  function connectWireAdapters(vm) {
+    var wiredConnecting = vm.context.wiredConnecting;
 
-    if (rehydrateQueue.length === 0) {
-      addCallbackToNextTick(flushRehydrationQueue);
+    for (var _i27 = 0, _len11 = wiredConnecting.length; _i27 < _len11; _i27 += 1) {
+      wiredConnecting[_i27]();
     }
-
-    ArrayPush$1.call(rehydrateQueue, vm);
   }
 
-  function getErrorBoundaryVM(vm) {
-    var currentVm = vm;
-
-    while (!isNull(currentVm)) {
-      if (!isUndefined$1(currentVm.def.errorCallback)) {
-        return currentVm;
+  function disconnectWireAdapters(vm) {
+    var wiredDisconnecting = vm.context.wiredDisconnecting;
+    runWithBoundaryProtection(vm, vm, noop, function () {
+      // job
+      for (var _i28 = 0, _len12 = wiredDisconnecting.length; _i28 < _len12; _i28 += 1) {
+        wiredDisconnecting[_i28]();
       }
-
-      currentVm = currentVm.owner;
-    }
+    }, noop);
   }
+  /*
+   * Copyright (c) 2018, 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
+   */
+  // this is lwc internal implementation
 
-  function runWithBoundaryProtection(vm, owner, pre, job, post) {
-    var error;
-    pre();
 
-    try {
-      job();
-    } catch (e) {
-      error = Object(e);
-    } finally {
-      post();
+  function createContextProvider(adapter) {
+    var adapterContextToken = getAdapterToken(adapter);
 
-      if (!isUndefined$1(error)) {
-        addErrorComponentStack(vm, error);
-        var errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
+    if (!isUndefined$1(adapterContextToken)) {
+      throw new Error("Adapter already has a context provider.");
+    }
 
-        if (isUndefined$1(errorBoundaryVm)) {
-          throw error; // eslint-disable-line no-unsafe-finally
-        }
+    adapterContextToken = guid();
+    setAdapterToken(adapter, adapterContextToken);
+    var providers = new WeakSet();
+    return function (elm, options) {
+      if (providers.has(elm)) {
+        throw new Error("Adapter was already installed on ".concat(elm, "."));
+      }
 
-        resetComponentRoot(vm); // remove offenders
+      providers.add(elm);
+      var consumerConnectedCallback = options.consumerConnectedCallback,
+          consumerDisconnectedCallback = options.consumerDisconnectedCallback;
+      elm.addEventListener(adapterContextToken, function (evt) {
+        var setNewContext = evt.setNewContext,
+            setDisconnectedCallback = evt.setDisconnectedCallback;
+        var consumer = {
+          provide: function provide(newContext) {
+            setNewContext(newContext);
+          }
+        };
 
-        logOperationStart(6
-        /* ErrorCallback */
-        , vm); // error boundaries must have an ErrorCallback
+        var disconnectCallback = function disconnectCallback() {
+          if (!isUndefined$1(consumerDisconnectedCallback)) {
+            consumerDisconnectedCallback(consumer);
+          }
+        };
 
-        var errorCallback = errorBoundaryVm.def.errorCallback;
-        invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
-        logOperationEnd(6
-        /* ErrorCallback */
-        , vm);
-      }
-    }
+        setDisconnectedCallback(disconnectCallback);
+        consumerConnectedCallback(consumer);
+        evt.stopImmediatePropagation();
+      });
+    };
   }
+  /*
+   * Copyright (c) 2018, 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 forceRehydration(vm) {
-    // if we must reset the shadowRoot content and render the template
-    // from scratch on an active instance, the way to force the reset
-    // is by replacing the value of old template, which is used during
-    // to determine if the template has changed or not during the rendering
-    // process. If the template returned by render() is different from the
-    // previous stored template, the styles will be reset, along with the
-    // content of the shadowRoot, this way we can guarantee that all children
-    // elements will be throw away, and new instances will be created.
-    vm.cmpTemplate = function () {
-      return [];
-    };
+  /**
+   * EXPERIMENTAL: This function allows you to create a reactive readonly
+   * membrane around any object value. This API is subject to change or
+   * being removed.
+   */
 
-    if (isFalse(vm.isDirty)) {
-      // forcing the vm to rehydrate in the next tick
-      markComponentAsDirty(vm);
-      scheduleRehydration(vm);
+
+  function readonly(obj) {
+    if (process.env.NODE_ENV !== 'production') {
+      // TODO [#1292]: Remove the readonly decorator
+      if (arguments.length !== 1) {
+        assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
+      }
     }
+
+    return reactiveMembrane.getReadOnlyProxy(obj);
   }
   /*
-   * Copyright (c) 2018, salesforce.com, inc.
+   * 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 DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
-  var DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
-  var WireMetaMap = new Map();
+  var hasMismatch = false;
 
-  var WireContextRegistrationEvent = /*#__PURE__*/function (_CustomEvent) {
-    _inherits(WireContextRegistrationEvent, _CustomEvent);
+  function hydrateRoot(vm) {
+    hasMismatch = false;
+    runConnectedCallback(vm);
+    hydrateVM(vm);
 
-    var _super6 = _createSuper(WireContextRegistrationEvent);
+    if (hasMismatch) {
+      logError('Hydration completed with errors.', vm);
+    }
+  }
 
-    function WireContextRegistrationEvent(adapterToken, _ref3) {
-      var _this5;
+  function hydrateVM(vm) {
+    var children = renderComponent(vm);
+    vm.children = children;
+    var parentNode = vm.renderRoot;
+    hydrateChildren(getFirstChild$1(parentNode), children, parentNode, vm);
+    runRenderedCallback(vm);
+  }
 
-      var setNewContext = _ref3.setNewContext,
-          setDisconnectedCallback = _ref3.setDisconnectedCallback;
+  function hydrateNode(node, vnode) {
+    var hydratedNode;
 
-      _classCallCheck(this, WireContextRegistrationEvent);
+    switch (vnode.type) {
+      case 0
+      /* Text */
+      :
+        hydratedNode = hydrateText(node, vnode);
+        break;
 
-      _this5 = _super6.call(this, adapterToken, {
-        bubbles: true,
-        composed: true
-      });
-      defineProperties(_assertThisInitialized(_this5), {
-        setNewContext: {
-          value: setNewContext
-        },
-        setDisconnectedCallback: {
-          value: setDisconnectedCallback
-        }
-      });
-      return _this5;
+      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 _createClass(WireContextRegistrationEvent);
-  }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
+    return nextSibling$1(hydratedNode);
+  }
 
-  function createFieldDataCallback(vm, name) {
-    var cmpFields = vm.cmpFields;
-    return function (value) {
-      if (value !== vm.cmpFields[name]) {
-        // storing the value in the underlying storage
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
+  function hydrateText(node, vnode) {
+    var _a;
+
+    if (!hasCorrectNodeType(vnode, node, 3
+    /* TEXT */
+    )) {
+      return handleMismatch(node, vnode);
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      var nodeValue = getProperty$1(node, 'nodeValue');
+
+      if (nodeValue !== vnode.text && !(nodeValue === "\u200D" && vnode.text === '')) {
+        logWarn('Hydration mismatch: text values do not match, will recover from the difference', vnode.owner);
       }
-    };
-  }
+    }
 
-  function createMethodDataCallback(vm, method) {
-    return function (value) {
-      // dispatching new value into the wired method
-      runWithBoundaryProtection(vm, vm.owner, noop, function () {
-        // job
-        method.call(vm.component, value);
-      }, noop);
-    };
+    setText$1(node, (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
   }
 
-  function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
-    var hasPendingConfig = false; // creating the reactive observer for reactive params when needed
-
-    var ro = new ReactiveObserver(function () {
-      if (hasPendingConfig === false) {
-        hasPendingConfig = true; // collect new config in the micro-task
+  function hydrateComment(node, vnode) {
+    var _a;
 
-        Promise.resolve().then(function () {
-          hasPendingConfig = false; // resetting current reactive params
+    if (!hasCorrectNodeType(vnode, node, 8
+    /* COMMENT */
+    )) {
+      return handleMismatch(node, vnode);
+    }
 
-          ro.reset(); // dispatching a new config due to a change in the configuration
+    if (process.env.NODE_ENV !== 'production') {
+      var nodeValue = getProperty$1(node, 'nodeValue');
 
-          computeConfigAndUpdate();
-        });
+      if (nodeValue !== vnode.text) {
+        logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vnode.owner);
       }
-    });
+    }
 
-    var computeConfigAndUpdate = function computeConfigAndUpdate() {
-      var config;
-      ro.observe(function () {
-        return config = configCallback(component);
-      }); // eslint-disable-next-line lwc-internal/no-invalid-todo
-      // TODO: dev-mode validation of config based on the adapter.configSchema
-      // @ts-ignore it is assigned in the observe() callback
+    setProperty$1(node, 'nodeValue', (_a = vnode.text) !== null && _a !== void 0 ? _a : null);
+    vnode.elm = node;
+    return node;
+  }
 
-      callbackWhenConfigIsReady(config);
-    };
+  function hydrateElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1
+    /* ELEMENT */
+    ) || !isMatchingElement(vnode, elm)) {
+      return handleMismatch(elm, vnode);
+    }
 
-    return {
-      computeConfigAndUpdate: computeConfigAndUpdate,
-      ro: ro
-    };
-  }
+    vnode.elm = elm;
+    var context = vnode.data.context;
+    var isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
+    /* Manual */
+    );
 
-  function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
-    var adapter = wireDef.adapter;
-    var adapterContextToken = getAdapterToken(adapter);
+    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(adapterContextToken)) {
-      return; // no provider found, nothing to be done
+      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 {
+          if (process.env.NODE_ENV !== 'production') {
+            logWarn("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+          }
+        }
+      }
     }
 
-    var elm = vm.elm,
-        _vm$context = vm.context,
-        wiredConnecting = _vm$context.wiredConnecting,
-        wiredDisconnecting = _vm$context.wiredDisconnecting; // waiting for the component to be connected to formally request the context via the token
+    patchElementPropsAndAttrs(vnode);
 
-    ArrayPush$1.call(wiredConnecting, function () {
-      // This event is responsible for connecting the host element with another
-      // element in the composed path that is providing contextual data. The provider
-      // must be listening for a special dom event with the name corresponding to the value of
-      // `adapterContextToken`, which will remain secret and internal to this file only to
-      // guarantee that the linkage can be forged.
-      var contextRegistrationEvent = new WireContextRegistrationEvent(adapterContextToken, {
-        setNewContext: function setNewContext(newContext) {
-          // eslint-disable-next-line lwc-internal/no-invalid-todo
-          // TODO: dev-mode validation of config based on the adapter.contextSchema
-          callbackWhenContextIsReady(newContext);
-        },
-        setDisconnectedCallback: function setDisconnectedCallback(disconnectCallback) {
-          // adds this callback into the disconnect bucket so it gets disconnected from parent
-          // the the element hosting the wire is disconnected
-          ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
-        }
-      });
-      dispatchEvent$1(elm, contextRegistrationEvent);
-    });
+    if (!isDomManual) {
+      hydrateChildren(getFirstChild$1(elm), vnode.children, elm, vnode.owner);
+    }
+
+    return elm;
   }
 
-  function createConnector(vm, name, wireDef) {
-    var method = wireDef.method,
-        adapter = wireDef.adapter,
-        configCallback = wireDef.configCallback,
-        dynamic = wireDef.dynamic;
-    var dataCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
-    var context;
-    var connector; // Workaround to pass the component element associated to this wire adapter instance.
+  function hydrateCustomElement(elm, vnode) {
+    if (!hasCorrectNodeType(vnode, elm, 1
+    /* ELEMENT */
+    ) || !isMatchingElement(vnode, elm)) {
+      return handleMismatch(elm, vnode);
+    }
 
-    defineProperty(dataCallback, DeprecatedWiredElementHost, {
-      value: vm.elm
-    });
-    defineProperty(dataCallback, DeprecatedWiredParamsMeta, {
-      value: dynamic
+    var sel = vnode.sel,
+        mode = vnode.mode,
+        ctor = vnode.ctor,
+        owner = vnode.owner;
+    var vm = createVM(elm, ctor, {
+      mode: mode,
+      owner: owner,
+      tagName: sel
     });
-    runWithBoundaryProtection(vm, vm, noop, function () {
-      // job
-      connector = new adapter(dataCallback);
-    }, noop);
+    vnode.elm = elm;
+    vnode.vm = vm;
+    allocateChildren(vnode, vm);
+    patchElementPropsAndAttrs(vnode); // Insert hook section:
 
-    var updateConnectorConfig = function updateConnectorConfig(config) {
-      // every time the config is recomputed due to tracking,
-      // this callback will be invoked with the new computed config
-      runWithBoundaryProtection(vm, vm, noop, function () {
-        // job
-        connector.update(config, context);
-      }, noop);
-    }; // Computes the current wire config and calls the update method on the wire adapter.
-    // If it has params, we will need to observe changes in the next tick.
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(vm.state === 0
+      /* created */
+      , "".concat(vm, " cannot be recycled."));
+    }
 
+    runConnectedCallback(vm);
 
-    var _createConfigWatcher = createConfigWatcher(vm.component, configCallback, updateConnectorConfig),
-        computeConfigAndUpdate = _createConfigWatcher.computeConfigAndUpdate,
-        ro = _createConfigWatcher.ro; // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
+    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, vm);
+    }
 
+    hydrateVM(vm);
+    return elm;
+  }
 
-    if (!isUndefined$1(adapter.contextSchema)) {
-      createContextWatcher(vm, wireDef, function (newContext) {
-        // every time the context is pushed into this component,
-        // this callback will be invoked with the new computed context
-        if (context !== newContext) {
-          context = newContext; // Note: when new context arrives, the config will be recomputed and pushed along side the new
-          // context, this is to preserve the identity characteristics, config should not have identity
-          // (ever), while context can have identity
+  function hydrateChildren(node, children, parentNode, owner) {
+    var hasWarned = false;
+    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;
 
-          if (vm.state === 1
-          /* connected */
-          ) {
-            computeConfigAndUpdate();
+          if (process.env.NODE_ENV !== 'production') {
+            if (!hasWarned) {
+              hasWarned = true;
+              logError("Hydration mismatch: incorrect number of rendered nodes. Client produced more nodes than the server.", owner);
+            }
           }
+
+          mount(childVnode, parentNode, anchor);
+          anchor = childVnode.elm;
         }
-      });
+      }
     }
 
-    return {
-      // @ts-ignore the boundary protection executes sync, connector is always defined
-      connector: connector,
-      computeConfigAndUpdate: computeConfigAndUpdate,
-      resetConfigWatcher: function resetConfigWatcher() {
-        return ro.reset();
+    if (nextNode) {
+      hasMismatch = true;
+
+      if (process.env.NODE_ENV !== 'production') {
+        if (!hasWarned) {
+          logError("Hydration mismatch: incorrect number of rendered nodes. Server rendered more nodes than the client.", owner);
+        }
       }
-    };
+
+      do {
+        var current = nextNode;
+        nextNode = nextSibling$1(nextNode);
+        removeNode(current, parentNode);
+      } while (nextNode);
+    }
   }
 
-  var AdapterToTokenMap = new Map();
+  function handleMismatch(node, vnode, msg) {
+    hasMismatch = true;
 
-  function getAdapterToken(adapter) {
-    return AdapterToTokenMap.get(adapter);
+    if (!isUndefined$1(msg)) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError(msg, vnode.owner);
+      }
+    }
+
+    var parentNode = getProperty$1(node, 'parentNode');
+    mount(vnode, parentNode, node);
+    removeNode(node, parentNode);
+    return vnode.elm;
   }
 
-  function setAdapterToken(adapter, token) {
-    AdapterToTokenMap.set(adapter, token);
+  function patchElementPropsAndAttrs(vnode) {
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
   }
 
-  function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
-    // support for callable adapters
-    if (adapter.adapter) {
-      adapter = adapter.adapter;
+  function hasCorrectNodeType(vnode, node, nodeType) {
+    if (getProperty$1(node, 'nodeType') !== nodeType) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError('Hydration mismatch: incorrect node type received', vnode.owner);
+      }
+
+      return false;
     }
 
-    var method = descriptor.value;
-    var def = {
-      adapter: adapter,
-      method: method,
-      configCallback: configCallback,
-      dynamic: dynamic
-    };
-    WireMetaMap.set(descriptor, def);
+    return true;
   }
 
-  function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
-    // support for callable adapters
-    if (adapter.adapter) {
-      adapter = adapter.adapter;
+  function isMatchingElement(vnode, elm) {
+    if (vnode.sel.toLowerCase() !== getProperty$1(elm, 'tagName').toLowerCase()) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError("Hydration mismatch: expecting element with tag \"".concat(vnode.sel.toLowerCase(), "\" but found \"").concat(getProperty$1(elm, 'tagName').toLowerCase(), "\"."), vnode.owner);
+      }
+
+      return false;
     }
 
-    var def = {
-      adapter: adapter,
-      configCallback: configCallback,
-      dynamic: dynamic
-    };
-    WireMetaMap.set(descriptor, def);
+    var hasIncompatibleAttrs = validateAttrs(vnode, elm);
+    var hasIncompatibleClass = validateClassAttr(vnode, elm);
+    var hasIncompatibleStyle = validateStyleAttr(vnode, elm);
+    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
   }
 
-  function installWireAdapters(vm) {
-    var context = vm.context,
-        wire = vm.def.wire;
-    var wiredConnecting = context.wiredConnecting = [];
-    var wiredDisconnecting = context.wiredDisconnecting = [];
-
-    for (var fieldNameOrMethod in wire) {
-      var descriptor = wire[fieldNameOrMethod];
-      var wireDef = WireMetaMap.get(descriptor);
-
-      if (process.env.NODE_ENV !== 'production') {
-        assert.invariant(wireDef, "Internal Error: invalid wire definition found.");
-      }
+  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.
 
-      if (!isUndefined$1(wireDef)) {
-        (function () {
-          var _createConnector = createConnector(vm, fieldNameOrMethod, wireDef),
-              connector = _createConnector.connector,
-              computeConfigAndUpdate = _createConnector.computeConfigAndUpdate,
-              resetConfigWatcher = _createConnector.resetConfigWatcher;
+    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 hasDynamicParams = wireDef.dynamic.length > 0;
-          ArrayPush$1.call(wiredConnecting, function () {
-            connector.connect();
+      var elmAttrValue = getAttribute$1(elm, attrName);
 
-            if (!runtimeFlags.ENABLE_WIRE_SYNC_EMIT) {
-              if (hasDynamicParams) {
-                Promise.resolve().then(computeConfigAndUpdate);
-                return;
-              }
-            }
+      if (String(attrValue) !== elmAttrValue) {
+        if (process.env.NODE_ENV !== 'production') {
+          logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
+        }
 
-            computeConfigAndUpdate();
-          });
-          ArrayPush$1.call(wiredDisconnecting, function () {
-            connector.disconnect();
-            resetConfigWatcher();
-          });
-        })();
+        nodesAreCompatible = false;
       }
     }
+
+    return nodesAreCompatible;
   }
 
-  function connectWireAdapters(vm) {
-    var wiredConnecting = vm.context.wiredConnecting;
+  function validateClassAttr(vnode, elm) {
+    var _vnode$data = vnode.data,
+        className = _vnode$data.className,
+        classMap = _vnode$data.classMap;
+    var nodesAreCompatible = true;
+    var vnodeClassName;
 
-    for (var _i30 = 0, _len11 = wiredConnecting.length; _i30 < _len11; _i30 += 1) {
-      wiredConnecting[_i30]();
-    }
-  }
+    if (!isUndefined$1(className) && String(className) !== getProperty$1(elm, 'className')) {
+      // className is used when class is bound to an expr.
+      nodesAreCompatible = false;
+      vnodeClassName = className;
+    } 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
 
-  function disconnectWireAdapters(vm) {
-    var wiredDisconnecting = vm.context.wiredDisconnecting;
-    runWithBoundaryProtection(vm, vm, noop, function () {
-      // job
-      for (var _i31 = 0, _len12 = wiredDisconnecting.length; _i31 < _len12; _i31 += 1) {
-        wiredDisconnecting[_i31]();
-      }
-    }, noop);
-  }
-  /*
-   * Copyright (c) 2018, 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
-   */
-  // this is lwc internal implementation
+      for (var name in classMap) {
+        computedClassName += ' ' + name;
 
+        if (!classList.contains(name)) {
+          nodesAreCompatible = false;
+        }
+      }
 
-  function createContextProvider(adapter) {
-    var adapterContextToken = getAdapterToken(adapter);
+      vnodeClassName = computedClassName.trim();
 
-    if (!isUndefined$1(adapterContextToken)) {
-      throw new Error("Adapter already has a context provider.");
+      if (classList.length > keys(classMap).length) {
+        nodesAreCompatible = false;
+      }
     }
 
-    adapterContextToken = guid();
-    setAdapterToken(adapter, adapterContextToken);
-    var providers = new WeakSet();
-    return function (elm, options) {
-      if (providers.has(elm)) {
-        throw new Error("Adapter was already installed on ".concat(elm, "."));
+    if (!nodesAreCompatible) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(getProperty$1(elm, 'className'), "\""), vnode.owner);
       }
+    }
 
-      providers.add(elm);
-      var consumerConnectedCallback = options.consumerConnectedCallback,
-          consumerDisconnectedCallback = options.consumerDisconnectedCallback;
-      elm.addEventListener(adapterContextToken, function (evt) {
-        var setNewContext = evt.setNewContext,
-            setDisconnectedCallback = evt.setDisconnectedCallback;
-        var consumer = {
-          provide: function provide(newContext) {
-            setNewContext(newContext);
-          }
-        };
+    return nodesAreCompatible;
+  }
 
-        var disconnectCallback = function disconnectCallback() {
-          if (!isUndefined$1(consumerDisconnectedCallback)) {
-            consumerDisconnectedCallback(consumer);
-          }
-        };
+  function validateStyleAttr(vnode, elm) {
+    var _vnode$data2 = vnode.data,
+        style = _vnode$data2.style,
+        styleDecls = _vnode$data2.styleDecls;
+    var elmStyle = getAttribute$1(elm, 'style') || '';
+    var vnodeStyle;
+    var nodesAreCompatible = true;
 
-        setDisconnectedCallback(disconnectCallback);
-        consumerConnectedCallback(consumer);
-        evt.stopImmediatePropagation();
-      });
-    };
-  }
-  /*
-   * Copyright (c) 2018, 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
-   */
+    if (!isUndefined$1(style) && style !== elmStyle) {
+      nodesAreCompatible = false;
+      vnodeStyle = style;
+    } else if (!isUndefined$1(styleDecls)) {
+      var parsedVnodeStyle = parseStyleText(elmStyle);
+      var expectedStyle = []; // styleMap is used when style is set to static value.
 
-  /**
-   * EXPERIMENTAL: This function allows you to create a reactive readonly
-   * membrane around any object value. This API is subject to change or
-   * being removed.
-   */
+      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];
 
-  function readonly(obj) {
-    if (process.env.NODE_ENV !== 'production') {
-      // TODO [#1292]: Remove the readonly decorator
-      if (arguments.length !== 1) {
-        assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
+        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;
+      }
+
+      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
     }
 
-    return reactiveMembrane.getReadOnlyProxy(obj);
+    if (!nodesAreCompatible) {
+      if (process.env.NODE_ENV !== 'production') {
+        logError("Mismatch hydrating element <".concat(getProperty$1(elm, 'tagName').toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+      }
+    }
+
+    return nodesAreCompatible;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7906,7 +7961,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.11.0 */
+  /* version: 2.12.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8321,7 +8376,7 @@
   }
 
   function createVMWithProps(element, Ctor, props) {
-    createVM(element, Ctor, {
+    var vm = createVM(element, Ctor, {
       mode: 'open',
       owner: null,
       tagName: element.tagName.toLowerCase()
@@ -8334,6 +8389,8 @@
 
       element[key] = value;
     }
+
+    return vm;
   }
 
   function hydrateComponent(element, Ctor) {
@@ -8361,8 +8418,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) {
@@ -8684,7 +8741,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.11.0 */
+  /* version: 2.12.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;