lwc 2.28.1 → 2.30.0

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

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.28.1";
+const LWC_VERSION = "2.30.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.28.1 */
+/** version: 2.30.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -383,7 +383,7 @@ for (let i = 0, len = ElementPrototypeAriaPropertyNames.length; i < len; i += 1)
         patch$1(propName);
     }
 }
-/** version: 2.28.1 */
+/** version: 2.30.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -463,7 +463,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.28.1 */
+/** version: 2.30.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -471,16 +471,14 @@ function setFeatureFlagForTest(name, value) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// Only used in LWC's Karma tests
 // @ts-ignore
-
 if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
-
     if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
-
     window.dispatchEvent(new CustomEvent('has-dummy-flag', {
       detail: {
         package: '@lwc/engine-dom',
@@ -498,16 +496,14 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// Only used in LWC's Karma tests
 // @ts-ignore
-
 if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
   window.addEventListener('test-dummy-flag', () => {
     let hasFlag = false;
-
     if (lwcRuntimeFlags.DUMMY_TEST_FLAG) {
       hasFlag = true;
     }
-
     window.dispatchEvent(new CustomEvent('has-dummy-flag', {
       detail: {
         package: '@lwc/engine-core',
@@ -1733,7 +1729,7 @@ function getGlobal() {
     // Gracefully degrade if not able to locate the global object
     return {};
 }
-function init() {
+function init$1() {
     /* istanbul ignore if */
     if (process.env.NODE_ENV === 'production') {
         // this method should never leak to prod
@@ -1751,7 +1747,7 @@ function init() {
 
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
-    init();
+    init$1();
 }
 function defaultValueIsObservable(value) {
     // intentionally checking for null
@@ -2341,39 +2337,31 @@ function api$1() {
   if (process.env.NODE_ENV !== 'production') {
     assert.fail(`@api decorator can only be used as a decorator function.`);
   }
-
   throw new Error();
 }
 function createPublicPropertyDescriptor(key) {
   return {
     get() {
       const vm = getAssociatedVM(this);
-
       if (isBeingConstructed(vm)) {
         if (process.env.NODE_ENV !== 'production') {
           logError(`Can’t read the value of property \`${toString$1(key)}\` from the constructor because the owner component hasn’t set the value yet. Instead, use the constructor to set a default value for the property.`, vm);
         }
-
         return;
       }
-
       componentValueObserved(vm, key);
       return vm.cmpProps[key];
     },
-
     set(newValue) {
       const vm = getAssociatedVM(this);
-
       if (process.env.NODE_ENV !== 'production') {
         const vmBeingRendered = getVMBeingRendered();
         assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
         assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
       }
-
       vm.cmpProps[key] = newValue;
       componentValueMutated(vm, key);
     },
-
     enumerable: true,
     configurable: true
   };
@@ -2385,46 +2373,37 @@ function createPublicAccessorDescriptor(key, descriptor) {
     enumerable,
     configurable
   } = descriptor;
-
   if (!isFunction$1(get)) {
     if (process.env.NODE_ENV !== 'production') {
       assert.invariant(isFunction$1(get), `Invalid compiler output for public accessor ${toString$1(key)} decorated with @api`);
     }
-
     throw new Error();
   }
-
   return {
     get() {
       if (process.env.NODE_ENV !== 'production') {
         // Assert that the this value is an actual Component with an associated VM.
         getAssociatedVM(this);
       }
-
       return get.call(this);
     },
-
     set(newValue) {
       const vm = getAssociatedVM(this);
-
       if (process.env.NODE_ENV !== 'production') {
         const vmBeingRendered = getVMBeingRendered();
         assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${toString$1(key)}`);
         assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
       }
-
       if (set) {
         if (lwcRuntimeFlags.ENABLE_REACTIVE_SETTER) {
           let ro = vm.oar[key];
-
           if (isUndefined$1(ro)) {
             ro = vm.oar[key] = createAccessorReactiveObserver(vm, set);
-          } // every time we invoke this setter from outside (through this wrapper setter)
+          }
+          // every time we invoke this setter from outside (through this wrapper setter)
           // we should reset the value and then debounce just in case there is a pending
           // invocation the next tick that is not longer relevant since the value is changing
           // from outside.
-
-
           ro.reset(newValue);
           ro.observe(() => {
             set.call(this, newValue);
@@ -2436,7 +2415,6 @@ function createPublicAccessorDescriptor(key, descriptor) {
         assert.fail(`Invalid attempt to set a new value for property ${toString$1(key)} of ${vm} that does not has a setter decorated with @api.`);
       }
     },
-
     enumerable,
     configurable
   };
@@ -3401,11 +3379,9 @@ function getComponentDef(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
-
 function makeHostToken(token) {
   return `${token}-host`;
 }
-
 function createInlineStyleVNode(content) {
   return api.h('style', {
     key: 'style',
@@ -3414,7 +3390,6 @@ function createInlineStyleVNode(content) {
     }
   }, [api.t(content)]);
 }
-
 function updateStylesheetToken(vm, template) {
   const {
     elm,
@@ -3431,112 +3406,81 @@ function updateStylesheetToken(vm, template) {
     stylesheets: newStylesheets,
     stylesheetToken: newStylesheetToken
   } = template;
-  const isSyntheticShadow = renderMode === 1
-  /* RenderMode.Shadow */
-  && shadowMode === 1
-  /* ShadowMode.Synthetic */
-  ;
+  const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
   const {
     hasScopedStyles
   } = context;
   let newToken;
   let newHasTokenInClass;
-  let newHasTokenInAttribute; // Reset the styling token applied to the host element.
-
+  let newHasTokenInAttribute;
+  // Reset the styling token applied to the host element.
   const {
     stylesheetToken: oldToken,
     hasTokenInClass: oldHasTokenInClass,
     hasTokenInAttribute: oldHasTokenInAttribute
   } = context;
-
   if (!isUndefined$1(oldToken)) {
     if (oldHasTokenInClass) {
       getClassList(elm).remove(makeHostToken(oldToken));
     }
-
     if (oldHasTokenInAttribute) {
       removeAttribute(elm, makeHostToken(oldToken));
     }
-  } // Apply the new template styling token to the host element, if the new template has any
+  }
+  // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
-
-
   if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
     newToken = newStylesheetToken;
-  } // Set the new styling token on the host element
-
-
+  }
+  // Set the new styling token on the host element
   if (!isUndefined$1(newToken)) {
     if (hasScopedStyles) {
       getClassList(elm).add(makeHostToken(newToken));
       newHasTokenInClass = true;
     }
-
     if (isSyntheticShadow) {
       setAttribute(elm, makeHostToken(newToken), '');
       newHasTokenInAttribute = true;
     }
-  } // Update the styling tokens present on the context object.
-
-
+  }
+  // Update the styling tokens present on the context object.
   context.stylesheetToken = newToken;
   context.hasTokenInClass = newHasTokenInClass;
   context.hasTokenInAttribute = newHasTokenInAttribute;
 }
-
 function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
   const content = [];
   let root;
-
   for (let i = 0; i < stylesheets.length; i++) {
     let stylesheet = stylesheets[i];
-
     if (isArray$1(stylesheet)) {
       ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
     } else {
       if (process.env.NODE_ENV !== 'production') {
         // Check for compiler version mismatch in dev mode only
-        checkVersionMismatch(stylesheet, 'stylesheet'); // in dev-mode, we support hot swapping of stylesheet, which means that
+        checkVersionMismatch(stylesheet, 'stylesheet');
+        // in dev-mode, we support hot swapping of stylesheet, which means that
         // 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);
       }
-
       const isScopedCss = stylesheet[KEY__SCOPED_CSS];
-
       if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS) {
-        if (!isScopedCss && vm.renderMode === 0
-        /* RenderMode.Light */
-        ) {
+        if (!isScopedCss && vm.renderMode === 0 /* RenderMode.Light */) {
           logError('Unscoped CSS is not supported in Light DOM. Please use scoped CSS (*.scoped.css) instead of unscoped CSS (*.css).');
           continue;
         }
-      } // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
-
-
-      const scopeToken = isScopedCss || vm.shadowMode === 1
-      /* ShadowMode.Synthetic */
-      && vm.renderMode === 1
-      /* RenderMode.Shadow */
-      ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
+      }
+      // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
+      const scopeToken = isScopedCss || vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.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 useActualHostSelector = vm.renderMode === 0
-      /* RenderMode.Light */
-      ? !isScopedCss : vm.shadowMode === 0
-      /* ShadowMode.Native */
-      ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
+      const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */ ? !isScopedCss : vm.shadowMode === 0 /* ShadowMode.Native */;
+      // 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().
-
       let useNativeDirPseudoclass;
-
-      if (vm.renderMode === 1
-      /* RenderMode.Shadow */
-      ) {
-        useNativeDirPseudoclass = vm.shadowMode === 0
-        /* ShadowMode.Native */
-        ;
+      if (vm.renderMode === 1 /* RenderMode.Shadow */) {
+        useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.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()`.
@@ -3544,48 +3488,36 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
           // Only calculate the root once as necessary
           root = getNearestShadowComponent(vm);
         }
-
-        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
-        /* ShadowMode.Native */
-        ;
+        useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
       }
 
       ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
     }
   }
-
   return content;
 }
-
 function getStylesheetsContent(vm, template) {
   const {
     stylesheets,
     stylesheetToken
   } = template;
   let content = [];
-
   if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
     content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
   }
-
   return content;
-} // It might be worth caching this to avoid doing the lookup repeatedly, but
+}
+// It might be worth caching this to avoid doing the lookup repeatedly, but
 // perf testing has not shown it to be a huge improvement yet:
 // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
-
 function getNearestShadowComponent(vm) {
   let owner = vm;
-
   while (!isNull(owner)) {
-    if (owner.renderMode === 1
-    /* RenderMode.Shadow */
-    ) {
+    if (owner.renderMode === 1 /* RenderMode.Shadow */) {
       return owner;
     }
-
     owner = owner.owner;
   }
-
   return owner;
 }
 /**
@@ -3593,8 +3525,6 @@ function getNearestShadowComponent(vm) {
  * this returns the unique token for that scoped stylesheet. Otherwise
  * it returns null.
  */
-
-
 function getScopeTokenClass(owner) {
   const {
     cmpTemplate,
@@ -3608,7 +3538,6 @@ function getScopeTokenClass(owner) {
  *
  * A host style token is applied to the component if scoped styles are used.
  */
-
 function getStylesheetTokenHost(vnode) {
   const {
     template
@@ -3618,21 +3547,15 @@ function getStylesheetTokenHost(vnode) {
   } = template;
   return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
 }
-
 function getNearestNativeShadowComponent(vm) {
   const owner = getNearestShadowComponent(vm);
-
-  if (!isNull(owner) && owner.shadowMode === 1
-  /* ShadowMode.Synthetic */
-  ) {
+  if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.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 {
     renderMode,
@@ -3641,12 +3564,7 @@ function createStylesheet(vm, stylesheets) {
       insertStylesheet
     }
   } = vm;
-
-  if (renderMode === 1
-  /* RenderMode.Shadow */
-  && shadowMode === 1
-  /* ShadowMode.Synthetic */
-  ) {
+  if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
     for (let i = 0; i < stylesheets.length; i++) {
       insertStylesheet(stylesheets[i]);
     }
@@ -3658,15 +3576,13 @@ function createStylesheet(vm, stylesheets) {
     return ArrayMap.call(stylesheets, createInlineStyleVNode);
   } else {
     // native shadow or light DOM, DOM renderer
-    const root = getNearestNativeShadowComponent(vm); // null root means a global style
-
+    const root = getNearestNativeShadowComponent(vm);
+    // null root means a global style
     const target = isNull(root) ? undefined : root.shadowRoot;
-
     for (let i = 0; i < stylesheets.length; i++) {
       insertStylesheet(stylesheets[i], target);
     }
   }
-
   return null;
 }
 
@@ -3952,14 +3868,11 @@ function patchChildren(c1, c2, parent, renderer) {
     updateStaticChildren(c1, c2, parent, renderer);
   }
 }
-
 function patch(n1, n2, parent, renderer) {
   var _a, _b;
-
   if (n1 === n2) {
     return;
   }
-
   if (process.env.NODE_ENV !== 'production') {
     if (!isSameVnode(n1, n2)) {
       throw new Error('Expected these VNodes to be the same: ' + JSON.stringify({
@@ -3971,103 +3884,63 @@ function patch(n1, n2, parent, renderer) {
       }));
     }
   }
-
   switch (n2.type) {
-    case 0
-    /* VNodeType.Text */
-    :
+    case 0 /* VNodeType.Text */:
       // VText has no special capability, fallback to the owner's renderer
       patchText(n1, n2, renderer);
       break;
-
-    case 1
-    /* VNodeType.Comment */
-    :
+    case 1 /* VNodeType.Comment */:
       // VComment has no special capability, fallback to the owner's renderer
       patchComment(n1, n2, renderer);
       break;
-
-    case 4
-    /* VNodeType.Static */
-    :
+    case 4 /* VNodeType.Static */:
       n2.elm = n1.elm;
       break;
-
-    case 5
-    /* VNodeType.Fragment */
-    :
+    case 5 /* VNodeType.Fragment */:
       patchFragment(n1, n2, parent, renderer);
       break;
-
-    case 2
-    /* VNodeType.Element */
-    :
+    case 2 /* VNodeType.Element */:
       patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
       break;
-
-    case 3
-    /* VNodeType.CustomElement */
-    :
+    case 3 /* VNodeType.CustomElement */:
       patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
       break;
   }
 }
-
 function mount(node, parent, renderer, anchor) {
   var _a, _b;
-
   switch (node.type) {
-    case 0
-    /* VNodeType.Text */
-    :
+    case 0 /* VNodeType.Text */:
       // VText has no special capability, fallback to the owner's renderer
       mountText(node, parent, anchor, renderer);
       break;
-
-    case 1
-    /* VNodeType.Comment */
-    :
+    case 1 /* VNodeType.Comment */:
       // VComment has no special capability, fallback to the owner's renderer
       mountComment(node, parent, anchor, renderer);
       break;
-
-    case 4
-    /* VNodeType.Static */
-    :
+    case 4 /* VNodeType.Static */:
       // VStatic cannot have a custom renderer associated to them, using owner's renderer
       mountStatic(node, parent, anchor, renderer);
       break;
-
-    case 5
-    /* VNodeType.Fragment */
-    :
+    case 5 /* VNodeType.Fragment */:
       mountFragment(node, parent, anchor, renderer);
       break;
-
-    case 2
-    /* VNodeType.Element */
-    :
+    case 2 /* VNodeType.Element */:
       // If the vnode data has a renderer override use it, else fallback to owner's renderer
       mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
       break;
-
-    case 3
-    /* VNodeType.CustomElement */
-    :
+    case 3 /* VNodeType.CustomElement */:
       // If the vnode data has a renderer override use it, else fallback to owner's renderer
       mountCustomElement(node, parent, anchor, (_b = node.data.renderer) !== null && _b !== void 0 ? _b : renderer);
       break;
   }
 }
-
 function patchText(n1, n2, renderer) {
   n2.elm = n1.elm;
-
   if (n2.text !== n1.text) {
     updateTextContent(n2, renderer);
   }
 }
-
 function mountText(vnode, parent, anchor, renderer) {
   const {
     owner
@@ -4079,16 +3952,14 @@ function mountText(vnode, parent, anchor, renderer) {
   linkNodeToShadow(textNode, owner, renderer);
   insertNode(textNode, parent, anchor, renderer);
 }
-
 function patchComment(n1, n2, renderer) {
-  n2.elm = n1.elm; // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
+  n2.elm = n1.elm;
+  // FIXME: Comment nodes should be static, we shouldn't need to diff them together. However
   // it is the case today.
-
   if (n2.text !== n1.text) {
     updateTextContent(n2, renderer);
   }
 }
-
 function mountComment(vnode, parent, anchor, renderer) {
   const {
     owner
@@ -4100,32 +3971,27 @@ function mountComment(vnode, parent, anchor, renderer) {
   linkNodeToShadow(commentNode, owner, renderer);
   insertNode(commentNode, parent, anchor, renderer);
 }
-
 function mountFragment(vnode, parent, anchor, renderer) {
   const {
     children
   } = vnode;
-  mountVNodes(children, parent, renderer, anchor); // children of a fragment will always have at least the two delimiters.
-
+  mountVNodes(children, parent, renderer, anchor);
+  // children of a fragment will always have at least the two delimiters.
   vnode.elm = children[children.length - 1].elm;
 }
-
 function patchFragment(n1, n2, parent, renderer) {
   const {
     children,
     stable
   } = n2;
-
   if (stable) {
     updateStaticChildren(n1.children, children, parent, renderer);
   } else {
     updateDynamicChildren(n1.children, children, parent, renderer);
-  } // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
-
-
+  }
+  // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
   n2.elm = children[children.length - 1].elm;
 }
-
 function mountElement(vnode, parent, anchor, renderer) {
   const {
     sel,
@@ -4147,13 +4013,11 @@ function mountElement(vnode, parent, anchor, renderer) {
   insertNode(elm, parent, anchor, renderer);
   mountVNodes(vnode.children, elm, renderer, null);
 }
-
 function patchElement(n1, n2, renderer) {
   const elm = n2.elm = n1.elm;
   patchElementPropsAndAttrs$1(n1, n2, renderer);
   patchChildren(n1.children, n2.children, elm, renderer);
 }
-
 function mountStatic(vnode, parent, anchor, renderer) {
   const {
     owner
@@ -4164,26 +4028,19 @@ function mountStatic(vnode, parent, anchor, renderer) {
   } = renderer;
   const elm = vnode.elm = cloneNode(vnode.fragment, true);
   linkNodeToShadow(elm, owner, renderer);
-  applyElementRestrictions(elm, vnode); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
-
+  applyElementRestrictions(elm, vnode);
+  // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
   const {
     renderMode,
     shadowMode
   } = owner;
-
   if (isSyntheticShadowDefined) {
-    if (shadowMode === 1
-    /* ShadowMode.Synthetic */
-    || renderMode === 0
-    /* RenderMode.Light */
-    ) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
       elm[KEY__SHADOW_STATIC] = true;
     }
   }
-
   insertNode(elm, parent, anchor, renderer);
 }
-
 function mountCustomElement(vnode, parent, anchor, renderer) {
   const {
     sel,
@@ -4198,67 +4055,53 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
    * mechanism that only passes that argument if the constructor is known to be
    * an upgradable custom element.
    */
-
   let vm;
-
   const upgradeCallback = elm => {
     // the custom element from the registry is expecting an upgrade callback
     vm = createViewModelHook(elm, vnode, renderer);
   };
-
   const connectedCallback = elm => {
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       connectRootElement(elm);
     }
   };
-
   const disconnectedCallback = elm => {
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       disconnectRootElement(elm);
     }
-  }; // Should never get a tag with upper case letter at this point; the compiler
+  };
+  // Should never get a tag with upper case letter at this point; the compiler
   // should produce only tags with lowercase letters. However, the Java
   // compiler may generate tagnames with uppercase letters so - for backwards
   // compatibility, we lower case the tagname here.
-
-
   const normalizedTagname = sel.toLowerCase();
   const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
   applyStyleScoping(elm, owner, renderer);
-
   if (vm) {
     allocateChildren(vnode, vm);
   }
-
   patchElementPropsAndAttrs$1(null, vnode, renderer);
   insertNode(elm, parent, anchor, renderer);
-
   if (vm) {
     {
       if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
         if (process.env.NODE_ENV !== 'production') {
           // With synthetic lifecycle callbacks, it's possible for elements to be removed without the engine
           // noticing it (e.g. `appendChild` the same host element twice). This test ensures we don't regress.
-          assert.isTrue(vm.state === 0
-          /* VMState.created */
-          , `${vm} cannot be recycled.`);
+          assert.isTrue(vm.state === 0 /* VMState.created */, `${vm} cannot be recycled.`);
         }
-
         runConnectedCallback(vm);
       }
     }
   }
-
   mountVNodes(vnode.children, elm, renderer, null);
-
   if (vm) {
     appendVM(vm);
   }
 }
-
 function patchCustomElement(n1, n2, parent, renderer) {
   if (n1.ctor !== n2.ctor) {
     // If the constructor, unmount the current component and mount a new one using the new
@@ -4271,17 +4114,14 @@ function patchCustomElement(n1, n2, parent, renderer) {
     const elm = n2.elm = n1.elm;
     const vm = n2.vm = n1.vm;
     patchElementPropsAndAttrs$1(n1, n2, renderer);
-
     if (!isUndefined$1(vm)) {
       // in fallback mode, the allocation will always set children to
       // empty and delegate the real allocation to the slot elements
       allocateChildren(n2, vm);
-    } // in fallback mode, the children will be always empty, so, nothing
+    }
+    // in fallback mode, the children will be always empty, so, nothing
     // will happen, but in native, it does allocate the light dom
-
-
     patchChildren(n1.children, n2.children, elm, renderer);
-
     if (!isUndefined$1(vm)) {
       // this will probably update the shadowRoot, but only if the vm is in a dirty state
       // this is important to preserve the top to bottom synchronous rendering phase.
@@ -4289,29 +4129,24 @@ function patchCustomElement(n1, n2, parent, renderer) {
     }
   }
 }
-
 function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
   for (; start < end; ++start) {
     const vnode = vnodes[start];
-
     if (isVNode(vnode)) {
       mount(vnode, parent, renderer, anchor);
     }
   }
 }
-
 function unmount(vnode, parent, renderer, doRemove = false) {
   const {
     type,
     elm,
     sel
-  } = vnode; // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
+  } = vnode;
+  // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
   // subtree root, is the only element worth unmounting from the subtree.
-
   if (doRemove) {
-    if (type === 5
-    /* VNodeType.Fragment */
-    ) {
+    if (type === 5 /* VNodeType.Fragment */) {
       unmountVNodes(vnode.children, parent, renderer, doRemove);
     } else {
       // The vnode might or might not have a data.renderer associated to it
@@ -4319,51 +4154,39 @@ function unmount(vnode, parent, renderer, doRemove = false) {
       removeNode(elm, parent, renderer);
     }
   }
-
   switch (type) {
-    case 2
-    /* VNodeType.Element */
-    :
+    case 2 /* VNodeType.Element */:
       {
         // Slot content is removed to trigger slotchange event when removing slot.
         // Only required for synthetic shadow.
-        const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1
-        /* ShadowMode.Synthetic */
-        ;
+        const shouldRemoveChildren = sel === 'slot' && vnode.owner.shadowMode === 1 /* ShadowMode.Synthetic */;
         unmountVNodes(vnode.children, elm, renderer, shouldRemoveChildren);
         break;
       }
-
-    case 3
-    /* VNodeType.CustomElement */
-    :
+    case 3 /* VNodeType.CustomElement */:
       {
         const {
           vm
-        } = vnode; // No need to unmount the children here, `removeVM` will take care of removing the
+        } = vnode;
+        // No need to unmount the children here, `removeVM` will take care of removing the
         // children.
-
         if (!isUndefined$1(vm)) {
           removeVM(vm);
         }
       }
   }
 }
-
 function unmountVNodes(vnodes, parent, renderer, doRemove = false, start = 0, end = vnodes.length) {
   for (; start < end; ++start) {
     const ch = vnodes[start];
-
     if (isVNode(ch)) {
       unmount(ch, parent, renderer, doRemove);
     }
   }
 }
-
 function isVNode(vnode) {
   return vnode != null;
 }
-
 function linkNodeToShadow(elm, owner, renderer) {
   const {
     renderRoot,
@@ -4372,19 +4195,14 @@ function linkNodeToShadow(elm, owner, renderer) {
   } = owner;
   const {
     isSyntheticShadowDefined
-  } = renderer; // TODO [#1164]: this should eventually be done by the polyfill directly
-
+  } = renderer;
+  // TODO [#1164]: this should eventually be done by the polyfill directly
   if (isSyntheticShadowDefined) {
-    if (shadowMode === 1
-    /* ShadowMode.Synthetic */
-    || renderMode === 0
-    /* RenderMode.Light */
-    ) {
+    if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
       elm[KEY__SHADOW_RESOLVER] = renderRoot[KEY__SHADOW_RESOLVER];
     }
   }
 }
-
 function updateTextContent(vnode, renderer) {
   const {
     elm,
@@ -4393,120 +4211,87 @@ function updateTextContent(vnode, renderer) {
   const {
     setText
   } = renderer;
-
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
-
   setText(elm, text);
-
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
   }
 }
-
 function insertNode(node, parent, anchor, renderer) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
-
   renderer.insert(node, parent, anchor);
-
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
   }
 }
-
 function removeNode(node, parent, renderer) {
   if (process.env.NODE_ENV !== 'production') {
     unlockDomMutation();
   }
-
   renderer.remove(node, parent);
-
   if (process.env.NODE_ENV !== 'production') {
     lockDomMutation();
   }
 }
-
 function patchElementPropsAndAttrs$1(oldVnode, vnode, renderer) {
   if (isNull(oldVnode)) {
     applyEventListeners(vnode, renderer);
     applyStaticClassAttribute(vnode, renderer);
     applyStaticStyleAttribute(vnode, renderer);
-  } // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
+  }
+  // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
   // value is set before type=radio.
-
-
   patchClassAttribute(oldVnode, vnode, renderer);
   patchStyleAttribute(oldVnode, vnode, renderer);
   patchAttributes(oldVnode, vnode, renderer);
   patchProps(oldVnode, vnode, renderer);
 }
-
 function applyStyleScoping(elm, owner, renderer) {
   // Set the class name for `*.scoped.css` style scoping.
   const scopeToken = getScopeTokenClass(owner);
-
   if (!isNull(scopeToken)) {
     const {
       getClassList
-    } = renderer; // TODO [#2762]: this dot notation with add is probably problematic
+    } = renderer;
+    // TODO [#2762]: this dot notation with add is probably problematic
     // probably we should have a renderer api for just the add operation
-
     getClassList(elm).add(scopeToken);
-  } // Set property element for synthetic shadow DOM style scoping.
-
-
+  }
+  // Set property element for synthetic shadow DOM style scoping.
   const {
     stylesheetToken: syntheticToken
   } = owner.context;
-
-  if (owner.shadowMode === 1
-  /* ShadowMode.Synthetic */
-  && !isUndefined$1(syntheticToken)) {
+  if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && !isUndefined$1(syntheticToken)) {
     elm.$shadowToken$ = syntheticToken;
   }
 }
-
 function applyDomManual(elm, vnode) {
   var _a;
-
   const {
     owner,
     data: {
       context
     }
   } = vnode;
-
-  if (owner.shadowMode === 1
-  /* ShadowMode.Synthetic */
-  && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual"
-  /* LwcDomMode.Manual */
-  ) {
+  if (owner.shadowMode === 1 /* ShadowMode.Synthetic */ && ((_a = context === null || context === void 0 ? void 0 : context.lwc) === null || _a === void 0 ? void 0 : _a.dom) === "manual" /* LwcDomMode.Manual */) {
     elm.$domManual$ = true;
   }
 }
-
 function applyElementRestrictions(elm, vnode) {
   var _a, _b;
-
   if (process.env.NODE_ENV !== 'production') {
-    const isPortal = vnode.type === 2
-    /* VNodeType.Element */
-    && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual"
-    /* LwcDomMode.Manual */
-    ;
-    const isLight = vnode.owner.renderMode === 0
-    /* RenderMode.Light */
-    ;
+    const isPortal = vnode.type === 2 /* VNodeType.Element */ && ((_b = (_a = vnode.data.context) === null || _a === void 0 ? void 0 : _a.lwc) === null || _b === void 0 ? void 0 : _b.dom) === "manual" /* LwcDomMode.Manual */;
+    const isLight = vnode.owner.renderMode === 0 /* RenderMode.Light */;
     patchElementWithRestrictions(elm, {
       isPortal,
       isLight
     });
   }
 }
-
 function allocateChildren(vnode, vm) {
   // A component with slots will re-render because:
   // 1- There is a change of the internal state.
@@ -4524,41 +4309,31 @@ function allocateChildren(vnode, vm) {
     renderMode,
     shadowMode
   } = vm;
-
   if (process.env.NODE_ENV !== 'production') {
     // If any of the children being allocated is a scoped slot fragment, make sure the receiving
     // component is a light DOM component. This is mainly to validate light dom parent running
     // in native shadow mode.
-    if (renderMode !== 0
-    /* RenderMode.Light */
-    && ArraySome.call(children, child => !isNull(child) && isVScopedSlotFragment(child))) {
+    if (renderMode !== 0 /* RenderMode.Light */ && ArraySome.call(children, child => !isNull(child) && isVScopedSlotFragment(child))) {
       logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
     }
   }
-
-  if (shadowMode === 1
-  /* ShadowMode.Synthetic */
-  || renderMode === 0
-  /* RenderMode.Light */
-  ) {
+  if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
     // slow path
-    allocateInSlot(vm, children, vnode.owner); // save the allocated children in case this vnode is reused.
-
-    vnode.aChildren = children; // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
-
+    allocateInSlot(vm, children, vnode.owner);
+    // save the allocated children in case this vnode is reused.
+    vnode.aChildren = children;
+    // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
     vnode.children = EmptyArray;
   }
 }
-
 function createViewModelHook(elm, vnode, renderer) {
-  let vm = getAssociatedVMIfPresent(elm); // There is a possibility that a custom element is registered under tagName, in which case, the
+  let vm = getAssociatedVMIfPresent(elm);
+  // There is a possibility that a custom element is registered under tagName, in which case, the
   // initialization is already carry on, and there is nothing else to do here since this hook is
   // called right after invoking `document.createElement`.
-
   if (!isUndefined$1(vm)) {
     return vm;
   }
-
   const {
     sel,
     mode,
@@ -4570,48 +4345,37 @@ function createViewModelHook(elm, vnode, renderer) {
     owner,
     tagName: sel
   });
-
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(isArray$1(vnode.children), `Invalid vnode for a custom element, it must have children defined.`);
   }
-
   return vm;
 }
 /**
  * Collects all slots into a SlotSet, traversing through VFragment Nodes
  */
-
-
 function collectSlots(vm, children, cmpSlotsMapping) {
   var _a, _b;
-
   for (let i = 0, len = children.length; i < len; i += 1) {
     const vnode = children[i];
-
     if (isNull(vnode)) {
       continue;
-    } // Dive further iff the content is wrapped in a VFragment
-
-
+    }
+    // Dive further iff the content is wrapped in a VFragment
     if (isVFragment(vnode)) {
       // Remove the text delimiter nodes to avoid overriding default slot content
       collectSlots(vm, vnode.children.slice(1, -1), cmpSlotsMapping);
       continue;
     }
-
     let slotName = '';
-
     if (isVBaseElement(vnode)) {
       slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
     } else if (isVScopedSlotFragment(vnode)) {
       slotName = vnode.slotName;
     }
-
     const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
     ArrayPush$1.call(vnodes, vnode);
   }
 }
-
 function allocateInSlot(vm, children, owner) {
   const {
     cmpSlots: {
@@ -4624,28 +4388,22 @@ function allocateInSlot(vm, children, owner) {
     owner,
     slotAssignments: cmpSlotsMapping
   };
-
   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(oldSlotsMapping);
-
     if (oldKeys.length !== keys(cmpSlotsMapping).length) {
       markComponentAsDirty(vm);
       return;
     }
-
     for (let i = 0, len = oldKeys.length; i < len; i += 1) {
       const key = oldKeys[i];
-
       if (isUndefined$1(cmpSlotsMapping[key]) || oldSlotsMapping[key].length !== cmpSlotsMapping[key].length) {
         markComponentAsDirty(vm);
         return;
       }
-
       const oldVNodes = oldSlotsMapping[key];
       const vnodes = cmpSlotsMapping[key];
-
       for (let j = 0, a = cmpSlotsMapping[key].length; j < a; j += 1) {
         if (oldVNodes[j] !== vnodes[j]) {
           markComponentAsDirty(vm);
@@ -4654,40 +4412,33 @@ function allocateInSlot(vm, children, owner) {
       }
     }
   }
-} // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-
-
-const FromIteration = new WeakMap(); // dynamic children means it was generated by an iteration
+}
+// Using a WeakMap instead of a WeakSet because this one works in IE11 :(
+const FromIteration = new WeakMap();
+// dynamic children means it was generated by an iteration
 // in a template, and will require a more complex diffing algo.
-
 function markAsDynamicChildren(children) {
   FromIteration.set(children, 1);
 }
-
 function hasDynamicChildren(children) {
   return FromIteration.has(children);
 }
-
 function createKeyToOldIdx(children, beginIdx, endIdx) {
-  const map = {}; // TODO [#1637]: simplify this by assuming that all vnodes has keys
-
+  const map = {};
+  // TODO [#1637]: simplify this by assuming that all vnodes has keys
   for (let j = beginIdx; j <= endIdx; ++j) {
     const ch = children[j];
-
     if (isVNode(ch)) {
       const {
         key
       } = ch;
-
       if (key !== undefined) {
         map[key] = j;
       }
     }
   }
-
   return map;
 }
-
 function updateDynamicChildren(oldCh, newCh, parent, renderer) {
   let oldStartIdx = 0;
   let newStartIdx = 0;
@@ -4703,7 +4454,6 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
   let elmToMove;
   let before;
   let clonedOldCh = false;
-
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (!isVNode(oldStartVnode)) {
       oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
@@ -4737,54 +4487,46 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
       if (oldKeyToIdx === undefined) {
         oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
       }
-
       idxInOld = oldKeyToIdx[newStartVnode.key];
-
       if (isUndefined$1(idxInOld)) {
         // New element
         mount(newStartVnode, parent, renderer, oldStartVnode.elm);
         newStartVnode = newCh[++newStartIdx];
       } else {
         elmToMove = oldCh[idxInOld];
-
         if (isVNode(elmToMove)) {
           if (elmToMove.sel !== newStartVnode.sel) {
             // New element
             mount(newStartVnode, parent, renderer, oldStartVnode.elm);
           } else {
-            patch(elmToMove, newStartVnode, parent, renderer); // Delete the old child, but copy the array since it is read-only.
+            patch(elmToMove, newStartVnode, parent, renderer);
+            // Delete the old child, but copy the array since it is read-only.
             // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
             // so we only care about the `oldCh` object inside this function.
             // To avoid cloning over and over again, we check `clonedOldCh`
             // and only clone once.
-
             if (!clonedOldCh) {
               clonedOldCh = true;
               oldCh = [...oldCh];
-            } // We've already cloned at least once, so it's no longer read-only
-
-
+            }
+            // We've already cloned at least once, so it's no longer read-only
             oldCh[idxInOld] = undefined;
             insertNode(elmToMove.elm, parent, oldStartVnode.elm, renderer);
           }
         }
-
         newStartVnode = newCh[++newStartIdx];
       }
     }
   }
-
   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;
       mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
     } else {
@@ -4792,32 +4534,26 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
     }
   }
 }
-
 function updateStaticChildren(c1, c2, parent, renderer) {
   const c1Length = c1.length;
   const c2Length = c2.length;
-
   if (c1Length === 0) {
     // the old list is empty, we can directly insert anything new
     mountVNodes(c2, parent, renderer, null);
     return;
   }
-
   if (c2Length === 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
     unmountVNodes(c1, parent, renderer, true);
     return;
-  } // if the old list is not empty, the new list MUST have the same
+  }
+  // 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 anchor = null;
-
   for (let i = c2Length - 1; i >= 0; i -= 1) {
     const n1 = c1[i];
     const n2 = c2[i];
-
     if (n2 !== n1) {
       if (isVNode(n1)) {
         if (isVNode(n2)) {
@@ -5807,42 +5543,30 @@ function invokeServiceHook(vm, cbs) {
  */
 let idx = 0;
 /** The internal slot used to associate different objects the engine manipulates with the VM */
-
 const ViewModelReflection = new WeakMap();
-
 function callHook(cmp, fn, args = []) {
   return fn.apply(cmp, args);
 }
-
 function setHook(cmp, prop, newValue) {
   cmp[prop] = newValue;
 }
-
 function getHook(cmp, prop) {
   return cmp[prop];
 }
-
 function rerenderVM(vm) {
   rehydrate(vm);
 }
 function connectRootElement(elm) {
   const vm = getAssociatedVM(elm);
-  logGlobalOperationStart(7
-  /* OperationId.GlobalHydrate */
-  , vm); // Usually means moving the element from one place to another, which is observable via
+  logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
+  // Usually means moving the element from one place to another, which is observable via
   // life-cycle hooks.
-
-  if (vm.state === 1
-  /* VMState.connected */
-  ) {
+  if (vm.state === 1 /* VMState.connected */) {
     disconnectRootElement(elm);
   }
-
   runConnectedCallback(vm);
   rehydrate(vm);
-  logGlobalOperationEnd(7
-  /* OperationId.GlobalHydrate */
-  , vm);
+  logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
 }
 function disconnectRootElement(elm) {
   const vm = getAssociatedVM(elm);
@@ -5850,65 +5574,48 @@ function disconnectRootElement(elm) {
 }
 function appendVM(vm) {
   rehydrate(vm);
-} // just in case the component comes back, with this we guarantee re-rendering it
+}
+// just in case the component comes back, with this we guarantee re-rendering it
 // while preventing any attempt to rehydration until after reinsertion.
-
 function resetComponentStateWhenRemoved(vm) {
   const {
     state
   } = vm;
-
-  if (state !== 2
-  /* VMState.disconnected */
-  ) {
+  if (state !== 2 /* VMState.disconnected */) {
     const {
       oar,
       tro
-    } = vm; // Making sure that any observing record will not trigger the rehydrated on this vm
-
-    tro.reset(); // Making sure that any observing accessor record will not trigger the setter to be reinvoked
-
+    } = vm;
+    // Making sure that any observing record will not trigger the rehydrated on this vm
+    tro.reset();
+    // Making sure that any observing accessor record will not trigger the setter to be reinvoked
     for (const key in oar) {
       oar[key].reset();
     }
-
-    runDisconnectedCallback(vm); // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
-
+    runDisconnectedCallback(vm);
+    // Spec: https://dom.spec.whatwg.org/#concept-node-remove (step 14-15)
     runChildNodesDisconnectedCallback(vm);
     runLightChildNodesDisconnectedCallback(vm);
   }
-
   if (process.env.NODE_ENV !== 'production') {
     removeActiveVM(vm);
   }
-} // this method is triggered by the diffing algo only when a vnode from the
+}
+// this method is triggered by the diffing algo only when a vnode from the
 // old vnode.children is removed from the DOM.
-
-
 function removeVM(vm) {
   if (process.env.NODE_ENV !== 'production') {
-    assert.isTrue(vm.state === 1
-    /* VMState.connected */
-    || vm.state === 2
-    /* VMState.disconnected */
-    , `${vm} must have been connected.`);
+    assert.isTrue(vm.state === 1 /* VMState.connected */ || vm.state === 2 /* VMState.disconnected */, `${vm} must have been connected.`);
   }
-
   resetComponentStateWhenRemoved(vm);
 }
-
 function getNearestShadowAncestor(vm) {
   let ancestor = vm.owner;
-
-  while (!isNull(ancestor) && ancestor.renderMode === 0
-  /* RenderMode.Light */
-  ) {
+  while (!isNull(ancestor) && ancestor.renderMode === 0 /* RenderMode.Light */) {
     ancestor = ancestor.owner;
   }
-
   return ancestor;
 }
-
 function createVM(elm, ctor, renderer, options) {
   const {
     mode,
@@ -5921,9 +5628,7 @@ function createVM(elm, ctor, renderer, options) {
     elm,
     def,
     idx: idx++,
-    state: 0
-    /* VMState.created */
-    ,
+    state: 0 /* VMState.created */,
     isScheduled: false,
     isDirty: true,
     tagName,
@@ -5965,31 +5670,27 @@ function createVM(elm, ctor, renderer, options) {
     getHook,
     renderer
   };
+  if (process.env.NODE_ENV !== 'production') {
+    vm.debugInfo = create(null);
+  }
   vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
-
   if (process.env.NODE_ENV !== 'production') {
     vm.toString = () => {
       return `[object:vm ${def.name} (${vm.idx})]`;
     };
-
     if (lwcRuntimeFlags.ENABLE_FORCE_NATIVE_SHADOW_MODE_FOR_TEST) {
-      vm.shadowMode = 0
-      /* ShadowMode.Native */
-      ;
+      vm.shadowMode = 0 /* ShadowMode.Native */;
     }
-  } // Create component instance associated to the vm and the element.
-
-
-  invokeComponentConstructor(vm, def.ctor); // Initializing the wire decorator per instance only when really needed
-
+  }
+  // Create component instance associated to the vm and the element.
+  invokeComponentConstructor(vm, def.ctor);
+  // Initializing the wire decorator per instance only when really needed
   if (hasWireAdapters(vm)) {
     installWireAdapters(vm);
   }
-
   return vm;
 }
-
 function computeShadowMode(vm, renderer) {
   const {
     def
@@ -5999,136 +5700,98 @@ function computeShadowMode(vm, renderer) {
     isNativeShadowDefined
   } = renderer;
   let shadowMode;
-
   if (isSyntheticShadowDefined) {
-    if (def.renderMode === 0
-    /* RenderMode.Light */
-    ) {
+    if (def.renderMode === 0 /* RenderMode.Light */) {
       // ShadowMode.Native implies "not synthetic shadow" which is consistent with how
       // everything defaults to native when the synthetic shadow polyfill is unavailable.
-      shadowMode = 0
-      /* ShadowMode.Native */
-      ;
+      shadowMode = 0 /* ShadowMode.Native */;
     } else if (isNativeShadowDefined) {
       // Not combined with above condition because @lwc/features only supports identifiers in
       // the if-condition.
       if (lwcRuntimeFlags.ENABLE_MIXED_SHADOW_MODE) {
-        if (def.shadowSupportMode === "any"
-        /* ShadowSupportMode.Any */
-        ) {
-          shadowMode = 0
-          /* ShadowMode.Native */
-          ;
+        if (def.shadowSupportMode === "any" /* ShadowSupportMode.Any */) {
+          shadowMode = 0 /* ShadowMode.Native */;
         } else {
           const shadowAncestor = getNearestShadowAncestor(vm);
-
-          if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0
-          /* ShadowMode.Native */
-          ) {
+          if (!isNull(shadowAncestor) && shadowAncestor.shadowMode === 0 /* ShadowMode.Native */) {
             // Transitive support for native Shadow DOM. A component in native mode
             // transitively opts all of its descendants into native.
-            shadowMode = 0
-            /* ShadowMode.Native */
-            ;
+            shadowMode = 0 /* ShadowMode.Native */;
           } else {
             // Synthetic if neither this component nor any of its ancestors are configured
             // to be native.
-            shadowMode = 1
-            /* ShadowMode.Synthetic */
-            ;
+            shadowMode = 1 /* ShadowMode.Synthetic */;
           }
         }
       } else {
-        shadowMode = 1
-        /* ShadowMode.Synthetic */
-        ;
+        shadowMode = 1 /* ShadowMode.Synthetic */;
       }
     } else {
       // Synthetic if there is no native Shadow DOM support.
-      shadowMode = 1
-      /* ShadowMode.Synthetic */
-      ;
+      shadowMode = 1 /* ShadowMode.Synthetic */;
     }
   } else {
     // Native if the synthetic shadow polyfill is unavailable.
-    shadowMode = 0
-    /* ShadowMode.Native */
-    ;
+    shadowMode = 0 /* ShadowMode.Native */;
   }
 
   return shadowMode;
 }
-
 function assertIsVM(obj) {
   if (isNull(obj) || !isObject(obj) || !('renderRoot' in obj)) {
     throw new TypeError(`${obj} is not a VM.`);
   }
 }
-
 function associateVM(obj, vm) {
   ViewModelReflection.set(obj, vm);
 }
 function getAssociatedVM(obj) {
   const vm = ViewModelReflection.get(obj);
-
   if (process.env.NODE_ENV !== 'production') {
     assertIsVM(vm);
   }
-
   return vm;
 }
 function getAssociatedVMIfPresent(obj) {
   const maybeVm = ViewModelReflection.get(obj);
-
   if (process.env.NODE_ENV !== 'production') {
     if (!isUndefined$1(maybeVm)) {
       assertIsVM(maybeVm);
     }
   }
-
   return maybeVm;
 }
-
 function rehydrate(vm) {
   if (isTrue(vm.isDirty)) {
     const children = renderComponent(vm);
     patchShadowRoot(vm, children);
   }
 }
-
 function patchShadowRoot(vm, newCh) {
   const {
     renderRoot,
     children: oldCh,
     renderer
-  } = vm; // caching the new children collection
-
+  } = vm;
+  // caching the new children collection
   vm.children = newCh;
-
   if (newCh.length > 0 || oldCh.length > 0) {
     // patch function mutates vnodes by adding the element reference,
     // however, if patching fails it contains partial changes.
     if (oldCh !== newCh) {
       runWithBoundaryProtection(vm, vm, () => {
         // pre
-        logOperationStart(2
-        /* OperationId.Patch */
-        , vm);
+        logOperationStart(2 /* OperationId.Patch */, vm);
       }, () => {
         // job
         patchChildren(oldCh, newCh, renderRoot, renderer);
       }, () => {
         // post
-        logOperationEnd(2
-        /* OperationId.Patch */
-        , vm);
+        logOperationEnd(2 /* OperationId.Patch */, vm);
       });
     }
   }
-
-  if (vm.state === 1
-  /* VMState.connected */
-  ) {
+  if (vm.state === 1 /* VMState.connected */) {
     // If the element is connected, that means connectedCallback was already issued, and
     // any successive rendering should finish with the call to renderedCallback, otherwise
     // the connectedCallback will take care of calling it in the right order at the end of
@@ -6136,49 +5799,34 @@ function patchShadowRoot(vm, newCh) {
     runRenderedCallback(vm);
   }
 }
-
 function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
     }
   } = vm;
-
   const {
     rendered
   } = Services;
-
   if (rendered) {
     invokeServiceHook(vm, rendered);
   }
-
   if (!isUndefined$1(renderedCallback)) {
-    logOperationStart(4
-    /* OperationId.RenderedCallback */
-    , vm);
+    logOperationStart(4 /* OperationId.RenderedCallback */, vm);
     invokeComponentCallback(vm, renderedCallback);
-    logOperationEnd(4
-    /* OperationId.RenderedCallback */
-    , vm);
+    logOperationEnd(4 /* OperationId.RenderedCallback */, vm);
   }
 }
 let rehydrateQueue = [];
-
 function flushRehydrationQueue() {
-  logGlobalOperationStart(8
-  /* OperationId.GlobalRehydrate */
-  );
-
+  logGlobalOperationStart(8 /* OperationId.GlobalRehydrate */);
   if (process.env.NODE_ENV !== 'production') {
     assert.invariant(rehydrateQueue.length, `If rehydrateQueue was scheduled, it is because there must be at least one VM on this pending queue instead of ${rehydrateQueue}.`);
   }
-
   const vms = rehydrateQueue.sort((a, b) => a.idx - b.idx);
   rehydrateQueue = []; // reset to a new queue
-
   for (let i = 0, len = vms.length; i < len; i += 1) {
     const vm = vms[i];
-
     try {
       rehydrate(vm);
     } catch (error) {
@@ -6187,78 +5835,54 @@ function flushRehydrationQueue() {
         if (rehydrateQueue.length === 0) {
           addCallbackToNextTick(flushRehydrationQueue);
         }
-
         ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
-      } // we need to end the measure before throwing.
-
-
-      logGlobalOperationEnd(8
-      /* OperationId.GlobalRehydrate */
-      ); // re-throwing the original error will break the current tick, but since the next tick is
+      }
+      // we need to end the measure before throwing.
+      logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+      // re-throwing the original error will break the current tick, but since the next tick is
       // already scheduled, it should continue patching the rest.
-
       throw error; // eslint-disable-line no-unsafe-finally
     }
   }
 
-  logGlobalOperationEnd(8
-  /* OperationId.GlobalRehydrate */
-  );
+  logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
 }
 
 function runConnectedCallback(vm) {
   const {
     state
   } = vm;
-
-  if (state === 1
-  /* VMState.connected */
-  ) {
+  if (state === 1 /* VMState.connected */) {
     return; // nothing to do since it was already connected
   }
 
-  vm.state = 1
-  /* VMState.connected */
-  ; // reporting connection
-
+  vm.state = 1 /* VMState.connected */;
+  // reporting connection
   const {
     connected
   } = Services;
-
   if (connected) {
     invokeServiceHook(vm, connected);
   }
-
   if (hasWireAdapters(vm)) {
     connectWireAdapters(vm);
   }
-
   const {
     connectedCallback
   } = vm.def;
-
   if (!isUndefined$1(connectedCallback)) {
-    logOperationStart(3
-    /* OperationId.ConnectedCallback */
-    , vm);
+    logOperationStart(3 /* OperationId.ConnectedCallback */, vm);
     invokeComponentCallback(vm, connectedCallback);
-    logOperationEnd(3
-    /* OperationId.ConnectedCallback */
-    , vm);
+    logOperationEnd(3 /* OperationId.ConnectedCallback */, vm);
   }
 }
-
 function hasWireAdapters(vm) {
   return getOwnPropertyNames$1(vm.def.wire).length > 0;
 }
-
 function runDisconnectedCallback(vm) {
   if (process.env.NODE_ENV !== 'production') {
-    assert.isTrue(vm.state !== 2
-    /* VMState.disconnected */
-    , `${vm} must be inserted.`);
+    assert.isTrue(vm.state !== 2 /* VMState.disconnected */, `${vm} must be inserted.`);
   }
-
   if (isFalse(vm.isDirty)) {
     // this guarantees that if the component is reused/reinserted,
     // it will be re-rendered because we are disconnecting the reactivity
@@ -6266,67 +5890,54 @@ function runDisconnectedCallback(vm) {
     // of disconnected components.
     vm.isDirty = true;
   }
-
-  vm.state = 2
-  /* VMState.disconnected */
-  ; // reporting disconnection
-
+  vm.state = 2 /* VMState.disconnected */;
+  // reporting disconnection
   const {
     disconnected
   } = Services;
-
   if (disconnected) {
     invokeServiceHook(vm, disconnected);
   }
-
   if (hasWireAdapters(vm)) {
     disconnectWireAdapters(vm);
   }
-
   const {
     disconnectedCallback
   } = vm.def;
-
   if (!isUndefined$1(disconnectedCallback)) {
-    logOperationStart(5
-    /* OperationId.DisconnectedCallback */
-    , vm);
+    logOperationStart(5 /* OperationId.DisconnectedCallback */, vm);
     invokeComponentCallback(vm, disconnectedCallback);
-    logOperationEnd(5
-    /* OperationId.DisconnectedCallback */
-    , vm);
+    logOperationEnd(5 /* OperationId.DisconnectedCallback */, vm);
   }
 }
-
 function runChildNodesDisconnectedCallback(vm) {
   const {
     velements: vCustomElementCollection
-  } = vm; // Reporting disconnection for every child in inverse order since they are
+  } = vm;
+  // Reporting disconnection for every child in inverse order since they are
   // inserted in reserved order.
-
   for (let i = vCustomElementCollection.length - 1; i >= 0; i -= 1) {
     const {
       elm
-    } = vCustomElementCollection[i]; // There are two cases where the element could be undefined:
+    } = vCustomElementCollection[i];
+    // There are two cases where the element could be undefined:
     // * when there is an error during the construction phase, and an error
     //   boundary picks it, there is a possibility that the VCustomElement
     //   is not properly initialized, and therefore is should be ignored.
     // * when slotted custom element is not used by the element where it is
     //   slotted into it, as  a result, the custom element was never
     //   initialized.
-
     if (!isUndefined$1(elm)) {
-      const childVM = getAssociatedVMIfPresent(elm); // The VM associated with the element might be associated undefined
+      const childVM = getAssociatedVMIfPresent(elm);
+      // The VM associated with the element might be associated undefined
       // in the case where the VM failed in the middle of its creation,
       // eg: constructor throwing before invoking super().
-
       if (!isUndefined$1(childVM)) {
         resetComponentStateWhenRemoved(childVM);
       }
     }
   }
 }
-
 function runLightChildNodesDisconnectedCallback(vm) {
   const {
     aChildren: adoptedChildren
@@ -6340,23 +5951,15 @@ function runLightChildNodesDisconnectedCallback(vm) {
  * custom element itself will trigger the removal of anything slotted or anything
  * defined on its shadow.
  */
-
-
 function recursivelyDisconnectChildren(vnodes) {
   for (let i = 0, len = vnodes.length; i < len; i += 1) {
     const vnode = vnodes[i];
-
     if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
       switch (vnode.type) {
-        case 2
-        /* VNodeType.Element */
-        :
+        case 2 /* VNodeType.Element */:
           recursivelyDisconnectChildren(vnode.children);
           break;
-
-        case 3
-        /* VNodeType.CustomElement */
-        :
+        case 3 /* VNodeType.CustomElement */:
           {
             const vm = getAssociatedVM(vnode.elm);
             resetComponentStateWhenRemoved(vm);
@@ -6365,12 +5968,11 @@ function recursivelyDisconnectChildren(vnodes) {
       }
     }
   }
-} // This is a super optimized mechanism to remove the content of the root node (shadow root
+}
+// This is a super optimized mechanism to remove the content of the root node (shadow root
 // for shadow DOM components and the root element itself for light DOM) without having to go
 // into snabbdom. Especially useful when the reset is a consequence of an error, in which case the
 // children VNodes might not be representing the current state of the DOM.
-
-
 function resetComponentRoot(vm) {
   const {
     children,
@@ -6379,15 +5981,12 @@ function resetComponentRoot(vm) {
       remove
     }
   } = vm;
-
   for (let i = 0, len = children.length; i < len; i++) {
     const child = children[i];
-
     if (!isNull(child) && !isUndefined$1(child.elm)) {
       remove(child.elm, renderRoot);
     }
   }
-
   vm.children = EmptyArray;
   runChildNodesDisconnectedCallback(vm);
   vm.velements = EmptyArray;
@@ -6396,58 +5995,43 @@ function scheduleRehydration(vm) {
   if (isTrue(vm.isScheduled)) {
     return;
   }
-
   vm.isScheduled = true;
-
   if (rehydrateQueue.length === 0) {
     addCallbackToNextTick(flushRehydrationQueue);
   }
-
   ArrayPush$1.call(rehydrateQueue, vm);
 }
-
 function getErrorBoundaryVM(vm) {
   let currentVm = vm;
-
   while (!isNull(currentVm)) {
     if (!isUndefined$1(currentVm.def.errorCallback)) {
       return currentVm;
     }
-
     currentVm = currentVm.owner;
   }
 }
-
 function runWithBoundaryProtection(vm, owner, pre, job, post) {
   let error;
   pre();
-
   try {
     job();
   } catch (e) {
     error = Object(e);
   } finally {
     post();
-
     if (!isUndefined$1(error)) {
       addErrorComponentStack(vm, error);
       const errorBoundaryVm = isNull(owner) ? undefined : getErrorBoundaryVM(owner);
-
       if (isUndefined$1(errorBoundaryVm)) {
         throw error; // eslint-disable-line no-unsafe-finally
       }
 
       resetComponentRoot(vm); // remove offenders
-
-      logOperationStart(6
-      /* OperationId.ErrorCallback */
-      , vm); // error boundaries must have an ErrorCallback
-
+      logOperationStart(6 /* OperationId.ErrorCallback */, vm);
+      // error boundaries must have an ErrorCallback
       const errorCallback = errorBoundaryVm.def.errorCallback;
       invokeComponentCallback(errorBoundaryVm, errorCallback, [error, error.wcStack]);
-      logOperationEnd(6
-      /* OperationId.ErrorCallback */
-      , vm);
+      logOperationEnd(6 /* OperationId.ErrorCallback */, vm);
     }
   }
 }
@@ -6461,7 +6045,6 @@ function forceRehydration(vm) {
   // content of the shadowRoot, this way we can guarantee that all children
   // elements will be throw away, and new instances will be created.
   vm.cmpTemplate = () => [];
-
   if (isFalse(vm.isDirty)) {
     // forcing the vm to rehydrate in the next tick
     markComponentAsDirty(vm);
@@ -6477,6 +6060,7 @@ function forceRehydration(vm) {
  */
 const DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
 const DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
+const WIRE_DEBUG_ENTRY = '@wire';
 const WireMetaMap = new Map();
 class WireContextRegistrationEvent extends CustomEvent {
   constructor(adapterToken, {
@@ -6496,15 +6080,12 @@ class WireContextRegistrationEvent extends CustomEvent {
       }
     });
   }
-
 }
-
 function createFieldDataCallback(vm, name) {
   return value => {
     updateComponentValue(vm, name, value);
   };
 }
-
 function createMethodDataCallback(vm, method) {
   return value => {
     // dispatching new value into the wired method
@@ -6514,45 +6095,40 @@ function createMethodDataCallback(vm, method) {
     }, noop);
   };
 }
-
 function createConfigWatcher(component, configCallback, callbackWhenConfigIsReady) {
-  let hasPendingConfig = false; // creating the reactive observer for reactive params when needed
-
+  let hasPendingConfig = false;
+  // creating the reactive observer for reactive params when needed
   const ro = createReactiveObserver(() => {
     if (hasPendingConfig === false) {
-      hasPendingConfig = true; // collect new config in the micro-task
-
+      hasPendingConfig = true;
+      // collect new config in the micro-task
       Promise.resolve().then(() => {
-        hasPendingConfig = false; // resetting current reactive params
-
-        ro.reset(); // dispatching a new config due to a change in the configuration
-
+        hasPendingConfig = false;
+        // resetting current reactive params
+        ro.reset();
+        // dispatching a new config due to a change in the configuration
         computeConfigAndUpdate();
       });
     }
   });
-
   const computeConfigAndUpdate = () => {
     let config;
-    ro.observe(() => config = configCallback(component)); // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
+    ro.observe(() => config = configCallback(component));
+    // eslint-disable-next-line @lwc/lwc-internal/no-invalid-todo
     // TODO: dev-mode validation of config based on the adapter.configSchema
     // @ts-ignore it is assigned in the observe() callback
-
     callbackWhenConfigIsReady(config);
   };
-
   return {
     computeConfigAndUpdate,
     ro
   };
 }
-
 function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
   const {
     adapter
   } = wireDef;
   const adapterContextToken = getAdapterToken(adapter);
-
   if (isUndefined$1(adapterContextToken)) {
     return; // no provider found, nothing to be done
   }
@@ -6566,8 +6142,8 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
     renderer: {
       dispatchEvent
     }
-  } = vm; // waiting for the component to be connected to formally request the context via the token
-
+  } = vm;
+  // waiting for the component to be connected to formally request the context via the token
   ArrayPush$1.call(wiredConnecting, () => {
     // This event is responsible for connecting the host element with another
     // element in the composed path that is providing contextual data. The provider
@@ -6580,18 +6156,15 @@ function createContextWatcher(vm, wireDef, callbackWhenContextIsReady) {
         // TODO: dev-mode validation of config based on the adapter.contextSchema
         callbackWhenContextIsReady(newContext);
       },
-
       setDisconnectedCallback(disconnectCallback) {
         // adds this callback into the disconnect bucket so it gets disconnected from parent
         // the the element hosting the wire is disconnected
         ArrayPush$1.call(wiredDisconnecting, disconnectCallback);
       }
-
     });
     dispatchEvent(elm, contextRegistrationEvent);
   });
 }
-
 function createConnector(vm, name, wireDef) {
   const {
     method,
@@ -6599,10 +6172,27 @@ function createConnector(vm, name, wireDef) {
     configCallback,
     dynamic
   } = wireDef;
-  const dataCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+  let debugInfo;
+  if (process.env.NODE_ENV !== 'production') {
+    const wiredPropOrMethod = isUndefined$1(method) ? name : method.name;
+    debugInfo = create(null);
+    debugInfo.wasDataProvisionedForConfig = false;
+    vm.debugInfo[WIRE_DEBUG_ENTRY][wiredPropOrMethod] = debugInfo;
+  }
+  const fieldOrMethodCallback = isUndefined$1(method) ? createFieldDataCallback(vm, name) : createMethodDataCallback(vm, method);
+  const dataCallback = value => {
+    if (process.env.NODE_ENV !== 'production') {
+      debugInfo.data = value;
+      // Note: most of the time, the data provided is for the current config, but there may be
+      // some conditions in which it does not, ex:
+      // race conditions in a poor network while the adapter does not cancel a previous request.
+      debugInfo.wasDataProvisionedForConfig = true;
+    }
+    fieldOrMethodCallback(value);
+  };
   let context;
-  let connector; // Workaround to pass the component element associated to this wire adapter instance.
-
+  let connector;
+  // Workaround to pass the component element associated to this wire adapter instance.
   defineProperty(dataCallback, DeprecatedWiredElementHost, {
     value: vm.elm
   });
@@ -6613,41 +6203,41 @@ function createConnector(vm, name, wireDef) {
     // job
     connector = new adapter(dataCallback);
   }, noop);
-
   const updateConnectorConfig = config => {
     // every time the config is recomputed due to tracking,
     // this callback will be invoked with the new computed config
     runWithBoundaryProtection(vm, vm, noop, () => {
       // job
+      if (process.env.NODE_ENV !== 'production') {
+        debugInfo.config = config;
+        debugInfo.context = context;
+        debugInfo.wasDataProvisionedForConfig = false;
+      }
       connector.update(config, context);
     }, noop);
-  }; // Computes the current wire config and calls the update method on the wire adapter.
+  };
+  // Computes the current wire config and calls the update method on the wire adapter.
   // If it has params, we will need to observe changes in the next tick.
-
-
   const {
     computeConfigAndUpdate,
     ro
-  } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig); // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
-
+  } = createConfigWatcher(vm.component, configCallback, updateConnectorConfig);
+  // if the adapter needs contextualization, we need to watch for new context and push it alongside the config
   if (!isUndefined$1(adapter.contextSchema)) {
     createContextWatcher(vm, wireDef, newContext => {
       // every time the context is pushed into this component,
       // this callback will be invoked with the new computed context
       if (context !== newContext) {
-        context = newContext; // Note: when new context arrives, the config will be recomputed and pushed along side the new
+        context = newContext;
+        // Note: when new context arrives, the config will be recomputed and pushed along side the new
         // context, this is to preserve the identity characteristics, config should not have identity
         // (ever), while context can have identity
-
-        if (vm.state === 1
-        /* VMState.connected */
-        ) {
+        if (vm.state === 1 /* VMState.connected */) {
           computeConfigAndUpdate();
         }
       }
     });
   }
-
   return {
     // @ts-ignore the boundary protection executes sync, connector is always defined
     connector,
@@ -6655,7 +6245,6 @@ function createConnector(vm, name, wireDef) {
     resetConfigWatcher: () => ro.reset()
   };
 }
-
 const AdapterToTokenMap = new Map();
 function getAdapterToken(adapter) {
   return AdapterToTokenMap.get(adapter);
@@ -6668,7 +6257,6 @@ function storeWiredMethodMeta(descriptor, adapter, configCallback, dynamic) {
   if (adapter.adapter) {
     adapter = adapter.adapter;
   }
-
   const method = descriptor.value;
   const def = {
     adapter,
@@ -6683,7 +6271,6 @@ function storeWiredFieldMeta(descriptor, adapter, configCallback, dynamic) {
   if (adapter.adapter) {
     adapter = adapter.adapter;
   }
-
   const def = {
     adapter,
     configCallback,
@@ -6698,17 +6285,15 @@ function installWireAdapters(vm) {
       wire
     }
   } = vm;
+  vm.debugInfo[WIRE_DEBUG_ENTRY] = create(null);
   const wiredConnecting = context.wiredConnecting = [];
   const wiredDisconnecting = context.wiredDisconnecting = [];
-
   for (const fieldNameOrMethod in wire) {
     const descriptor = wire[fieldNameOrMethod];
     const wireDef = WireMetaMap.get(descriptor);
-
     if (process.env.NODE_ENV !== 'production') {
       assert.invariant(wireDef, `Internal Error: invalid wire definition found.`);
     }
-
     if (!isUndefined$1(wireDef)) {
       const {
         connector,
@@ -6718,14 +6303,12 @@ function installWireAdapters(vm) {
       const hasDynamicParams = wireDef.dynamic.length > 0;
       ArrayPush$1.call(wiredConnecting, () => {
         connector.connect();
-
         if (!lwcRuntimeFlags.ENABLE_WIRE_SYNC_EMIT) {
           if (hasDynamicParams) {
             Promise.resolve().then(computeConfigAndUpdate);
             return;
           }
         }
-
         computeConfigAndUpdate();
       });
       ArrayPush$1.call(wiredDisconnecting, () => {
@@ -6739,7 +6322,6 @@ function connectWireAdapters(vm) {
   const {
     wiredConnecting
   } = vm.context;
-
   for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
     wiredConnecting[i]();
   }
@@ -7353,7 +6935,87 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.28.1 */
+/* version: 2.30.0 */
+
+/*
+ * 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
+ */
+/**
+ * Displays the header for a custom element.
+ *
+ * @param ce the custom element
+ * @param componentInstance component instance associated with the custom element.
+ */
+function getHeaderForCustomElement(ce, componentInstance) {
+    // [element]
+    // LWC component instance: [vm.component]
+    return [
+        'div',
+        {},
+        ['object', { object: ce, config: { skip: true } }],
+        [
+            'div',
+            {},
+            ['span', { style: 'margin: 0 5px; color: red' }, 'LWC:'],
+            ['object', { object: componentInstance }],
+        ],
+    ];
+}
+function getHeaderForComponentInstance(componentInstance, debugInfo) {
+    if (keys(debugInfo).length === 0) {
+        // there is no debug information, no need to customize this component instance
+        return null;
+    }
+    // [component]
+    // Debug information: [vm.debugInfo]
+    return [
+        'div',
+        {},
+        ['object', { object: componentInstance, config: { skip: true } }],
+        [
+            'div',
+            {},
+            ['span', { style: 'margin: 0 5px; color: red' }, 'Debug:'],
+            ['object', { object: debugInfo }],
+        ],
+    ];
+}
+const LightningElementFormatter = {
+    name: 'LightningElementFormatter',
+    header(obj, config) {
+        const vm = getAssociatedVMIfPresent(obj);
+        if (!isUndefined$1(vm) && (isUndefined$1(config) || !config.skip)) {
+            if (obj instanceof HTMLElement) {
+                return getHeaderForCustomElement(obj, vm.component);
+            }
+            else {
+                return getHeaderForComponentInstance(obj, vm.debugInfo);
+            }
+        }
+        return null;
+    },
+    hasBody() {
+        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
+ */
+function init() {
+    const devtoolsFormatters = _globalThis.devtoolsFormatters || [];
+    ArrayPush$1.call(devtoolsFormatters, LightningElementFormatter);
+    _globalThis.devtoolsFormatters = devtoolsFormatters;
+}
+if (process.env.NODE_ENV !== 'production') {
+    init();
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -8052,10 +7714,10 @@ function createScopedRegistry() {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 let createScopedConstructor;
-let CachedHTMLElement; // We only call `createScopedRegistry()` if the browser supports custom elements and
+let CachedHTMLElement;
+// We only call `createScopedRegistry()` if the browser supports custom elements and
 // ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is enabled, because we don't want to patch eagerly if the flag is disabled
 // or we're in a legacy browser.
-
 if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
   if (hasCustomElements) {
     // If ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY is true, then we eagerly initialize the scoped registry.
@@ -8069,7 +7731,8 @@ if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
     // 4. `customElements.define('x-foo', Ctor)` // throws error because class is bound to stale HTMLElement
     //
     // To reduce the risk of this, it's safer to patch the registry eagerly.
-    createScopedConstructor = createScopedRegistry(); // It's important to cache window.HTMLElement here. Otherwise, someone else could overwrite window.HTMLElement (e.g.
+    createScopedConstructor = createScopedRegistry();
+    // It's important to cache window.HTMLElement here. Otherwise, someone else could overwrite window.HTMLElement (e.g.
     // another copy of the engine, or another scoping implementation) and we would get "Illegal constructor" errors
     // because the HTMLElement prototypes are mixed up.
     //
@@ -8077,14 +7740,12 @@ if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
     // with that version of HTMLElement. So if you load two copies of the scoping implementation in the same environment,
     // the second one may accidentally grab window.HTMLElement from the first (when doing `class extends HTMLElement`).
     // Caching avoids this problem.
-
     CachedHTMLElement = window.HTMLElement;
   }
-} // Creates a constructor that is intended to be used as the UserConstructor in a scoped (pivots) registry.
+}
+// Creates a constructor that is intended to be used as the UserConstructor in a scoped (pivots) registry.
 // In this case, the upgradeCallback only needs to be defined once because we create these on-demand,
 // multiple times per tag name.
-
-
 const createUserConstructor = (upgradeCallback, connectedCallback, disconnectedCallback, HTMLElementToExtend) => {
   // TODO [#2972]: this class should expose observedAttributes as necessary
   return class UserConstructor extends HTMLElementToExtend {
@@ -8092,24 +7753,19 @@ const createUserConstructor = (upgradeCallback, connectedCallback, disconnectedC
       super();
       upgradeCallback(this);
     }
-
     connectedCallback() {
       connectedCallback(this);
     }
-
     disconnectedCallback() {
       disconnectedCallback(this);
     }
-
   };
 };
-
 function createCustomElementScoped(tagName, upgradeCallback, connectedCallback, disconnectedCallback) {
   if (isUndefined$1(createScopedConstructor) || isUndefined$1(CachedHTMLElement)) {
     // This error should be impossible to hit
     throw new Error('The flag ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY must be set to true to use this feature');
   }
-
   const UserConstructor = createUserConstructor(upgradeCallback, connectedCallback, disconnectedCallback, CachedHTMLElement);
   const ScopedConstructor = createScopedConstructor(tagName, UserConstructor);
   return new ScopedConstructor(UserConstructor);
@@ -8134,9 +7790,7 @@ function createCustomElementScoped(tagName, upgradeCallback, connectedCallback,
  *    between LWC components and third-party elements. This uses a similar trick to #2, but is much more complex
  *    because it must patch the global `customElements` and `HTMLElement` objects.
  */
-
 let createCustomElement;
-
 if (hasCustomElements) {
   if (lwcRuntimeFlags.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY) {
     createCustomElement = createCustomElementScoped;
@@ -8209,7 +7863,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.28.1 */
+    /** version: 2.30.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8598,23 +8252,19 @@ function buildCustomElementConstructor(Ctor) {
  * SPDX-License-Identifier: MIT
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
+// TODO [#2472]: Remove this workaround when appropriate.
 // eslint-disable-next-line @lwc/lwc-internal/no-global-node
-
 const _Node$1 = Node;
 const ConnectingSlot = new WeakMap();
 const DisconnectingSlot = new WeakMap();
-
 function callNodeSlot(node, slot) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(node, `callNodeSlot() should not be called for a non-object`);
   }
-
   const fn = slot.get(node);
-
   if (!isUndefined$1(fn)) {
     fn(node);
   }
-
   return node; // for convenience
 }
 
@@ -8632,24 +8282,20 @@ if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       const appendedNode = appendChild.call(this, newChild);
       return callNodeSlot(appendedNode, ConnectingSlot);
     },
-
     insertBefore(newChild, referenceNode) {
       const insertedNode = insertBefore.call(this, newChild, referenceNode);
       return callNodeSlot(insertedNode, ConnectingSlot);
     },
-
     removeChild(oldChild) {
       const removedNode = removeChild.call(this, oldChild);
       return callNodeSlot(removedNode, DisconnectingSlot);
     },
-
     replaceChild(newChild, oldChild) {
       const replacedNode = replaceChild.call(this, newChild, oldChild);
       callNodeSlot(replacedNode, DisconnectingSlot);
       callNodeSlot(newChild, ConnectingSlot);
       return replacedNode;
     }
-
   });
 }
 /**
@@ -8663,59 +8309,49 @@ if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
  * const el = createElement('x-foo', { is: FooCtor });
  * ```
  */
-
-
 function createElement(sel, options) {
   if (!isObject(options) || isNull(options)) {
     throw new TypeError(`"createElement" function expects an object as second parameter but received "${toString$1(options)}".`);
   }
-
   const Ctor = options.is;
-
   if (!isFunction$1(Ctor)) {
     throw new TypeError(`"createElement" function expects an "is" option with a valid component constructor.`);
   }
-
   const {
     createCustomElement
-  } = renderer; // tagName must be all lowercase, unfortunately, we have legacy code that is
+  } = renderer;
+  // tagName must be all lowercase, unfortunately, we have legacy code that is
   // passing `sel` as a camel-case, which makes them invalid custom elements name
   // the following line guarantees that this does not leaks beyond this point.
-
-  const tagName = StringToLowerCase.call(sel); // the custom element from the registry is expecting an upgrade callback
-
+  const tagName = StringToLowerCase.call(sel);
+  // the custom element from the registry is expecting an upgrade callback
   /**
    * Note: if the upgradable constructor does not expect, or throw when we new it
    * with a callback as the first argument, we could implement a more advanced
    * mechanism that only passes that argument if the constructor is known to be
    * an upgradable custom element.
    */
-
   const upgradeCallback = elm => {
     createVM(elm, Ctor, renderer, {
       tagName,
       mode: options.mode !== 'closed' ? 'open' : 'closed',
       owner: null
     });
-
     if (!lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       ConnectingSlot.set(elm, connectRootElement);
       DisconnectingSlot.set(elm, disconnectRootElement);
     }
   };
-
   const connectedCallback = elm => {
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       connectRootElement(elm);
     }
   };
-
   const disconnectedCallback = elm => {
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       disconnectRootElement(elm);
     }
   };
-
   const element = createCustomElement(tagName, upgradeCallback, connectedCallback, disconnectedCallback);
   return element;
 }
@@ -8788,6 +8424,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.28.1 */
+/* version: 2.30.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };