@lwc/engine-core 8.1.0-alpha.4 → 8.1.0

package/dist/index.cjs.js

@@ -293,6 +293,26 @@ function shouldBeFormAssociated(Ctor) {
 const reactiveObserversToVMs = new WeakMap();
 const targetsToPropertyKeys = new WeakMap();
 let mutationLogs = [];
+// Create a human-readable member access notation like `obj.foo` or `arr[1]`,
+// handling edge cases like `obj[Symbol("bar")]` and `obj["spaces here"]`
+function toPrettyMemberNotation(parent, child) {
+    if (shared.isUndefined(parent)) {
+        // Bare prop, just stringify the child
+        return shared.toString(child);
+    }
+    else if (!shared.isString(child)) {
+        // Symbol/number, e.g. `obj[Symbol("foo")]` or `obj[1234]`
+        return `${shared.toString(parent)}[${shared.toString(child)}]`;
+    }
+    else if (/^\w+$/.test(child)) {
+        // Dot-notation-safe string, e.g. `obj.foo`
+        return `${shared.toString(parent)}.${child}`;
+    }
+    else {
+        // Bracket-notation-requiring string, e.g. `obj["prop with spaces"]`
+        return `${shared.toString(parent)}[${JSON.stringify(child)}]`;
+    }
+}
 /**
  * Flush all the logs we've written so far and return the current logs.
  */
@@ -323,23 +343,7 @@ function logMutation(reactiveObserver, target, key) {
         }
     }
     else {
-        const stringKey = shared.toString(key);
-        let prop;
-        if (shared.isUndefined(parentKey)) {
-            prop = stringKey;
-        }
-        else if (!shared.isString(key)) {
-            // symbol/number, e.g. `obj[Symbol("foo")]` or `obj[1234]`
-            prop = `${shared.toString(parentKey)}[${stringKey}]`;
-        }
-        else if (/^\w+$/.test(stringKey)) {
-            // Human-readable prop like `items[0].name` on a deep object/array
-            prop = `${shared.toString(parentKey)}.${stringKey}`;
-        }
-        else {
-            // e.g. `obj["prop with spaces"]`
-            prop = `${shared.toString(parentKey)}[${JSON.stringify(stringKey)}]`;
-        }
+        const prop = toPrettyMemberNotation(parentKey, key);
         shared.ArrayPush.call(mutationLogs, { vm, prop });
     }
 }
@@ -377,7 +381,7 @@ function trackTargetForMutationLogging(key, target) {
         // Deeply traverse arrays and objects to track every object within
         if (shared.isArray(target)) {
             for (let i = 0; i < target.length; i++) {
-                trackTargetForMutationLogging(`${shared.toString(key)}[${i}]`, target[i]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, i), target[i]);
             }
         }
         else {
@@ -386,10 +390,10 @@ function trackTargetForMutationLogging(key, target) {
             // https://github.com/salesforce/observable-membrane/blob/b85417f/src/base-handler.ts#L142-L143
             // Note this code path is very hot, hence doing two separate for-loops rather than creating a new array.
             for (const prop of shared.getOwnPropertyNames(target)) {
-                trackTargetForMutationLogging(`${shared.toString(key)}.${shared.toString(prop)}`, target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
             }
             for (const prop of shared.getOwnPropertySymbols(target)) {
-                trackTargetForMutationLogging(`${shared.toString(key)}[${shared.toString(prop)}]`, target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
             }
         }
     }
@@ -5902,6 +5906,22 @@ function getProperties(vm) {
         ['Shadow Mode', vm.shadowMode === 0 /* ShadowMode.Native */ ? 'native' : 'synthetic'],
     ];
 }
+function getColor(opId) {
+    // As of Sept 2024: primary (dark blue), secondary (light blue), tertiary (green)
+    switch (opId) {
+        // GlobalHydrate and Constructor tend to occur at the top level
+        case 7 /* OperationId.GlobalHydrate */:
+        case 0 /* OperationId.Constructor */:
+            return 'primary';
+        // GlobalRehydrate also occurs at the top level, but we want to use tertiary (green) because it's easier to
+        // distinguish from primary, and at a glance you should be able to easily tell re-renders from first renders.
+        case 8 /* OperationId.GlobalRehydrate */:
+            return 'tertiary';
+        // Everything else (patch/render/callbacks)
+        default:
+            return 'secondary';
+    }
+}
 // 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) {
@@ -5992,7 +6012,7 @@ function logOperationEnd(opId, vm) {
         const markName = getMarkName(opId, vm);
         const measureName = getMeasureName(opId, vm);
         end(measureName, markName, {
-            color: opId === 1 /* OperationId.Render */ ? 'primary' : 'secondary',
+            color: getColor(opId),
             tooltipText: getTooltipText(measureName, opId),
             properties: getProperties(vm),
         });
@@ -6024,7 +6044,7 @@ function logGlobalOperationEnd(opId, mutationLogs) {
         const opName = getOperationName(opId);
         const markName = opName;
         end(opName, markName, {
-            color: 'tertiary',
+            color: getColor(opId),
             tooltipText: getTooltipText(opName, opId),
             properties: getMutationProperties(mutationLogs),
         });
@@ -6038,7 +6058,7 @@ function logGlobalOperationEndWithVM(opId, vm) {
         const opName = getOperationName(opId);
         const markName = getMarkName(opId, vm);
         end(opName, markName, {
-            color: 'tertiary',
+            color: getColor(opId),
             tooltipText: getTooltipText(opName, opId),
             properties: getProperties(vm),
         });
@@ -8396,5 +8416,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.1.0-alpha.4 */
+/** version: 8.1.0 */
 //# sourceMappingURL=index.cjs.js.map