lwc 2.7.2 → 2.7.3

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

@@ -301,7 +301,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.7.2 */
+  /** version: 2.7.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -471,7 +471,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.7.2 */
+  /** version: 2.7.3 */
 
   /* proxy-compat-disable */
 
@@ -957,62 +957,205 @@
    */
 
 
-  function handleEvent(event, vnode) {
-    const {
-      type
-    } = event;
-    const {
-      data: {
-        on
-      }
-    } = vnode;
-    const handler = on && on[type]; // call event handler if exists
+  function isUndef(s) {
+    return s === undefined;
+  }
+
+  function sameVnode(vnode1, vnode2) {
+    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
+  }
+
+  function isVNode(vnode) {
+    return vnode != null;
+  }
+
+  function createKeyToOldIdx(children, beginIdx, endIdx) {
+    const map = {};
+    let j, key, ch; // TODO [#1637]: simplify this by assuming that all vnodes has keys
+
+    for (j = beginIdx; j <= endIdx; ++j) {
+      ch = children[j];
 
-    if (handler) {
-      handler.call(undefined, event);
+      if (isVNode(ch)) {
+        key = ch.key;
+
+        if (key !== undefined) {
+          map[key] = j;
+        }
+      }
     }
+
+    return map;
   }
 
-  function createListener() {
-    return function handler(event) {
-      handleEvent(event, handler.vnode);
-    };
+  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      const ch = vnodes[startIdx];
+
+      if (isVNode(ch)) {
+        ch.hook.create(ch);
+        ch.hook.insert(ch, parentElm, before);
+      }
+    }
   }
 
-  function updateAllEventListeners(oldVnode, vnode) {
-    if (isUndefined$1(oldVnode.listener)) {
-      createAllEventListeners(vnode);
-    } else {
-      vnode.listener = oldVnode.listener;
-      vnode.listener.vnode = vnode;
+  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
+    for (; startIdx <= endIdx; ++startIdx) {
+      const ch = vnodes[startIdx]; // text nodes do not have logic associated to them
+
+      if (isVNode(ch)) {
+        ch.hook.remove(ch, parentElm);
+      }
     }
   }
 
-  function createAllEventListeners(vnode) {
-    const {
-      elm,
-      data: {
-        on
+  function updateDynamicChildren(parentElm, oldCh, newCh) {
+    let oldStartIdx = 0;
+    let newStartIdx = 0;
+    let oldEndIdx = oldCh.length - 1;
+    let oldStartVnode = oldCh[0];
+    let oldEndVnode = oldCh[oldEndIdx];
+    const newChEnd = newCh.length - 1;
+    let newEndIdx = newChEnd;
+    let newStartVnode = newCh[0];
+    let newEndVnode = newCh[newEndIdx];
+    let oldKeyToIdx;
+    let idxInOld;
+    let elmToMove;
+    let before;
+
+    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
+      if (!isVNode(oldStartVnode)) {
+        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
+      } else if (!isVNode(oldEndVnode)) {
+        oldEndVnode = oldCh[--oldEndIdx];
+      } else if (!isVNode(newStartVnode)) {
+        newStartVnode = newCh[++newStartIdx];
+      } else if (!isVNode(newEndVnode)) {
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldStartVnode, newStartVnode)) {
+        patchVnode(oldStartVnode, newStartVnode);
+        oldStartVnode = oldCh[++oldStartIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else if (sameVnode(oldEndVnode, newEndVnode)) {
+        patchVnode(oldEndVnode, newEndVnode);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldStartVnode, newEndVnode)) {
+        // Vnode moved right
+        patchVnode(oldStartVnode, newEndVnode);
+        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
+        oldStartVnode = oldCh[++oldStartIdx];
+        newEndVnode = newCh[--newEndIdx];
+      } else if (sameVnode(oldEndVnode, newStartVnode)) {
+        // Vnode moved left
+        patchVnode(oldEndVnode, newStartVnode);
+        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
+        oldEndVnode = oldCh[--oldEndIdx];
+        newStartVnode = newCh[++newStartIdx];
+      } else {
+        if (oldKeyToIdx === undefined) {
+          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
+        }
+
+        idxInOld = oldKeyToIdx[newStartVnode.key];
+
+        if (isUndef(idxInOld)) {
+          // New element
+          newStartVnode.hook.create(newStartVnode);
+          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+          newStartVnode = newCh[++newStartIdx];
+        } else {
+          elmToMove = oldCh[idxInOld];
+
+          if (isVNode(elmToMove)) {
+            if (elmToMove.sel !== newStartVnode.sel) {
+              // New element
+              newStartVnode.hook.create(newStartVnode);
+              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
+            } else {
+              patchVnode(elmToMove, newStartVnode);
+              oldCh[idxInOld] = undefined;
+              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
+            }
+          }
+
+          newStartVnode = newCh[++newStartIdx];
+        }
       }
-    } = vnode;
+    }
 
-    if (isUndefined$1(on)) {
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
+        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
+        let i = newEndIdx;
+        let n;
+
+        do {
+          n = newCh[++i];
+        } while (!isVNode(n) && i < newChEnd);
+
+        before = isVNode(n) ? n.elm : null;
+        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+      } else {
+        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+      }
+    }
+  }
+
+  function updateStaticChildren(parentElm, oldCh, newCh) {
+    const oldChLength = oldCh.length;
+    const newChLength = newCh.length;
+
+    if (oldChLength === 0) {
+      // the old list is empty, we can directly insert anything new
+      addVnodes(parentElm, null, newCh, 0, newChLength);
       return;
     }
 
-    const listener = vnode.listener = createListener();
-    listener.vnode = vnode;
-    let name;
+    if (newChLength === 0) {
+      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
+      // this is the case in which the dynamic children of an if-directive should be removed
+      removeVnodes(parentElm, oldCh, 0, oldChLength);
+      return;
+    } // if the old list is not empty, the new list MUST have the same
+    // amount of nodes, that's why we call this static children
+
+
+    let referenceElm = null;
+
+    for (let i = newChLength - 1; i >= 0; i -= 1) {
+      const vnode = newCh[i];
+      const oldVNode = oldCh[i];
+
+      if (vnode !== oldVNode) {
+        if (isVNode(oldVNode)) {
+          if (isVNode(vnode)) {
+            // both vnodes must be equivalent, and se just need to patch them
+            patchVnode(oldVNode, vnode);
+            referenceElm = vnode.elm;
+          } else {
+            // removing the old vnode since the new one is null
+            oldVNode.hook.remove(oldVNode, parentElm);
+          }
+        } else if (isVNode(vnode)) {
+          // this condition is unnecessary
+          vnode.hook.create(vnode); // insert the new node one since the old one is null
 
-    for (name in on) {
-      addEventListener$1(elm, name, listener);
+          vnode.hook.insert(vnode, parentElm, referenceElm);
+          referenceElm = vnode.elm;
+        }
+      }
     }
   }
 
-  var modEvents = {
-    update: updateAllEventListeners,
-    create: createAllEventListeners
-  };
+  function patchVnode(oldVnode, vnode) {
+    if (oldVnode !== vnode) {
+      vnode.elm = oldVnode.elm;
+      vnode.hook.update(oldVnode, vnode);
+    }
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1020,6 +1163,7 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+
   const defaultDefHTMLPropertyNames = ['accessKey', 'dir', 'draggable', 'hidden', 'id', 'lang', 'spellcheck', 'tabIndex', 'title'];
 
   function offsetPropertyErrorMessage(name) {
@@ -1137,70 +1281,12 @@
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
+  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
+  // to inject at runtime.
 
 
-  const xlinkNS = 'http://www.w3.org/1999/xlink';
-  const xmlNS = 'http://www.w3.org/XML/1998/namespace';
-  const ColonCharCode = 58;
-
-  function updateAttrs(oldVnode, vnode) {
-    const {
-      data: {
-        attrs
-      }
-    } = vnode;
-
-    if (isUndefined$1(attrs)) {
-      return;
-    }
-
-    let {
-      data: {
-        attrs: oldAttrs
-      }
-    } = oldVnode;
-
-    if (oldAttrs === attrs) {
-      return;
-    }
-
-    const elm = vnode.elm;
-    let key;
-    oldAttrs = isUndefined$1(oldAttrs) ? EmptyObject : oldAttrs; // update modified attributes, add new attributes
-    // this routine is only useful for data-* attributes in all kind of elements
-    // and aria-* in standard elements (custom elements will use props for these)
-
-    for (key in attrs) {
-      const cur = attrs[key];
-      const old = oldAttrs[key];
-
-      if (old !== cur) {
-        unlockAttribute(elm, key);
-
-        if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
-          // Assume xml namespace
-          setAttribute$1(elm, key, cur, xmlNS);
-        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
-          // Assume xlink namespace
-          setAttribute$1(elm, key, cur, xlinkNS);
-        } else if (isNull(cur) || isUndefined$1(cur)) {
-          removeAttribute$1(elm, key);
-        } else {
-          setAttribute$1(elm, key, cur);
-        }
-
-        lockAttribute();
-      }
-    }
-  }
-
-  const emptyVNode$3 = {
-    data: {}
-  };
-  var modAttrs = {
-    create: vnode => updateAttrs(emptyVNode$3, vnode),
-    update: updateAttrs
-  };
+  const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
+  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -1208,723 +1294,469 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-  function isLiveBindingProp(sel, key) {
-    // For properties with live bindings, we read values from the DOM element
-    // instead of relying on internally tracked values.
-    return sel === 'input' && (key === 'value' || key === 'checked');
-  }
-
-  function update(oldVnode, vnode) {
-    const props = vnode.data.props;
-
-    if (isUndefined$1(props)) {
-      return;
-    }
+  /**
+   * This is a descriptor map that contains
+   * all standard properties that a Custom Element can support (including AOM properties), which
+   * determines what kind of capabilities the Base HTML Element and
+   * Base Lightning Element should support.
+   */
 
-    const oldProps = oldVnode.data.props;
+  const HTMLElementOriginalDescriptors = create(null);
+  forEach.call(keys(AriaPropNameToAttrNameMap), propName => {
+    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
+    // in IE11, some properties are on Element.prototype instead of HTMLElement, just to be sure.
+    const descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
 
-    if (oldProps === props) {
-      return;
+    if (!isUndefined$1(descriptor)) {
+      HTMLElementOriginalDescriptors[propName] = descriptor;
     }
+  });
+  forEach.call(defaultDefHTMLPropertyNames, propName => {
+    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
+    // in IE11, id property is on Element.prototype instead of HTMLElement, and we suspect that more will fall into
+    // this category, so, better to be sure.
+    const descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
 
-    const isFirstPatch = isUndefined$1(oldProps);
-    const {
-      elm,
-      sel
-    } = vnode;
+    if (!isUndefined$1(descriptor)) {
+      HTMLElementOriginalDescriptors[propName] = descriptor;
+    }
+  });
+  /**
+   * Copyright (C) 2017 salesforce.com, inc.
+   */
 
-    for (const key in props) {
-      const cur = props[key]; // if it is the first time this element is patched, or the current value is different to the previous value...
+  const {
+    isArray
+  } = Array;
+  const {
+    prototype: ObjectDotPrototype,
+    getPrototypeOf,
+    create: ObjectCreate,
+    defineProperty: ObjectDefineProperty,
+    isExtensible,
+    getOwnPropertyDescriptor,
+    getOwnPropertyNames,
+    getOwnPropertySymbols,
+    preventExtensions,
+    hasOwnProperty
+  } = Object;
+  const {
+    push: ArrayPush,
+    concat: ArrayConcat
+  } = Array.prototype;
 
-      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty$1(elm, key) : oldProps[key])) {
-        setProperty$1(elm, key, cur);
-      }
-    }
+  function isUndefined(obj) {
+    return obj === undefined;
   }
 
-  const emptyVNode$2 = {
-    data: {}
-  };
-  var modProps = {
-    create: vnode => update(emptyVNode$2, vnode),
-    update
-  };
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
+  function isFunction(obj) {
+    return typeof obj === 'function';
+  }
 
-  const classNameToClassMap = create(null);
+  const proxyToValueMap = new WeakMap();
 
-  function getMapFromClassName(className) {
-    // Intentionally using == to match undefined and null values from computed style attribute
-    if (className == null) {
-      return EmptyObject;
-    } // computed class names must be string
+  function registerProxy(proxy, value) {
+    proxyToValueMap.set(proxy, value);
+  }
 
+  const unwrap$1 = replicaOrAny => proxyToValueMap.get(replicaOrAny) || replicaOrAny;
 
-    className = isString(className) ? className : className + '';
-    let map = classNameToClassMap[className];
+  class BaseProxyHandler {
+    constructor(membrane, value) {
+      this.originalTarget = value;
+      this.membrane = membrane;
+    } // Shared utility methods
 
-    if (map) {
-      return map;
-    }
 
-    map = create(null);
-    let start = 0;
-    let o;
-    const len = className.length;
+    wrapDescriptor(descriptor) {
+      if (hasOwnProperty.call(descriptor, 'value')) {
+        descriptor.value = this.wrapValue(descriptor.value);
+      } else {
+        const {
+          set: originalSet,
+          get: originalGet
+        } = descriptor;
 
-    for (o = 0; o < len; o++) {
-      if (StringCharCodeAt.call(className, o) === SPACE_CHAR) {
-        if (o > start) {
-          map[StringSlice.call(className, start, o)] = true;
+        if (!isUndefined(originalGet)) {
+          descriptor.get = this.wrapGetter(originalGet);
         }
 
-        start = o + 1;
+        if (!isUndefined(originalSet)) {
+          descriptor.set = this.wrapSetter(originalSet);
+        }
       }
-    }
 
-    if (o > start) {
-      map[StringSlice.call(className, start, o)] = true;
+      return descriptor;
     }
 
-    classNameToClassMap[className] = map;
+    copyDescriptorIntoShadowTarget(shadowTarget, key) {
+      const {
+        originalTarget
+      } = this; // Note: a property might get defined multiple times in the shadowTarget
+      //       but it will always be compatible with the previous descriptor
+      //       to preserve the object invariants, which makes these lines safe.
 
-    return map;
-  }
+      const originalDescriptor = getOwnPropertyDescriptor(originalTarget, key); // TODO: it should be impossible for the originalDescriptor to ever be undefined, this `if` can be removed
 
-  function updateClassAttribute(oldVnode, vnode) {
-    const {
-      elm,
-      data: {
-        className: newClass
-      }
-    } = vnode;
-    const {
-      data: {
-        className: oldClass
-      }
-    } = oldVnode;
+      /* istanbul ignore else */
 
-    if (oldClass === newClass) {
-      return;
+      if (!isUndefined(originalDescriptor)) {
+        const wrappedDesc = this.wrapDescriptor(originalDescriptor);
+        ObjectDefineProperty(shadowTarget, key, wrappedDesc);
+      }
     }
 
-    const classList = getClassList$1(elm);
-    const newClassMap = getMapFromClassName(newClass);
-    const oldClassMap = getMapFromClassName(oldClass);
-    let name;
+    lockShadowTarget(shadowTarget) {
+      const {
+        originalTarget
+      } = this;
+      const targetKeys = ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));
+      targetKeys.forEach(key => {
+        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
+      });
+      const {
+        membrane: {
+          tagPropertyKey
+        }
+      } = this;
 
-    for (name in oldClassMap) {
-      // remove only if it is not in the new class collection and it is not set from within the instance
-      if (isUndefined$1(newClassMap[name])) {
-        classList.remove(name);
+      if (!isUndefined(tagPropertyKey) && !hasOwnProperty.call(shadowTarget, tagPropertyKey)) {
+        ObjectDefineProperty(shadowTarget, tagPropertyKey, ObjectCreate(null));
       }
-    }
 
-    for (name in newClassMap) {
-      if (isUndefined$1(oldClassMap[name])) {
-        classList.add(name);
-      }
-    }
-  }
+      preventExtensions(shadowTarget);
+    } // Shared Traps
+    // TODO: apply() is never called
 
-  const emptyVNode$1 = {
-    data: {}
-  };
-  var modComputedClassName = {
-    create: vnode => updateClassAttribute(emptyVNode$1, vnode),
-    update: updateClassAttribute
-  };
-  /*
-   * 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
-   */
+    /* istanbul ignore next */
 
-  function updateStyleAttribute(oldVnode, vnode) {
-    const {
-      elm,
-      data: {
-        style: newStyle
-      }
-    } = vnode;
 
-    if (oldVnode.data.style === newStyle) {
-      return;
-    }
+    apply(shadowTarget, thisArg, argArray) {
+      /* No op */
+    } // TODO: construct() is never called
 
-    if (!isString(newStyle) || newStyle === '') {
-      removeAttribute$1(elm, 'style');
-    } else {
-      setAttribute$1(elm, 'style', newStyle);
-    }
-  }
+    /* istanbul ignore next */
 
-  const emptyVNode = {
-    data: {}
-  };
-  var modComputedStyle = {
-    create: vnode => updateStyleAttribute(emptyVNode, vnode),
-    update: updateStyleAttribute
-  };
-  /*
-   * 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
-   */
-  // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
-  // different classnames properties individually instead of via a string.
 
-  function createClassAttribute(vnode) {
-    const {
-      elm,
-      data: {
-        classMap
-      }
-    } = vnode;
+    construct(shadowTarget, argArray, newTarget) {
+      /* No op */
+    }
 
-    if (isUndefined$1(classMap)) {
-      return;
+    get(shadowTarget, key) {
+      const {
+        originalTarget,
+        membrane: {
+          valueObserved
+        }
+      } = this;
+      const value = originalTarget[key];
+      valueObserved(originalTarget, key);
+      return this.wrapValue(value);
     }
 
-    const classList = getClassList$1(elm);
+    has(shadowTarget, key) {
+      const {
+        originalTarget,
+        membrane: {
+          tagPropertyKey,
+          valueObserved
+        }
+      } = this;
+      valueObserved(originalTarget, key); // since key is never going to be undefined, and tagPropertyKey might be undefined
+      // we can simply compare them as the second part of the condition.
 
-    for (const name in classMap) {
-      classList.add(name);
+      return key in originalTarget || key === tagPropertyKey;
     }
-  }
 
-  var modStaticClassName = {
-    create: createClassAttribute
-  };
-  /*
-   * 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
-   */
-  // The compiler takes care of transforming the inline style into an object. It's faster to set the
-  // different style properties individually instead of via a string.
+    ownKeys(shadowTarget) {
+      const {
+        originalTarget,
+        membrane: {
+          tagPropertyKey
+        }
+      } = this; // if the membrane tag key exists and it is not in the original target, we add it to the keys.
 
-  function createStyleAttribute(vnode) {
-    const {
-      elm,
-      data: {
-        styleDecls
+      const keys = isUndefined(tagPropertyKey) || hasOwnProperty.call(originalTarget, tagPropertyKey) ? [] : [tagPropertyKey]; // small perf optimization using push instead of concat to avoid creating an extra array
+
+      ArrayPush.apply(keys, getOwnPropertyNames(originalTarget));
+      ArrayPush.apply(keys, getOwnPropertySymbols(originalTarget));
+      return keys;
+    }
+
+    isExtensible(shadowTarget) {
+      const {
+        originalTarget
+      } = this; // optimization to avoid attempting to lock down the shadowTarget multiple times
+
+      if (!isExtensible(shadowTarget)) {
+        return false; // was already locked down
       }
-    } = vnode;
 
-    if (isUndefined$1(styleDecls)) {
-      return;
+      if (!isExtensible(originalTarget)) {
+        this.lockShadowTarget(shadowTarget);
+        return false;
+      }
+
+      return true;
     }
 
-    for (let i = 0; i < styleDecls.length; i++) {
-      const [prop, value, important] = styleDecls[i];
-      setCSSStyleProperty$1(elm, prop, value, important);
+    getPrototypeOf(shadowTarget) {
+      const {
+        originalTarget
+      } = this;
+      return getPrototypeOf(originalTarget);
     }
-  }
 
-  var modStaticStyle = {
-    create: createStyleAttribute
-  };
-  /*
-   * 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
-   */
+    getOwnPropertyDescriptor(shadowTarget, key) {
+      const {
+        originalTarget,
+        membrane: {
+          valueObserved,
+          tagPropertyKey
+        }
+      } = this; // keys looked up via getOwnPropertyDescriptor need to be reactive
 
-  function isUndef(s) {
-    return s === undefined;
-  }
+      valueObserved(originalTarget, key);
+      let desc = getOwnPropertyDescriptor(originalTarget, key);
 
-  function sameVnode(vnode1, vnode2) {
-    return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
-  }
+      if (isUndefined(desc)) {
+        if (key !== tagPropertyKey) {
+          return undefined;
+        } // if the key is the membrane tag key, and is not in the original target,
+        // we produce a synthetic descriptor and install it on the shadow target
 
-  function isVNode(vnode) {
-    return vnode != null;
-  }
 
-  function createKeyToOldIdx(children, beginIdx, endIdx) {
-    const map = {};
-    let j, key, ch; // TODO [#1637]: simplify this by assuming that all vnodes has keys
+        desc = {
+          value: undefined,
+          writable: false,
+          configurable: false,
+          enumerable: false
+        };
+        ObjectDefineProperty(shadowTarget, tagPropertyKey, desc);
+        return desc;
+      }
 
-    for (j = beginIdx; j <= endIdx; ++j) {
-      ch = children[j];
+      if (desc.configurable === false) {
+        // updating the descriptor to non-configurable on the shadow
+        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
+      } // Note: by accessing the descriptor, the key is marked as observed
+      // but access to the value, setter or getter (if available) cannot observe
+      // mutations, just like regular methods, in which case we just do nothing.
 
-      if (isVNode(ch)) {
-        key = ch.key;
 
-        if (key !== undefined) {
-          map[key] = j;
-        }
-      }
+      return this.wrapDescriptor(desc);
     }
 
-    return map;
   }
 
-  function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx];
+  const getterMap$1 = new WeakMap();
+  const setterMap$1 = new WeakMap();
+  const reverseGetterMap = new WeakMap();
+  const reverseSetterMap = new WeakMap();
 
-      if (isVNode(ch)) {
-        ch.hook.create(ch);
-        ch.hook.insert(ch, parentElm, before);
-      }
+  class ReactiveProxyHandler extends BaseProxyHandler {
+    wrapValue(value) {
+      return this.membrane.getProxy(value);
     }
-  }
 
-  function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
-    for (; startIdx <= endIdx; ++startIdx) {
-      const ch = vnodes[startIdx]; // text nodes do not have logic associated to them
+    wrapGetter(originalGet) {
+      const wrappedGetter = getterMap$1.get(originalGet);
 
-      if (isVNode(ch)) {
-        ch.hook.remove(ch, parentElm);
+      if (!isUndefined(wrappedGetter)) {
+        return wrappedGetter;
       }
-    }
-  }
-
-  function updateDynamicChildren(parentElm, oldCh, newCh) {
-    let oldStartIdx = 0;
-    let newStartIdx = 0;
-    let oldEndIdx = oldCh.length - 1;
-    let oldStartVnode = oldCh[0];
-    let oldEndVnode = oldCh[oldEndIdx];
-    const newChEnd = newCh.length - 1;
-    let newEndIdx = newChEnd;
-    let newStartVnode = newCh[0];
-    let newEndVnode = newCh[newEndIdx];
-    let oldKeyToIdx;
-    let idxInOld;
-    let elmToMove;
-    let before;
 
-    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
-      if (!isVNode(oldStartVnode)) {
-        oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
-      } else if (!isVNode(oldEndVnode)) {
-        oldEndVnode = oldCh[--oldEndIdx];
-      } else if (!isVNode(newStartVnode)) {
-        newStartVnode = newCh[++newStartIdx];
-      } else if (!isVNode(newEndVnode)) {
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newStartVnode)) {
-        patchVnode(oldStartVnode, newStartVnode);
-        oldStartVnode = oldCh[++oldStartIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else if (sameVnode(oldEndVnode, newEndVnode)) {
-        patchVnode(oldEndVnode, newEndVnode);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldStartVnode, newEndVnode)) {
-        // Vnode moved right
-        patchVnode(oldStartVnode, newEndVnode);
-        newEndVnode.hook.move(oldStartVnode, parentElm, nextSibling$1(oldEndVnode.elm));
-        oldStartVnode = oldCh[++oldStartIdx];
-        newEndVnode = newCh[--newEndIdx];
-      } else if (sameVnode(oldEndVnode, newStartVnode)) {
-        // Vnode moved left
-        patchVnode(oldEndVnode, newStartVnode);
-        newStartVnode.hook.move(oldEndVnode, parentElm, oldStartVnode.elm);
-        oldEndVnode = oldCh[--oldEndIdx];
-        newStartVnode = newCh[++newStartIdx];
-      } else {
-        if (oldKeyToIdx === undefined) {
-          oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
-        }
+      const handler = this;
 
-        idxInOld = oldKeyToIdx[newStartVnode.key];
+      const get = function () {
+        // invoking the original getter with the original target
+        return handler.wrapValue(originalGet.call(unwrap$1(this)));
+      };
 
-        if (isUndef(idxInOld)) {
-          // New element
-          newStartVnode.hook.create(newStartVnode);
-          newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-          newStartVnode = newCh[++newStartIdx];
-        } else {
-          elmToMove = oldCh[idxInOld];
+      getterMap$1.set(originalGet, get);
+      reverseGetterMap.set(get, originalGet);
+      return get;
+    }
 
-          if (isVNode(elmToMove)) {
-            if (elmToMove.sel !== newStartVnode.sel) {
-              // New element
-              newStartVnode.hook.create(newStartVnode);
-              newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
-            } else {
-              patchVnode(elmToMove, newStartVnode);
-              oldCh[idxInOld] = undefined;
-              newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
-            }
-          }
+    wrapSetter(originalSet) {
+      const wrappedSetter = setterMap$1.get(originalSet);
 
-          newStartVnode = newCh[++newStartIdx];
-        }
+      if (!isUndefined(wrappedSetter)) {
+        return wrappedSetter;
       }
-    }
 
-    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
-      if (oldStartIdx > oldEndIdx) {
-        // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
-        // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
-        let i = newEndIdx;
-        let n;
+      const set = function (v) {
+        // invoking the original setter with the original target
+        originalSet.call(unwrap$1(this), unwrap$1(v));
+      };
 
-        do {
-          n = newCh[++i];
-        } while (!isVNode(n) && i < newChEnd);
+      setterMap$1.set(originalSet, set);
+      reverseSetterMap.set(set, originalSet);
+      return set;
+    }
 
-        before = isVNode(n) ? n.elm : null;
-        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
+    unwrapDescriptor(descriptor) {
+      if (hasOwnProperty.call(descriptor, 'value')) {
+        // dealing with a data descriptor
+        descriptor.value = unwrap$1(descriptor.value);
       } else {
-        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+        const {
+          set,
+          get
+        } = descriptor;
+
+        if (!isUndefined(get)) {
+          descriptor.get = this.unwrapGetter(get);
+        }
+
+        if (!isUndefined(set)) {
+          descriptor.set = this.unwrapSetter(set);
+        }
       }
+
+      return descriptor;
     }
-  }
 
-  function updateStaticChildren(parentElm, oldCh, newCh) {
-    const oldChLength = oldCh.length;
-    const newChLength = newCh.length;
-
-    if (oldChLength === 0) {
-      // the old list is empty, we can directly insert anything new
-      addVnodes(parentElm, null, newCh, 0, newChLength);
-      return;
-    }
+    unwrapGetter(redGet) {
+      const reverseGetter = reverseGetterMap.get(redGet);
 
-    if (newChLength === 0) {
-      // the old list is nonempty and the new list is empty so we can directly remove all old nodes
-      // this is the case in which the dynamic children of an if-directive should be removed
-      removeVnodes(parentElm, oldCh, 0, oldChLength);
-      return;
-    } // if the old list is not empty, the new list MUST have the same
-    // amount of nodes, that's why we call this static children
+      if (!isUndefined(reverseGetter)) {
+        return reverseGetter;
+      }
 
+      const handler = this;
 
-    let referenceElm = null;
+      const get = function () {
+        // invoking the red getter with the proxy of this
+        return unwrap$1(redGet.call(handler.wrapValue(this)));
+      };
 
-    for (let i = newChLength - 1; i >= 0; i -= 1) {
-      const vnode = newCh[i];
-      const oldVNode = oldCh[i];
+      getterMap$1.set(get, redGet);
+      reverseGetterMap.set(redGet, get);
+      return get;
+    }
 
-      if (vnode !== oldVNode) {
-        if (isVNode(oldVNode)) {
-          if (isVNode(vnode)) {
-            // both vnodes must be equivalent, and se just need to patch them
-            patchVnode(oldVNode, vnode);
-            referenceElm = vnode.elm;
-          } else {
-            // removing the old vnode since the new one is null
-            oldVNode.hook.remove(oldVNode, parentElm);
-          }
-        } else if (isVNode(vnode)) {
-          // this condition is unnecessary
-          vnode.hook.create(vnode); // insert the new node one since the old one is null
+    unwrapSetter(redSet) {
+      const reverseSetter = reverseSetterMap.get(redSet);
 
-          vnode.hook.insert(vnode, parentElm, referenceElm);
-          referenceElm = vnode.elm;
-        }
+      if (!isUndefined(reverseSetter)) {
+        return reverseSetter;
       }
-    }
-  }
 
-  function patchVnode(oldVnode, vnode) {
-    if (oldVnode !== vnode) {
-      vnode.elm = oldVnode.elm;
-      vnode.hook.update(oldVnode, vnode);
-    }
-  }
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-  // This is a temporary workaround to get the @lwc/engine-server to evaluate in node without having
-  // to inject at runtime.
+      const handler = this;
 
+      const set = function (v) {
+        // invoking the red setter with the proxy of this
+        redSet.call(handler.wrapValue(this), handler.wrapValue(v));
+      };
 
-  const HTMLElementConstructor$1 = typeof HTMLElement !== 'undefined' ? HTMLElement : function () {};
-  const HTMLElementPrototype = HTMLElementConstructor$1.prototype;
-  /*
-   * 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
-   */
+      setterMap$1.set(set, redSet);
+      reverseSetterMap.set(redSet, set);
+      return set;
+    }
 
-  /**
-   * This is a descriptor map that contains
-   * all standard properties that a Custom Element can support (including AOM properties), which
-   * determines what kind of capabilities the Base HTML Element and
-   * Base Lightning Element should support.
-   */
+    set(shadowTarget, key, value) {
+      const {
+        originalTarget,
+        membrane: {
+          valueMutated
+        }
+      } = this;
+      const oldValue = originalTarget[key];
 
-  const HTMLElementOriginalDescriptors = create(null);
-  forEach.call(keys(AriaPropNameToAttrNameMap), propName => {
-    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
-    // in IE11, some properties are on Element.prototype instead of HTMLElement, just to be sure.
-    const descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
+      if (oldValue !== value) {
+        originalTarget[key] = value;
+        valueMutated(originalTarget, key);
+      } else if (key === 'length' && isArray(originalTarget)) {
+        // fix for issue #236: push will add the new index, and by the time length
+        // is updated, the internal length is already equal to the new length value
+        // therefore, the oldValue is equal to the value. This is the forking logic
+        // to support this use case.
+        valueMutated(originalTarget, key);
+      }
 
-    if (!isUndefined$1(descriptor)) {
-      HTMLElementOriginalDescriptors[propName] = descriptor;
+      return true;
     }
-  });
-  forEach.call(defaultDefHTMLPropertyNames, propName => {
-    // Note: intentionally using our in-house getPropertyDescriptor instead of getOwnPropertyDescriptor here because
-    // in IE11, id property is on Element.prototype instead of HTMLElement, and we suspect that more will fall into
-    // this category, so, better to be sure.
-    const descriptor = getPropertyDescriptor(HTMLElementPrototype, propName);
 
-    if (!isUndefined$1(descriptor)) {
-      HTMLElementOriginalDescriptors[propName] = descriptor;
+    deleteProperty(shadowTarget, key) {
+      const {
+        originalTarget,
+        membrane: {
+          valueMutated
+        }
+      } = this;
+      delete originalTarget[key];
+      valueMutated(originalTarget, key);
+      return true;
     }
-  });
-  /**
-   * Copyright (C) 2017 salesforce.com, inc.
-   */
-
-  const {
-    isArray
-  } = Array;
-  const {
-    prototype: ObjectDotPrototype,
-    getPrototypeOf,
-    create: ObjectCreate,
-    defineProperty: ObjectDefineProperty,
-    isExtensible,
-    getOwnPropertyDescriptor,
-    getOwnPropertyNames,
-    getOwnPropertySymbols,
-    preventExtensions,
-    hasOwnProperty
-  } = Object;
-  const {
-    push: ArrayPush,
-    concat: ArrayConcat
-  } = Array.prototype;
-
-  function isUndefined(obj) {
-    return obj === undefined;
-  }
-
-  function isFunction(obj) {
-    return typeof obj === 'function';
-  }
-
-  const proxyToValueMap = new WeakMap();
-
-  function registerProxy(proxy, value) {
-    proxyToValueMap.set(proxy, value);
-  }
-
-  const unwrap$1 = replicaOrAny => proxyToValueMap.get(replicaOrAny) || replicaOrAny;
-
-  class BaseProxyHandler {
-    constructor(membrane, value) {
-      this.originalTarget = value;
-      this.membrane = membrane;
-    } // Shared utility methods
 
+    setPrototypeOf(shadowTarget, prototype) {
+    }
 
-    wrapDescriptor(descriptor) {
-      if (hasOwnProperty.call(descriptor, 'value')) {
-        descriptor.value = this.wrapValue(descriptor.value);
-      } else {
+    preventExtensions(shadowTarget) {
+      if (isExtensible(shadowTarget)) {
         const {
-          set: originalSet,
-          get: originalGet
-        } = descriptor;
+          originalTarget
+        } = this;
+        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
 
-        if (!isUndefined(originalGet)) {
-          descriptor.get = this.wrapGetter(originalGet);
-        }
+        /* istanbul ignore if */
 
-        if (!isUndefined(originalSet)) {
-          descriptor.set = this.wrapSetter(originalSet);
+        if (isExtensible(originalTarget)) {
+          return false;
         }
-      }
-
-      return descriptor;
-    }
-
-    copyDescriptorIntoShadowTarget(shadowTarget, key) {
-      const {
-        originalTarget
-      } = this; // Note: a property might get defined multiple times in the shadowTarget
-      //       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); // 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);
-        ObjectDefineProperty(shadowTarget, key, wrappedDesc);
+        this.lockShadowTarget(shadowTarget);
       }
+
+      return true;
     }
 
-    lockShadowTarget(shadowTarget) {
-      const {
-        originalTarget
-      } = this;
-      const targetKeys = ArrayConcat.call(getOwnPropertyNames(originalTarget), getOwnPropertySymbols(originalTarget));
-      targetKeys.forEach(key => {
-        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
-      });
+    defineProperty(shadowTarget, key, descriptor) {
       const {
+        originalTarget,
         membrane: {
+          valueMutated,
           tagPropertyKey
         }
       } = this;
 
-      if (!isUndefined(tagPropertyKey) && !hasOwnProperty.call(shadowTarget, tagPropertyKey)) {
-        ObjectDefineProperty(shadowTarget, tagPropertyKey, ObjectCreate(null));
+      if (key === tagPropertyKey && !hasOwnProperty.call(originalTarget, key)) {
+        // To avoid leaking the membrane tag property into the original target, we must
+        // be sure that the original target doesn't have yet.
+        // NOTE: we do not return false here because Object.freeze and equivalent operations
+        // will attempt to set the descriptor to the same value, and expect no to throw. This
+        // is an small compromise for the sake of not having to diff the descriptors.
+        return true;
       }
 
-      preventExtensions(shadowTarget);
-    } // Shared Traps
-    // TODO: apply() is never called
-
-    /* istanbul ignore next */
-
+      ObjectDefineProperty(originalTarget, key, this.unwrapDescriptor(descriptor)); // intentionally testing if false since it could be undefined as well
 
-    apply(shadowTarget, thisArg, argArray) {
-      /* No op */
-    } // TODO: construct() is never called
-
-    /* istanbul ignore next */
-
-
-    construct(shadowTarget, argArray, newTarget) {
-      /* No op */
-    }
-
-    get(shadowTarget, key) {
-      const {
-        originalTarget,
-        membrane: {
-          valueObserved
-        }
-      } = this;
-      const value = originalTarget[key];
-      valueObserved(originalTarget, key);
-      return this.wrapValue(value);
-    }
-
-    has(shadowTarget, key) {
-      const {
-        originalTarget,
-        membrane: {
-          tagPropertyKey,
-          valueObserved
-        }
-      } = this;
-      valueObserved(originalTarget, key); // since key is never going to be undefined, and tagPropertyKey might be undefined
-      // we can simply compare them as the second part of the condition.
-
-      return key in originalTarget || key === tagPropertyKey;
-    }
-
-    ownKeys(shadowTarget) {
-      const {
-        originalTarget,
-        membrane: {
-          tagPropertyKey
-        }
-      } = this; // if the membrane tag key exists and it is not in the original target, we add it to the keys.
-
-      const keys = isUndefined(tagPropertyKey) || hasOwnProperty.call(originalTarget, tagPropertyKey) ? [] : [tagPropertyKey]; // small perf optimization using push instead of concat to avoid creating an extra array
-
-      ArrayPush.apply(keys, getOwnPropertyNames(originalTarget));
-      ArrayPush.apply(keys, getOwnPropertySymbols(originalTarget));
-      return keys;
-    }
-
-    isExtensible(shadowTarget) {
-      const {
-        originalTarget
-      } = this; // optimization to avoid attempting to lock down the shadowTarget multiple times
-
-      if (!isExtensible(shadowTarget)) {
-        return false; // was already locked down
-      }
-
-      if (!isExtensible(originalTarget)) {
-        this.lockShadowTarget(shadowTarget);
-        return false;
+      if (descriptor.configurable === false) {
+        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
       }
 
+      valueMutated(originalTarget, key);
       return true;
     }
 
-    getPrototypeOf(shadowTarget) {
-      const {
-        originalTarget
-      } = this;
-      return getPrototypeOf(originalTarget);
-    }
-
-    getOwnPropertyDescriptor(shadowTarget, key) {
-      const {
-        originalTarget,
-        membrane: {
-          valueObserved,
-          tagPropertyKey
-        }
-      } = this; // keys looked up via getOwnPropertyDescriptor need to be reactive
-
-      valueObserved(originalTarget, key);
-      let desc = getOwnPropertyDescriptor(originalTarget, key);
-
-      if (isUndefined(desc)) {
-        if (key !== tagPropertyKey) {
-          return undefined;
-        } // if the key is the membrane tag key, and is not in the original target,
-        // we produce a synthetic descriptor and install it on the shadow target
-
-
-        desc = {
-          value: undefined,
-          writable: false,
-          configurable: false,
-          enumerable: false
-        };
-        ObjectDefineProperty(shadowTarget, tagPropertyKey, desc);
-        return desc;
-      }
-
-      if (desc.configurable === false) {
-        // updating the descriptor to non-configurable on the shadow
-        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
-      } // Note: by accessing the descriptor, the key is marked as observed
-      // but access to the value, setter or getter (if available) cannot observe
-      // mutations, just like regular methods, in which case we just do nothing.
-
-
-      return this.wrapDescriptor(desc);
-    }
-
   }
 
-  const getterMap$1 = new WeakMap();
-  const setterMap$1 = new WeakMap();
-  const reverseGetterMap = new WeakMap();
-  const reverseSetterMap = new WeakMap();
+  const getterMap = new WeakMap();
+  const setterMap = new WeakMap();
 
-  class ReactiveProxyHandler extends BaseProxyHandler {
+  class ReadOnlyHandler extends BaseProxyHandler {
     wrapValue(value) {
-      return this.membrane.getProxy(value);
+      return this.membrane.getReadOnlyProxy(value);
     }
 
     wrapGetter(originalGet) {
-      const wrappedGetter = getterMap$1.get(originalGet);
+      const wrappedGetter = getterMap.get(originalGet);
 
       if (!isUndefined(wrappedGetter)) {
         return wrappedGetter;
@@ -1937,275 +1769,79 @@
         return handler.wrapValue(originalGet.call(unwrap$1(this)));
       };
 
-      getterMap$1.set(originalGet, get);
-      reverseGetterMap.set(get, originalGet);
+      getterMap.set(originalGet, get);
       return get;
     }
 
     wrapSetter(originalSet) {
-      const wrappedSetter = setterMap$1.get(originalSet);
+      const wrappedSetter = setterMap.get(originalSet);
 
       if (!isUndefined(wrappedSetter)) {
         return wrappedSetter;
       }
 
       const set = function (v) {
-        // invoking the original setter with the original target
-        originalSet.call(unwrap$1(this), unwrap$1(v));
       };
 
-      setterMap$1.set(originalSet, set);
-      reverseSetterMap.set(set, originalSet);
+      setterMap.set(originalSet, set);
       return set;
     }
 
-    unwrapDescriptor(descriptor) {
-      if (hasOwnProperty.call(descriptor, 'value')) {
-        // dealing with a data descriptor
-        descriptor.value = unwrap$1(descriptor.value);
-      } else {
-        const {
-          set,
-          get
-        } = descriptor;
-
-        if (!isUndefined(get)) {
-          descriptor.get = this.unwrapGetter(get);
-        }
+    set(shadowTarget, key, value) {
+      /* istanbul ignore next */
 
-        if (!isUndefined(set)) {
-          descriptor.set = this.unwrapSetter(set);
-        }
-      }
 
-      return descriptor;
+      return false;
     }
 
-    unwrapGetter(redGet) {
-      const reverseGetter = reverseGetterMap.get(redGet);
-
-      if (!isUndefined(reverseGetter)) {
-        return reverseGetter;
-      }
+    deleteProperty(shadowTarget, key) {
+      /* istanbul ignore next */
 
-      const handler = this;
 
-      const get = function () {
-        // invoking the red getter with the proxy of this
-        return unwrap$1(redGet.call(handler.wrapValue(this)));
-      };
+      return false;
+    }
 
-      getterMap$1.set(get, redGet);
-      reverseGetterMap.set(redGet, get);
-      return get;
+    setPrototypeOf(shadowTarget, prototype) {
     }
 
-    unwrapSetter(redSet) {
-      const reverseSetter = reverseSetterMap.get(redSet);
+    preventExtensions(shadowTarget) {
+      /* istanbul ignore next */
 
-      if (!isUndefined(reverseSetter)) {
-        return reverseSetter;
-      }
 
-      const handler = this;
+      return false;
+    }
 
-      const set = function (v) {
-        // invoking the red setter with the proxy of this
-        redSet.call(handler.wrapValue(this), handler.wrapValue(v));
-      };
+    defineProperty(shadowTarget, key, descriptor) {
+      /* istanbul ignore next */
 
-      setterMap$1.set(set, redSet);
-      reverseSetterMap.set(redSet, set);
-      return set;
+
+      return false;
     }
 
-    set(shadowTarget, key, value) {
-      const {
-        originalTarget,
-        membrane: {
-          valueMutated
-        }
-      } = this;
-      const oldValue = originalTarget[key];
+  }
 
-      if (oldValue !== value) {
-        originalTarget[key] = value;
-        valueMutated(originalTarget, key);
-      } else if (key === 'length' && isArray(originalTarget)) {
-        // fix for issue #236: push will add the new index, and by the time length
-        // is updated, the internal length is already equal to the new length value
-        // therefore, the oldValue is equal to the value. This is the forking logic
-        // to support this use case.
-        valueMutated(originalTarget, key);
-      }
+  function defaultValueIsObservable(value) {
+    // intentionally checking for null
+    if (value === null) {
+      return false;
+    } // treat all non-object types, including undefined, as non-observable values
 
-      return true;
-    }
 
-    deleteProperty(shadowTarget, key) {
-      const {
-        originalTarget,
-        membrane: {
-          valueMutated
-        }
-      } = this;
-      delete originalTarget[key];
-      valueMutated(originalTarget, key);
-      return true;
+    if (typeof value !== 'object') {
+      return false;
     }
 
-    setPrototypeOf(shadowTarget, prototype) {
+    if (isArray(value)) {
+      return true;
     }
 
-    preventExtensions(shadowTarget) {
-      if (isExtensible(shadowTarget)) {
-        const {
-          originalTarget
-        } = this;
-        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
+    const proto = getPrototypeOf(value);
+    return proto === ObjectDotPrototype || proto === null || getPrototypeOf(proto) === null;
+  }
 
-        /* istanbul ignore if */
-
-        if (isExtensible(originalTarget)) {
-          return false;
-        }
-
-        this.lockShadowTarget(shadowTarget);
-      }
-
-      return true;
-    }
-
-    defineProperty(shadowTarget, key, descriptor) {
-      const {
-        originalTarget,
-        membrane: {
-          valueMutated,
-          tagPropertyKey
-        }
-      } = this;
-
-      if (key === tagPropertyKey && !hasOwnProperty.call(originalTarget, key)) {
-        // To avoid leaking the membrane tag property into the original target, we must
-        // be sure that the original target doesn't have yet.
-        // NOTE: we do not return false here because Object.freeze and equivalent operations
-        // will attempt to set the descriptor to the same value, and expect no to throw. This
-        // is an small compromise for the sake of not having to diff the descriptors.
-        return true;
-      }
-
-      ObjectDefineProperty(originalTarget, key, this.unwrapDescriptor(descriptor)); // intentionally testing if false since it could be undefined as well
-
-      if (descriptor.configurable === false) {
-        this.copyDescriptorIntoShadowTarget(shadowTarget, key);
-      }
-
-      valueMutated(originalTarget, key);
-      return true;
-    }
-
-  }
-
-  const getterMap = new WeakMap();
-  const setterMap = new WeakMap();
-
-  class ReadOnlyHandler extends BaseProxyHandler {
-    wrapValue(value) {
-      return this.membrane.getReadOnlyProxy(value);
-    }
-
-    wrapGetter(originalGet) {
-      const wrappedGetter = getterMap.get(originalGet);
-
-      if (!isUndefined(wrappedGetter)) {
-        return wrappedGetter;
-      }
-
-      const handler = this;
-
-      const get = function () {
-        // invoking the original getter with the original target
-        return handler.wrapValue(originalGet.call(unwrap$1(this)));
-      };
-
-      getterMap.set(originalGet, get);
-      return get;
-    }
-
-    wrapSetter(originalSet) {
-      const wrappedSetter = setterMap.get(originalSet);
-
-      if (!isUndefined(wrappedSetter)) {
-        return wrappedSetter;
-      }
-
-      const set = function (v) {
-      };
-
-      setterMap.set(originalSet, set);
-      return set;
-    }
-
-    set(shadowTarget, key, value) {
-      /* istanbul ignore next */
-
-
-      return false;
-    }
-
-    deleteProperty(shadowTarget, key) {
-      /* istanbul ignore next */
-
-
-      return false;
-    }
-
-    setPrototypeOf(shadowTarget, prototype) {
-    }
-
-    preventExtensions(shadowTarget) {
-      /* istanbul ignore next */
-
-
-      return false;
-    }
-
-    defineProperty(shadowTarget, key, descriptor) {
-      /* istanbul ignore next */
-
-
-      return false;
-    }
-
-  }
-
-  function defaultValueIsObservable(value) {
-    // intentionally checking for null
-    if (value === null) {
-      return false;
-    } // treat all non-object types, including undefined, as non-observable values
-
-
-    if (typeof value !== 'object') {
-      return false;
-    }
-
-    if (isArray(value)) {
-      return true;
-    }
-
-    const proto = getPrototypeOf(value);
-    return proto === ObjectDotPrototype || proto === null || getPrototypeOf(proto) === null;
-  }
-
-  const defaultValueObserved = (obj, key) => {
-    /* do nothing */
-  };
+  const defaultValueObserved = (obj, key) => {
+    /* do nothing */
+  };
 
   const defaultValueMutated = (obj, key) => {
     /* do nothing */
@@ -3281,67 +2917,400 @@
     }; // Specify attributes for which we want to reflect changes back to their corresponding
     // properties via attributeChangedCallback.
 
-    defineProperty(HTMLBridgeElement, 'observedAttributes', {
-      get() {
-        return [...superObservedAttributes, ...keys(attributeToPropMap)];
-      }
+    defineProperty(HTMLBridgeElement, 'observedAttributes', {
+      get() {
+        return [...superObservedAttributes, ...keys(attributeToPropMap)];
+      }
+
+    });
+    defineProperties(HTMLBridgeElement.prototype, descriptors);
+    return HTMLBridgeElement;
+  }
+
+  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
+  freeze(BaseBridgeElement);
+  seal(BaseBridgeElement.prototype);
+  /*
+   * Copyright (c) 2020, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+  function resolveCircularModuleDependency(fn) {
+    const module = fn();
+    return (module === null || module === void 0 ? void 0 : module.__esModule) ? module.default : module;
+  }
+
+  function isCircularModuleDependency(obj) {
+    return isFunction$1(obj) && hasOwnProperty$1.call(obj, '__circular__');
+  }
+
+  function setActiveVM(vm) {
+    {
+      // this method should never leak to prod
+      throw new ReferenceError();
+    }
+  }
+
+  function swapTemplate(oldTpl, newTpl) {
+
+    if (!runtimeFlags.ENABLE_HMR) {
+      throw new Error('HMR is not enabled');
+    }
+
+    return false;
+  }
+
+  function swapComponent(oldComponent, newComponent) {
+
+    if (!runtimeFlags.ENABLE_HMR) {
+      throw new Error('HMR is not enabled');
+    }
+
+    return false;
+  }
+
+  function swapStyle(oldStyle, newStyle) {
+
+    if (!runtimeFlags.ENABLE_HMR) {
+      throw new Error('HMR is not enabled');
+    }
+
+    return false;
+  }
+  /*
+   * 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 CtorToDefMap = new WeakMap();
+
+  function getCtorProto(Ctor) {
+    let proto = getPrototypeOf$1(Ctor);
+
+    if (isNull(proto)) {
+      throw new ReferenceError(`Invalid prototype chain for ${Ctor.name}, you must extend LightningElement.`);
+    } // covering the cases where the ref is circular in AMD
+
+
+    if (isCircularModuleDependency(proto)) {
+      const p = resolveCircularModuleDependency(proto);
+      // of our Base class without having to leak it to user-land. If the circular function returns
+      // itself, that's the signal that we have hit the end of the proto chain, which must always
+      // be base.
+
+
+      proto = p === proto ? LightningElement : p;
+    }
+
+    return proto;
+  }
+
+  function createComponentDef(Ctor) {
+    const {
+      shadowSupportMode: ctorShadowSupportMode,
+      renderMode: ctorRenderMode
+    } = Ctor;
+
+    const decoratorsMeta = getDecoratorsMeta(Ctor);
+    const {
+      apiFields,
+      apiFieldsConfig,
+      apiMethods,
+      wiredFields,
+      wiredMethods,
+      observedFields
+    } = decoratorsMeta;
+    const proto = Ctor.prototype;
+    let {
+      connectedCallback,
+      disconnectedCallback,
+      renderedCallback,
+      errorCallback,
+      render
+    } = proto;
+    const superProto = getCtorProto(Ctor);
+    const superDef = superProto !== LightningElement ? getComponentInternalDef(superProto) : lightingElementDef;
+    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods));
+    const props = assign(create(null), superDef.props, apiFields);
+    const propsConfig = assign(create(null), superDef.propsConfig, apiFieldsConfig);
+    const methods = assign(create(null), superDef.methods, apiMethods);
+    const wire = assign(create(null), superDef.wire, wiredFields, wiredMethods);
+    connectedCallback = connectedCallback || superDef.connectedCallback;
+    disconnectedCallback = disconnectedCallback || superDef.disconnectedCallback;
+    renderedCallback = renderedCallback || superDef.renderedCallback;
+    errorCallback = errorCallback || superDef.errorCallback;
+    render = render || superDef.render;
+    let shadowSupportMode = superDef.shadowSupportMode;
+
+    if (!isUndefined$1(ctorShadowSupportMode)) {
+      shadowSupportMode = ctorShadowSupportMode;
+    }
+
+    let renderMode = superDef.renderMode;
+
+    if (!isUndefined$1(ctorRenderMode)) {
+      renderMode = ctorRenderMode === 'light' ? 0
+      /* Light */
+      : 1
+      /* Shadow */
+      ;
+    }
+
+    const template = getComponentRegisteredTemplate(Ctor) || superDef.template;
+    const name = Ctor.name || superDef.name; // installing observed fields into the prototype.
+
+    defineProperties(proto, observedFields);
+    const def = {
+      ctor: Ctor,
+      name,
+      wire,
+      props,
+      propsConfig,
+      methods,
+      bridge,
+      template,
+      renderMode,
+      shadowSupportMode,
+      connectedCallback,
+      disconnectedCallback,
+      renderedCallback,
+      errorCallback,
+      render
+    };
+
+    return def;
+  }
+  /**
+   * EXPERIMENTAL: This function allows for the identification of LWC constructors. This API is
+   * subject to change or being removed.
+   */
+
+
+  function isComponentConstructor(ctor) {
+    if (!isFunction$1(ctor)) {
+      return false;
+    } // Fast path: LightningElement is part of the prototype chain of the constructor.
+
+
+    if (ctor.prototype instanceof LightningElement) {
+      return true;
+    } // Slow path: LightningElement is not part of the prototype chain of the constructor, we need
+    // climb up the constructor prototype chain to check in case there are circular dependencies
+    // to resolve.
+
+
+    let current = ctor;
+
+    do {
+      if (isCircularModuleDependency(current)) {
+        const circularResolved = resolveCircularModuleDependency(current); // If the circular function returns itself, that's the signal that we have hit the end
+        // of the proto chain, which must always be a valid base constructor.
+
+        if (circularResolved === current) {
+          return true;
+        }
+
+        current = circularResolved;
+      }
+
+      if (current === LightningElement) {
+        return true;
+      }
+    } while (!isNull(current) && (current = getPrototypeOf$1(current))); // Finally return false if the LightningElement is not part of the prototype chain.
+
+
+    return false;
+  }
+
+  function getComponentInternalDef(Ctor) {
+
+    let def = CtorToDefMap.get(Ctor);
+
+    if (isUndefined$1(def)) {
+      if (isCircularModuleDependency(Ctor)) {
+        const resolvedCtor = resolveCircularModuleDependency(Ctor);
+        def = getComponentInternalDef(resolvedCtor); // Cache the unresolved component ctor too. The next time if the same unresolved ctor is used,
+        // look up the definition in cache instead of re-resolving and recreating the def.
+
+        CtorToDefMap.set(Ctor, def);
+        return def;
+      }
+
+      if (!isComponentConstructor(Ctor)) {
+        throw new TypeError(`${Ctor} is not a valid component, or does not extends LightningElement from "lwc". You probably forgot to add the extend clause on the class declaration.`);
+      }
+
+      def = createComponentDef(Ctor);
+      CtorToDefMap.set(Ctor, def);
+    }
+
+    return def;
+  }
+
+  const lightingElementDef = {
+    ctor: LightningElement,
+    name: LightningElement.name,
+    props: lightningBasedDescriptors,
+    propsConfig: EmptyObject,
+    methods: EmptyObject,
+    renderMode: 1
+    /* Shadow */
+    ,
+    shadowSupportMode: "reset"
+    /* Default */
+    ,
+    wire: EmptyObject,
+    bridge: BaseBridgeElement,
+    template: defaultEmptyTemplate,
+    render: LightningElement.prototype.render
+  };
+  /**
+   * EXPERIMENTAL: This function allows for the collection of internal component metadata. This API is
+   * subject to change or being removed.
+   */
+
+  function getComponentDef(Ctor) {
+    const def = getComponentInternalDef(Ctor); // From the internal def object, we need to extract the info that is useful
+    // for some external services, e.g.: Locker Service, usually, all they care
+    // is about the shape of the constructor, the internals of it are not relevant
+    // because they don't have a way to mess with that.
+
+    const {
+      ctor,
+      name,
+      props,
+      propsConfig,
+      methods
+    } = def;
+    const publicProps = {};
+
+    for (const key in props) {
+      // avoid leaking the reference to the public props descriptors
+      publicProps[key] = {
+        config: propsConfig[key] || 0,
+        type: "any"
+        /* any */
+        ,
+        attr: htmlPropertyToAttribute(key)
+      };
+    }
+
+    const publicMethods = {};
+
+    for (const key in methods) {
+      // avoid leaking the reference to the public method descriptors
+      publicMethods[key] = methods[key].value;
+    }
+
+    return {
+      ctor,
+      name,
+      props: publicProps,
+      methods: publicMethods
+    };
+  }
+  /*
+   * 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 xlinkNS = 'http://www.w3.org/1999/xlink';
+  const xmlNS = 'http://www.w3.org/XML/1998/namespace';
+  const ColonCharCode = 58;
+
+  function patchAttributes(oldVnode, vnode) {
+    const {
+      attrs
+    } = vnode.data;
+
+    if (isUndefined$1(attrs)) {
+      return;
+    }
+
+    const oldAttrs = isNull(oldVnode) ? EmptyObject : oldVnode.data.attrs;
+
+    if (oldAttrs === attrs) {
+      return;
+    }
+
+    const {
+      elm
+    } = vnode;
+
+    for (const key in attrs) {
+      const cur = attrs[key];
+      const old = oldAttrs[key];
+
+      if (old !== cur) {
+        unlockAttribute(elm, key);
+
+        if (StringCharCodeAt.call(key, 3) === ColonCharCode) {
+          // Assume xml namespace
+          setAttribute$1(elm, key, cur, xmlNS);
+        } else if (StringCharCodeAt.call(key, 5) === ColonCharCode) {
+          // Assume xlink namespace
+          setAttribute$1(elm, key, cur, xlinkNS);
+        } else if (isNull(cur) || isUndefined$1(cur)) {
+          removeAttribute$1(elm, key);
+        } else {
+          setAttribute$1(elm, key, cur);
+        }
 
-    });
-    defineProperties(HTMLBridgeElement.prototype, descriptors);
-    return HTMLBridgeElement;
+        lockAttribute();
+      }
+    }
   }
-
-  const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor$1, getOwnPropertyNames$1(HTMLElementOriginalDescriptors), []);
-  freeze(BaseBridgeElement);
-  seal(BaseBridgeElement.prototype);
   /*
-   * Copyright (c) 2020, salesforce.com, inc.
+   * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
    * SPDX-License-Identifier: MIT
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
-  function resolveCircularModuleDependency(fn) {
-    const module = fn();
-    return (module === null || module === void 0 ? void 0 : module.__esModule) ? module.default : module;
-  }
-
-  function isCircularModuleDependency(obj) {
-    return isFunction$1(obj) && hasOwnProperty$1.call(obj, '__circular__');
-  }
 
-  function setActiveVM(vm) {
-    {
-      // this method should never leak to prod
-      throw new ReferenceError();
-    }
+  function isLiveBindingProp(sel, key) {
+    // For properties with live bindings, we read values from the DOM element
+    // instead of relying on internally tracked values.
+    return sel === 'input' && (key === 'value' || key === 'checked');
   }
 
-  function swapTemplate(oldTpl, newTpl) {
+  function patchProps(oldVnode, vnode) {
+    const {
+      props
+    } = vnode.data;
 
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
+    if (isUndefined$1(props)) {
+      return;
     }
 
-    return false;
-  }
-
-  function swapComponent(oldComponent, newComponent) {
+    const oldProps = isNull(oldVnode) ? EmptyObject : oldVnode.data.props;
 
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
+    if (oldProps === props) {
+      return;
     }
 
-    return false;
-  }
+    const isFirstPatch = isNull(oldVnode);
+    const {
+      elm,
+      sel
+    } = vnode;
 
-  function swapStyle(oldStyle, newStyle) {
+    for (const key in props) {
+      const cur = props[key]; // Set the property if it's the first time is is patched or if the previous property is
+      // different than the one previously set.
 
-    if (!runtimeFlags.ENABLE_HMR) {
-      throw new Error('HMR is not enabled');
+      if (isFirstPatch || cur !== (isLiveBindingProp(sel, key) ? getProperty$1(elm, key) : oldProps[key])) {
+        setProperty$1(elm, key, cur);
+      }
     }
-
-    return false;
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3351,232 +3320,183 @@
    */
 
 
-  const CtorToDefMap = new WeakMap();
+  const classNameToClassMap = create(null);
 
-  function getCtorProto(Ctor) {
-    let proto = getPrototypeOf$1(Ctor);
+  function getMapFromClassName(className) {
+    // Intentionally using == to match undefined and null values from computed style attribute
+    if (className == null) {
+      return EmptyObject;
+    } // computed class names must be string
 
-    if (isNull(proto)) {
-      throw new ReferenceError(`Invalid prototype chain for ${Ctor.name}, you must extend LightningElement.`);
-    } // covering the cases where the ref is circular in AMD
 
+    className = isString(className) ? className : className + '';
+    let map = classNameToClassMap[className];
 
-    if (isCircularModuleDependency(proto)) {
-      const p = resolveCircularModuleDependency(proto);
-      // of our Base class without having to leak it to user-land. If the circular function returns
-      // itself, that's the signal that we have hit the end of the proto chain, which must always
-      // be base.
+    if (map) {
+      return map;
+    }
 
+    map = create(null);
+    let start = 0;
+    let o;
+    const len = className.length;
 
-      proto = p === proto ? LightningElement : p;
+    for (o = 0; o < len; o++) {
+      if (StringCharCodeAt.call(className, o) === SPACE_CHAR) {
+        if (o > start) {
+          map[StringSlice.call(className, start, o)] = true;
+        }
+
+        start = o + 1;
+      }
     }
 
-    return proto;
-  }
+    if (o > start) {
+      map[StringSlice.call(className, start, o)] = true;
+    }
 
-  function createComponentDef(Ctor) {
-    const {
-      shadowSupportMode: ctorShadowSupportMode,
-      renderMode: ctorRenderMode
-    } = Ctor;
+    classNameToClassMap[className] = map;
 
-    const decoratorsMeta = getDecoratorsMeta(Ctor);
+    return map;
+  }
+
+  function patchClassAttribute(oldVnode, vnode) {
     const {
-      apiFields,
-      apiFieldsConfig,
-      apiMethods,
-      wiredFields,
-      wiredMethods,
-      observedFields
-    } = decoratorsMeta;
-    const proto = Ctor.prototype;
-    let {
-      connectedCallback,
-      disconnectedCallback,
-      renderedCallback,
-      errorCallback,
-      render
-    } = proto;
-    const superProto = getCtorProto(Ctor);
-    const superDef = superProto !== LightningElement ? getComponentInternalDef(superProto) : lightingElementDef;
-    const bridge = HTMLBridgeElementFactory(superDef.bridge, keys(apiFields), keys(apiMethods));
-    const props = assign(create(null), superDef.props, apiFields);
-    const propsConfig = assign(create(null), superDef.propsConfig, apiFieldsConfig);
-    const methods = assign(create(null), superDef.methods, apiMethods);
-    const wire = assign(create(null), superDef.wire, wiredFields, wiredMethods);
-    connectedCallback = connectedCallback || superDef.connectedCallback;
-    disconnectedCallback = disconnectedCallback || superDef.disconnectedCallback;
-    renderedCallback = renderedCallback || superDef.renderedCallback;
-    errorCallback = errorCallback || superDef.errorCallback;
-    render = render || superDef.render;
-    let shadowSupportMode = superDef.shadowSupportMode;
+      elm,
+      data: {
+        className: newClass
+      }
+    } = vnode;
+    const oldClass = isNull(oldVnode) ? undefined : oldVnode.data.className;
 
-    if (!isUndefined$1(ctorShadowSupportMode)) {
-      shadowSupportMode = ctorShadowSupportMode;
+    if (oldClass === newClass) {
+      return;
     }
 
-    let renderMode = superDef.renderMode;
+    const classList = getClassList$1(elm);
+    const newClassMap = getMapFromClassName(newClass);
+    const oldClassMap = getMapFromClassName(oldClass);
+    let name;
 
-    if (!isUndefined$1(ctorRenderMode)) {
-      renderMode = ctorRenderMode === 'light' ? 0
-      /* Light */
-      : 1
-      /* Shadow */
-      ;
+    for (name in oldClassMap) {
+      // remove only if it is not in the new class collection and it is not set from within the instance
+      if (isUndefined$1(newClassMap[name])) {
+        classList.remove(name);
+      }
     }
 
-    const template = getComponentRegisteredTemplate(Ctor) || superDef.template;
-    const name = Ctor.name || superDef.name; // installing observed fields into the prototype.
-
-    defineProperties(proto, observedFields);
-    const def = {
-      ctor: Ctor,
-      name,
-      wire,
-      props,
-      propsConfig,
-      methods,
-      bridge,
-      template,
-      renderMode,
-      shadowSupportMode,
-      connectedCallback,
-      disconnectedCallback,
-      renderedCallback,
-      errorCallback,
-      render
-    };
-
-    return def;
+    for (name in newClassMap) {
+      if (isUndefined$1(oldClassMap[name])) {
+        classList.add(name);
+      }
+    }
   }
-  /**
-   * EXPERIMENTAL: This function allows for the identification of LWC constructors. This API is
-   * subject to change or being removed.
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
 
-  function isComponentConstructor(ctor) {
-    if (!isFunction$1(ctor)) {
-      return false;
-    } // Fast path: LightningElement is part of the prototype chain of the constructor.
-
-
-    if (ctor.prototype instanceof LightningElement) {
-      return true;
-    } // Slow path: LightningElement is not part of the prototype chain of the constructor, we need
-    // climb up the constructor prototype chain to check in case there are circular dependencies
-    // to resolve.
-
-
-    let current = ctor;
+  function patchStyleAttribute(oldVnode, vnode) {
+    const {
+      elm,
+      data: {
+        style: newStyle
+      }
+    } = vnode;
+    const oldStyle = isNull(oldVnode) ? undefined : oldVnode.data.style;
 
-    do {
-      if (isCircularModuleDependency(current)) {
-        const circularResolved = resolveCircularModuleDependency(current); // If the circular function returns itself, that's the signal that we have hit the end
-        // of the proto chain, which must always be a valid base constructor.
+    if (oldStyle === newStyle) {
+      return;
+    }
 
-        if (circularResolved === current) {
-          return true;
-        }
+    if (!isString(newStyle) || newStyle === '') {
+      removeAttribute$1(elm, 'style');
+    } else {
+      setAttribute$1(elm, 'style', newStyle);
+    }
+  }
+  /*
+   * 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
+   */
 
-        current = circularResolved;
-      }
 
-      if (current === LightningElement) {
-        return true;
+  function applyEventListeners(vnode) {
+    const {
+      elm,
+      data: {
+        on
       }
-    } while (!isNull(current) && (current = getPrototypeOf$1(current))); // Finally return false if the LightningElement is not part of the prototype chain.
+    } = vnode;
 
+    if (isUndefined$1(on)) {
+      return;
+    }
 
-    return false;
+    for (const name in on) {
+      const handler = on[name];
+      addEventListener$1(elm, name, handler);
+    }
   }
+  /*
+   * 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
+   */
+  // The compiler takes care of transforming the inline classnames into an object. It's faster to set the
+  // different classnames properties individually instead of via a string.
 
-  function getComponentInternalDef(Ctor) {
-
-    let def = CtorToDefMap.get(Ctor);
-
-    if (isUndefined$1(def)) {
-      if (isCircularModuleDependency(Ctor)) {
-        const resolvedCtor = resolveCircularModuleDependency(Ctor);
-        def = getComponentInternalDef(resolvedCtor); // Cache the unresolved component ctor too. The next time if the same unresolved ctor is used,
-        // look up the definition in cache instead of re-resolving and recreating the def.
-
-        CtorToDefMap.set(Ctor, def);
-        return def;
-      }
 
-      if (!isComponentConstructor(Ctor)) {
-        throw new TypeError(`${Ctor} is not a valid component, or does not extends LightningElement from "lwc". You probably forgot to add the extend clause on the class declaration.`);
+  function applyStaticClassAttribute(vnode) {
+    const {
+      elm,
+      data: {
+        classMap
       }
+    } = vnode;
 
-      def = createComponentDef(Ctor);
-      CtorToDefMap.set(Ctor, def);
+    if (isUndefined$1(classMap)) {
+      return;
     }
 
-    return def;
-  }
+    const classList = getClassList$1(elm);
 
-  const lightingElementDef = {
-    ctor: LightningElement,
-    name: LightningElement.name,
-    props: lightningBasedDescriptors,
-    propsConfig: EmptyObject,
-    methods: EmptyObject,
-    renderMode: 1
-    /* Shadow */
-    ,
-    shadowSupportMode: "reset"
-    /* Default */
-    ,
-    wire: EmptyObject,
-    bridge: BaseBridgeElement,
-    template: defaultEmptyTemplate,
-    render: LightningElement.prototype.render
-  };
-  /**
-   * EXPERIMENTAL: This function allows for the collection of internal component metadata. This API is
-   * subject to change or being removed.
+    for (const name in classMap) {
+      classList.add(name);
+    }
+  }
+  /*
+   * 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
    */
+  // The compiler takes care of transforming the inline style into an object. It's faster to set the
+  // different style properties individually instead of via a string.
 
-  function getComponentDef(Ctor) {
-    const def = getComponentInternalDef(Ctor); // From the internal def object, we need to extract the info that is useful
-    // for some external services, e.g.: Locker Service, usually, all they care
-    // is about the shape of the constructor, the internals of it are not relevant
-    // because they don't have a way to mess with that.
 
+  function applyStaticStyleAttribute(vnode) {
     const {
-      ctor,
-      name,
-      props,
-      propsConfig,
-      methods
-    } = def;
-    const publicProps = {};
+      elm,
+      data: {
+        styleDecls
+      }
+    } = vnode;
 
-    for (const key in props) {
-      // avoid leaking the reference to the public props descriptors
-      publicProps[key] = {
-        config: propsConfig[key] || 0,
-        type: "any"
-        /* any */
-        ,
-        attr: htmlPropertyToAttribute(key)
-      };
+    if (isUndefined$1(styleDecls)) {
+      return;
     }
 
-    const publicMethods = {};
-
-    for (const key in methods) {
-      // avoid leaking the reference to the public method descriptors
-      publicMethods[key] = methods[key].value;
+    for (let i = 0; i < styleDecls.length; i++) {
+      const [prop, value, important] = styleDecls[i];
+      setCSSStyleProperty$1(elm, prop, value, important);
     }
-
-    return {
-      ctor,
-      name,
-      props: publicProps,
-      methods: publicMethods
-    };
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3629,28 +3549,24 @@
     remove$1(vnode.elm, parentNode);
   }
 
-  function createElmHook(vnode) {
-    modEvents.create(vnode); // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
+  function patchElementPropsAndAttrs(oldVnode, vnode) {
+    if (isNull(oldVnode)) {
+      applyEventListeners(vnode);
+      applyStaticClassAttribute(vnode);
+      applyStaticStyleAttribute(vnode);
+    } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+    // value is set before type=radio.
 
-    modAttrs.create(vnode);
-    modProps.create(vnode);
-    modStaticClassName.create(vnode);
-    modStaticStyle.create(vnode);
-    modComputedClassName.create(vnode);
-    modComputedStyle.create(vnode);
+
+    patchClassAttribute(oldVnode, vnode);
+    patchStyleAttribute(oldVnode, vnode);
+    patchAttributes(oldVnode, vnode);
+    patchProps(oldVnode, 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);
+    applyEventListeners(vnode);
+    patchProps(null, vnode);
   }
 
   function fallbackElmHook(elm, vnode) {
@@ -3684,26 +3600,11 @@
     }
   }
 
-  function updateElmHook(oldVnode, vnode) {
-    // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-    modAttrs.update(oldVnode, vnode);
-    modProps.update(oldVnode, vnode);
-    modComputedClassName.update(oldVnode, vnode);
-    modComputedStyle.update(oldVnode, vnode);
-  }
-
-  function updateChildrenHook(oldVnode, vnode) {
-    const {
-      elm,
-      children
-    } = vnode;
-
-    if (hasDynamicChildren(children)) {
-      updateDynamicChildren(elm, oldVnode.children, children);
+  function patchChildren(parent, oldCh, newCh) {
+    if (hasDynamicChildren(newCh)) {
+      updateDynamicChildren(parent, oldCh, newCh);
     } else {
-      updateStaticChildren(elm, oldVnode.children, children);
+      updateStaticChildren(parent, oldCh, newCh);
     }
   }
 
@@ -3774,19 +3675,6 @@
     });
   }
 
-  function createCustomElmHook(vnode) {
-    modEvents.create(vnode); // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-
-    modAttrs.create(vnode);
-    modProps.create(vnode);
-    modStaticClassName.create(vnode);
-    modStaticStyle.create(vnode);
-    modComputedClassName.create(vnode);
-    modComputedStyle.create(vnode);
-  }
-
   function createChildrenHook(vnode) {
     const {
       elm,
@@ -3819,16 +3707,6 @@
     }
   }
 
-  function updateCustomElmHook(oldVnode, vnode) {
-    // Attrs need to be applied to element before props
-    // IE11 will wipe out value on radio inputs if value
-    // is set before type=radio.
-    modAttrs.update(oldVnode, vnode);
-    modProps.update(oldVnode, vnode);
-    modComputedClassName.update(oldVnode, vnode);
-    modComputedStyle.update(oldVnode, vnode);
-  }
-
   function removeElmHook(vnode) {
     // this method only needs to search on child vnodes from template
     // to trigger the remove hook just in case some of those children
@@ -3845,6 +3723,66 @@
         ch.hook.remove(ch, elm);
       }
     }
+  }
+
+  function allocateInSlot(vm, children) {
+    const {
+      cmpSlots: oldSlots
+    } = vm;
+    const cmpSlots = vm.cmpSlots = create(null);
+
+    for (let i = 0, len = children.length; i < len; i += 1) {
+      const vnode = children[i];
+
+      if (isNull(vnode)) {
+        continue;
+      }
+
+      const {
+        data
+      } = vnode;
+      const slotName = data.attrs && data.attrs.slot || '';
+      const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
+      // which might have similar keys. Each vnode will always have a key that
+      // starts with a numeric character from compiler. In this case, we add a unique
+      // notation for slotted vnodes keys, e.g.: `@foo:1:1`
+
+      if (!isUndefined$1(vnode.key)) {
+        vnode.key = `@${slotName}:${vnode.key}`;
+      }
+
+      ArrayPush$1.call(vnodes, vnode);
+    }
+
+    if (isFalse(vm.isDirty)) {
+      // We need to determine if the old allocation is really different from the new one
+      // and mark the vm as dirty
+      const oldKeys = keys(oldSlots);
+
+      if (oldKeys.length !== keys(cmpSlots).length) {
+        markComponentAsDirty(vm);
+        return;
+      }
+
+      for (let i = 0, len = oldKeys.length; i < len; i += 1) {
+        const key = oldKeys[i];
+
+        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
+          markComponentAsDirty(vm);
+          return;
+        }
+
+        const oldVNodes = oldSlots[key];
+        const vnodes = cmpSlots[key];
+
+        for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
+          if (oldVNodes[j] !== vnodes[j]) {
+            markComponentAsDirty(vm);
+            return;
+          }
+        }
+      }
+    }
   } // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
 
 
@@ -3967,11 +3905,11 @@
       linkNodeToShadow(elm, owner);
       fallbackElmHook(elm, vnode);
       vnode.elm = elm;
-      createElmHook(vnode);
+      patchElementPropsAndAttrs(null, vnode);
     },
     update: (oldVnode, vnode) => {
-      updateElmHook(oldVnode, vnode);
-      updateChildrenHook(oldVnode, vnode);
+      patchElementPropsAndAttrs(oldVnode, vnode);
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
     },
     insert: (vnode, parentNode, referenceNode) => {
       insertNodeHook(vnode, parentNode, referenceNode);
@@ -4045,10 +3983,10 @@
         throw new TypeError(`Incorrect Component Constructor`);
       }
 
-      createCustomElmHook(vnode);
+      patchElementPropsAndAttrs(null, vnode);
     },
     update: (oldVnode, vnode) => {
-      updateCustomElmHook(oldVnode, vnode);
+      patchElementPropsAndAttrs(oldVnode, vnode);
       const vm = getAssociatedVMIfPresent(vnode.elm);
 
       if (vm) {
@@ -4059,7 +3997,7 @@
       // will happen, but in native, it does allocate the light dom
 
 
-      updateChildrenHook(oldVnode, vnode);
+      patchChildren(vnode.elm, oldVnode.children, vnode.children);
 
       if (vm) {
         // this is important to preserve the top to bottom synchronous rendering phase.
@@ -5450,7 +5388,6 @@
       // patch function mutates vnodes by adding the element reference,
       // however, if patching fails it contains partial changes.
       if (oldCh !== newCh) {
-        const fn = hasDynamicChildren(newCh) ? updateDynamicChildren : updateStaticChildren;
         runWithBoundaryProtection(vm, vm, () => {
           // pre
           logOperationStart(2
@@ -5458,8 +5395,8 @@
           , vm);
         }, () => {
           // job
-          const elementToRenderTo = getRenderRoot(vm);
-          fn(elementToRenderTo, oldCh, newCh);
+          const renderRoot = getRenderRoot(vm);
+          patchChildren(renderRoot, oldCh, newCh);
         }, () => {
           // post
           logOperationEnd(2
@@ -5745,69 +5682,6 @@
 
       currentVm = currentVm.owner;
     }
-  } // slow path routine
-  // NOTE: we should probably more this routine to the synthetic shadow folder
-  // and get the allocation to be cached by in the elm instead of in the VM
-
-
-  function allocateInSlot(vm, children) {
-    const {
-      cmpSlots: oldSlots
-    } = vm;
-    const cmpSlots = vm.cmpSlots = create(null);
-
-    for (let i = 0, len = children.length; i < len; i += 1) {
-      const vnode = children[i];
-
-      if (isNull(vnode)) {
-        continue;
-      }
-
-      const {
-        data
-      } = vnode;
-      const slotName = data.attrs && data.attrs.slot || '';
-      const vnodes = cmpSlots[slotName] = cmpSlots[slotName] || []; // re-keying the vnodes is necessary to avoid conflicts with default content for the slot
-      // which might have similar keys. Each vnode will always have a key that
-      // starts with a numeric character from compiler. In this case, we add a unique
-      // notation for slotted vnodes keys, e.g.: `@foo:1:1`
-
-      if (!isUndefined$1(vnode.key)) {
-        vnode.key = `@${slotName}:${vnode.key}`;
-      }
-
-      ArrayPush$1.call(vnodes, vnode);
-    }
-
-    if (isFalse(vm.isDirty)) {
-      // We need to determine if the old allocation is really different from the new one
-      // and mark the vm as dirty
-      const oldKeys = keys(oldSlots);
-
-      if (oldKeys.length !== keys(cmpSlots).length) {
-        markComponentAsDirty(vm);
-        return;
-      }
-
-      for (let i = 0, len = oldKeys.length; i < len; i += 1) {
-        const key = oldKeys[i];
-
-        if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
-          markComponentAsDirty(vm);
-          return;
-        }
-
-        const oldVNodes = oldSlots[key];
-        const vnodes = cmpSlots[key];
-
-        for (let j = 0, a = cmpSlots[key].length; j < a; j += 1) {
-          if (oldVNodes[j] !== vnodes[j]) {
-            markComponentAsDirty(vm);
-            return;
-          }
-        }
-      }
-    }
   }
 
   function runWithBoundaryProtection(vm, owner, pre, job, post) {
@@ -6230,7 +6104,7 @@
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.7.2 */
+  /* version: 2.7.3 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6898,7 +6772,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.7.2 */
+  /* version: 2.7.3 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;