State persistence working E2E

Author: javiercn

src/Components/Endpoints/src/RazorComponentEndpointInvoker.cs

@@ -121,6 +121,9 @@ await EndpointHtmlRenderer.InitializeStandardComponentServicesAsync(
             await _renderer.SendStreamingUpdatesAsync(context, quiesceTask, bufferWriter);
         }
 
+        var componentStateHtmlContent = await _renderer.PrerenderPersistedStateOnFirstRenderAsync(context);
+        componentStateHtmlContent.WriteTo(bufferWriter, HtmlEncoder.Default);
+
         // Invoke FlushAsync to ensure any buffered content is asynchronously written to the underlying
         // response asynchronously. In the absence of this line, the buffer gets synchronously written to the
         // response as part of the Dispose which has a perf impact.

src/Components/Endpoints/src/Rendering/EndpointHtmlRenderer.PrerenderingState.cs

@@ -2,6 +2,8 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 using System.Text.Encodings.Web;
+using System.Collections;
+using System.Collections.Generic;
 using Microsoft.AspNetCore.Components.Infrastructure;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.DataProtection;
@@ -57,6 +59,37 @@ public async ValueTask<IHtmlContent> PrerenderPersistedStateAsync(HttpContext ht
         return new ComponentStateHtmlContent(store);
     }
 
+    public async ValueTask<IHtmlContent> PrerenderPersistedStateOnFirstRenderAsync(HttpContext httpContext)
+    {
+        SetHttpContext(httpContext);
+
+        var manager = _httpContext.RequestServices.GetRequiredService<ComponentStatePersistenceManager>();
+
+        var serverStore = new ProtectedPrerenderComponentApplicationStore(_httpContext.RequestServices.GetRequiredService<IDataProtectionProvider>());
+        var webAssemblyStore = new PrerenderComponentApplicationStore();
+
+        // In order to avoid running callbacks for auto render mode twice we use composite store
+        //var server = new CopyOnlyStore<ServerRenderMode>();
+        //var auto = new CopyOnlyStore<AutoRenderMode>();
+        //var webAssembly = new CopyOnlyStore<WebAssemblyRenderMode>();
+        //var store = new CompositeStore(server, auto, webAssembly);
+
+        await manager.PersistStateAsync(serverStore, this);
+
+        //foreach (var kvp in auto.Saved)
+        //{
+        //    server.Saved.Add(kvp.Key, kvp.Value);
+        //    webAssembly.Saved.Add(kvp.Key, kvp.Value);
+        //}
+
+        //await Task.WhenAll(
+        //    serverStore.PersistStateAsync(server.Saved),
+        //    webAssemblyStore.PersistStateAsync(webAssembly.Saved));
+
+        return new ComponentStateHtmlContent(serverStore);
+    }
+
+
     // Internal for test only
     internal static void UpdateSaveStateRenderMode(HttpContext httpContext, IComponentRenderMode? mode)
     {
@@ -125,3 +158,47 @@ public void WriteTo(TextWriter writer, HtmlEncoder encoder)
         }
     }
 }
+internal class CompositeStore : IPersistentComponentStateStore, IEnumerable<IPersistentComponentStateStore>
+{
+    public CompositeStore(
+        CopyOnlyStore<ServerRenderMode> server,
+        CopyOnlyStore<AutoRenderMode> auto,
+        CopyOnlyStore<WebAssemblyRenderMode> webassembly)
+    {
+        Server = server;
+        Auto = auto;
+        Webassembly = webassembly;
+    }
+
+    public CopyOnlyStore<ServerRenderMode> Server { get; }
+    public CopyOnlyStore<AutoRenderMode> Auto { get; }
+    public CopyOnlyStore<WebAssemblyRenderMode> Webassembly { get; }
+
+    public IEnumerator<IPersistentComponentStateStore> GetEnumerator()
+    {
+        yield return Server;
+        yield return Auto;
+        yield return Webassembly;
+    }
+
+    public Task<IDictionary<string, byte[]>> GetPersistedStateAsync() => throw new NotImplementedException();
+
+    public Task PersistStateAsync(IReadOnlyDictionary<string, byte[]> state) => Task.CompletedTask;
+
+    IEnumerator IEnumerable.GetEnumerator() => GetEnumerator();
+}
+
+internal class CopyOnlyStore<T> : IPersistentComponentStateStore where T : IComponentRenderMode
+{
+    public Dictionary<string, byte[]> Saved { get; private set; } = new();
+
+    public Task<IDictionary<string, byte[]>> GetPersistedStateAsync() => throw new NotImplementedException();
+
+    public Task PersistStateAsync(IReadOnlyDictionary<string, byte[]> state)
+    {
+        Saved = new Dictionary<string, byte[]>(state);
+        return Task.CompletedTask;
+    }
+
+    public bool SupportsRenderMode(IComponentRenderMode renderMode) => renderMode is T;
+}

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

@@ -25,17 +25,39 @@
     <p>Zip: @Value.BillingAddress.Zip</p>
 }
 
+@if(_persisted)
+{
+    <p>State persisted</p>
+}
+
 @code {
 
+    [Inject] public PersistentComponentState State { get; set; }
+
     public void DisplayCustomer()
     {
         _submitted = true;
     }
 
     [SupplyParameterFromForm] Customer? Value { get; set; }
 
-    protected override void OnInitialized() => Value ??= new();
+    protected override void OnInitialized()
+    {
+        State.RegisterOnPersisting(PersistState);
+        Value ??= new();
+
+        State.TryTakeFromJson<bool>("persisted", out var persisted);
+        _persisted = persisted;
+    }
+
+    private Task PersistState()
+    {
+        State.PersistAsJson("persisted", true);
+        return Task.CompletedTask;
+    }
 
     bool _submitted = false;
+    bool _persisted = false;
+
     public void Submit() => _submitted = true;
 }

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -118,6 +118,5 @@ export function isCircuitAvailable(): boolean {
 }
 
 export function updateServerRootComponents(operations: string): Promise<void>|undefined {
-  const appState = discoverPersistedState(document);
-  return circuit.updateRootComponents(operations, appState);
+  return circuit.updateRootComponents(operations);
 }

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -73,15 +73,11 @@ export class CircuitManager implements DotNet.DotNetCallDispatcher {
     return this._startPromise;
   }
 
-  public updateRootComponents(operations: string, applicationState: string | null | undefined): Promise<void> | undefined {
+  public updateRootComponents(operations: string): Promise<void> | undefined {
     if (!this._firstUpdate) {
       // Only send the application state on the first update.
       this._firstUpdate = true;
-      if (applicationState) {
-        // If there is no app state on the first update, we don't send it afterwards.
-        this._applicationState = applicationState;
-      }
-      return this._connection?.send('UpdateRootComponents', operations, applicationState);
+      return this._connection?.send('UpdateRootComponents', operations, this._applicationState);
     } else {
       return this._connection?.send('UpdateRootComponents', operations);
     }