lwc 2.5.5-canary1 → 2.5.9

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

@@ -2,7 +2,7 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LWC = {}));
-}(this, (function (exports) { 'use strict';
+})(this, (function (exports) { 'use strict';
 
   function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf2(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
@@ -10,8 +10,6 @@
 
   function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }
 
-  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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
   function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -40,23 +38,25 @@
 
   function _getPrototypeOf2(o) { _getPrototypeOf2 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf2(o); }
 
-  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-  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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-  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; }
+  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
   function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
   function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  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 _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+  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 _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+  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; }
 
   function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
@@ -123,9 +123,10 @@
       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$1 = _Array$prototype.map,
+      ArrayMap = _Array$prototype.map,
       ArrayPush$1 = _Array$prototype.push,
       ArraySlice = _Array$prototype.slice,
       ArraySplice = _Array$prototype.splice,
@@ -186,7 +187,7 @@
       // Array.prototype.toString directly will cause an error Iterate through
       // all the items and handle individually.
       if (isArray$1(obj)) {
-        return ArrayJoin.call(ArrayMap$1.call(obj, toString$1), ',');
+        return ArrayJoin.call(ArrayMap.call(obj, toString$1), ',');
       }
 
       return obj.toString();
@@ -350,7 +351,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.5.5-canary1 */
+  /** version: 2.5.9 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -530,7 +531,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.5.5-canary1 */
+  /** version: 2.5.9 */
 
   /* proxy-compat-disable */
 
@@ -582,6 +583,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;
   }
   /*
    * Copyright (c) 2019, salesforce.com, inc.
@@ -770,8 +807,8 @@
    */
 
 
-  function logError(message, vm) {
-    var msg = "[LWC error]: ".concat(message);
+  function log(method, message, vm) {
+    var msg = "[LWC ".concat(method, "]: ").concat(message);
 
     if (!isUndefined$1(vm)) {
       msg = "".concat(msg, "\n").concat(getComponentStack(vm));
@@ -779,7 +816,7 @@
 
     if (process.env.NODE_ENV === 'test') {
       /* eslint-disable-next-line no-console */
-      console.error(msg);
+      console[method](msg);
       return;
     }
 
@@ -787,9 +824,17 @@
       throw new Error(msg);
     } catch (e) {
       /* eslint-disable-next-line no-console */
-      console.error(e);
+      console[method](e);
     }
   }
+
+  function logError(message, vm) {
+    log('error', message, vm);
+  }
+
+  function logWarn(message, vm) {
+    log('warn', message, vm);
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1948,7 +1993,10 @@
         //       but it will always be compatible with the previous descriptor
         //       to preserve the object invariants, which makes these lines safe.
 
-        var originalDescriptor = _getOwnPropertyDescriptor(originalTarget, key);
+        var originalDescriptor = _getOwnPropertyDescriptor(originalTarget, key); // TODO: it should be impossible for the originalDescriptor to ever be undefined, this `if` can be removed
+
+        /* istanbul ignore else */
+
 
         if (!isUndefined(originalDescriptor)) {
           var wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1973,12 +2021,18 @@
 
         _preventExtensions(shadowTarget);
       } // Shared Traps
+      // TODO: apply() is never called
+
+      /* istanbul ignore next */
 
     }, {
       key: "apply",
       value: function apply(shadowTarget, thisArg, argArray) {
         /* No op */
-      }
+      } // TODO: construct() is never called
+
+      /* istanbul ignore next */
+
     }, {
       key: "construct",
       value: function construct(shadowTarget, argArray, newTarget) {
@@ -2083,8 +2137,8 @@
     return BaseProxyHandler;
   }();
 
-  var getterMap = new WeakMap();
-  var setterMap = new WeakMap();
+  var getterMap$1 = new WeakMap();
+  var setterMap$1 = new WeakMap();
   var reverseGetterMap = new WeakMap();
   var reverseSetterMap = new WeakMap();
 
@@ -2107,7 +2161,7 @@
     }, {
       key: "wrapGetter",
       value: function wrapGetter(originalGet) {
-        var wrappedGetter = getterMap.get(originalGet);
+        var wrappedGetter = getterMap$1.get(originalGet);
 
         if (!isUndefined(wrappedGetter)) {
           return wrappedGetter;
@@ -2120,14 +2174,14 @@
           return handler.wrapValue(originalGet.call(unwrap$1(this)));
         };
 
-        getterMap.set(originalGet, get);
+        getterMap$1.set(originalGet, get);
         reverseGetterMap.set(get, originalGet);
         return get;
       }
     }, {
       key: "wrapSetter",
       value: function wrapSetter(originalSet) {
-        var wrappedSetter = setterMap.get(originalSet);
+        var wrappedSetter = setterMap$1.get(originalSet);
 
         if (!isUndefined(wrappedSetter)) {
           return wrappedSetter;
@@ -2138,7 +2192,7 @@
           originalSet.call(unwrap$1(this), unwrap$1(v));
         };
 
-        setterMap.set(originalSet, set);
+        setterMap$1.set(originalSet, set);
         reverseSetterMap.set(set, originalSet);
         return set;
       }
@@ -2179,7 +2233,7 @@
           return unwrap$1(redGet.call(handler.wrapValue(this)));
         };
 
-        getterMap.set(get, redGet);
+        getterMap$1.set(get, redGet);
         reverseGetterMap.set(redGet, get);
         return get;
       }
@@ -2199,7 +2253,7 @@
           redSet.call(handler.wrapValue(this), handler.wrapValue(v));
         };
 
-        setterMap.set(set, redSet);
+        setterMap$1.set(set, redSet);
         reverseSetterMap.set(redSet, set);
         return set;
       }
@@ -2235,6 +2289,7 @@
     }, {
       key: "setPrototypeOf",
       value: function setPrototypeOf(shadowTarget, prototype) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           throw new Error("Invalid setPrototypeOf invocation for reactive proxy ".concat(toString(this.originalTarget), ". Prototype of reactive objects cannot be changed."));
         }
@@ -2248,6 +2303,11 @@
           _preventExtensions(originalTarget); // if the originalTarget is a proxy itself, it might reject
           // the preventExtension call, in which case we should not attempt to lock down
           // the shadow target.
+          // TODO: It should not actually be possible to reach this `if` statement.
+          // If a proxy rejects extensions, then calling preventExtensions will throw an error:
+          // https://codepen.io/nolanlawson-the-selector/pen/QWMOjbY
+
+          /* istanbul ignore if */
 
 
           if (_isExtensible(originalTarget)) {
@@ -2290,8 +2350,8 @@
     return ReactiveProxyHandler;
   }(BaseProxyHandler);
 
-  var getterMap$1 = new WeakMap();
-  var setterMap$1 = new WeakMap();
+  var getterMap = new WeakMap();
+  var setterMap = new WeakMap();
 
   var ReadOnlyHandler = /*#__PURE__*/function (_BaseProxyHandler2) {
     _inherits(ReadOnlyHandler, _BaseProxyHandler2);
@@ -2312,7 +2372,7 @@
     }, {
       key: "wrapGetter",
       value: function wrapGetter(originalGet) {
-        var wrappedGetter = getterMap$1.get(originalGet);
+        var wrappedGetter = getterMap.get(originalGet);
 
         if (!isUndefined(wrappedGetter)) {
           return wrappedGetter;
@@ -2325,13 +2385,13 @@
           return handler.wrapValue(originalGet.call(unwrap$1(this)));
         };
 
-        getterMap$1.set(originalGet, get);
+        getterMap.set(originalGet, get);
         return get;
       }
     }, {
       key: "wrapSetter",
       value: function wrapSetter(originalSet) {
-        var wrappedSetter = setterMap$1.get(originalSet);
+        var wrappedSetter = setterMap.get(originalSet);
 
         if (!isUndefined(wrappedSetter)) {
           return wrappedSetter;
@@ -2340,38 +2400,47 @@
         var handler = this;
 
         var set = function set(v) {
+          /* istanbul ignore else */
           if (process.env.NODE_ENV !== 'production') {
             var originalTarget = handler.originalTarget;
             throw new Error("Invalid mutation: Cannot invoke a setter on \"".concat(originalTarget, "\". \"").concat(originalTarget, "\" is read-only."));
           }
         };
 
-        setterMap$1.set(originalSet, set);
+        setterMap.set(originalSet, set);
         return set;
       }
     }, {
       key: "set",
       value: function set(shadowTarget, key, value) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           var originalTarget = this.originalTarget;
-          throw new Error("Invalid mutation: Cannot set \"".concat(key.toString(), "\" on \"").concat(originalTarget, "\". \"").concat(originalTarget, "\" is read-only."));
+          var msg = isArray(originalTarget) ? "Invalid mutation: Cannot mutate array at index ".concat(key.toString(), ". Array is read-only.") : "Invalid mutation: Cannot set \"".concat(key.toString(), "\" on \"").concat(originalTarget, "\". \"").concat(originalTarget, "\" is read-only.");
+          throw new Error(msg);
         }
+        /* istanbul ignore next */
+
 
         return false;
       }
     }, {
       key: "deleteProperty",
       value: function deleteProperty(shadowTarget, key) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           var originalTarget = this.originalTarget;
           throw new Error("Invalid mutation: Cannot delete \"".concat(key.toString(), "\" on \"").concat(originalTarget, "\". \"").concat(originalTarget, "\" is read-only."));
         }
+        /* istanbul ignore next */
+
 
         return false;
       }
     }, {
       key: "setPrototypeOf",
       value: function setPrototypeOf(shadowTarget, prototype) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           var originalTarget = this.originalTarget;
           throw new Error("Invalid prototype mutation: Cannot set prototype on \"".concat(originalTarget, "\". \"").concat(originalTarget, "\" prototype is read-only."));
@@ -2380,20 +2449,26 @@
     }, {
       key: "preventExtensions",
       value: function preventExtensions(shadowTarget) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           var originalTarget = this.originalTarget;
           throw new Error("Invalid mutation: Cannot preventExtensions on ".concat(originalTarget, "\". \"").concat(originalTarget, " is read-only."));
         }
+        /* istanbul ignore next */
+
 
         return false;
       }
     }, {
       key: "defineProperty",
       value: function defineProperty(shadowTarget, key, descriptor) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           var originalTarget = this.originalTarget;
           throw new Error("Invalid mutation: Cannot defineProperty \"".concat(key.toString(), "\" on \"").concat(originalTarget, "\". \"").concat(originalTarget, "\" is read-only."));
         }
+        /* istanbul ignore next */
+
 
         return false;
       }
@@ -2453,6 +2528,8 @@
   }; // Inspired from paulmillr/es6-shim
   // https://github.com/paulmillr/es6-shim/blob/master/es6-shim.js#L176-L185
 
+  /* istanbul ignore next */
+
   function getGlobal() {
     // the only reliable means to get the global object is `Function('return this')()`
     // However, this causes CSP violations in Chrome apps.
@@ -2477,6 +2554,7 @@
   }
 
   function init() {
+    /* istanbul ignore if */
     if (process.env.NODE_ENV === 'production') {
       // this method should never leak to prod
       throw new ReferenceError();
@@ -2491,6 +2569,8 @@
     ArrayPush.call(devtoolsFormatters, formatter);
     global.devtoolsFormatters = devtoolsFormatters;
   }
+  /* istanbul ignore else */
+
 
   if (process.env.NODE_ENV !== 'production') {
     init();
@@ -2542,7 +2622,8 @@
       this.valueMutated = defaultValueMutated;
       this.valueObserved = defaultValueObserved;
       this.valueIsObservable = defaultValueIsObservable;
-      this.objectGraph = new WeakMap();
+      this.readOnlyObjectGraph = new WeakMap();
+      this.reactiveObjectGraph = new WeakMap();
 
       if (!isUndefined(options)) {
         var _valueDistortion = options.valueDistortion,
@@ -2565,10 +2646,13 @@
         var distorted = this.valueDistortion(unwrappedValue);
 
         if (this.valueIsObservable(distorted)) {
-          var o = this.getReactiveState(unwrappedValue, distorted); // when trying to extract the writable version of a readonly
-          // we return the readonly.
+          if (this.readOnlyObjectGraph.get(distorted) === value) {
+            // when trying to extract the writable version of a readonly
+            // we return the readonly.
+            return value;
+          }
 
-          return o.readOnly === value ? value : o.reactive;
+          return this.getReactiveHandler(unwrappedValue, distorted);
         }
 
         return distorted;
@@ -2580,7 +2664,7 @@
         var distorted = this.valueDistortion(value);
 
         if (this.valueIsObservable(distorted)) {
-          return this.getReactiveState(value, distorted).readOnly;
+          return this.getReadOnlyHandler(value, distorted);
         }
 
         return distorted;
@@ -2591,48 +2675,40 @@
         return unwrap$1(p);
       }
     }, {
-      key: "getReactiveState",
-      value: function getReactiveState(value, distortedValue) {
-        var objectGraph = this.objectGraph;
-        var reactiveState = objectGraph.get(distortedValue);
-
-        if (reactiveState) {
-          return reactiveState;
+      key: "getReactiveHandler",
+      value: function getReactiveHandler(value, distortedValue) {
+        var proxy = this.reactiveObjectGraph.get(distortedValue);
+
+        if (isUndefined(proxy)) {
+          // caching the proxy after the first time it is accessed
+          var handler = new ReactiveProxyHandler(this, distortedValue);
+          proxy = new Proxy(createShadowTarget(distortedValue), handler);
+          registerProxy(proxy, value);
+          this.reactiveObjectGraph.set(distortedValue, proxy);
         }
 
-        var membrane = this;
-        reactiveState = {
-          get reactive() {
-            var reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
-
-            var proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-            registerProxy(proxy, value);
-            ObjectDefineProperty(this, 'reactive', {
-              value: proxy
-            });
-            return proxy;
-          },
-
-          get readOnly() {
-            var readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
-
-            var proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-            registerProxy(proxy, value);
-            ObjectDefineProperty(this, 'readOnly', {
-              value: proxy
-            });
-            return proxy;
-          }
+        return proxy;
+      }
+    }, {
+      key: "getReadOnlyHandler",
+      value: function getReadOnlyHandler(value, distortedValue) {
+        var proxy = this.readOnlyObjectGraph.get(distortedValue);
+
+        if (isUndefined(proxy)) {
+          // caching the proxy after the first time it is accessed
+          var handler = new ReadOnlyHandler(this, distortedValue);
+          proxy = new Proxy(createShadowTarget(distortedValue), handler);
+          registerProxy(proxy, value);
+          this.readOnlyObjectGraph.set(distortedValue, proxy);
+        }
 
-        };
-        objectGraph.set(distortedValue, reactiveState);
-        return reactiveState;
+        return proxy;
       }
     }]);
 
     return ReactiveMembrane;
   }();
-  /** version: 1.0.0 */
+  /** version: 1.1.5 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3018,7 +3094,9 @@
         }
 
         return renderer[rendererMethod](elm);
-      }
+      },
+      configurable: true,
+      enumerable: true
     };
   };
 
@@ -3041,7 +3119,10 @@
         }
 
         return renderer[queryMethod](elm, arg);
-      }
+      },
+      configurable: true,
+      enumerable: true,
+      writable: true
     };
   };
 
@@ -3934,12 +4015,12 @@
   function flattenStylesheets(stylesheets) {
     var list = [];
 
-    var _iterator = _createForOfIteratorHelper(stylesheets),
-        _step;
+    var _iterator2 = _createForOfIteratorHelper(stylesheets),
+        _step2;
 
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var stylesheet = _step.value;
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var stylesheet = _step2.value;
 
         if (!Array.isArray(stylesheet)) {
           list.push(stylesheet);
@@ -3948,9 +4029,9 @@
         }
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator2.e(err);
     } finally {
-      _iterator.f();
+      _iterator2.f();
     }
 
     return list;
@@ -4214,7 +4295,7 @@
       if (!isUndefined$1(ctorShadowSupportMode)) {
         assert.invariant(ctorShadowSupportMode === "any"
         /* Any */
-        || ctorShadowSupportMode === "default"
+        || ctorShadowSupportMode === "reset"
         /* Default */
         , "Invalid value for static property shadowSupportMode: '".concat(ctorShadowSupportMode, "'"));
       }
@@ -4372,7 +4453,7 @@
     renderMode: 1
     /* Shadow */
     ,
-    shadowSupportMode: "default"
+    shadowSupportMode: "reset"
     /* Default */
     ,
     wire: EmptyObject,
@@ -4509,6 +4590,17 @@
     modComputedStyle.create(vnode);
   }
 
+  function hydrateElmHook(vnode) {
+    modEvents.create(vnode); // Attrs are already on the element.
+    // modAttrs.create(vnode);
+
+    modProps.create(vnode); // Already set.
+    // modStaticClassName.create(vnode);
+    // modStaticStyle.create(vnode);
+    // modComputedClassName.create(vnode);
+    // modComputedStyle.create(vnode);
+  }
+
   function fallbackElmHook(elm, vnode) {
     var owner = vnode.owner;
     setScopeTokenClassIfNecessary(elm, owner);
@@ -4658,6 +4750,174 @@
     }
   }
 
+  function isElementNode(node) {
+    // eslint-disable-next-line lwc-internal/no-global-node
+    return node.nodeType === Node.ELEMENT_NODE;
+  }
+
+  function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
+    var _vnode$data$attrs = vnode.data.attrs,
+        attrs = _vnode$data$attrs === void 0 ? {} : _vnode$data$attrs,
+        renderer = vnode.owner.renderer;
+    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 _i14 = 0, _Object$entries = Object.entries(attrs); _i14 < _Object$entries.length; _i14++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i14], 2),
+          attrName = _Object$entries$_i[0],
+          attrValue = _Object$entries$_i[1];
+
+      var elmAttrValue = renderer.getAttribute(elm, attrName);
+
+      if (String(attrValue) !== elmAttrValue) {
+        logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(attrValue, "\" but found \"").concat(elmAttrValue, "\""), vnode.owner);
+        nodesAreCompatible = false;
+      }
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function vnodesAndElementHaveCompatibleClass(vnode, elm) {
+    var _vnode$data = vnode.data,
+        className = _vnode$data.className,
+        classMap = _vnode$data.classMap,
+        renderer = vnode.owner.renderer;
+    var nodesAreCompatible = true;
+    var vnodeClassName;
+
+    if (!isUndefined$1(className) && String(className) !== 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 = renderer.getClassList(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;
+        }
+      }
+
+      vnodeClassName = computedClassName.trim();
+
+      if (classList.length > keys(classMap).length) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    if (!nodesAreCompatible) {
+      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"class\" has different values, expected \"").concat(vnodeClassName, "\" but found \"").concat(elm.className, "\""), vnode.owner);
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
+    var _vnode$data2 = vnode.data,
+        style = _vnode$data2.style,
+        styleDecls = _vnode$data2.styleDecls,
+        renderer = vnode.owner.renderer;
+    var elmStyle = renderer.getAttribute(elm, 'style') || '';
+    var vnodeStyle;
+    var nodesAreCompatible = true;
+
+    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.
+
+      for (var _i15 = 0, n = styleDecls.length; _i15 < n; _i15++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i15], 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;
+      }
+
+      vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+    }
+
+    if (!nodesAreCompatible) {
+      // style is used when class is bound to an expr.
+      logError("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: attribute \"style\" has different values, expected \"").concat(vnodeStyle, "\" but found \"").concat(elmStyle, "\"."), vnode.owner);
+    }
+
+    return nodesAreCompatible;
+  }
+
+  function throwHydrationError() {
+    assert.fail('Server rendered elements do not match client side generated elements');
+  }
+
+  function hydrateChildrenHook(elmChildren, children, vm) {
+    var _a, _b;
+
+    if (process.env.NODE_ENV !== 'production') {
+      var filteredVNodes = ArrayFilter.call(children, function (vnode) {
+        return !!vnode;
+      });
+
+      if (elmChildren.length !== filteredVNodes.length) {
+        logError("Hydration mismatch: incorrect number of rendered nodes, expected ".concat(filteredVNodes.length, " but found ").concat(elmChildren.length, "."), vm);
+        throwHydrationError();
+      }
+    }
+
+    var elmCurrentChildIdx = 0;
+
+    for (var j = 0, n = children.length; j < n; j++) {
+      var ch = children[j];
+
+      if (ch != null) {
+        var childNode = elmChildren[elmCurrentChildIdx];
+
+        if (process.env.NODE_ENV !== 'production') {
+          // VComments and VTexts validation is handled in their hooks
+          if (isElementNode(childNode)) {
+            if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
+              logError("Hydration mismatch: expecting element with tag \"".concat((_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase(), "\" but found \"").concat(childNode.tagName.toLowerCase(), "\"."), vm);
+              throwHydrationError();
+            } // Note: props are not yet set
+
+
+            var hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
+            var hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
+            var hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
+            var isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+
+            if (!isVNodeAndElementCompatible) {
+              throwHydrationError();
+            }
+          }
+        }
+
+        ch.hook.hydrate(ch, childNode);
+        elmCurrentChildIdx++;
+      }
+    }
+  }
+
   function updateCustomElmHook(oldVnode, vnode) {
     // Attrs need to be applied to element before props
     // IE11 will wipe out value on radio inputs if value
@@ -4751,38 +5011,6 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-  /**
-   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
-   * libraries to sanitize HTML content. This hook process the content passed via the template to
-   * lwc:inner-html directive.
-   * It is meant to be overridden with setSanitizeHtmlContentHook
-   */
-
-
-  var sanitizeHtmlContentHook = function sanitizeHtmlContentHook() {
-    // locker-service patches this function during runtime to sanitize HTML content.
-    throw new Error('sanitizeHtmlContent hook must be implemented.');
-  };
-  /**
-   * Sets the sanitizeHtmlContentHook.
-   *
-   * @param newHookImpl
-   * @returns oldHookImplementation.
-   */
-
-
-  function setSanitizeHtmlContentHook(newHookImpl) {
-    var currentHook = sanitizeHtmlContentHook;
-    sanitizeHtmlContentHook = newHookImpl;
-    return currentHook;
-  }
-  /*
-   * 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 SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var SymbolIterator = Symbol.iterator;
@@ -4797,7 +5025,26 @@
     update: updateNodeHook,
     insert: insertNodeHook,
     move: insertNodeHook,
-    remove: removeNodeHook
+    remove: removeNodeHook,
+    hydrate: function hydrate(vNode, node) {
+      var _a;
+
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line lwc-internal/no-global-node
+        if (node.nodeType !== Node.TEXT_NODE) {
+          logError('Hydration mismatch: incorrect node type received', vNode.owner);
+          assert.fail('Hydration mismatch: incorrect node type received.');
+        }
+
+        if (node.nodeValue !== 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.
+
+
+      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+      vNode.elm = node;
+    }
   };
   var CommentHook = {
     create: function create(vnode) {
@@ -4811,7 +5058,26 @@
     update: updateNodeHook,
     insert: insertNodeHook,
     move: insertNodeHook,
-    remove: removeNodeHook
+    remove: removeNodeHook,
+    hydrate: function hydrate(vNode, node) {
+      var _a;
+
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line lwc-internal/no-global-node
+        if (node.nodeType !== Node.COMMENT_NODE) {
+          logError('Hydration mismatch: incorrect node type received', vNode.owner);
+          assert.fail('Hydration mismatch: incorrect node type received.');
+        }
+
+        if (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.
+
+
+      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+      vNode.elm = node;
+    }
   }; // insert is called after update, which is used somewhere else (via a module)
   // to mark the vm as inserted, that means we cannot use update as the main channel
   // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -4845,6 +5111,34 @@
     remove: function remove(vnode, parentNode) {
       removeNodeHook(vnode, parentNode);
       removeElmHook(vnode);
+    },
+    hydrate: function hydrate(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 (elm.innerHTML === props.innerHTML) {
+            delete props.innerHTML;
+          } else {
+            logWarn("Mismatch hydrating element <".concat(elm.tagName.toLowerCase(), ">: innerHTML values do not match for element, will recover from the difference"), vnode.owner);
+          }
+        }
+      }
+
+      hydrateElmHook(vnode);
+
+      if (!isDomManual) {
+        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
+      }
     }
   };
   var CustomElementHook = {
@@ -4932,6 +5226,42 @@
         // will take care of disconnecting any child VM attached to its shadow as well.
         removeVM(vm);
       }
+    },
+    hydrate: function hydrate(vnode, elm) {
+      // the element is created, but the vm is not
+      var sel = vnode.sel,
+          mode = vnode.mode,
+          ctor = vnode.ctor,
+          owner = vnode.owner;
+      var def = getComponentInternalDef(ctor);
+      createVM(elm, def, {
+        mode: mode,
+        owner: owner,
+        tagName: sel,
+        renderer: owner.renderer
+      });
+      vnode.elm = elm;
+      var vm = getAssociatedVM(elm);
+      allocateChildrenHook(vnode, vm);
+      hydrateElmHook(vnode); // Insert hook section:
+
+      if (process.env.NODE_ENV !== 'production') {
+        assert.isTrue(vm.state === 0
+        /* created */
+        , "".concat(vm, " cannot be recycled."));
+      }
+
+      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
+        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
+      }
+
+      hydrateVM(vm);
     }
   };
 
@@ -5132,7 +5462,7 @@
       next = iterator.next();
       last = next.done; // template factory logic based on the previous collected value
 
-      var vnode = factory(value, j, j === 0, last);
+      var vnode = factory(value, j, j === 0, last === true);
 
       if (isArray$1(vnode)) {
         ArrayPush$1.apply(list, vnode);
@@ -5234,7 +5564,7 @@
 
 
   function d(value) {
-    return value == null ? '' : value;
+    return value == null ? '' : String(value);
   } // [b]ind function
 
 
@@ -5394,6 +5724,26 @@
 
     markAsDynamicChildren(vnodes);
     return vnodes;
+  }
+  /**
+   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
+   * libraries to sanitize HTML content. This hook process the content passed via the template to
+   * lwc:inner-html directive.
+   * It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
+   */
+
+
+  var sanitizeHtmlContentHook = function sanitizeHtmlContentHook() {
+    // locker-service patches this function during runtime to sanitize HTML content.
+    throw new Error('sanitizeHtmlContent hook must be implemented.');
+  };
+  /**
+   * Sets the sanitizeHtmlContentHook.
+   */
+
+
+  function setSanitizeHtmlContentHook(newHookImpl) {
+    sanitizeHtmlContentHook = newHookImpl;
   } // [s]anitize [h]tml [c]ontent
 
 
@@ -5401,23 +5751,21 @@
     return sanitizeHtmlContentHook(content);
   }
 
-  var api = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    h: h,
-    ti: ti,
+  var api = freeze({
     s: s,
+    h: h,
     c: c,
     i: i,
     f: f,
     t: t,
-    co: co,
     d: d,
     b: b,
     k: k,
+    co: co,
+    dc: dc,
+    ti: ti,
     gid: gid,
     fid: fid,
-    dc: dc,
-    sc: sc,
     shc: shc
   });
   /*
@@ -5432,12 +5780,12 @@
   }
 
   function createInlineStyleVNode(content) {
-    return h('style', {
+    return api.h('style', {
       key: 'style',
       attrs: {
         type: 'text/css'
       }
-    }, [t(content)]);
+    }, [api.t(content)]);
   }
 
   function updateStylesheetToken(vm, template) {
@@ -5497,9 +5845,10 @@
 
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     var content = [];
+    var root;
 
-    for (var _i14 = 0; _i14 < stylesheets.length; _i14++) {
-      var stylesheet = stylesheets[_i14];
+    for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
+      var stylesheet = stylesheets[_i16];
 
       if (isArray$1(stylesheet)) {
         ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
@@ -5509,23 +5858,46 @@
           // the component instance might be attempting to use an old version of
           // the stylesheet, while internally, we have a replacement for it.
           stylesheet = getStyleOrSwappedStyle(stylesheet);
-        } // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
-        // native shadow DOM. Synthetic shadow DOM never uses `:host`.
+        }
 
+        var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+
+        var scopeToken = isScopedCss || vm.shadowMode === 1
+        /* Synthetic */
+        && vm.renderMode === 1
+        /* Shadow */
+        ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+        // native shadow DOM. Synthetic shadow DOM never uses `:host`.
 
-        var isScopedCss = stylesheet[KEY__SCOPED_CSS];
         var useActualHostSelector = vm.renderMode === 0
         /* Light */
         ? !isScopedCss : vm.shadowMode === 0
         /* Native */
-        ; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+        ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+        // we use an attribute selector on the host to simulate :dir().
 
-        var scopeToken = isScopedCss || vm.shadowMode === 1
-        /* Synthetic */
-        && vm.renderMode === 1
+        var useNativeDirPseudoclass = void 0;
+
+        if (vm.renderMode === 1
         /* Shadow */
-        ? stylesheetToken : undefined;
-        ArrayPush$1.call(content, stylesheet(useActualHostSelector, scopeToken));
+        ) {
+          useNativeDirPseudoclass = vm.shadowMode === 0
+          /* Native */
+          ;
+        } else {
+          // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
+          // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
+          if (isUndefined$1(root)) {
+            // Only calculate the root once as necessary
+            root = getNearestShadowComponent(vm);
+          }
+
+          useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
+          /* Native */
+          ;
+        }
+
+        ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
       }
     }
 
@@ -5547,14 +5919,12 @@
   // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
 
-  function getNearestNativeShadowComponent(vm) {
+  function getNearestShadowComponent(vm) {
     var owner = vm;
 
     while (!isNull(owner)) {
       if (owner.renderMode === 1
       /* Shadow */
-      && owner.shadowMode === 0
-      /* Native */
       ) {
         return owner;
       }
@@ -5565,6 +5935,20 @@
     return owner;
   }
 
+  function getNearestNativeShadowComponent(vm) {
+    var owner = getNearestShadowComponent(vm);
+
+    if (!isNull(owner) && owner.shadowMode === 1
+    /* Synthetic */
+    ) {
+      // Synthetic-within-native is impossible. So if the nearest shadow component is
+      // synthetic, we know we won't find a native component if we go any further.
+      return null;
+    }
+
+    return owner;
+  }
+
   function createStylesheet(vm, stylesheets) {
     var renderer = vm.renderer,
         renderMode = vm.renderMode,
@@ -5575,10 +5959,13 @@
     && shadowMode === 1
     /* Synthetic */
     ) {
-      for (var _i15 = 0; _i15 < stylesheets.length; _i15++) {
-        renderer.insertGlobalStylesheet(stylesheets[_i15]);
+      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
+        renderer.insertGlobalStylesheet(stylesheets[_i17]);
       }
-    } else if (renderer.ssr) {
+    } else if (renderer.ssr || renderer.isHydrating()) {
+      // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+      //       This works in the client, because the stylesheets are created, and cached in the VM
+      //       the first time the VM renders.
       // native shadow or light DOM, SSR
       var combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
       return createInlineStyleVNode(combinedStylesheetContent);
@@ -5587,12 +5974,12 @@
       var root = getNearestNativeShadowComponent(vm);
       var isGlobal = isNull(root);
 
-      for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
+      for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
         if (isGlobal) {
-          renderer.insertGlobalStylesheet(stylesheets[_i16]);
+          renderer.insertGlobalStylesheet(stylesheets[_i18]);
         } else {
           // local level
-          renderer.insertStylesheet(stylesheets[_i16], root.cmpRoot);
+          renderer.insertStylesheet(stylesheets[_i18], root.cmpRoot);
         }
       }
     }
@@ -5869,8 +6256,8 @@
     var stylesheets = template.stylesheets;
 
     if (!isUndefined$1(stylesheets)) {
-      for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
-        if (isTrue(stylesheets[_i17][KEY__SCOPED_CSS])) {
+      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
+        if (isTrue(stylesheets[_i19][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -6100,8 +6487,8 @@
       assert.isTrue(isObject(service), "Invalid service declaration, ".concat(service, ": service must be an object"));
     }
 
-    for (var _i18 = 0; _i18 < hooks.length; ++_i18) {
-      var hookName = hooks[_i18];
+    for (var _i20 = 0; _i20 < hooks.length; ++_i20) {
+      var hookName = hooks[_i20];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -6124,8 +6511,8 @@
         def = vm.def,
         context = vm.context;
 
-    for (var _i19 = 0, _len6 = cbs.length; _i19 < _len6; ++_i19) {
-      cbs[_i19].call(undefined, component, {}, def, context);
+    for (var _i21 = 0, _len6 = cbs.length; _i21 < _len6; ++_i21) {
+      cbs[_i21].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -6178,6 +6565,12 @@
     , vm);
   }
 
+  function hydrateRootElement(elm) {
+    var vm = getAssociatedVM(elm);
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+  }
+
   function disconnectRootElement(elm) {
     var vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
@@ -6185,6 +6578,10 @@
 
   function appendVM(vm) {
     rehydrate(vm);
+  }
+
+  function hydrateVM(vm) {
+    hydrate(vm);
   } // just in case the component comes back, with this we guarantee re-rendering it
   // while preventing any attempt to rehydration until after reinsertion.
 
@@ -6408,6 +6805,22 @@
     }
   }
 
+  function hydrate(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 */
+      ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+      hydrateChildrenHook(vmChildren, children, vm);
+      runRenderedCallback(vm);
+    }
+  }
+
   function patchShadowRoot(vm, newCh) {
     var oldCh = vm.children; // caching the new children collection
 
@@ -6488,19 +6901,19 @@
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i20 = 0, _len7 = vms.length; _i20 < _len7; _i20 += 1) {
-      var vm = vms[_i20];
+    for (var _i22 = 0, _len7 = vms.length; _i22 < _len7; _i22 += 1) {
+      var vm = vms[_i22];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i20 + 1 < _len7) {
+        if (_i22 + 1 < _len7) {
           // 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, _i20 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i22 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -6604,8 +7017,8 @@
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i21 = vCustomElementCollection.length - 1; _i21 >= 0; _i21 -= 1) {
-      var elm = vCustomElementCollection[_i21].elm; // There are two cases where the element could be undefined:
+    for (var _i23 = vCustomElementCollection.length - 1; _i23 >= 0; _i23 -= 1) {
+      var elm = vCustomElementCollection[_i23].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.
@@ -6639,8 +7052,8 @@
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i22 = 0, _len8 = vnodes.length; _i22 < _len8; _i22 += 1) {
-      var vnode = vnodes[_i22];
+    for (var _i24 = 0, _len8 = vnodes.length; _i24 < _len8; _i24 += 1) {
+      var vnode = vnodes[_i24];
 
       if (!isNull(vnode) && isArray$1(vnode.children) && !isUndefined$1(vnode.elm)) {
         // vnode is a VElement with children
@@ -6664,8 +7077,8 @@
         renderer = vm.renderer;
     var rootNode = getRenderRoot(vm);
 
-    for (var _i23 = 0, _len9 = children.length; _i23 < _len9; _i23++) {
-      var child = children[_i23];
+    for (var _i25 = 0, _len9 = children.length; _i25 < _len9; _i25++) {
+      var child = children[_i25];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         renderer.remove(child.elm, rootNode);
@@ -6710,8 +7123,8 @@
     var oldSlots = vm.cmpSlots;
     var cmpSlots = vm.cmpSlots = create(null);
 
-    for (var _i24 = 0, _len10 = children.length; _i24 < _len10; _i24 += 1) {
-      var vnode = children[_i24];
+    for (var _i26 = 0, _len10 = children.length; _i26 < _len10; _i26 += 1) {
+      var vnode = children[_i26];
 
       if (isNull(vnode)) {
         continue;
@@ -6741,8 +7154,8 @@
         return;
       }
 
-      for (var _i25 = 0, _len11 = oldKeys.length; _i25 < _len11; _i25 += 1) {
-        var key = oldKeys[_i25];
+      for (var _i27 = 0, _len11 = oldKeys.length; _i27 < _len11; _i27 += 1) {
+        var key = oldKeys[_i27];
 
         if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
           markComponentAsDirty(vm);
@@ -7105,8 +7518,8 @@
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i26 = 0, _len12 = wiredConnecting.length; _i26 < _len12; _i26 += 1) {
-      wiredConnecting[_i26]();
+    for (var _i28 = 0, _len12 = wiredConnecting.length; _i28 < _len12; _i28 += 1) {
+      wiredConnecting[_i28]();
     }
   }
 
@@ -7114,8 +7527,8 @@
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i27 = 0, _len13 = wiredDisconnecting.length; _i27 < _len13; _i27 += 1) {
-        wiredDisconnecting[_i27]();
+      for (var _i29 = 0, _len13 = wiredDisconnecting.length; _i29 < _len13; _i29 += 1) {
+        wiredDisconnecting[_i29]();
       }
     }, noop);
   }
@@ -7200,28 +7613,12 @@
 
   var hooksAreSet = false;
 
-  function overrideHooks(hooks) {
-    var oldHooks = {};
-
-    if (!isUndefined$1(hooks.sanitizeHtmlContent)) {
-      oldHooks.sanitizeHtmlContent = setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
-    }
-
-    return oldHooks;
-  }
-
   function setHooks(hooks) {
     assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
-    overrideHooks(hooks);
     hooksAreSet = true;
+    setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-
-  function setHooksForTest(hooks) {
-    if (process.env.NODE_ENV !== 'production') {
-      return overrideHooks(hooks);
-    }
-  }
-  /* version: 2.5.5-canary1 */
+  /* version: 2.5.9 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7236,8 +7633,8 @@
   if (process.env.NODE_ENV === 'development') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = function () {
-      for (var _i28 = 0, _Object$keys = Object.keys(globalStylesheets); _i28 < _Object$keys.length; _i28++) {
-        var key = _Object$keys[_i28];
+      for (var _i30 = 0, _Object$keys = Object.keys(globalStylesheets); _i30 < _Object$keys.length; _i30++) {
+        var key = _Object$keys[_i30];
         delete globalStylesheets[key];
       }
     };
@@ -7376,8 +7773,17 @@
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
+  var _isHydrating = false;
+
+  function setIsHydrating(v) {
+    _isHydrating = v;
+  }
+
   var renderer = {
     ssr: false,
+    isHydrating: function isHydrating() {
+      return _isHydrating;
+    },
     isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
     createElement: function createElement(tagName, namespace) {
@@ -7399,6 +7805,10 @@
       return node.nextSibling;
     },
     attachShadow: function attachShadow(element, options) {
+      if (_isHydrating) {
+        return element.shadowRoot;
+      }
+
       return element.attachShadow(options);
     },
     setText: function setText(node, content) {
@@ -7509,75 +7919,6 @@
     getCustomElement: getCustomElement,
     HTMLElement: HTMLElementConstructor
   };
-  /*
-   * 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 function builds a Web Component class from a LWC constructor so it can be
-   * registered as a new element via customElements.define() at any given time.
-   *
-   * @deprecated since version 1.3.11
-   *
-   * @example
-   * ```
-   * import { buildCustomElementConstructor } from 'lwc';
-   * import Foo from 'ns/foo';
-   * const WC = buildCustomElementConstructor(Foo);
-   * customElements.define('x-foo', WC);
-   * const elm = document.createElement('x-foo');
-   * ```
-   */
-
-  function deprecatedBuildCustomElementConstructor(Ctor) {
-    if (process.env.NODE_ENV !== 'production') {
-      /* eslint-disable-next-line no-console */
-      console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + "Use \"".concat(Ctor.name, ".CustomElementConstructor\" static property of the component constructor to access the corresponding custom element constructor instead."));
-    }
-
-    return Ctor.CustomElementConstructor;
-  }
-
-  function buildCustomElementConstructor(Ctor) {
-    var def = getComponentInternalDef(Ctor);
-    return /*#__PURE__*/function (_def$bridge) {
-      _inherits(_class, _def$bridge);
-
-      var _super8 = _createSuper(_class);
-
-      function _class() {
-        var _this6;
-
-        _classCallCheck(this, _class);
-
-        _this6 = _super8.call(this);
-        createVM(_assertThisInitialized(_this6), def, {
-          mode: 'open',
-          owner: null,
-          tagName: _this6.tagName,
-          renderer: renderer
-        });
-        return _this6;
-      }
-
-      _createClass(_class, [{
-        key: "connectedCallback",
-        value: function connectedCallback() {
-          connectRootElement(this);
-        }
-      }, {
-        key: "disconnectedCallback",
-        value: function disconnectedCallback() {
-          disconnectRootElement(this);
-        }
-      }]);
-
-      return _class;
-    }(def.bridge);
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7587,7 +7928,6 @@
   // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line lwc-internal/no-global-node
 
-
   var _Node$1 = Node;
   var ConnectingSlot = new WeakMap();
   var DisconnectingSlot = new WeakMap();
@@ -7697,6 +8037,142 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+
+  function hydrateComponent(element, Ctor) {
+    var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+    if (!isFunction$1(Ctor)) {
+      throw new TypeError("\"hydrateComponent\" expects a valid component constructor as the second parameter but instead received ".concat(Ctor, "."));
+    }
+
+    if (!isObject(props) || isNull(props)) {
+      throw new TypeError("\"hydrateComponent\" expects an object as the third parameter but instead received ".concat(props, "."));
+    }
+
+    var def = getComponentInternalDef(Ctor);
+
+    try {
+      // 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);
+      createVM(element, def, {
+        mode: 'open',
+        owner: null,
+        renderer: renderer,
+        tagName: element.tagName.toLowerCase()
+      });
+
+      for (var _i31 = 0, _Object$entries2 = Object.entries(props); _i31 < _Object$entries2.length; _i31++) {
+        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i31], 2),
+            key = _Object$entries2$_i[0],
+            value = _Object$entries2$_i[1];
+
+        element[key] = value;
+      }
+
+      hydrateRootElement(element); // set it back since now we finished hydration.
+
+      setIsHydrating(false);
+    } catch (e) {
+      // Fallback: In case there's an error while hydrating, let's log the error, and replace the element with
+      //           the client generated DOM.
+
+      /* eslint-disable-next-line no-console */
+      console.error('Recovering from error while hydrating: ', e);
+      setIsHydrating(false);
+      var newElem = createElement(element.tagName, {
+        is: Ctor,
+        mode: 'open'
+      });
+
+      for (var _i32 = 0, _Object$entries3 = Object.entries(props); _i32 < _Object$entries3.length; _i32++) {
+        var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i32], 2),
+            _key3 = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+
+        newElem[_key3] = _value2;
+      }
+
+      element.parentNode.replaceChild(newElem, element);
+    }
+  }
+  /*
+   * 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 function builds a Web Component class from a LWC constructor so it can be
+   * registered as a new element via customElements.define() at any given time.
+   *
+   * @deprecated since version 1.3.11
+   *
+   * @example
+   * ```
+   * import { buildCustomElementConstructor } from 'lwc';
+   * import Foo from 'ns/foo';
+   * const WC = buildCustomElementConstructor(Foo);
+   * customElements.define('x-foo', WC);
+   * const elm = document.createElement('x-foo');
+   * ```
+   */
+
+
+  function deprecatedBuildCustomElementConstructor(Ctor) {
+    if (process.env.NODE_ENV !== 'production') {
+      /* eslint-disable-next-line no-console */
+      console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + "Use \"".concat(Ctor.name, ".CustomElementConstructor\" static property of the component constructor to access the corresponding custom element constructor instead."));
+    }
+
+    return Ctor.CustomElementConstructor;
+  }
+
+  function buildCustomElementConstructor(Ctor) {
+    var def = getComponentInternalDef(Ctor);
+    return /*#__PURE__*/function (_def$bridge) {
+      _inherits(_class, _def$bridge);
+
+      var _super8 = _createSuper(_class);
+
+      function _class() {
+        var _this6;
+
+        _classCallCheck(this, _class);
+
+        _this6 = _super8.call(this);
+        createVM(_assertThisInitialized(_this6), def, {
+          mode: 'open',
+          owner: null,
+          tagName: _this6.tagName,
+          renderer: renderer
+        });
+        return _this6;
+      }
+
+      _createClass(_class, [{
+        key: "connectedCallback",
+        value: function connectedCallback() {
+          connectRootElement(this);
+        }
+      }, {
+        key: "disconnectedCallback",
+        value: function disconnectedCallback() {
+          disconnectRootElement(this);
+        }
+      }]);
+
+      return _class;
+    }(def.bridge);
+  }
+  /*
+   * 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
+   */
+
   /**
    * EXPERIMENTAL: This function provides access to the component constructor, given an HTMLElement.
    * This API is subject to change or being removed.
@@ -7795,7 +8271,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.5.5-canary1 */
+  /* version: 2.5.9 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7805,6 +8281,7 @@
   exports.createElement = createElement;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
+  exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
   exports.isNodeFromTemplate = isNodeFromTemplate;
   exports.readonly = readonly;
@@ -7816,7 +8293,6 @@
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;
   exports.setHooks = setHooks;
-  exports.setHooksForTest = setHooksForTest;
   exports.swapComponent = swapComponent;
   exports.swapStyle = swapStyle;
   exports.swapTemplate = swapTemplate;
@@ -7826,4 +8302,4 @@
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));