Basic virtualization prototype.

Author: MackinnonBuck

AspNetCore.sln

@@ -1430,12 +1430,20 @@ EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Sdk", "Sdk", "{FED4267E-E5E4-49C5-98DB-8B3F203596EE}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Microsoft.NET.Sdk.BlazorWebAssembly", "src\Components\WebAssembly\Sdk\src\Microsoft.NET.Sdk.BlazorWebAssembly.csproj", "{6B2734BF-C61D-4889-ABBF-456A4075D59B}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BasicTestApp", "src\Components\test\testassets\BasicTestApp\BasicTestApp.csproj", "{46FB7E93-1294-4068-B80A-D4864F78277A}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Microsoft.NET.Sdk.BlazorWebAssembly.Tests", "src\Components\WebAssembly\Sdk\test\Microsoft.NET.Sdk.BlazorWebAssembly.Tests.csproj", "{83371889-9A3E-4D16-AE77-EB4F83BC6374}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Microsoft.NET.Sdk.BlazorWebAssembly.IntegrationTests", "src\Components\WebAssembly\Sdk\integrationtests\Microsoft.NET.Sdk.BlazorWebAssembly.IntegrationTests.csproj", "{525EBCB4-A870-470B-BC90-845306C337D1}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Microsoft.NET.Sdk.BlazorWebAssembly.Tools", "src\Components\WebAssembly\Sdk\tools\Microsoft.NET.Sdk.BlazorWebAssembly.Tools.csproj", "{175E5CD8-92D4-46BB-882E-3A930D3302D4}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ComponentsApp.Server", "src\Components\test\testassets\ComponentsApp.Server\ComponentsApp.Server.csproj", "{19974360-4A63-425A-94DB-C2C940A3A97A}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "LazyTestContentPackage", "src\Components\test\testassets\LazyTestContentPackage\LazyTestContentPackage.csproj", "{ADF9C126-F322-4E34-AFD3-E626A4487206}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TestContentPackage", "src\Components\test\testassets\TestContentPackage\TestContentPackage.csproj", "{3D3C7D9B-E356-4DC6-80B1-3F6D7F15EE31}"
+EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Components.TestServer", "src\Components\test\testassets\TestServer\Components.TestServer.csproj", "{8A59AF88-4A82-46ED-977D-D909001F8107}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

src/Components/Components/src/Virtualization/VirtualizeBase.cs

@@ -0,0 +1,93 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Microsoft.AspNetCore.Components.Rendering;
+
+namespace Microsoft.AspNetCore.Components.Virtualization
+{
+    public abstract class VirtualizeBase<TItem> : ComponentBase
+    {
+        private int _itemsAbove;
+
+        private int _itemsVisible;
+
+        private int _itemsBelow;
+
+        protected ElementReference TopSpacer { get; private set; }
+
+        protected ElementReference BottomSpacer { get; private set; }
+
+        [Parameter]
+        public ICollection<TItem> Items { get; set; } = default!;
+
+        [Parameter]
+        public float ItemSize { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem>? ChildContent { get; set; }
+
+        protected override void OnParametersSet()
+        {
+            if (Items == null)
+            {
+                throw new InvalidOperationException(
+                    $"Parameter '{nameof(Items)}' must be specified and non-null.");
+            }
+
+            if (ItemSize <= 0f)
+            {
+                throw new InvalidOperationException(
+                    $"Parameter '{nameof(ItemSize)}' must be specified and greater than zero.");
+            }
+
+            _itemsBelow = Items.Count;
+        }
+
+        protected void UpdateTopSpacer(float spacerSize, float containerSize)
+            => CalculateSpacerItemDistribution(spacerSize, containerSize, out _itemsAbove, out _itemsBelow);
+
+        protected void UpdateBottomSpacer(float spacerSize, float containerSize)
+            => CalculateSpacerItemDistribution(spacerSize, containerSize, out _itemsBelow, out _itemsAbove);
+
+        private void CalculateSpacerItemDistribution(float spacerSize, float containerSize, out int itemsInThisSpacer, out int itemsInOtherSpacer)
+        {
+            _itemsVisible = (int)(containerSize / ItemSize) + 1; // TODO: Custom number of "padding" elements?
+            itemsInThisSpacer = (int)(spacerSize / ItemSize);
+            itemsInOtherSpacer = Items.Count - itemsInThisSpacer - _itemsVisible;
+
+            StateHasChanged();
+        }
+
+        private string GetSpacerStyle(int itemsInSpacer)
+        {
+            return $"height: {itemsInSpacer * ItemSize}px;";
+        }
+
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            builder.OpenElement(0, "div");
+            builder.AddAttribute(1, "key", "top-spacer");
+            builder.AddAttribute(2, "style", GetSpacerStyle(_itemsAbove));
+            builder.AddElementReferenceCapture(3, elementReference => TopSpacer = elementReference);
+            builder.CloseElement();
+
+            if (ChildContent != null)
+            {
+                builder.AddContent(4, new RenderFragment(builder =>
+                {
+                    foreach (var item in Items.Skip(_itemsAbove).Take(_itemsVisible))
+                    {
+                        ChildContent(item)?.Invoke(builder);
+                    }
+                }));
+            }
+
+            builder.OpenElement(5, "div");
+            builder.AddAttribute(6, "key", "bottom-spacer");
+            builder.AddAttribute(7, "style", GetSpacerStyle(_itemsBelow));
+            builder.AddElementReferenceCapture(8, elementReference =>
+                BottomSpacer = elementReference);
+            builder.CloseElement();
+        }
+    }
+}

src/Components/Web.JS/src/GlobalExports.ts

@@ -2,6 +2,7 @@ import { navigateTo, internalFunctions as navigationManagerInternalFunctions } f
 import { attachRootComponentToElement } from './Rendering/Renderer';
 import { domFunctions } from './DomWrapper';
 import { setProfilingEnabled } from './Platform/Profiling';
+import { Virtualize } from './Virtualize';
 
 // Make the following APIs available in global scope for invocation from JS
 window['Blazor'] = {
@@ -12,5 +13,6 @@ window['Blazor'] = {
     navigationManager: navigationManagerInternalFunctions,
     domWrapper: domFunctions,
     setProfilingEnabled: setProfilingEnabled,
+    Virtualize,
   },
 };

src/Components/Web.JS/src/Virtualize.ts

@@ -0,0 +1,54 @@
+function findClosestScrollContainer(element: Element | null): Element | null {
+  if (!element) {
+    return null;
+  }
+
+  const style = getComputedStyle(element);
+
+  if (style.overflowY !== 'visible') {
+    return element;
+  }
+
+  return findClosestScrollContainer(element.parentElement);
+}
+
+function init(component: any, topSpacer: Element, bottomSpacer: Element, rootMargin = 50): void {
+  const intersectionObserver = new IntersectionObserver(intersectionCallback, {
+    root: findClosestScrollContainer(topSpacer),
+    rootMargin: `${rootMargin}px`,
+  });
+
+  intersectionObserver.observe(topSpacer);
+  intersectionObserver.observe(bottomSpacer);
+
+  const mutationObserver = new MutationObserver((): void => {
+    intersectionObserver.unobserve(topSpacer);
+    intersectionObserver.unobserve(bottomSpacer);
+    intersectionObserver.observe(topSpacer);
+    intersectionObserver.observe(bottomSpacer);
+  });
+
+  mutationObserver.observe(topSpacer, { attributes: true });
+
+  function intersectionCallback(entries: IntersectionObserverEntry[]): void {
+    entries.forEach((entry): void => {
+      if (!entry.isIntersecting) {
+        return;
+      }
+
+      const containerSize = entry.rootBounds?.height;
+
+      if (entry.target === topSpacer) {
+        component.invokeMethodAsync('OnTopSpacerVisible', entry.intersectionRect.top - entry.boundingClientRect.top, containerSize);
+      } else if (entry.target === bottomSpacer) {
+        component.invokeMethodAsync('OnBottomSpacerVisible', entry.boundingClientRect.bottom - entry.intersectionRect.bottom, containerSize);
+      } else {
+        throw new Error('Unknown intersection target');
+      }
+    });
+  }
+}
+
+export const Virtualize = {
+  init,
+};

src/Components/Web/src/Virtualization/Virtualize.cs

@@ -0,0 +1,40 @@
+using System;
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Microsoft.AspNetCore.Components.Virtualization
+{
+    public class Virtualize<TItem> : VirtualizeBase<TItem>, IDisposable
+    {
+        private DotNetObjectReference<Virtualize<TItem>>? _selfReference;
+
+        [Inject]
+        private IJSRuntime JSRuntime { get; set; } = default!;
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                _selfReference = DotNetObjectReference.Create(this);
+                await JSRuntime.InvokeVoidAsync("Blazor._internal.Virtualize.init", _selfReference, TopSpacer, BottomSpacer);
+            }
+        }
+
+        [JSInvokable]
+        public void OnTopSpacerVisible(float spacerSize, float containerSize)
+        {
+            UpdateTopSpacer(spacerSize, containerSize);
+        }
+
+        [JSInvokable]
+        public void OnBottomSpacerVisible(float spacerSize, float containerSize)
+        {
+            UpdateBottomSpacer(spacerSize, containerSize);
+        }
+
+        public void Dispose()
+        {
+            _selfReference?.Dispose();
+        }
+    }
+}

src/Components/test/testassets/BasicTestApp/Index.razor

@@ -81,6 +81,7 @@
         <option value="BasicTestApp.SvgWithChildComponent">SVG with child component</option>
         <option value="BasicTestApp.TextOnlyComponent">Plain text</option>
         <option value="BasicTestApp.TouchEventComponent">Touch events</option>
+        <option value="BasicTestApp.VirtualizationComponent">Virtualization</option>
         <option value="BasicTestApp.SelectVariantsComponent">Select with component options</option>
     </select>
 

src/Components/test/testassets/BasicTestApp/VirtualizationComponent.razor

@@ -0,0 +1,19 @@
+@using Microsoft.AspNetCore.Components.Virtualization
+
+<input type="number" @bind-value="itemSize" />
+
+<div style="background-color: #eee; height: 500px; overflow-y: auto">
+    <Virtualize Items="@Items" ItemSize="itemSize">
+        <div @key="@context" style="height: @(itemSize)px; background-color: rgb(@((context % 2) * 255), @((1-(context % 2)) * 255), 255);">Item @context</div>
+    </Virtualize>
+    <Virtualize Items="@Items" ItemSize="itemSize">
+        <div @key="@context" style="height: @(itemSize)px; background-color: rgb(0, @((context % 2) * 255), @((1-(context % 2)) * 255));">Item @context</div>
+    </Virtualize>
+</div>
+
+
+@code {
+    int itemSize = 100;
+    Random rng = new Random();
+    ICollection<int> Items = Enumerable.Range(1, 1000).ToList();
+}