[blazor][wasm] Dispatch rendering to main thread

AspNetCore.sln

@@ -1326,6 +1326,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "HostedInAspNet.Server", "sr
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "StandaloneApp", "src\Components\WebAssembly\testassets\StandaloneApp\StandaloneApp.csproj", "{A40350FE-4334-4007-B1C3-6BEB1B070309}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ThreadingApp", "src\Components\WebAssembly\testassets\ThreadingApp\ThreadingApp.csproj", "{A40350FE-4334-4007-B1C3-6BEB1B070308}"
+EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "HealthChecks", "HealthChecks", "{C1E7F837-6988-43E2-9E1C-7302DB484F99}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{2A91479A-4ABE-4BB7-9A5E-CA3B9CCFC69E}"

src/Components/Components.slnf

@@ -35,6 +35,7 @@
       "src\\Components\\WebAssembly\\testassets\\HostedInAspNet.Client\\HostedInAspNet.Client.csproj",
       "src\\Components\\WebAssembly\\testassets\\HostedInAspNet.Server\\HostedInAspNet.Server.csproj",
       "src\\Components\\WebAssembly\\testassets\\StandaloneApp\\StandaloneApp.csproj",
+      "src\\Components\\WebAssembly\\testassets\\ThreadingApp\\ThreadingApp.csproj",
       "src\\Components\\WebAssembly\\testassets\\Wasm.Prerendered.Client\\Wasm.Prerendered.Client.csproj",
       "src\\Components\\WebAssembly\\testassets\\Wasm.Prerendered.Server\\Wasm.Prerendered.Server.csproj",
       "src\\Components\\WebAssembly\\testassets\\WasmLinkerTest\\WasmLinkerTest.csproj",

src/Components/Components/src/Rendering/RendererSynchronizationContextDispatcher.cs

@@ -20,6 +20,7 @@ public RendererSynchronizationContextDispatcher()
 
     public override Task InvokeAsync(Action workItem)
     {
+        ArgumentNullException.ThrowIfNull(workItem);
         if (CheckAccess())
         {
             workItem();
@@ -31,6 +32,7 @@ public override Task InvokeAsync(Action workItem)
 
     public override Task InvokeAsync(Func<Task> workItem)
     {
+        ArgumentNullException.ThrowIfNull(workItem);
         if (CheckAccess())
         {
             return workItem();
@@ -41,6 +43,7 @@ public override Task InvokeAsync(Func<Task> workItem)
 
     public override Task<TResult> InvokeAsync<TResult>(Func<TResult> workItem)
     {
+        ArgumentNullException.ThrowIfNull(workItem);
         if (CheckAccess())
         {
             return Task.FromResult(workItem());
@@ -51,6 +54,7 @@ public override Task<TResult> InvokeAsync<TResult>(Func<TResult> workItem)
 
     public override Task<TResult> InvokeAsync<TResult>(Func<Task<TResult>> workItem)
     {
+        ArgumentNullException.ThrowIfNull(workItem);
         if (CheckAccess())
         {
             return workItem();

src/Components/ComponentsNoDeps.slnf

@@ -33,6 +33,7 @@
       "src\\Components\\WebAssembly\\testassets\\HostedInAspNet.Client\\HostedInAspNet.Client.csproj",
       "src\\Components\\WebAssembly\\testassets\\HostedInAspNet.Server\\HostedInAspNet.Server.csproj",
       "src\\Components\\WebAssembly\\testassets\\StandaloneApp\\StandaloneApp.csproj",
+      "src\\Components\\WebAssembly\\testassets\\ThreadingApp\\ThreadingApp.csproj",
       "src\\Components\\WebAssembly\\testassets\\Wasm.Prerendered.Client\\Wasm.Prerendered.Client.csproj",
       "src\\Components\\WebAssembly\\testassets\\Wasm.Prerendered.Server\\Wasm.Prerendered.Server.csproj",
       "src\\Components\\WebAssembly\\testassets\\WasmLinkerTest\\WasmLinkerTest.csproj",

src/Components/README.md

@@ -110,14 +110,14 @@ Please see the [`Build From Source`](https://github.com/dotnet/aspnetcore/blob/m
 
 ##### WebAssembly Trimming
 
-By default, WebAssembly E2E tests that run as part of the CI or when run in Release builds run with trimming enabled. It's possible that tests that successfully run locally might fail as part of the CI run due to errors introduced due to trimming. To test this scenario locally, either run the E2E tests in release build or with the `TestTrimmedApps` property set. For e.g.
+By default, WebAssembly E2E tests that run as part of the CI or when run in Release builds run with trimming enabled. It's possible that tests that successfully run locally might fail as part of the CI run due to errors introduced due to trimming. To test this scenario locally, either run the E2E tests in release build or with the `TestTrimmedOrMultithreadingApps` property set. For e.g.
 
 ```
 dotnet test -c Release
 ```
 or
 ```
-dotnet build /p:TestTrimmedApps=true
+dotnet build /p:TestTrimmedOrMultithreadingApps=true
 dotnet test --no-build
 ```
 

src/Components/WebAssembly/WebAssembly/src/Rendering/WebAssemblyDispatcher.cs

@@ -0,0 +1,135 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+
+namespace Microsoft.AspNetCore.Components.WebAssembly.Rendering;
+
+// When Blazor is deployed with multi-threaded runtime, WebAssemblyDispatcher will help to dispatch all JS interop calls to the main thread.
+// This is necessary because all JS objects have thread affinity. They are only available on the thread (WebWorker) which created them.
+// Also DOM is only available on the main (browser) thread.
+// The calls to InvokeAsync methods are dispatched synchronously and the returned Task is only resolved after the main thread finished the callback.
+internal sealed class WebAssemblyDispatcher : Dispatcher
+{
+    public static readonly Dispatcher Instance = new WebAssemblyDispatcher();
+    private readonly SynchronizationContext? _context;
+
+    private WebAssemblyDispatcher()
+    {
+        // capture the JSSynchronizationContext from the main thread.
+        _context = SynchronizationContext.Current;
+    }
+
+    public override bool CheckAccess() => SynchronizationContext.Current == _context || _context == null;
+
+    public override Task InvokeAsync(Action workItem)
+    {
+        ArgumentNullException.ThrowIfNull(workItem);
+        if (CheckAccess())
+        {
+            workItem();
+            return Task.CompletedTask;
+        }
+
+        _context!.InvokeAsync(workItem);
+        return Task.CompletedTask;
+    }
+
+    public override Task InvokeAsync(Func<Task> workItem)
+    {
+        ArgumentNullException.ThrowIfNull(workItem);
+        if (CheckAccess())
+        {
+            return workItem();
+        }
+
+        return _context!.InvokeAsync(workItem);
+    }
+
+    public override Task<TResult> InvokeAsync<TResult>(Func<TResult> workItem)
+    {
+        ArgumentNullException.ThrowIfNull(workItem);
+        if (CheckAccess())
+        {
+            return Task.FromResult(workItem());
+        }
+
+        return _context!.InvokeAsync(static (workItem) => Task.FromResult(workItem()), workItem);
+    }
+
+    public override Task<TResult> InvokeAsync<TResult>(Func<Task<TResult>> workItem)
+    {
+        ArgumentNullException.ThrowIfNull(workItem);
+        if (CheckAccess())
+        {
+            return workItem();
+        }
+
+        return _context!.InvokeAsync(workItem);
+    }
+}
+
+internal static class SynchronizationContextExtension
+{
+    public static void InvokeAsync(this SynchronizationContext self, Action body)
+    {
+        Exception? exc = default;
+        self.Send((_) =>
+        {
+            try
+            {
+                body();
+            }
+            catch (Exception ex)
+            {
+                exc = ex;
+            }
+        }, null);
+        if (exc != null)
+        {
+            throw exc;
+        }
+    }
+
+    public static TRes InvokeAsync<TRes>(this SynchronizationContext self, Func<TRes> body)
+    {
+        TRes? value = default;
+        Exception? exc = default;
+        self.Send((_) =>
+        {
+            try
+            {
+                value = body();
+            }
+            catch (Exception ex)
+            {
+                exc = ex;
+            }
+        }, null);
+        if (exc != null)
+        {
+            throw exc;
+        }
+        return value!;
+    }
+
+    public static TRes InvokeAsync<T1, TRes>(this SynchronizationContext self, Func<T1, TRes> body, T1 p1)
+    {
+        TRes? value = default;
+        Exception? exc = default;
+        self.Send((_) =>
+        {
+            try
+            {
+                value = body(p1);
+            }
+            catch (Exception ex)
+            {
+                exc = ex;
+            }
+        }, null);
+        if (exc != null)
+        {
+            throw exc;
+        }
+        return value!;
+    }
+}

src/Components/WebAssembly/WebAssembly/src/Rendering/WebAssemblyRenderer.cs

@@ -22,16 +22,21 @@ namespace Microsoft.AspNetCore.Components.WebAssembly.Rendering;
 internal sealed partial class WebAssemblyRenderer : WebRenderer
 {
     private readonly ILogger _logger;
+    private readonly Dispatcher _dispatcher;
 
     public WebAssemblyRenderer(IServiceProvider serviceProvider, ILoggerFactory loggerFactory, JSComponentInterop jsComponentInterop)
         : base(serviceProvider, loggerFactory, DefaultWebAssemblyJSRuntime.Instance.ReadJsonSerializerOptions(), jsComponentInterop)
     {
         _logger = loggerFactory.CreateLogger<WebAssemblyRenderer>();
+        // if SynchronizationContext.Current is not JSSynchronizationContext on main thread, we are in single-threaded flavor of the dotnet wasm runtime or on the server side.
+        _dispatcher = SynchronizationContext.Current == null || SynchronizationContext.Current.GetType().FullName != "System.Runtime.InteropServices.JavaScript.JSSynchronizationContext"
+                        ? NullDispatcher.Instance
+                        : WebAssemblyDispatcher.Instance;
 
         ElementReferenceContext = DefaultWebAssemblyJSRuntime.Instance.ElementReferenceContext;
     }
 
-    public override Dispatcher Dispatcher => NullDispatcher.Instance;
+    public override Dispatcher Dispatcher => _dispatcher;
 
     public Task AddComponentAsync([DynamicallyAccessedMembers(Component)] Type componentType, ParameterView parameters, string domElementSelector)
     {

src/Components/WebAssembly/testassets/ThreadingApp/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(ThreadingApp.Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <h2>Not found</h2>
+            Sorry, there's nothing at this address.
+        </LayoutView>
+    </NotFound>
+</Router>

src/Components/WebAssembly/testassets/ThreadingApp/Pages/Counter.razor

@@ -0,0 +1,79 @@
+@page "/counter"
+@using System.Runtime.InteropServices
+
+<h1>Counter</h1>
+
+<p>Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    int currentCount = 0;
+
+    void IncrementCount()
+    {
+        currentCount++;
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if(!OperatingSystem.IsBrowser())
+        {
+            return;
+        }
+
+        if (Thread.CurrentThread.ManagedThreadId != 1)
+        {
+            throw new Exception("We should be on main thread!");
+        }
+
+        Exception exc = null;
+        try
+        {
+            // send me to the thread pool
+            await Task.Delay(10).ConfigureAwait(false);
+            StateHasChanged(); // render should throw
+        }
+        catch(Exception ex)
+        {
+            exc=ex;
+            Console.WriteLine(ex.Message);
+        }
+        if (exc == null || exc.Message != "The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.")
+        {
+            throw new Exception("We should have thrown here!");
+        }
+
+        // test that we could create new thread
+        var tcs = new TaskCompletionSource<int>();
+        var t = new Thread(() => {
+            tcs.SetResult(Thread.CurrentThread.ManagedThreadId);
+        });
+        t.Start();
+        var newThreadId = await tcs.Task;
+        if (newThreadId == 1){
+            throw new Exception("We should be on new thread in the callback!");
+        }
+
+        new Timer(async (state) =>
+        {
+            // send me to the thread pool
+            await Task.Delay(10).ConfigureAwait(false);
+            if (Thread.CurrentThread.ManagedThreadId == 1)
+            {
+                throw new Exception("We should be on thread pool thread!");
+            }
+
+            await InvokeAsync(() =>
+            {
+                if (Thread.CurrentThread.ManagedThreadId != 1)
+                {
+                    throw new Exception("We should be on main thread again!");
+                }
+                // we are back on main thread
+                IncrementCount();
+                StateHasChanged(); // render!
+            });
+        }, null, 0, 100);
+    }
+}