lwc 2.29.0 → 2.30.0

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

@@ -305,9 +305,9 @@
    * 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.29.0";
+  const LWC_VERSION = "2.30.0";
   const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.29.0 */
+  /** version: 2.30.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -389,7 +389,7 @@
           patch$1(propName);
       }
   }
-  /** version: 2.29.0 */
+  /** version: 2.30.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -469,7 +469,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.29.0 */
+  /** version: 2.30.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -477,16 +477,14 @@
    * 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',
@@ -504,16 +502,14 @@
    * 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',
@@ -1739,7 +1735,7 @@
       // 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
@@ -1757,7 +1753,7 @@
 
   /* istanbul ignore else */
   if (process.env.NODE_ENV !== 'production') {
-      init();
+      init$1();
   }
   function defaultValueIsObservable(value) {
       // intentionally checking for null
@@ -2347,39 +2343,31 @@
     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
     };
@@ -2391,46 +2379,37 @@
       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);
@@ -2442,7 +2421,6 @@
           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
     };
@@ -3407,11 +3385,9 @@
    * 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',
@@ -3420,7 +3396,6 @@
       }
     }, [api.t(content)]);
   }
-
   function updateStylesheetToken(vm, template) {
     const {
       elm,
@@ -3437,112 +3412,81 @@
       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()`.
@@ -3550,48 +3494,36 @@
             // 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;
   }
   /**
@@ -3599,8 +3531,6 @@
    * this returns the unique token for that scoped stylesheet. Otherwise
    * it returns null.
    */
-
-
   function getScopeTokenClass(owner) {
     const {
       cmpTemplate,
@@ -3614,7 +3544,6 @@
    *
    * A host style token is applied to the component if scoped styles are used.
    */
-
   function getStylesheetTokenHost(vnode) {
     const {
       template
@@ -3624,21 +3553,15 @@
     } = 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,
@@ -3647,12 +3570,7 @@
         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]);
       }
@@ -3664,15 +3582,13 @@
       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;
   }
 
@@ -3958,14 +3874,11 @@
       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({
@@ -3977,103 +3890,63 @@
         }));
       }
     }
-
     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
@@ -4085,16 +3958,14 @@
     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
@@ -4106,32 +3977,27 @@
     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,
@@ -4153,13 +4019,11 @@
     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
@@ -4170,26 +4034,19 @@
     } = 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,
@@ -4204,67 +4061,53 @@
      * 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
@@ -4277,17 +4120,14 @@
       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.
@@ -4295,29 +4135,24 @@
       }
     }
   }
-
   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
@@ -4325,51 +4160,39 @@
         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,
@@ -4378,19 +4201,14 @@
     } = 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,
@@ -4399,120 +4217,87 @@
     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.
@@ -4530,41 +4315,31 @@
       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,
@@ -4576,48 +4351,37 @@
       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: {
@@ -4630,28 +4394,22 @@
       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);
@@ -4660,40 +4418,33 @@
         }
       }
     }
-  } // 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;
@@ -4709,7 +4460,6 @@
     let elmToMove;
     let before;
     let clonedOldCh = false;
-
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
       if (!isVNode(oldStartVnode)) {
         oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
@@ -4743,54 +4493,46 @@
         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 {
@@ -4798,32 +4540,26 @@
       }
     }
   }
-
   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)) {
@@ -5813,42 +5549,30 @@
    */
   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);
@@ -5856,65 +5580,48 @@
   }
   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,
@@ -5927,9 +5634,7 @@
       elm,
       def,
       idx: idx++,
-      state: 0
-      /* VMState.created */
-      ,
+      state: 0 /* VMState.created */,
       isScheduled: false,
       isDirty: true,
       tagName,
@@ -5971,31 +5676,27 @@
       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
@@ -6005,136 +5706,98 @@
       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
@@ -6142,49 +5805,34 @@
       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) {
@@ -6193,78 +5841,54 @@
           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
@@ -6272,67 +5896,54 @@
       // 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
@@ -6346,23 +5957,15 @@
    * 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);
@@ -6371,12 +5974,11 @@
         }
       }
     }
-  } // 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,
@@ -6385,15 +5987,12 @@
         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;
@@ -6402,58 +6001,43 @@
     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);
       }
     }
   }
@@ -6467,7 +6051,6 @@
     // 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);
@@ -6483,6 +6066,7 @@
    */
   const DeprecatedWiredElementHost = '$$DeprecatedWiredElementHostKey$$';
   const DeprecatedWiredParamsMeta = '$$DeprecatedWiredParamsMetaKey$$';
+  const WIRE_DEBUG_ENTRY = '@wire';
   const WireMetaMap = new Map();
   class WireContextRegistrationEvent extends CustomEvent {
     constructor(adapterToken, {
@@ -6502,15 +6086,12 @@
         }
       });
     }
-
   }
-
   function createFieldDataCallback(vm, name) {
     return value => {
       updateComponentValue(vm, name, value);
     };
   }
-
   function createMethodDataCallback(vm, method) {
     return value => {
       // dispatching new value into the wired method
@@ -6520,45 +6101,40 @@
       }, 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
     }
@@ -6572,8 +6148,8 @@
       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
@@ -6586,18 +6162,15 @@
           // 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,
@@ -6605,10 +6178,27 @@
       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
     });
@@ -6619,41 +6209,41 @@
       // 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,
@@ -6661,7 +6251,6 @@
       resetConfigWatcher: () => ro.reset()
     };
   }
-
   const AdapterToTokenMap = new Map();
   function getAdapterToken(adapter) {
     return AdapterToTokenMap.get(adapter);
@@ -6674,7 +6263,6 @@
     if (adapter.adapter) {
       adapter = adapter.adapter;
     }
-
     const method = descriptor.value;
     const def = {
       adapter,
@@ -6689,7 +6277,6 @@
     if (adapter.adapter) {
       adapter = adapter.adapter;
     }
-
     const def = {
       adapter,
       configCallback,
@@ -6704,17 +6291,15 @@
         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,
@@ -6724,14 +6309,12 @@
         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, () => {
@@ -6745,7 +6328,6 @@
     const {
       wiredConnecting
     } = vm.context;
-
     for (let i = 0, len = wiredConnecting.length; i < len; i += 1) {
       wiredConnecting[i]();
     }
@@ -7359,7 +6941,87 @@
       }
       return ctor;
   }
-  /* version: 2.29.0 */
+  /* 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.
@@ -8058,10 +7720,10 @@
    * 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.
@@ -8075,7 +7737,8 @@
       // 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.
       //
@@ -8083,14 +7746,12 @@
       // 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 {
@@ -8098,24 +7759,19 @@
         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);
@@ -8140,9 +7796,7 @@
    *    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;
@@ -8215,7 +7869,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.29.0 */
+      /** version: 2.30.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -8604,23 +8258,19 @@
    * 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
   }
 
@@ -8638,24 +8288,20 @@
         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;
       }
-
     });
   }
   /**
@@ -8669,59 +8315,49 @@
    * 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;
   }
@@ -8794,7 +8430,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.29.0 */
+  /* version: 2.30.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;