lwc 2.5.5-canary1 → 2.5.9

package/dist/engine-dom/iife/es2017/engine-dom.js

@@ -72,7 +72,7 @@ var LWC = (function (exports) {
     find: ArrayFind,
     indexOf: ArrayIndexOf,
     join: ArrayJoin,
-    map: ArrayMap$1,
+    map: ArrayMap,
     push: ArrayPush$1,
     reduce: ArrayReduce,
     reverse: ArrayReverse,
@@ -139,7 +139,7 @@ var LWC = (function (exports) {
       // 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();
@@ -302,7 +302,7 @@ var LWC = (function (exports) {
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.5.5-canary1 */
+  /** version: 2.5.9 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -482,7 +482,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.5.5-canary1 */
+  /** version: 2.5.9 */
 
   /* proxy-compat-disable */
 
@@ -534,6 +534,28 @@ var LWC = (function (exports) {
     }
 
     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.
@@ -715,8 +737,8 @@ var LWC = (function (exports) {
    */
 
 
-  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)}`;
@@ -724,7 +746,7 @@ var LWC = (function (exports) {
 
     if (process.env.NODE_ENV === 'test') {
       /* eslint-disable-next-line no-console */
-      console.error(msg);
+      console[method](msg);
       return;
     }
 
@@ -732,9 +754,17 @@ var LWC = (function (exports) {
       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.
@@ -1902,7 +1932,6 @@ var LWC = (function (exports) {
     getPrototypeOf,
     create: ObjectCreate,
     defineProperty: ObjectDefineProperty,
-    defineProperties: ObjectDefineProperties,
     isExtensible,
     getOwnPropertyDescriptor,
     getOwnPropertyNames,
@@ -1912,8 +1941,7 @@ var LWC = (function (exports) {
   } = Object;
   const {
     push: ArrayPush,
-    concat: ArrayConcat,
-    map: ArrayMap
+    concat: ArrayConcat
   } = Array.prototype;
   const OtS = {}.toString;
 
@@ -1978,7 +2006,9 @@ var LWC = (function (exports) {
       //       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);
@@ -2006,11 +2036,17 @@ var LWC = (function (exports) {
 
       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 */
@@ -2123,8 +2159,8 @@ var LWC = (function (exports) {
 
   }
 
-  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();
 
@@ -2134,7 +2170,7 @@ var LWC = (function (exports) {
     }
 
     wrapGetter(originalGet) {
-      const wrappedGetter = getterMap.get(originalGet);
+      const wrappedGetter = getterMap$1.get(originalGet);
 
       if (!isUndefined(wrappedGetter)) {
         return wrappedGetter;
@@ -2147,13 +2183,13 @@ var LWC = (function (exports) {
         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;
@@ -2164,7 +2200,7 @@ var LWC = (function (exports) {
         originalSet.call(unwrap$1(this), unwrap$1(v));
       };
 
-      setterMap.set(originalSet, set);
+      setterMap$1.set(originalSet, set);
       reverseSetterMap.set(set, originalSet);
       return set;
     }
@@ -2205,7 +2241,7 @@ var LWC = (function (exports) {
         return unwrap$1(redGet.call(handler.wrapValue(this)));
       };
 
-      getterMap.set(get, redGet);
+      getterMap$1.set(get, redGet);
       reverseGetterMap.set(redGet, get);
       return get;
     }
@@ -2224,7 +2260,7 @@ var LWC = (function (exports) {
         redSet.call(handler.wrapValue(this), handler.wrapValue(v));
       };
 
-      setterMap.set(set, redSet);
+      setterMap$1.set(set, redSet);
       reverseSetterMap.set(redSet, set);
       return set;
     }
@@ -2265,6 +2301,7 @@ var LWC = (function (exports) {
     }
 
     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.`);
       }
@@ -2278,6 +2315,11 @@ var LWC = (function (exports) {
         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;
@@ -2319,8 +2361,8 @@ var LWC = (function (exports) {
 
   }
 
-  const getterMap$1 = new WeakMap();
-  const setterMap$1 = new WeakMap();
+  const getterMap = new WeakMap();
+  const setterMap = new WeakMap();
 
   class ReadOnlyHandler extends BaseProxyHandler {
     wrapValue(value) {
@@ -2328,7 +2370,7 @@ var LWC = (function (exports) {
     }
 
     wrapGetter(originalGet) {
-      const wrappedGetter = getterMap$1.get(originalGet);
+      const wrappedGetter = getterMap.get(originalGet);
 
       if (!isUndefined(wrappedGetter)) {
         return wrappedGetter;
@@ -2341,12 +2383,12 @@ var LWC = (function (exports) {
         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;
@@ -2355,6 +2397,7 @@ var LWC = (function (exports) {
       const handler = this;
 
       const set = function (v) {
+        /* istanbul ignore else */
         if (process.env.NODE_ENV !== 'production') {
           const {
             originalTarget
@@ -2363,33 +2406,41 @@ var LWC = (function (exports) {
         }
       };
 
-      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
@@ -2399,23 +2450,29 @@ var LWC = (function (exports) {
     }
 
     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;
     }
@@ -2473,6 +2530,8 @@ var LWC = (function (exports) {
   }; // 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.
@@ -2497,6 +2556,7 @@ var LWC = (function (exports) {
   }
 
   function init() {
+    /* istanbul ignore if */
     if (process.env.NODE_ENV === 'production') {
       // this method should never leak to prod
       throw new ReferenceError();
@@ -2511,6 +2571,8 @@ var LWC = (function (exports) {
     ArrayPush.call(devtoolsFormatters, formatter);
     global.devtoolsFormatters = devtoolsFormatters;
   }
+  /* istanbul ignore else */
+
 
   if (process.env.NODE_ENV !== 'production') {
     init();
@@ -2557,7 +2619,8 @@ var LWC = (function (exports) {
       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 {
@@ -2580,10 +2643,13 @@ var LWC = (function (exports) {
       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;
@@ -2594,7 +2660,7 @@ var LWC = (function (exports) {
       const distorted = this.valueDistortion(value);
 
       if (this.valueIsObservable(distorted)) {
-        return this.getReactiveState(value, distorted).readOnly;
+        return this.getReadOnlyHandler(value, distorted);
       }
 
       return distorted;
@@ -2604,47 +2670,36 @@ var LWC = (function (exports) {
       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.
@@ -3098,8 +3153,10 @@ var LWC = (function (exports) {
         }
 
         return renderer[rendererMethod](elm);
-      }
+      },
 
+      configurable: true,
+      enumerable: true
     };
   }
 
@@ -3119,8 +3176,11 @@ var LWC = (function (exports) {
         }
 
         return renderer[queryMethod](elm, arg);
-      }
+      },
 
+      configurable: true,
+      enumerable: true,
+      writable: true
     };
   }
 
@@ -4278,7 +4338,7 @@ var LWC = (function (exports) {
       if (!isUndefined$1(ctorShadowSupportMode)) {
         assert.invariant(ctorShadowSupportMode === "any"
         /* Any */
-        || ctorShadowSupportMode === "default"
+        || ctorShadowSupportMode === "reset"
         /* Default */
         , `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
       }
@@ -4440,7 +4500,7 @@ var LWC = (function (exports) {
     renderMode: 1
     /* Shadow */
     ,
-    shadowSupportMode: "default"
+    shadowSupportMode: "reset"
     /* Default */
     ,
     wire: EmptyObject,
@@ -4589,6 +4649,17 @@ var LWC = (function (exports) {
     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
@@ -4760,6 +4831,179 @@ var LWC = (function (exports) {
     }
   }
 
+  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
@@ -4843,38 +5087,6 @@ var LWC = (function (exports) {
    * 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;
@@ -4893,7 +5105,26 @@ var LWC = (function (exports) {
     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 => {
@@ -4911,7 +5142,26 @@ var LWC = (function (exports) {
     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,
@@ -4951,6 +5201,38 @@ var LWC = (function (exports) {
     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 = {
@@ -5042,6 +5324,44 @@ var LWC = (function (exports) {
         // 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);
     }
   };
 
@@ -5250,7 +5570,7 @@ var LWC = (function (exports) {
       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);
@@ -5354,7 +5674,7 @@ var LWC = (function (exports) {
 
 
   function d(value) {
-    return value == null ? '' : value;
+    return value == null ? '' : String(value);
   } // [b]ind function
 
 
@@ -5516,6 +5836,26 @@ var LWC = (function (exports) {
 
     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
 
 
@@ -5523,24 +5863,22 @@ var LWC = (function (exports) {
     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.
@@ -5554,12 +5892,12 @@ var LWC = (function (exports) {
   }
 
   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) {
@@ -5627,6 +5965,7 @@ var LWC = (function (exports) {
 
   function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
     const content = [];
+    let root;
 
     for (let i = 0; i < stylesheets.length; i++) {
       let stylesheet = stylesheets[i];
@@ -5639,23 +5978,46 @@ var LWC = (function (exports) {
           // 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));
       }
     }
 
@@ -5679,14 +6041,12 @@ var LWC = (function (exports) {
   // 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;
       }
@@ -5697,6 +6057,20 @@ var LWC = (function (exports) {
     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,
@@ -5712,7 +6086,10 @@ var LWC = (function (exports) {
       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);
@@ -6337,6 +6714,12 @@ var LWC = (function (exports) {
     , vm);
   }
 
+  function hydrateRootElement(elm) {
+    const vm = getAssociatedVM(elm);
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+  }
+
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
@@ -6344,6 +6727,10 @@ var LWC = (function (exports) {
 
   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.
 
@@ -6577,6 +6964,22 @@ var LWC = (function (exports) {
     }
   }
 
+  function hydrate(vm) {
+    if (isTrue(vm.isDirty)) {
+      // manually diffing/patching here.
+      // This routine is:
+      // patchShadowRoot(vm, children);
+      //  -> addVnodes.
+      const children = renderComponent(vm);
+      vm.children = children;
+      const vmChildren = vm.renderMode === 0
+      /* Light */
+      ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+      hydrateChildrenHook(vmChildren, children, vm);
+      runRenderedCallback(vm);
+    }
+  }
+
   function patchShadowRoot(vm, newCh) {
     const {
       children: oldCh
@@ -7403,28 +7806,12 @@ var LWC = (function (exports) {
 
   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) 2018, salesforce.com, inc.
@@ -7568,8 +7955,19 @@ var LWC = (function (exports) {
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
+  let isHydrating = false;
+
+  function setIsHydrating(v) {
+    isHydrating = v;
+  }
+
   const renderer = {
     ssr: false,
+
+    isHydrating() {
+      return isHydrating;
+    },
+
     isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
 
@@ -7598,6 +7996,10 @@ var LWC = (function (exports) {
     },
 
     attachShadow(element, options) {
+      if (isHydrating) {
+        return element.shadowRoot;
+      }
+
       return element.attachShadow(options);
     },
 
@@ -7735,61 +8137,6 @@ var LWC = (function (exports) {
     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 "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
-    }
-
-    return Ctor.CustomElementConstructor;
-  }
-
-  function buildCustomElementConstructor(Ctor) {
-    const def = getComponentInternalDef(Ctor);
-    return class extends def.bridge {
-      constructor() {
-        super();
-        createVM(this, def, {
-          mode: 'open',
-          owner: null,
-          tagName: this.tagName,
-          renderer
-        });
-      }
-
-      connectedCallback() {
-        connectRootElement(this);
-      }
-
-      disconnectedCallback() {
-        disconnectRootElement(this);
-      }
-
-    };
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -7799,7 +8146,6 @@ var LWC = (function (exports) {
   // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line lwc-internal/no-global-node
 
-
   const _Node$1 = Node;
   const ConnectingSlot = new WeakMap();
   const DisconnectingSlot = new WeakMap();
@@ -7910,6 +8256,118 @@ var LWC = (function (exports) {
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+
+  function hydrateComponent(element, Ctor, props = {}) {
+    if (!isFunction$1(Ctor)) {
+      throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
+    }
+
+    if (!isObject(props) || isNull(props)) {
+      throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
+    }
+
+    const 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,
+        tagName: element.tagName.toLowerCase()
+      });
+
+      for (const [key, value] of Object.entries(props)) {
+        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);
+      const newElem = createElement(element.tagName, {
+        is: Ctor,
+        mode: 'open'
+      });
+
+      for (const [key, value] of Object.entries(props)) {
+        newElem[key] = value;
+      }
+
+      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 "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
+    }
+
+    return Ctor.CustomElementConstructor;
+  }
+
+  function buildCustomElementConstructor(Ctor) {
+    const def = getComponentInternalDef(Ctor);
+    return class extends def.bridge {
+      constructor() {
+        super();
+        createVM(this, def, {
+          mode: 'open',
+          owner: null,
+          tagName: this.tagName,
+          renderer
+        });
+      }
+
+      connectedCallback() {
+        connectRootElement(this);
+      }
+
+      disconnectedCallback() {
+        disconnectRootElement(this);
+      }
+
+    };
+  }
+  /*
+   * 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.
@@ -8009,7 +8467,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.5.5-canary1 */
+  /* version: 2.5.9 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8019,6 +8477,7 @@ var LWC = (function (exports) {
   exports.createElement = createElement;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
+  exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
   exports.isNodeFromTemplate = isNodeFromTemplate;
   exports.readonly = readonly;
@@ -8030,7 +8489,6 @@ var LWC = (function (exports) {
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;
   exports.setHooks = setHooks;
-  exports.setHooksForTest = setHooksForTest;
   exports.swapComponent = swapComponent;
   exports.swapStyle = swapStyle;
   exports.swapTemplate = swapTemplate;
@@ -8042,4 +8500,4 @@ var LWC = (function (exports) {
 
   return exports;
 
-}({}));
+})({});