lwc 2.5.5-canary1 → 2.5.9

package/dist/engine-server/commonjs/es2017/engine-server.js

@@ -73,7 +73,7 @@ const {
   find: ArrayFind,
   indexOf: ArrayIndexOf,
   join: ArrayJoin,
-  map: ArrayMap$1,
+  map: ArrayMap,
   push: ArrayPush$1,
   reduce: ArrayReduce,
   reverse: ArrayReverse,
@@ -140,7 +140,7 @@ function toString$1(obj) {
     // 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();
@@ -339,7 +339,7 @@ function htmlPropertyToAttribute(propName) {
   CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
   return attributeName;
 }
-/** version: 2.5.5-canary1 */
+/** version: 2.5.9 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -460,7 +460,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.5.5-canary1 */
+/** version: 2.5.9 */
 
 /* proxy-compat-disable */
 
@@ -512,6 +512,28 @@ function guid() {
   }
 
   return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+} // Borrowed from Vue template compiler.
+// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+
+
+const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+const PROPERTY_DELIMITER = /:(.+)/;
+
+function parseStyleText(cssText) {
+  const styleMap = {};
+  const declarations = cssText.split(DECLARATION_DELIMITER);
+
+  for (const declaration of declarations) {
+    if (declaration) {
+      const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+
+      if (prop !== undefined && value !== undefined) {
+        styleMap[prop.trim()] = value.trim();
+      }
+    }
+  }
+
+  return styleMap;
 }
 /*
  * Copyright (c) 2019, salesforce.com, inc.
@@ -693,8 +715,8 @@ function getErrorComponentStack(vm) {
  */
 
 
-function logError(message, vm) {
-  let msg = `[LWC error]: ${message}`;
+function log(method, message, vm) {
+  let msg = `[LWC ${method}]: ${message}`;
 
   if (!isUndefined$1(vm)) {
     msg = `${msg}\n${getComponentStack(vm)}`;
@@ -702,7 +724,7 @@ function logError(message, vm) {
 
   if (process.env.NODE_ENV === 'test') {
     /* eslint-disable-next-line no-console */
-    console.error(msg);
+    console[method](msg);
     return;
   }
 
@@ -710,9 +732,17 @@ function logError(message, vm) {
     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.
@@ -1880,7 +1910,6 @@ const {
   getPrototypeOf,
   create: ObjectCreate,
   defineProperty: ObjectDefineProperty,
-  defineProperties: ObjectDefineProperties,
   isExtensible,
   getOwnPropertyDescriptor,
   getOwnPropertyNames,
@@ -1890,8 +1919,7 @@ const {
 } = Object;
 const {
   push: ArrayPush,
-  concat: ArrayConcat,
-  map: ArrayMap
+  concat: ArrayConcat
 } = Array.prototype;
 const OtS = {}.toString;
 
@@ -1956,7 +1984,9 @@ class BaseProxyHandler {
     //       but it will always be compatible with the previous descriptor
     //       to preserve the object invariants, which makes these lines safe.
 
-    const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key);
+    const 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)) {
       const wrappedDesc = this.wrapDescriptor(originalDescriptor);
@@ -1984,11 +2014,17 @@ class BaseProxyHandler {
 
     preventExtensions(shadowTarget);
   } // Shared Traps
+  // TODO: apply() is never called
+
+  /* istanbul ignore next */
 
 
   apply(shadowTarget, thisArg, argArray) {
     /* No op */
-  }
+  } // TODO: construct() is never called
+
+  /* istanbul ignore next */
+
 
   construct(shadowTarget, argArray, newTarget) {
     /* No op */
@@ -2101,8 +2137,8 @@ class BaseProxyHandler {
 
 }
 
-const getterMap = new WeakMap();
-const setterMap = new WeakMap();
+const getterMap$1 = new WeakMap();
+const setterMap$1 = new WeakMap();
 const reverseGetterMap = new WeakMap();
 const reverseSetterMap = new WeakMap();
 
@@ -2112,7 +2148,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap.get(originalGet);
+    const wrappedGetter = getterMap$1.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -2125,13 +2161,13 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap.set(originalGet, get);
+    getterMap$1.set(originalGet, get);
     reverseGetterMap.set(get, originalGet);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap.get(originalSet);
+    const wrappedSetter = setterMap$1.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -2142,7 +2178,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       originalSet.call(unwrap$1(this), unwrap$1(v));
     };
 
-    setterMap.set(originalSet, set);
+    setterMap$1.set(originalSet, set);
     reverseSetterMap.set(set, originalSet);
     return set;
   }
@@ -2183,7 +2219,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       return unwrap$1(redGet.call(handler.wrapValue(this)));
     };
 
-    getterMap.set(get, redGet);
+    getterMap$1.set(get, redGet);
     reverseGetterMap.set(redGet, get);
     return get;
   }
@@ -2202,7 +2238,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       redSet.call(handler.wrapValue(this), handler.wrapValue(v));
     };
 
-    setterMap.set(set, redSet);
+    setterMap$1.set(set, redSet);
     reverseSetterMap.set(redSet, set);
     return set;
   }
@@ -2243,6 +2279,7 @@ class ReactiveProxyHandler extends BaseProxyHandler {
   }
 
   setPrototypeOf(shadowTarget, prototype) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(`Invalid setPrototypeOf invocation for reactive proxy ${toString(this.originalTarget)}. Prototype of reactive objects cannot be changed.`);
     }
@@ -2256,6 +2293,11 @@ class ReactiveProxyHandler extends BaseProxyHandler {
       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)) {
         return false;
@@ -2297,8 +2339,8 @@ class ReactiveProxyHandler extends BaseProxyHandler {
 
 }
 
-const getterMap$1 = new WeakMap();
-const setterMap$1 = new WeakMap();
+const getterMap = new WeakMap();
+const setterMap = new WeakMap();
 
 class ReadOnlyHandler extends BaseProxyHandler {
   wrapValue(value) {
@@ -2306,7 +2348,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   wrapGetter(originalGet) {
-    const wrappedGetter = getterMap$1.get(originalGet);
+    const wrappedGetter = getterMap.get(originalGet);
 
     if (!isUndefined(wrappedGetter)) {
       return wrappedGetter;
@@ -2319,12 +2361,12 @@ class ReadOnlyHandler extends BaseProxyHandler {
       return handler.wrapValue(originalGet.call(unwrap$1(this)));
     };
 
-    getterMap$1.set(originalGet, get);
+    getterMap.set(originalGet, get);
     return get;
   }
 
   wrapSetter(originalSet) {
-    const wrappedSetter = setterMap$1.get(originalSet);
+    const wrappedSetter = setterMap.get(originalSet);
 
     if (!isUndefined(wrappedSetter)) {
       return wrappedSetter;
@@ -2333,6 +2375,7 @@ class ReadOnlyHandler extends BaseProxyHandler {
     const handler = this;
 
     const set = function (v) {
+      /* istanbul ignore else */
       if (process.env.NODE_ENV !== 'production') {
         const {
           originalTarget
@@ -2341,33 +2384,41 @@ class ReadOnlyHandler extends BaseProxyHandler {
       }
     };
 
-    setterMap$1.set(originalSet, set);
+    setterMap.set(originalSet, set);
     return set;
   }
 
   set(shadowTarget, key, value) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
-      throw new Error(`Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
+      const msg = isArray(originalTarget) ? `Invalid mutation: Cannot mutate array at index ${key.toString()}. Array is read-only.` : `Invalid mutation: Cannot set "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`;
+      throw new Error(msg);
     }
+    /* istanbul ignore next */
+
 
     return false;
   }
 
   deleteProperty(shadowTarget, key) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot delete "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
+    /* istanbul ignore next */
+
 
     return false;
   }
 
   setPrototypeOf(shadowTarget, prototype) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
@@ -2377,23 +2428,29 @@ class ReadOnlyHandler extends BaseProxyHandler {
   }
 
   preventExtensions(shadowTarget) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot preventExtensions on ${originalTarget}". "${originalTarget} is read-only.`);
     }
+    /* istanbul ignore next */
+
 
     return false;
   }
 
   defineProperty(shadowTarget, key, descriptor) {
+    /* istanbul ignore else */
     if (process.env.NODE_ENV !== 'production') {
       const {
         originalTarget
       } = this;
       throw new Error(`Invalid mutation: Cannot defineProperty "${key.toString()}" on "${originalTarget}". "${originalTarget}" is read-only.`);
     }
+    /* istanbul ignore next */
+
 
     return false;
   }
@@ -2451,6 +2508,8 @@ const formatter = {
 }; // 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.
@@ -2475,6 +2534,7 @@ function getGlobal() {
 }
 
 function init() {
+  /* istanbul ignore if */
   if (process.env.NODE_ENV === 'production') {
     // this method should never leak to prod
     throw new ReferenceError();
@@ -2489,6 +2549,8 @@ function init() {
   ArrayPush.call(devtoolsFormatters, formatter);
   global.devtoolsFormatters = devtoolsFormatters;
 }
+/* istanbul ignore else */
+
 
 if (process.env.NODE_ENV !== 'production') {
   init();
@@ -2535,7 +2597,8 @@ class ReactiveMembrane {
     this.valueMutated = defaultValueMutated;
     this.valueObserved = defaultValueObserved;
     this.valueIsObservable = defaultValueIsObservable;
-    this.objectGraph = new WeakMap();
+    this.readOnlyObjectGraph = new WeakMap();
+    this.reactiveObjectGraph = new WeakMap();
 
     if (!isUndefined(options)) {
       const {
@@ -2558,10 +2621,13 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(unwrappedValue);
 
     if (this.valueIsObservable(distorted)) {
-      const 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;
@@ -2572,7 +2638,7 @@ class ReactiveMembrane {
     const distorted = this.valueDistortion(value);
 
     if (this.valueIsObservable(distorted)) {
-      return this.getReactiveState(value, distorted).readOnly;
+      return this.getReadOnlyHandler(value, distorted);
     }
 
     return distorted;
@@ -2582,47 +2648,36 @@ class ReactiveMembrane {
     return unwrap$1(p);
   }
 
-  getReactiveState(value, distortedValue) {
-    const {
-      objectGraph
-    } = this;
-    let reactiveState = objectGraph.get(distortedValue);
+  getReactiveHandler(value, distortedValue) {
+    let proxy = this.reactiveObjectGraph.get(distortedValue);
 
-    if (reactiveState) {
-      return reactiveState;
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const handler = new ReactiveProxyHandler(this, distortedValue);
+      proxy = new Proxy(createShadowTarget(distortedValue), handler);
+      registerProxy(proxy, value);
+      this.reactiveObjectGraph.set(distortedValue, proxy);
     }
 
-    const membrane = this;
-    reactiveState = {
-      get reactive() {
-        const reactiveHandler = new ReactiveProxyHandler(membrane, distortedValue); // caching the reactive proxy after the first time it is accessed
-
-        const proxy = new Proxy(createShadowTarget(distortedValue), reactiveHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'reactive', {
-          value: proxy
-        });
-        return proxy;
-      },
+    return proxy;
+  }
 
-      get readOnly() {
-        const readOnlyHandler = new ReadOnlyHandler(membrane, distortedValue); // caching the readOnly proxy after the first time it is accessed
+  getReadOnlyHandler(value, distortedValue) {
+    let proxy = this.readOnlyObjectGraph.get(distortedValue);
 
-        const proxy = new Proxy(createShadowTarget(distortedValue), readOnlyHandler);
-        registerProxy(proxy, value);
-        ObjectDefineProperty(this, 'readOnly', {
-          value: proxy
-        });
-        return proxy;
-      }
+    if (isUndefined(proxy)) {
+      // caching the proxy after the first time it is accessed
+      const 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;
   }
 
 }
-/** version: 1.0.0 */
+/** version: 1.1.5 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3076,8 +3131,10 @@ for (const [elementProp, rendererMethod] of childGetters) {
       }
 
       return renderer[rendererMethod](elm);
-    }
+    },
 
+    configurable: true,
+    enumerable: true
   };
 }
 
@@ -3097,8 +3154,11 @@ for (const queryMethod of queryMethods) {
       }
 
       return renderer[queryMethod](elm, arg);
-    }
+    },
 
+    configurable: true,
+    enumerable: true,
+    writable: true
   };
 }
 
@@ -4136,7 +4196,7 @@ function createComponentDef(Ctor) {
     if (!isUndefined$1(ctorShadowSupportMode)) {
       assert.invariant(ctorShadowSupportMode === "any"
       /* Any */
-      || ctorShadowSupportMode === "default"
+      || ctorShadowSupportMode === "reset"
       /* Default */
       , `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
     }
@@ -4298,7 +4358,7 @@ const lightingElementDef = {
   renderMode: 1
   /* Shadow */
   ,
-  shadowSupportMode: "default"
+  shadowSupportMode: "reset"
   /* Default */
   ,
   wire: EmptyObject,
@@ -4447,6 +4507,17 @@ function createElmHook(vnode) {
   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) {
   const {
     owner
@@ -4618,6 +4689,179 @@ function createChildrenHook(vnode) {
   }
 }
 
+function isElementNode(node) {
+  // eslint-disable-next-line lwc-internal/no-global-node
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+
+function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
+  const {
+    data: {
+      attrs = {}
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
+  // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
+
+  for (const [attrName, attrValue] of Object.entries(attrs)) {
+    const elmAttrValue = renderer.getAttribute(elm, attrName);
+
+    if (String(attrValue) !== elmAttrValue) {
+      logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
+      nodesAreCompatible = false;
+    }
+  }
+
+  return nodesAreCompatible;
+}
+
+function vnodesAndElementHaveCompatibleClass(vnode, elm) {
+  const {
+    data: {
+      className,
+      classMap
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  let nodesAreCompatible = true;
+  let 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.
+    const classList = renderer.getClassList(elm);
+    let computedClassName = ''; // all classes from the vnode should be in the element.classList
+
+    for (const name in classMap) {
+      computedClassName += ' ' + name;
+
+      if (!classList.contains(name)) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    vnodeClassName = computedClassName.trim();
+
+    if (classList.length > keys(classMap).length) {
+      nodesAreCompatible = false;
+    }
+  }
+
+  if (!nodesAreCompatible) {
+    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
+  }
+
+  return nodesAreCompatible;
+}
+
+function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
+  const {
+    data: {
+      style,
+      styleDecls
+    },
+    owner: {
+      renderer
+    }
+  } = vnode;
+  const elmStyle = renderer.getAttribute(elm, 'style') || '';
+  let vnodeStyle;
+  let nodesAreCompatible = true;
+
+  if (!isUndefined$1(style) && style !== elmStyle) {
+    nodesAreCompatible = false;
+    vnodeStyle = style;
+  } else if (!isUndefined$1(styleDecls)) {
+    const parsedVnodeStyle = parseStyleText(elmStyle);
+    const expectedStyle = []; // styleMap is used when style is set to static value.
+
+    for (let i = 0, n = styleDecls.length; i < n; i++) {
+      const [prop, value, important] = styleDecls[i];
+      expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+      const parsedPropValue = parsedVnodeStyle[prop];
+
+      if (isUndefined$1(parsedPropValue)) {
+        nodesAreCompatible = false;
+      } else if (!parsedPropValue.startsWith(value)) {
+        nodesAreCompatible = false;
+      } else if (important && !parsedPropValue.endsWith('!important')) {
+        nodesAreCompatible = false;
+      }
+    }
+
+    if (keys(parsedVnodeStyle).length > styleDecls.length) {
+      nodesAreCompatible = false;
+    }
+
+    vnodeStyle = ArrayJoin.call(expectedStyle, ';');
+  }
+
+  if (!nodesAreCompatible) {
+    // style is used when class is bound to an expr.
+    logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${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') {
+    const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
+
+    if (elmChildren.length !== filteredVNodes.length) {
+      logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
+      throwHydrationError();
+    }
+  }
+
+  let elmCurrentChildIdx = 0;
+
+  for (let j = 0, n = children.length; j < n; j++) {
+    const ch = children[j];
+
+    if (ch != null) {
+      const 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 "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
+            throwHydrationError();
+          } // Note: props are not yet set
+
+
+          const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
+          const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
+          const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
+          const 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
@@ -4701,38 +4945,6 @@ function getUpgradableConstructor(tagName, renderer) {
  * 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
- */
-
-
-let 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) {
-  const 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
- */
-
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 const SymbolIterator = Symbol.iterator;
@@ -4751,7 +4963,26 @@ const TextHook = {
   update: updateNodeHook,
   insert: insertNodeHook,
   move: insertNodeHook,
-  remove: removeNodeHook
+  remove: removeNodeHook,
+  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;
+  }
 };
 const CommentHook = {
   create: vnode => {
@@ -4769,7 +5000,26 @@ const CommentHook = {
   update: updateNodeHook,
   insert: insertNodeHook,
   move: insertNodeHook,
-  remove: removeNodeHook
+  remove: removeNodeHook,
+  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,
@@ -4809,6 +5059,38 @@ const ElementHook = {
   remove: (vnode, parentNode) => {
     removeNodeHook(vnode, parentNode);
     removeElmHook(vnode);
+  },
+  hydrate: (vnode, node) => {
+    const elm = node;
+    vnode.elm = elm;
+    const {
+      context
+    } = vnode.data;
+    const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
+    /* manual */
+    );
+
+    if (isDomManual) {
+      // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+      // remove the innerHTML from props so it reuses the existing dom elements.
+      const {
+        props
+      } = vnode.data;
+
+      if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+        if (elm.innerHTML === props.innerHTML) {
+          delete props.innerHTML;
+        } else {
+          logWarn(`Mismatch hydrating element <${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);
+    }
   }
 };
 const CustomElementHook = {
@@ -4900,6 +5182,44 @@ const CustomElementHook = {
       // will take care of disconnecting any child VM attached to its shadow as well.
       removeVM(vm);
     }
+  },
+  hydrate: (vnode, elm) => {
+    // the element is created, but the vm is not
+    const {
+      sel,
+      mode,
+      ctor,
+      owner
+    } = vnode;
+    const def = getComponentInternalDef(ctor);
+    createVM(elm, def, {
+      mode,
+      owner,
+      tagName: sel,
+      renderer: owner.renderer
+    });
+    vnode.elm = elm;
+    const vm = getAssociatedVM(elm);
+    allocateChildrenHook(vnode, vm);
+    hydrateElmHook(vnode); // Insert hook section:
+
+    if (process.env.NODE_ENV !== 'production') {
+      assert.isTrue(vm.state === 0
+      /* created */
+      , `${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);
   }
 };
 
@@ -5108,7 +5428,7 @@ function i(iterable, factory) {
     next = iterator.next();
     last = next.done; // template factory logic based on the previous collected value
 
-    const vnode = factory(value, j, j === 0, last);
+    const vnode = factory(value, j, j === 0, last === true);
 
     if (isArray$1(vnode)) {
       ArrayPush$1.apply(list, vnode);
@@ -5212,7 +5532,7 @@ function co(text) {
 
 
 function d(value) {
-  return value == null ? '' : value;
+  return value == null ? '' : String(value);
 } // [b]ind function
 
 
@@ -5374,6 +5694,26 @@ function sc(vnodes) {
 
   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.
+ */
+
+
+let 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
 
 
@@ -5381,24 +5721,22 @@ function shc(content) {
   return sanitizeHtmlContentHook(content);
 }
 
-var api = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  h: h,
-  ti: ti,
-  s: s,
-  c: c,
-  i: i,
-  f: f,
-  t: t,
-  co: co,
-  d: d,
-  b: b,
-  k: k,
-  gid: gid,
-  fid: fid,
-  dc: dc,
-  sc: sc,
-  shc: shc
+const api = freeze({
+  s,
+  h,
+  c,
+  i,
+  f,
+  t,
+  d,
+  b,
+  k,
+  co,
+  dc,
+  ti,
+  gid,
+  fid,
+  shc
 });
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5412,12 +5750,12 @@ function makeHostToken(token) {
 }
 
 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) {
@@ -5485,6 +5823,7 @@ function updateStylesheetToken(vm, template) {
 
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
+  let root;
 
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
@@ -5497,23 +5836,46 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
         // 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`.
+      }
 
+      const isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+
+      const 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`.
 
-      const isScopedCss = stylesheet[KEY__SCOPED_CSS];
       const 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().
 
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* Synthetic */
-      && vm.renderMode === 1
+      let useNativeDirPseudoclass;
+
+      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));
     }
   }
 
@@ -5537,14 +5899,12 @@ function getStylesheetsContent(vm, template) {
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
 
 
-function getNearestNativeShadowComponent(vm) {
+function getNearestShadowComponent(vm) {
   let owner = vm;
 
   while (!isNull(owner)) {
     if (owner.renderMode === 1
     /* Shadow */
-    && owner.shadowMode === 0
-    /* Native */
     ) {
       return owner;
     }
@@ -5555,6 +5915,20 @@ function getNearestNativeShadowComponent(vm) {
   return owner;
 }
 
+function getNearestNativeShadowComponent(vm) {
+  const 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) {
   const {
     renderer,
@@ -5570,7 +5944,10 @@ function createStylesheet(vm, stylesheets) {
     for (let i = 0; i < stylesheets.length; i++) {
       renderer.insertGlobalStylesheet(stylesheets[i]);
     }
-  } 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
     const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
     return createInlineStyleVNode(combinedStylesheetContent);
@@ -6150,6 +6527,10 @@ function disconnectRootElement(elm) {
 
 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.
 
@@ -6383,6 +6764,22 @@ function rehydrate(vm) {
   }
 }
 
+function hydrate(vm) {
+  if (isTrue(vm.isDirty)) {
+    // manually diffing/patching here.
+    // This routine is:
+    // patchShadowRoot(vm, children);
+    //  -> addVnodes.
+    const children = renderComponent$1(vm);
+    vm.children = children;
+    const vmChildren = vm.renderMode === 0
+    /* Light */
+    ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+    hydrateChildrenHook(vmChildren, children, vm);
+    runRenderedCallback(vm);
+  }
+}
+
 function patchShadowRoot(vm, newCh) {
   const {
     children: oldCh
@@ -7191,28 +7588,12 @@ function readonly(obj) {
 
 let hooksAreSet = false;
 
-function overrideHooks(hooks) {
-  const 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) 2020, salesforce.com, inc.
@@ -7242,7 +7623,7 @@ var HostNodeType;
 const CLASSNAMES_SEPARATOR = /\s+/g;
 
 function classNameToTokenList(value) {
-  return new Set(value.trim().split(CLASSNAMES_SEPARATOR));
+  return new Set(value.split(CLASSNAMES_SEPARATOR).filter(str => str.length));
 }
 
 function tokenListToClassName(values) {
@@ -7304,6 +7685,11 @@ class HTMLElement$1 {
 
 const renderer = {
   ssr: true,
+
+  isHydrating() {
+    return false;
+  },
+
   isNativeShadowDefined: false,
   isSyntheticShadowDefined: false,
 
@@ -7511,18 +7897,18 @@ const renderer = {
   },
 
   setCSSStyleProperty(element, name, value, important) {
-    let styleAttribute = element.attributes.find(attr => attr.name === 'style' && isNull(attr.namespace));
+    const styleAttribute = element.attributes.find(attr => attr.name === 'style' && isNull(attr.namespace));
+    const serializedProperty = `${name}: ${value}${important ? ' !important' : ''}`;
 
     if (isUndefined$1(styleAttribute)) {
-      styleAttribute = {
+      element.attributes.push({
         name: 'style',
         namespace: null,
-        value: ''
-      };
-      element.attributes.push(styleAttribute);
+        value: serializedProperty
+      });
+    } else {
+      styleAttribute.value += `; ${serializedProperty}`;
     }
-
-    styleAttribute.value = `${styleAttribute.value}; ${name}: ${value}${important ? ' !important' : ''}`;
   },
 
   isConnected(node) {
@@ -7703,7 +8089,7 @@ function renderComponent(tagName, Ctor, props = {}) {
 
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.5.5-canary1 */
+/* version: 2.5.9 */
 
 exports.LightningElement = LightningElement;
 exports.api = api$1;
@@ -7720,7 +8106,6 @@ exports.sanitizeAttribute = sanitizeAttribute;
 exports.setFeatureFlag = setFeatureFlag;
 exports.setFeatureFlagForTest = setFeatureFlagForTest;
 exports.setHooks = setHooks;
-exports.setHooksForTest = setHooksForTest;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;