Working WIP implementation

Author: oroztocil

src/Components/Components/src/RenderTree/RenderTreeDiffBuilder.cs

@@ -38,7 +38,7 @@ public static RenderTreeDiff ComputeDiff(
     }
 
     public static void DisposeFrames(RenderBatchBuilder batchBuilder, int componentId, ArrayRange<RenderTreeFrame> frames)
-        => DisposeFramesInRange(batchBuilder, componentId, frames.Array, 0, frames.Count);
+        => DisposeFramesInRange(batchBuilder, componentId, frames.Array, 0, frames.Count, 0);
 
     private static void AppendDiffEntriesForRange(
         ref DiffContext diffContext,
@@ -867,7 +867,7 @@ private static void RemoveOldFrame(ref DiffContext diffContext, int oldFrameInde
             case RenderTreeFrameType.Element:
                 {
                     var endIndexExcl = oldFrameIndex + oldFrame.ElementSubtreeLengthField;
-                    DisposeFramesInRange(diffContext.BatchBuilder, diffContext.ComponentId, oldTree, oldFrameIndex, endIndexExcl);
+                    DisposeFramesInRange(diffContext.BatchBuilder, diffContext.ComponentId, oldTree, oldFrameIndex, endIndexExcl, diffContext.SiblingIndex);
                     diffContext.Edits.Append(RenderTreeEdit.RemoveFrame(diffContext.SiblingIndex));
                     break;
                 }
@@ -1013,7 +1013,7 @@ private static void InitializeNewNamedEvent(ref DiffContext diffContext, int new
         diffContext.BatchBuilder.AddNamedEvent(diffContext.ComponentId, newTreeFrameIndex, ref diffContext.NewTree[newTreeFrameIndex]);
     }
 
-    private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int componentId, RenderTreeFrame[] frames, int startIndex, int endIndexExcl)
+    private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int componentId, RenderTreeFrame[] frames, int startIndex, int endIndexExcl, int siblingIndex)
     {
         for (var i = startIndex; i < endIndexExcl; i++)
         {
@@ -1022,9 +1022,16 @@ private static void DisposeFramesInRange(RenderBatchBuilder batchBuilder, int co
             {
                 batchBuilder.ComponentDisposalQueue.Enqueue(frame.ComponentIdField);
             }
-            else if (frame.FrameTypeField == RenderTreeFrameType.Attribute && frame.AttributeEventHandlerIdField > 0)
+            else if (frame.FrameTypeField == RenderTreeFrameType.Attribute)
             {
-                batchBuilder.DisposedEventHandlerIds.Append(frame.AttributeEventHandlerIdField);
+                if (frame.AttributeEventHandlerIdField > 0)
+                {
+                    batchBuilder.DisposedEventHandlerIds.Append(frame.AttributeEventHandlerIdField);
+                }
+                else if (frame.AttributeValueField is bool boolValue && boolValue && frame.AttributeNameField.StartsWith("__internal_", StringComparison.Ordinal))
+                {
+                    batchBuilder.EditsBuffer.Append(RenderTreeEdit.RemoveAttribute(siblingIndex, frame.AttributeNameField));
+                }
             }
             else if (frame.FrameTypeField == RenderTreeFrameType.NamedEvent)
             {

src/Components/Samples/BlazorUnitedApp/Pages/Counter.razor

@@ -1,18 +1,49 @@
 @page "/counter"
 @rendermode InteractiveServer
+
 <PageTitle>Counter</PageTitle>
 
 <h1>Counter</h1>
 
 <p role="status">Current count: @currentCount</p>
+<p>showElements: @showElements</p>
+<p>preventDefault: @preventDefault</p>
+
+@if (showElements)
+{
+    <button class="btn btn-primary" @onclick="IncrementCount" @onmousedown:preventDefault="preventDefault">
+        Click me
+    </button>
+}
 
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+<p>
+    <button class="btn btn-secondary" @onclick="ToggleShow">
+        Toggle show
+    </button>
+    <button class="btn btn-secondary" @onclick="TogglePreventDefault">
+        Toggle preventDefault
+    </button>
+</p>
 
 @code {
     private int currentCount = 0;
+    private bool showElements = true;
+    private bool preventDefault = true;
 
     private void IncrementCount()
     {
         currentCount++;
     }
+
+    void ToggleShow()
+    {
+        showElements = !showElements;
+        StateHasChanged();
+    }
+
+    void TogglePreventDefault()
+    {
+        preventDefault = !preventDefault;
+        StateHasChanged();
+    }
 }

src/Components/Web.JS/src/Rendering/Events/EventDelegator.ts

@@ -121,6 +121,11 @@ export class EventDelegator {
       for (const handlerInfo of infosForElement.enumerateHandlers()) {
         this.eventInfoStore.remove(handlerInfo.eventHandlerId);
       }
+
+      for (const eventName of infosForElement.enumeratedEventNamesForEnabledFlags()) {
+        this.eventInfoStore.decrementCountByEventName(eventName);
+      }
+
       delete element[this.eventsCollectionKey];
     }
   }
@@ -135,12 +140,26 @@ export class EventDelegator {
 
   public setStopPropagation(element: Element, eventName: string, value: boolean): void {
     const infoForElement = this.getEventHandlerInfosForElement(element, true)!;
+    const currentValue = infoForElement.stopPropagation(eventName);
     infoForElement.stopPropagation(eventName, value);
+
+    if (!currentValue && value) {
+      this.eventInfoStore.addGlobalListener(eventName);
+    } else if (currentValue && !value) {
+      this.eventInfoStore.decrementCountByEventName(eventName);
+    }
   }
 
   public setPreventDefault(element: Element, eventName: string, value: boolean): void {
     const infoForElement = this.getEventHandlerInfosForElement(element, true)!;
+    const currentValue = infoForElement.preventDefault(eventName);
     infoForElement.preventDefault(eventName, value);
+
+    if (!currentValue && value) {
+      this.eventInfoStore.addGlobalListener(eventName);
+    } else if (currentValue && !value) {
+      this.eventInfoStore.decrementCountByEventName(eventName);
+    }
   }
 
   private onGlobalEvent(evt: Event) {
@@ -298,16 +317,19 @@ class EventInfoStore {
 
       // If this event name is an alias, update the global listener for the corresponding browser event
       const eventName = getBrowserEventName(info.eventName);
-
-      if (--this.countByEventName[eventName] === 0) {
-        delete this.countByEventName[eventName];
-        document.removeEventListener(eventName, this.globalListener);
-      }
+      this.decrementCountByEventName(eventName);
     }
 
     return info;
   }
 
+  public decrementCountByEventName(eventName: string) {
+    if (--this.countByEventName[eventName] === 0) {
+      delete this.countByEventName[eventName];
+      document.removeEventListener(eventName, this.globalListener);
+    }
+  }
+
   private handleEventNameAliasAdded(aliasEventName, browserEventName) {
     // If an event name alias gets registered later, we need to update the global listener
     // registrations to match. This makes it equivalent to the alias having been registered
@@ -338,14 +360,28 @@ class EventHandlerInfosForElement {
 
   private stopPropagationFlags: { [eventName: string]: boolean } | null = null;
 
-  public *enumerateHandlers() : IterableIterator<EventHandlerInfo> {
+  public *enumerateHandlers(): IterableIterator<EventHandlerInfo> {
     for (const eventName in this.handlers) {
       if (Object.prototype.hasOwnProperty.call(this.handlers, eventName)) {
         yield this.handlers[eventName];
       }
     }
   }
 
+  public *enumeratedEventNamesForEnabledFlags(): IterableIterator<string> {
+    for (const eventName in this.preventDefaultFlags) {
+      if (this.preventDefaultFlags[eventName] === true) {
+        yield eventName;
+      }
+    }
+
+    for (const eventName in this.stopPropagationFlags) {
+      if (this.stopPropagationFlags[eventName] === true) {
+        yield eventName;
+      }
+    }
+  }
+
   public getHandler(eventName: string): EventHandlerInfo | null {
     return Object.prototype.hasOwnProperty.call(this.handlers, eventName) ? this.handlers[eventName] : null;
   }