Key support. Implements #8232 (#9850)

* Store component/element keys on RenderTreeFrame

Also refactored how RenderTreeFrame gets constructed. The previous arrangement of having ad-hoc ctor overloads for different scenarios became intractible (too many combinations to avoid clashes; risk of accidentally losing field values when cloning). There's now one constructor per RenderTreeFrameType, so you always know where to add any new field values, and implicitly guarantees you don't lose other field values because adding a new param forces updates at all the call sites.

* Add StackObjectPool, which will be useful momentarily

* Support keyed insertions/deletions

* Refactor AppendDiffEntriesForRange to prepare for adding "move" logic

* Apply permutations on the JS side

* Handle keyed moves by writing a post-edit permutation list

* Shrink KeyedItemInfo struct

* Include sourcemaps when building client-side Blazor apps with ReferenceFromSource

* Update struct length of edit frames now it's explicit layout

It's longer now because all the reference-type fields, except the last, now have to be 8 bytes for compatibility with 64-bit runtimes. Previously on Mono WebAssembly the reference-type fields were all 4 bytes.

* Tolerate clashing keys (i.e., produce a valid diff, even if suboptimal)

* Tolerate keys being added/removed incorrectly

* E2E test harness for 'key'

* Some more unit test cases

* Invert diffing logic to prefer matching by key over sequence

Previously it preferred sequence over key, but that's wrong, and surfaces as bugs when you mix keyed and unkeyed items. We need to prefer key over sequence, because key is meant to guarantee preservation, whereas sequence is just best-effort preservation.

* Make unit test cases more adversarial

* First actual E2E test

* In E2E test, verify correct preservation of components

* E2E tests for simple insert/delete cases (with and without keys)

* E2E test for reordering. Also extend other tests to verify simultaneous editing.

* E2E test for many simultaneous changes

* Update reference sources

* CR: Avoid x = y = z

* CR: Only use 'finally' for actual cleanup

* CR: Clean up RenderTreeFrame assignment

* CR: Include 'key' in RenderTreeFrame.ToString()

* CR: Avoid "new T()" in StackObjectPool

* CR: Make KeyedItemInfo readonly

* CR: Handle change of frame type with matching keys (and sequence)

* CR: Add E2E test showing form + key scenarios

* Preserve focus across edits

* Tweak E2E test case

* In client-side Blazor, prevent recursive event handler invocations

* Actual E2E tests for moving form elements

Author: SteveSandersonMS

src/Components/Blazor/Build/src/ReferenceFromSource.props

@@ -11,7 +11,7 @@
 
   <PropertyGroup>
     <BlazorBuildReferenceFromSource>true</BlazorBuildReferenceFromSource>
-    <BlazorJsPath>$(RepositoryRoot)src\Components\Browser.JS\dist\$(Configuration)\blazor.*.js</BlazorJsPath>
+    <BlazorJsPath>$(RepositoryRoot)src\Components\Browser.JS\dist\$(Configuration)\blazor.*.js.*</BlazorJsPath>
   </PropertyGroup>
 
   <Import Project="$(MSBuildThisFileDirectory)targets/All.props" />

src/Components/Browser.JS/dist/Debug/blazor.server.js

@@ -13263,7 +13263,13 @@ var BrowserRenderer = /** @class */ (function () {
                 clearBetween(rootElementToClear, rootElementToClearEnd);
             }
         }
+        var ownerDocument = LogicalElements_1.getClosestDomElement(element).ownerDocument;
+        var activeElementBefore = ownerDocument && ownerDocument.activeElement;
         this.applyEdits(batch, element, 0, edits, referenceFrames);
+        // Try to restore focus in case it was lost due to an element move
+        if ((activeElementBefore instanceof HTMLElement) && ownerDocument && ownerDocument.activeElement !== activeElementBefore) {
+            activeElementBefore.focus();
+        }
     };
     BrowserRenderer.prototype.disposeComponent = function (componentId) {
         delete this.childComponentLocations[componentId];
@@ -13277,6 +13283,7 @@ var BrowserRenderer = /** @class */ (function () {
     BrowserRenderer.prototype.applyEdits = function (batch, parent, childIndex, edits, referenceFrames) {
         var currentDepth = 0;
         var childIndexAtCurrentDepth = childIndex;
+        var permutationList;
         var arraySegmentReader = batch.arraySegmentReader;
         var editReader = batch.editReader;
         var frameReader = batch.frameReader;
@@ -13365,6 +13372,19 @@ var BrowserRenderer = /** @class */ (function () {
                     childIndexAtCurrentDepth = currentDepth === 0 ? childIndex : 0; // The childIndex is only ever nonzero at zero depth
                     break;
                 }
+                case RenderBatch_1.EditType.permutationListEntry: {
+                    permutationList = permutationList || [];
+                    permutationList.push({
+                        fromSiblingIndex: childIndexAtCurrentDepth + editReader.siblingIndex(edit),
+                        toSiblingIndex: childIndexAtCurrentDepth + editReader.moveToSiblingIndex(edit),
+                    });
+                    break;
+                }
+                case RenderBatch_1.EditType.permutationListEnd: {
+                    LogicalElements_1.permuteLogicalChildren(parent, permutationList);
+                    permutationList = undefined;
+                    break;
+                }
                 default: {
                     var unknownType = editType; // Compile-time verification that the switch was exhaustive
                     throw new Error("Unknown edit type: " + unknownType);
@@ -14169,11 +14189,54 @@ function getLogicalChildrenArray(element) {
     return element[logicalChildrenPropname];
 }
 exports.getLogicalChildrenArray = getLogicalChildrenArray;
-function getLogicalNextSibling(element) {
-    var siblings = getLogicalChildrenArray(getLogicalParent(element));
-    var siblingIndex = Array.prototype.indexOf.call(siblings, element);
-    return siblings[siblingIndex + 1] || null;
+function permuteLogicalChildren(parent, permutationList) {
+    // The permutationList must represent a valid permutation, i.e., the list of 'from' indices
+    // is distinct, and the list of 'to' indices is a permutation of it. The algorithm here
+    // relies on that assumption.
+    // Each of the phases here has to happen separately, because each one is designed not to
+    // interfere with the indices or DOM entries used by subsequent phases.
+    // Phase 1: track which nodes we will move
+    var siblings = getLogicalChildrenArray(parent);
+    permutationList.forEach(function (listEntry) {
+        listEntry.moveRangeStart = siblings[listEntry.fromSiblingIndex];
+        listEntry.moveRangeEnd = findLastDomNodeInRange(listEntry.moveRangeStart);
+    });
+    // Phase 2: insert markers
+    permutationList.forEach(function (listEntry) {
+        var marker = listEntry.moveToBeforeMarker = document.createComment('marker');
+        var insertBeforeNode = siblings[listEntry.toSiblingIndex + 1];
+        if (insertBeforeNode) {
+            insertBeforeNode.parentNode.insertBefore(marker, insertBeforeNode);
+        }
+        else {
+            appendDomNode(marker, parent);
+        }
+    });
+    // Phase 3: move descendants & remove markers
+    permutationList.forEach(function (listEntry) {
+        var insertBefore = listEntry.moveToBeforeMarker;
+        var parentDomNode = insertBefore.parentNode;
+        var elementToMove = listEntry.moveRangeStart;
+        var moveEndNode = listEntry.moveRangeEnd;
+        var nextToMove = elementToMove;
+        while (nextToMove) {
+            var nextNext = nextToMove.nextSibling;
+            parentDomNode.insertBefore(nextToMove, insertBefore);
+            if (nextToMove === moveEndNode) {
+                break;
+            }
+            else {
+                nextToMove = nextNext;
+            }
+        }
+        parentDomNode.removeChild(insertBefore);
+    });
+    // Phase 4: update siblings index
+    permutationList.forEach(function (listEntry) {
+        siblings[listEntry.toSiblingIndex] = listEntry.moveRangeStart;
+    });
 }
+exports.permuteLogicalChildren = permuteLogicalChildren;
 function getClosestDomElement(logicalElement) {
     if (logicalElement instanceof Element) {
         return logicalElement;
@@ -14185,6 +14248,12 @@ function getClosestDomElement(logicalElement) {
         throw new Error('Not a valid logical element');
     }
 }
+exports.getClosestDomElement = getClosestDomElement;
+function getLogicalNextSibling(element) {
+    var siblings = getLogicalChildrenArray(getLogicalParent(element));
+    var siblingIndex = Array.prototype.indexOf.call(siblings, element);
+    return siblings[siblingIndex + 1] || null;
+}
 function appendDomNode(child, parent) {
     // This function only puts 'child' into the DOM in the right place relative to 'parent'
     // It does not update the logical children array of anything
@@ -14208,6 +14277,26 @@ function appendDomNode(child, parent) {
         throw new Error("Cannot append node because the parent is not a valid logical element. Parent: " + parent);
     }
 }
+// Returns the final node (in depth-first evaluation order) that is a descendant of the logical element.
+// As such, the entire subtree is between 'element' and 'findLastDomNodeInRange(element)' inclusive.
+function findLastDomNodeInRange(element) {
+    if (element instanceof Element) {
+        return element;
+    }
+    var nextSibling = getLogicalNextSibling(element);
+    if (nextSibling) {
+        // Simple case: not the last logical sibling, so take the node before the next sibling
+        return nextSibling.previousSibling;
+    }
+    else {
+        // Harder case: there's no logical next-sibling, so recurse upwards until we find
+        // a logical ancestor that does have one, or a physical element
+        var logicalParent = getLogicalParent(element);
+        return logicalParent instanceof Element
+            ? logicalParent.lastChild
+            : findLastDomNodeInRange(logicalParent);
+    }
+}
 function createSymbolOrFallback(fallback) {
     return typeof Symbol === 'function' ? Symbol() : fallback;
 }
@@ -14303,6 +14392,9 @@ var OutOfProcessRenderTreeEditReader = /** @class */ (function () {
     OutOfProcessRenderTreeEditReader.prototype.newTreeIndex = function (edit) {
         return readInt32LE(this.batchDataUint8, edit + 8); // 3rd int
     };
+    OutOfProcessRenderTreeEditReader.prototype.moveToSiblingIndex = function (edit) {
+        return readInt32LE(this.batchDataUint8, edit + 8); // 3rd int
+    };
     OutOfProcessRenderTreeEditReader.prototype.removedAttributeName = function (edit) {
         var stringIndex = readInt32LE(this.batchDataUint8, edit + 12); // 4th int
         return this.stringReader.readString(stringIndex);
@@ -14458,6 +14550,8 @@ var EditType;
     EditType[EditType["stepIn"] = 6] = "stepIn";
     EditType[EditType["stepOut"] = 7] = "stepOut";
     EditType[EditType["updateMarkup"] = 8] = "updateMarkup";
+    EditType[EditType["permutationListEntry"] = 9] = "permutationListEntry";
+    EditType[EditType["permutationListEnd"] = 10] = "permutationListEnd";
 })(EditType = exports.EditType || (exports.EditType = {}));
 var FrameType;
 (function (FrameType) {

src/Components/Browser.JS/dist/Debug/blazor.webassembly.js

@@ -1,7 +1,7 @@
 import { RenderBatch, ArraySegment, RenderTreeEdit, RenderTreeFrame, EditType, FrameType, ArrayValues } from './RenderBatch/RenderBatch';
 import { EventDelegator } from './EventDelegator';
 import { EventForDotNet, UIEventArgs } from './EventForDotNet';
-import { LogicalElement, toLogicalElement, insertLogicalChild, removeLogicalChild, getLogicalParent, getLogicalChild, createAndInsertLogicalContainer, isSvgElement, getLogicalChildrenArray, getLogicalSiblingEnd } from './LogicalElements';
+import { LogicalElement, PermutationListEntry, toLogicalElement, insertLogicalChild, removeLogicalChild, getLogicalParent, getLogicalChild, createAndInsertLogicalContainer, isSvgElement, getLogicalChildrenArray, getLogicalSiblingEnd, permuteLogicalChildren, getClosestDomElement } from './LogicalElements';
 import { applyCaptureIdToElement } from './ElementReferenceCapture';
 const selectValuePropname = '_blazorSelectValue';
 const sharedTemplateElemForParsing = document.createElement('template');
@@ -47,7 +47,15 @@ export class BrowserRenderer {
       }
     }
 
+    const ownerDocument = getClosestDomElement(element).ownerDocument;
+    const activeElementBefore = ownerDocument && ownerDocument.activeElement;
+
     this.applyEdits(batch, element, 0, edits, referenceFrames);
+
+    // Try to restore focus in case it was lost due to an element move
+    if ((activeElementBefore instanceof HTMLElement) && ownerDocument && ownerDocument.activeElement !== activeElementBefore) {
+      activeElementBefore.focus();
+    }
   }
 
   public disposeComponent(componentId: number) {
@@ -65,6 +73,7 @@ export class BrowserRenderer {
   private applyEdits(batch: RenderBatch, parent: LogicalElement, childIndex: number, edits: ArraySegment<RenderTreeEdit>, referenceFrames: ArrayValues<RenderTreeFrame>) {
     let currentDepth = 0;
     let childIndexAtCurrentDepth = childIndex;
+    let permutationList: PermutationListEntry[] | undefined;
 
     const arraySegmentReader = batch.arraySegmentReader;
     const editReader = batch.editReader;
@@ -152,6 +161,19 @@ export class BrowserRenderer {
           childIndexAtCurrentDepth = currentDepth === 0 ? childIndex : 0; // The childIndex is only ever nonzero at zero depth
           break;
         }
+        case EditType.permutationListEntry: {
+          permutationList = permutationList || [];
+          permutationList.push({
+            fromSiblingIndex: childIndexAtCurrentDepth + editReader.siblingIndex(edit),
+            toSiblingIndex: childIndexAtCurrentDepth + editReader.moveToSiblingIndex(edit),
+          });
+          break;
+        }
+        case EditType.permutationListEnd: {
+          permuteLogicalChildren(parent, permutationList!);
+          permutationList = undefined;
+          break;
+        }
         default: {
           const unknownType: never = editType; // Compile-time verification that the switch was exhaustive
           throw new Error(`Unknown edit type: ${unknownType}`);