@lwc/engine-core 8.0.0-alpha.1 → 8.1.0-alpha.0

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (c) 2024 Salesforce, Inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArrayPop, create, isFalse, isFunction as isFunction$1, isObject, seal, isAPIFeatureEnabled, isArray as isArray$1, keys, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, StringTrim, ArrayFrom, htmlEscape, StringCharAt, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isArray as isArray$1, isFunction as isFunction$1, keys, ArrayFilter, isObject, toString as toString$1, ArrayIndexOf, ArrayPop, isFalse, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
 /*
@@ -176,7 +176,208 @@ function logWarnOnce(message, vm) {
 }
 
 /*
- * Copyright (c) 2019, salesforce.com, inc.
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+let nextTickCallbackQueue = [];
+const SPACE_CHAR = 32;
+const EmptyObject = seal(create(null));
+const EmptyArray = seal([]);
+function flushCallbackQueue() {
+    if (process.env.NODE_ENV !== 'production') {
+        if (nextTickCallbackQueue.length === 0) {
+            throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
+        }
+    }
+    const callbacks = nextTickCallbackQueue;
+    nextTickCallbackQueue = []; // reset to a new queue
+    for (let i = 0, len = callbacks.length; i < len; i += 1) {
+        callbacks[i]();
+    }
+}
+function addCallbackToNextTick(callback) {
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isFunction$1(callback)) {
+            throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
+        }
+    }
+    if (nextTickCallbackQueue.length === 0) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        Promise.resolve().then(flushCallbackQueue);
+    }
+    ArrayPush$1.call(nextTickCallbackQueue, callback);
+}
+function guid() {
+    function s4() {
+        return Math.floor((1 + Math.random()) * 0x10000)
+            .toString(16)
+            .substring(1);
+    }
+    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+// Borrowed from Vue template compiler.
+// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
+const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
+const PROPERTY_DELIMITER = /:(.+)/;
+function parseStyleText(cssText) {
+    const styleMap = {};
+    const declarations = cssText.split(DECLARATION_DELIMITER);
+    for (const declaration of declarations) {
+        if (declaration) {
+            const [prop, value] = declaration.split(PROPERTY_DELIMITER);
+            if (prop !== undefined && value !== undefined) {
+                styleMap[prop.trim()] = value.trim();
+            }
+        }
+    }
+    return styleMap;
+}
+// Make a shallow copy of an object but omit the given key
+function cloneAndOmitKey(object, keyToOmit) {
+    const result = {};
+    for (const key of keys(object)) {
+        if (key !== keyToOmit) {
+            result[key] = object[key];
+        }
+    }
+    return result;
+}
+function flattenStylesheets(stylesheets) {
+    const list = [];
+    for (const stylesheet of stylesheets) {
+        if (!isArray$1(stylesheet)) {
+            list.push(stylesheet);
+        }
+        else {
+            list.push(...flattenStylesheets(stylesheet));
+        }
+    }
+    return list;
+}
+// Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
+function assertNotProd() {
+    /* istanbul ignore if */
+    if (process.env.NODE_ENV === 'production') {
+        // this method should never leak to prod
+        throw new ReferenceError();
+    }
+}
+function shouldBeFormAssociated(Ctor) {
+    const ctorFormAssociated = Boolean(Ctor.formAssociated);
+    const apiVersion = getComponentAPIVersion(Ctor);
+    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
+    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
+        const tagName = getComponentRegisteredName(Ctor);
+        logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` +
+            `association is not enabled because the API version is ${apiVersion}. To enable form association, ` +
+            `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
+    }
+    return ctorFormAssociated && apiFeatureEnabled;
+}
+
+/*
+ * Copyright (c) 2024, Salesforce, 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
+ */
+//
+// Do additional mutation tracking for DevTools performance profiling, in dev mode only.
+//
+const reactiveObserversToVMs = new WeakMap();
+const targetsToPropertyKeys = new WeakMap();
+let mutationLogs = [];
+/**
+ * Flush all the logs we've written so far and return the current logs.
+ */
+function getAndFlushMutationLogs() {
+    assertNotProd();
+    const result = mutationLogs;
+    mutationLogs = [];
+    return result;
+}
+/**
+ * Log a new mutation for this reactive observer.
+ * @param reactiveObserver - relevant ReactiveObserver
+ * @param target - target object that is being observed
+ * @param key - key (property) that was mutated
+ */
+function logMutation(reactiveObserver, target, key) {
+    assertNotProd();
+    const parentKey = targetsToPropertyKeys.get(target);
+    const vm = reactiveObserversToVMs.get(reactiveObserver);
+    /* istanbul ignore if */
+    if (isUndefined$1(vm)) {
+        // VM should only be undefined in Vitest tests, where a reactive observer is not always associated with a VM
+        // because the unit tests just create Reactive Observers on-the-fly.
+        // Note we could explicitly target Vitest with `process.env.NODE_ENV === 'test'`, but then that would also
+        // affect our downstream consumers' Jest/Vitest tests, and we don't want to throw an error just for a logger.
+        if (process.env.NODE_ENV === 'test-karma-lwc') {
+            throw new Error('The VM should always be defined except possibly in unit tests');
+        }
+    }
+    else {
+        const stringKey = toString$1(key);
+        let prop;
+        if (isUndefined$1(parentKey)) {
+            prop = stringKey;
+        }
+        else if (/^\w+$/.test(stringKey)) {
+            // Human-readable prop like `items[0].name` on a deep object/array
+            prop = `${toString$1(parentKey)}.${stringKey}`;
+        }
+        else {
+            // e.g. `obj["prop with spaces"]`
+            prop = `${toString$1(parentKey)}[${JSON.stringify(stringKey)}]`;
+        }
+        ArrayPush$1.call(mutationLogs, { vm, prop });
+    }
+}
+/**
+ * Flush logs associated with a given VM.
+ * @param vm - given VM
+ */
+function flushMutationLogsForVM(vm) {
+    assertNotProd();
+    mutationLogs = ArrayFilter.call(mutationLogs, (log) => log.vm !== vm);
+}
+/**
+ * Mark this ReactiveObserver as related to this VM. This is only needed for mutation tracking in dev mode.
+ * @param reactiveObserver
+ * @param vm
+ */
+function associateReactiveObserverWithVM(reactiveObserver, vm) {
+    assertNotProd();
+    reactiveObserversToVMs.set(reactiveObserver, vm);
+}
+/**
+ * Deeply track all objects in a target and associate with a given key.
+ * @param key - key associated with the object in the component
+ * @param target - tracked target object
+ */
+function trackTargetForMutationLogging(key, target) {
+    assertNotProd();
+    if (isObject(target) && !isNull(target)) {
+        // only track non-primitives; others are invalid as WeakMap keys
+        targetsToPropertyKeys.set(target, key);
+        // Deeply traverse arrays and objects to track every object within
+        if (isArray$1(target)) {
+            for (let i = 0; i < target.length; i++) {
+                trackTargetForMutationLogging(`${toString$1(key)}[${i}]`, target[i]);
+            }
+        }
+        else {
+            for (const prop of keys(target)) {
+                trackTargetForMutationLogging(`${toString$1(key)}.${prop}`, target[prop]);
+            }
+        }
+    }
+}
+
+/*
+ * Copyright (c) 2024, Salesforce, 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
@@ -199,6 +400,9 @@ function valueMutated(target, key) {
         if (!isUndefined$1(reactiveObservers)) {
             for (let i = 0, len = reactiveObservers.length; i < len; i += 1) {
                 const ro = reactiveObservers[i];
+                if (process.env.NODE_ENV !== 'production') {
+                    logMutation(ro, target, key);
+                }
                 ro.notify();
             }
         }
@@ -358,7 +562,7 @@ class SignalTracker {
 }
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, 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
@@ -403,108 +607,6 @@ function createReactiveObserver(callback) {
     return process.env.IS_BROWSER ? new ReactiveObserver(callback) : DUMMY_REACTIVE_OBSERVER;
 }
 
-/*
- * 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
- */
-let nextTickCallbackQueue = [];
-const SPACE_CHAR = 32;
-const EmptyObject = seal(create(null));
-const EmptyArray = seal([]);
-function flushCallbackQueue() {
-    if (process.env.NODE_ENV !== 'production') {
-        if (nextTickCallbackQueue.length === 0) {
-            throw new Error(`Internal Error: If callbackQueue is scheduled, it is because there must be at least one callback on this pending queue.`);
-        }
-    }
-    const callbacks = nextTickCallbackQueue;
-    nextTickCallbackQueue = []; // reset to a new queue
-    for (let i = 0, len = callbacks.length; i < len; i += 1) {
-        callbacks[i]();
-    }
-}
-function addCallbackToNextTick(callback) {
-    if (process.env.NODE_ENV !== 'production') {
-        if (!isFunction$1(callback)) {
-            throw new Error(`Internal Error: addCallbackToNextTick() can only accept a function callback`);
-        }
-    }
-    if (nextTickCallbackQueue.length === 0) {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        Promise.resolve().then(flushCallbackQueue);
-    }
-    ArrayPush$1.call(nextTickCallbackQueue, callback);
-}
-function guid() {
-    function s4() {
-        return Math.floor((1 + Math.random()) * 0x10000)
-            .toString(16)
-            .substring(1);
-    }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-}
-// Borrowed from Vue template compiler.
-// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-const PROPERTY_DELIMITER = /:(.+)/;
-function parseStyleText(cssText) {
-    const styleMap = {};
-    const declarations = cssText.split(DECLARATION_DELIMITER);
-    for (const declaration of declarations) {
-        if (declaration) {
-            const [prop, value] = declaration.split(PROPERTY_DELIMITER);
-            if (prop !== undefined && value !== undefined) {
-                styleMap[prop.trim()] = value.trim();
-            }
-        }
-    }
-    return styleMap;
-}
-// Make a shallow copy of an object but omit the given key
-function cloneAndOmitKey(object, keyToOmit) {
-    const result = {};
-    for (const key of keys(object)) {
-        if (key !== keyToOmit) {
-            result[key] = object[key];
-        }
-    }
-    return result;
-}
-function flattenStylesheets(stylesheets) {
-    const list = [];
-    for (const stylesheet of stylesheets) {
-        if (!isArray$1(stylesheet)) {
-            list.push(stylesheet);
-        }
-        else {
-            list.push(...flattenStylesheets(stylesheet));
-        }
-    }
-    return list;
-}
-// Throw an error if we're running in prod mode. Ensures code is truly removed from prod mode.
-function assertNotProd() {
-    /* istanbul ignore if */
-    if (process.env.NODE_ENV === 'production') {
-        // this method should never leak to prod
-        throw new ReferenceError();
-    }
-}
-function shouldBeFormAssociated(Ctor) {
-    const ctorFormAssociated = Boolean(Ctor.formAssociated);
-    const apiVersion = getComponentAPIVersion(Ctor);
-    const apiFeatureEnabled = isAPIFeatureEnabled(7 /* APIFeature.ENABLE_ELEMENT_INTERNALS_AND_FACE */, apiVersion);
-    if (process.env.NODE_ENV !== 'production' && ctorFormAssociated && !apiFeatureEnabled) {
-        const tagName = getComponentRegisteredName(Ctor);
-        logWarnOnce(`Component <${tagName}> set static formAssociated to true, but form ` +
-            `association is not enabled because the API version is ${apiVersion}. To enable form association, ` +
-            `update the LWC component API version to 61 or above. https://lwc.dev/guide/versioning`);
-    }
-    return ctorFormAssociated && apiFeatureEnabled;
-}
-
 /*
  * Copyright (c) 2020, salesforce.com, inc.
  * All rights reserved.
@@ -2117,6 +2219,9 @@ function createConfigWatcher(component, configCallback, callbackWhenConfigIsRead
             });
         }
     });
+    if (process.env.NODE_ENV !== 'production') {
+        associateReactiveObserverWithVM(ro, getAssociatedVM(component));
+    }
     const computeConfigAndUpdate = () => {
         let config;
         ro.observe(() => (config = configCallback(component)));
@@ -2405,6 +2510,9 @@ function internalTrackDecorator(key) {
                 }
             }
             const reactiveOrAnyValue = getReactiveProxy(newValue);
+            if (process.env.NODE_ENV !== 'production') {
+                trackTargetForMutationLogging(key, newValue);
+            }
             updateComponentValue(vm, key, reactiveOrAnyValue);
         },
         enumerable: true,
@@ -5690,7 +5798,7 @@ const api = freeze({
 });
 
 /*
- * Copyright (c) 2018, salesforce.com, inc.
+ * Copyright (c) 2024, Salesforce, 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
@@ -5706,6 +5814,26 @@ const operationIdNameMapping = [
     'lwc-hydrate',
     'lwc-rehydrate',
 ];
+const operationTooltipMapping = [
+    // constructor
+    'component constructor()',
+    // render
+    'component render() and virtual DOM rendered',
+    // patch
+    'component DOM rendered',
+    // connectedCallback
+    'component connectedCallback()',
+    // renderedCallback
+    'component renderedCallback()',
+    // disconnectedCallback
+    'component disconnectedCallback()',
+    // errorCallback
+    'component errorCallback()',
+    // lwc-hydrate
+    'component first rendered',
+    // lwc-rehydrate
+    'component re-rendered',
+];
 // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
 // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
 const isUserTimingSupported = typeof performance !== 'undefined' &&
@@ -5720,8 +5848,17 @@ const start = !isUserTimingSupported
     };
 const end = !isUserTimingSupported
     ? noop
-    : (measureName, markName) => {
-        performance.measure(measureName, markName);
+    : (measureName, markName, devtools) => {
+        performance.measure(measureName, {
+            start: markName,
+            detail: {
+                devtools: {
+                    dataType: 'track-entry',
+                    track: '⚡️ Lightning Web Components',
+                    ...devtools,
+                },
+            },
+        });
         // Clear the created marks and measure to avoid filling the performance entries buffer.
         // Note: Even if the entries get deleted, existing PerformanceObservers preserve a copy of those entries.
         performance.clearMarks(markName);
@@ -5738,6 +5875,66 @@ function getMarkName(opId, vm) {
     // the right measures for components that are recursive.
     return `${getMeasureName(opId, vm)} - ${vm.idx}`;
 }
+function getProperties(vm) {
+    return [
+        ['Tag Name', vm.tagName],
+        ['Component ID', String(vm.idx)],
+        ['Render Mode', vm.renderMode === 0 /* RenderMode.Light */ ? 'light DOM' : 'shadow DOM'],
+        ['Shadow Mode', vm.shadowMode === 0 /* ShadowMode.Native */ ? 'native' : 'synthetic'],
+    ];
+}
+// Create a list of tag names to the properties that were mutated, to help answer the question of
+// "why did this component re-render?"
+function getMutationProperties(mutationLogs) {
+    // `mutationLogs` should never have length 0, but bail out if it does for whatever reason
+    if (isUndefined$1(mutationLogs)) {
+        return EmptyArray;
+    }
+    if (!mutationLogs.length) {
+        // Currently this only occurs for experimental signals, because those mutations are not triggered by accessors
+        // TODO [#4546]: support signals in mutation logging
+        return EmptyArray;
+    }
+    // Keep track of unique IDs per tag name so we can just report a raw count at the end, e.g.
+    // `<x-foo> (x2)` to indicate that two instances of `<x-foo>` were rendered.
+    const tagNamesToIdsAndProps = new Map();
+    for (const { vm: { tagName, idx }, prop, } of mutationLogs) {
+        let idsAndProps = tagNamesToIdsAndProps.get(tagName);
+        if (isUndefined$1(idsAndProps)) {
+            idsAndProps = { ids: new Set(), keys: new Set() };
+            tagNamesToIdsAndProps.set(tagName, idsAndProps);
+        }
+        idsAndProps.ids.add(idx);
+        idsAndProps.keys.add(prop);
+    }
+    // Sort by tag name
+    const entries = ArraySort.call([...tagNamesToIdsAndProps], (a, b) => a[0].localeCompare(b[0]));
+    const tagNames = ArrayMap.call(entries, (item) => item[0]);
+    // Show e.g. `<x-foo>` for one instance, or `<x-foo> (x2)` for two instances. (\u00D7 is multiplication symbol)
+    const tagNamesToDisplayTagNames = new Map();
+    for (const tagName of tagNames) {
+        const { ids } = tagNamesToIdsAndProps.get(tagName);
+        const displayTagName = `<${tagName}>${ids.size > 1 ? ` (\u00D7${ids.size})` : ''}`;
+        tagNamesToDisplayTagNames.set(tagName, displayTagName);
+    }
+    // Summary row
+    const usePlural = tagNames.length > 1 || tagNamesToIdsAndProps.get(tagNames[0]).ids.size > 1;
+    const result = [
+        [
+            `Re-rendered Component${usePlural ? 's' : ''}`,
+            ArrayJoin.call(ArrayMap.call(tagNames, (_) => tagNamesToDisplayTagNames.get(_)), ', '),
+        ],
+    ];
+    // Detail rows
+    for (const [prettyTagName, { keys }] of entries) {
+        const displayTagName = tagNamesToDisplayTagNames.get(prettyTagName);
+        ArrayPush$1.call(result, [displayTagName, ArrayJoin.call(ArraySort.call([...keys]), ', ')]);
+    }
+    return result;
+}
+function getTooltipText(measureName, opId) {
+    return `${measureName} - ${operationTooltipMapping[opId]}`;
+}
 /** Indicates if operations should be logged via the User Timing API. */
 const isMeasureEnabled = process.env.NODE_ENV !== 'production';
 /** Indicates if operations should be logged by the profiler. */
@@ -5775,30 +5972,61 @@ function logOperationEnd(opId, vm) {
     if (isMeasureEnabled) {
         const markName = getMarkName(opId, vm);
         const measureName = getMeasureName(opId, vm);
-        end(measureName, markName);
+        end(measureName, markName, {
+            color: opId === 1 /* OperationId.Render */ ? 'primary' : 'secondary',
+            tooltipText: getTooltipText(measureName, opId),
+            properties: getProperties(vm),
+        });
     }
     if (isProfilerEnabled) {
         currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
 }
-function logGlobalOperationStart(opId, vm) {
+function logGlobalOperationStart(opId) {
     if (isMeasureEnabled) {
-        const opName = getOperationName(opId);
-        const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
+        const markName = getOperationName(opId);
+        start(markName);
+    }
+    if (isProfilerEnabled) {
+        currentDispatcher(opId, 0 /* Phase.Start */);
+    }
+}
+function logGlobalOperationStartWithVM(opId, vm) {
+    if (isMeasureEnabled) {
+        const markName = getMarkName(opId, vm);
         start(markName);
     }
     if (isProfilerEnabled) {
-        currentDispatcher(opId, 0 /* Phase.Start */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+        currentDispatcher(opId, 0 /* Phase.Start */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
+    }
+}
+function logGlobalOperationEnd(opId, mutationLogs) {
+    if (isMeasureEnabled) {
+        const opName = getOperationName(opId);
+        const markName = opName;
+        end(opName, markName, {
+            // not really an error, but we want to draw attention to re-renders since folks may want to debug it
+            color: 'error',
+            tooltipText: getTooltipText(opName, opId),
+            properties: getMutationProperties(mutationLogs),
+        });
+    }
+    if (isProfilerEnabled) {
+        currentDispatcher(opId, 1 /* Phase.Stop */);
     }
 }
-function logGlobalOperationEnd(opId, vm) {
+function logGlobalOperationEndWithVM(opId, vm) {
     if (isMeasureEnabled) {
         const opName = getOperationName(opId);
-        const markName = isUndefined$1(vm) ? opName : getMarkName(opId, vm);
-        end(opName, markName);
+        const markName = getMarkName(opId, vm);
+        end(opName, markName, {
+            color: 'tertiary',
+            tooltipText: getTooltipText(opName, opId),
+            properties: getProperties(vm),
+        });
     }
     if (isProfilerEnabled) {
-        currentDispatcher(opId, 1 /* Phase.Stop */, vm?.tagName, vm?.idx, vm?.renderMode, vm?.shadowMode);
+        currentDispatcher(opId, 1 /* Phase.Stop */, vm.tagName, vm.idx, vm.renderMode, vm.shadowMode);
     }
 }
 
@@ -5854,6 +6082,12 @@ function getVMBeingRendered() {
 function setVMBeingRendered(vm) {
     vmBeingRendered = vm;
 }
+const VALID_SCOPE_TOKEN_REGEX = /^[a-zA-Z0-9\-_.]+$/;
+// See W-16614556
+// TODO [#2826]: freeze the template object
+function isValidScopeToken(token) {
+    return isString(token) && VALID_SCOPE_TOKEN_REGEX.test(token);
+}
 function validateSlots(vm) {
     assertNotProd(); // this method should never leak to prod
     const { cmpSlots } = vm;
@@ -6006,9 +6240,9 @@ function buildParseFragmentFn(createFragmentFn) {
                 }
             }
             // See W-16614556
-            if ((hasStyleToken && !isString(stylesheetToken)) ||
-                (hasLegacyToken && !isString(legacyStylesheetToken))) {
-                throw new Error('stylesheet token must be a string');
+            if ((hasStyleToken && !isValidScopeToken(stylesheetToken)) ||
+                (hasLegacyToken && !isValidScopeToken(legacyStylesheetToken))) {
+                throw new Error('stylesheet token must be a valid string');
             }
             // If legacy stylesheet tokens are required, then add them to the rendered string
             const stylesheetTokenToRender = stylesheetToken + (hasLegacyToken ? ` ${legacyStylesheetToken}` : '');
@@ -6300,13 +6534,17 @@ function getComponentAPIVersion(Ctor) {
     return apiVersion;
 }
 function getTemplateReactiveObserver(vm) {
-    return createReactiveObserver(() => {
+    const reactiveObserver = createReactiveObserver(() => {
         const { isDirty } = vm;
         if (isFalse(isDirty)) {
             markComponentAsDirty(vm);
             scheduleRehydration(vm);
         }
     });
+    if (process.env.NODE_ENV !== 'production') {
+        associateReactiveObserverWithVM(reactiveObserver, vm);
+    }
+    return reactiveObserver;
 }
 function resetTemplateObserverAndUnsubscribe(vm) {
     const { tro, component } = vm;
@@ -6381,7 +6619,12 @@ function rerenderVM(vm) {
 }
 function connectRootElement(elm) {
     const vm = getAssociatedVM(elm);
-    logGlobalOperationStart(7 /* OperationId.GlobalHydrate */, vm);
+    if (process.env.NODE_ENV !== 'production') {
+        // Flush any logs for this VM so that the initial properties from the constructor don't "count"
+        // in subsequent re-renders (lwc-rehydrate). Right now we're at the first render (lwc-hydrate).
+        flushMutationLogsForVM(vm);
+    }
+    logGlobalOperationStartWithVM(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 */) {
@@ -6389,7 +6632,7 @@ function connectRootElement(elm) {
     }
     runConnectedCallback(vm);
     rehydrate(vm);
-    logGlobalOperationEnd(7 /* OperationId.GlobalHydrate */, vm);
+    logGlobalOperationEndWithVM(7 /* OperationId.GlobalHydrate */, vm);
 }
 function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
@@ -6695,6 +6938,9 @@ function runRenderedCallback(vm) {
 }
 let rehydrateQueue = [];
 function flushRehydrationQueue() {
+    // Gather the logs before rehydration starts so they can be reported at the end of rehydration.
+    // Note that we also clear all existing logs at this point so that subsequent re-renders start from a clean slate.
+    const mutationLogs = process.env.NODE_ENV !== 'production' ? getAndFlushMutationLogs() : undefined;
     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}.`);
@@ -6715,13 +6961,13 @@ function flushRehydrationQueue() {
                 ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, i + 1));
             }
             // we need to end the measure before throwing.
-            logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+            logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
             // 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;
         }
     }
-    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */);
+    logGlobalOperationEnd(8 /* OperationId.GlobalRehydrate */, mutationLogs);
 }
 function runConnectedCallback(vm) {
     const { state } = vm;
@@ -8089,5 +8335,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, setHooks, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 8.0.0-alpha.1 */
+/** version: 8.0.0 */
 //# sourceMappingURL=index.js.map