[Blazor][WebView] Abstractions

eng/Build.props

@@ -42,6 +42,15 @@
                       $(RepoRoot)src\Servers\Kestrel\perf\PlatformBenchmarks\**\*.csproj;
                       $(RepoRoot)src\SignalR\perf\benchmarkapps\**\*.csproj;
                       " />
+
+    <!-- Exclude WinForms and WPF-related projects on non-Windows -->
+    <ProjectToExclude Condition="'$(TargetOsName)' != 'win'"
+                      Include="
+                      $(RepoRoot)src\Components\WebView\Platforms\WindowsForms\**\*.csproj;
+                      $(RepoRoot)src\Components\WebView\Platforms\Wpf\**\*.csproj;
+                      $(RepoRoot)src\Components\WebView\Samples\BlazorWinFormsApp\**\*.csproj;
+                      $(RepoRoot)src\Components\WebView\Samples\BlazorWpfApp\**\*.csproj;
+                      " />
   </ItemGroup>
 
   <Choose>

eng/Dependencies.props

@@ -128,6 +128,7 @@ and are generated based on the last package release.
     <LatestPackageReference Include="Microsoft.Owin.Security.Cookies" />
     <LatestPackageReference Include="Microsoft.Owin.Testing" />
     <LatestPackageReference Include="Microsoft.Web.Administration" />
+    <LatestPackageReference Include="Microsoft.Web.WebView2" />
     <LatestPackageReference Include="Microsoft.Web.Xdt" />
     <LatestPackageReference Include="NETStandard.Library" />
     <LatestPackageReference Include="System.IdentityModel.Tokens.Jwt" />

eng/ProjectReferences.props

@@ -147,6 +147,10 @@
     <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebAssembly.Server" ProjectPath="$(RepoRoot)src\Components\WebAssembly\Server\src\Microsoft.AspNetCore.Components.WebAssembly.Server.csproj" />
     <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" ProjectPath="$(RepoRoot)src\Components\WebAssembly\WebAssembly.Authentication\src\Microsoft.AspNetCore.Components.WebAssembly.Authentication.csproj" />
     <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebAssembly" ProjectPath="$(RepoRoot)src\Components\WebAssembly\WebAssembly\src\Microsoft.AspNetCore.Components.WebAssembly.csproj" />
+    <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebView.WebView2" ProjectPath="$(RepoRoot)src\Components\WebView\Platforms\WebView2\src\Microsoft.AspNetCore.Components.WebView.WebView2.csproj" />
+    <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" ProjectPath="$(RepoRoot)src\Components\WebView\Platforms\WindowsForms\src\Microsoft.AspNetCore.Components.WebView.WindowsForms.csproj" />
+    <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebView.Wpf" ProjectPath="$(RepoRoot)src\Components\WebView\Platforms\Wpf\src\Microsoft.AspNetCore.Components.WebView.Wpf.csproj" />
+    <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.WebView" ProjectPath="$(RepoRoot)src\Components\WebView\WebView\src\Microsoft.AspNetCore.Components.WebView.csproj" />
     <ProjectReferenceProvider Include="Microsoft.AspNetCore.Components.Web" ProjectPath="$(RepoRoot)src\Components\Web\src\Microsoft.AspNetCore.Components.Web.csproj" />
     <ProjectReferenceProvider Include="Microsoft.Extensions.FileProviders.Embedded" ProjectPath="$(RepoRoot)src\FileProviders\Embedded\src\Microsoft.Extensions.FileProviders.Embedded.csproj" />
     <ProjectReferenceProvider Include="Microsoft.Extensions.Configuration.KeyPerFile" ProjectPath="$(RepoRoot)src\Configuration.KeyPerFile\src\Microsoft.Extensions.Configuration.KeyPerFile.csproj" />

eng/Versions.props

@@ -204,6 +204,7 @@
     <MicrosoftOwinSecurityCookiesVersion>3.0.1</MicrosoftOwinSecurityCookiesVersion>
     <MicrosoftOwinTestingVersion>3.0.1</MicrosoftOwinTestingVersion>
     <MicrosoftWebAdministrationVersion>11.1.0</MicrosoftWebAdministrationVersion>
+    <MicrosoftWebWebView2Version>1.0.705.50</MicrosoftWebWebView2Version>
     <MicrosoftWebXdtVersion>1.4.0</MicrosoftWebXdtVersion>
     <SystemIdentityModelTokensJwtVersion>6.8.0</SystemIdentityModelTokensJwtVersion>
     <NuGetVersioningVersion>5.9.0-rc.7121</NuGetVersioningVersion>

src/Components/ComponentsNoDeps.slnf

@@ -37,6 +37,13 @@
       "src\\Components\\WebAssembly\\testassets\\Wasm.Authentication.Server\\Wasm.Authentication.Server.csproj",
       "src\\Components\\WebAssembly\\testassets\\Wasm.Authentication.Shared\\Wasm.Authentication.Shared.csproj",
       "src\\Components\\WebAssembly\\testassets\\WasmLinkerTest\\WasmLinkerTest.csproj",
+      "src\\Components\\WebView\\Platforms\\WebView2\\src\\Microsoft.AspNetCore.Components.WebView.WebView2.csproj",
+      "src\\Components\\WebView\\Platforms\\WindowsForms\\src\\Microsoft.AspNetCore.Components.WebView.WindowsForms.csproj",
+      "src\\Components\\WebView\\Platforms\\Wpf\\src\\Microsoft.AspNetCore.Components.WebView.Wpf.csproj",
+      "src\\Components\\WebView\\Samples\\BlazorWinFormsApp\\BlazorWinFormsApp.csproj",
+      "src\\Components\\WebView\\Samples\\BlazorWpfApp\\BlazorWpfApp.csproj",
+      "src\\Components\\WebView\\WebView\\src\\Microsoft.AspNetCore.Components.WebView.csproj",
+      "src\\Components\\WebView\\WebView\\test\\Microsoft.AspNetCore.Components.WebView.Test.csproj",
       "src\\Components\\Web\\src\\Microsoft.AspNetCore.Components.Web.csproj",
       "src\\Components\\Web\\test\\Microsoft.AspNetCore.Components.Web.Tests.csproj",
       "src\\Components\\benchmarkapps\\Wasm.Performance\\ConsoleHost\\Wasm.Performance.ConsoleHost.csproj",

src/Components/Ignitor/test/Ignitor.Test.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>$(DefaultNetCoreTargetFramework)</TargetFramework>
@@ -12,7 +12,7 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Compile Include="..\..\Server\src\Circuits\RenderBatchWriter.cs" />
+    <Compile Include="$(ComponentsSharedSourceRoot)src\RenderBatchWriter.cs" />
   </ItemGroup>
 
 </Project>

src/Components/Server/src/Microsoft.AspNetCore.Components.Server.csproj

@@ -29,13 +29,7 @@
 
     <!-- Add a project dependency without reference output assemblies to enforce build order -->
     <!-- Applying workaround for https://github.com/microsoft/msbuild/issues/2661 and https://github.com/dotnet/sdk/issues/952 -->
-    <ProjectReference
-      Include="..\..\Web.JS\Microsoft.AspNetCore.Components.Web.JS.npmproj"
-      ReferenceOutputAssemblies="false"
-      SkipGetTargetFrameworkProperties="true"
-      UndefineProperties="TargetFramework"
-      Private="false"
-      Condition="'$(BuildNodeJS)' != 'false' and '$(BuildingInsideVisualStudio)' != 'true'" />
+    <ProjectReference Include="..\..\Web.JS\Microsoft.AspNetCore.Components.Web.JS.npmproj" ReferenceOutputAssemblies="false" SkipGetTargetFrameworkProperties="true" UndefineProperties="TargetFramework" Private="false" Condition="'$(BuildNodeJS)' != 'false' and '$(BuildingInsideVisualStudio)' != 'true'" />
   </ItemGroup>
 
   <PropertyGroup>
@@ -47,13 +41,14 @@
     <_FileProviderTaskAssembly>$(ArtifactsDir)bin\Microsoft.Extensions.FileProviders.Embedded.Manifest.Task\$(Configuration)\netstandard2.0\Microsoft.Extensions.FileProviders.Embedded.Manifest.Task.dll</_FileProviderTaskAssembly>
   </PropertyGroup>
 
-  <UsingTask
-    AssemblyFile="$(_FileProviderTaskAssembly)"
-    TaskName="Microsoft.Extensions.FileProviders.Embedded.Manifest.Task.GenerateEmbeddedResourcesManifest" />
+  <UsingTask AssemblyFile="$(_FileProviderTaskAssembly)" TaskName="Microsoft.Extensions.FileProviders.Embedded.Manifest.Task.GenerateEmbeddedResourcesManifest" />
 
   <ItemGroup>
     <Compile Include="$(ComponentsSharedSourceRoot)src\CacheHeaderSettings.cs" Link="Shared\CacheHeaderSettings.cs" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ArrayBuilder.cs" LinkBase="Circuits" />
+    <Compile Remove="C:\work\AspNetCore4\src\Components\Shared\src\RenderBatchWriter.cs" />
+    <Compile Include="$(ComponentsSharedSourceRoot)src\RenderBatchWriter.cs" LinkBase="Circuits" />
+    <Compile Include="$(ComponentsSharedSourceRoot)src\ArrayBuilderMemoryStream.cs" LinkBase="Circuits" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ElementReferenceJsonConverter.cs" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\ComponentParametersTypeCache.cs" />
     <Compile Include="$(ComponentsSharedSourceRoot)src\RootComponentTypeCache.cs" />
@@ -96,15 +91,12 @@
   <PropertyGroup>
     <BlazorServerJSFilename>blazor.server.js</BlazorServerJSFilename>
     <!-- Microsoft.AspNetCore.Components.Web.JS.npmproj always capitalizes the directory name. -->
-    <BlazorServerJSFile
-        Condition=" '$(Configuration)' == 'Debug' ">..\..\Web.JS\dist\Debug\$(BlazorServerJSFilename)</BlazorServerJSFile>
-    <BlazorServerJSFile
-        Condition=" '$(Configuration)' != 'Debug' ">..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
+    <BlazorServerJSFile Condition=" '$(Configuration)' == 'Debug' ">..\..\Web.JS\dist\Debug\$(BlazorServerJSFilename)</BlazorServerJSFile>
+    <BlazorServerJSFile Condition=" '$(Configuration)' != 'Debug' ">..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
   </PropertyGroup>
 
   <!-- blazor.server.js should exist after Microsoft.AspNetCore.Components.Web.JS.npmproj builds. Fall back if not. -->
-  <Target Name="_CheckBlazorServerJSPath" AfterTargets="ResolveProjectReferences"
-      Condition=" !EXISTS('$(BlazorServerJSFile)') ">
+  <Target Name="_CheckBlazorServerJSPath" AfterTargets="ResolveProjectReferences" Condition=" !EXISTS('$(BlazorServerJSFile)') ">
     <Warning Text="'$(BlazorServerJSFile)' does not exist. Falling back to checked-in copy." />
     <PropertyGroup>
       <BlazorServerJSFile>..\..\Web.JS\dist\Release\$(BlazorServerJSFilename)</BlazorServerJSFile>
@@ -114,8 +106,7 @@
   <Target Name="_AddEmbeddedBlazor" AfterTargets="_CheckBlazorServerJSPath">
     <ItemGroup>
       <EmbeddedResource Include="$(BlazorServerJSFile)" LogicalName="_framework/$(BlazorServerJSFilename)" />
-      <EmbeddedResource Include="$(BlazorServerJSFile).map" LogicalName="_framework/$(BlazorServerJSFilename).map"
-          Condition="Exists('$(BlazorServerJSFile).map')" />
+      <EmbeddedResource Include="$(BlazorServerJSFile).map" LogicalName="_framework/$(BlazorServerJSFilename).map" Condition="Exists('$(BlazorServerJSFile).map')" />
     </ItemGroup>
   </Target>
 </Project>

src/Components/Shared/src/ArrayBuilder.cs

@@ -10,6 +10,8 @@
 
 #if IGNITOR
 namespace Ignitor
+#elif BLAZOR_WEBVIEW
+namespace Microsoft.AspNetCore.Components.WebView
 #elif COMPONENTS_SERVER
 namespace Microsoft.AspNetCore.Components.Server.Circuits
 #else

src/Components/Server/src/Circuits/ArrayBuilderMemoryStream.cs → src/Components/Shared/src/ArrayBuilderMemoryStream.cs

@@ -8,7 +8,11 @@
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components.RenderTree;
 
+#if BLAZOR_WEBVIEW
+namespace Microsoft.AspNetCore.Components.WebView
+#else
 namespace Microsoft.AspNetCore.Components.Server.Circuits
+#endif
 {
     /// <summary>
     /// Writeable memory stream backed by a an <see cref="ArrayBuilder{T}"/>.

src/Components/Shared/src/ElementReferenceJsonConverter.cs

@@ -4,7 +4,7 @@
 using System;
 using System.Text.Json;
 using System.Text.Json.Serialization;
-
+#nullable enable
 namespace Microsoft.AspNetCore.Components
 {
     internal sealed class ElementReferenceJsonConverter : JsonConverter<ElementReference>

src/Components/Server/src/Circuits/RenderBatchWriter.cs → src/Components/Shared/src/RenderBatchWriter.cs

@@ -11,6 +11,8 @@
 
 #if IGNITOR
 namespace Ignitor
+#elif BLAZOR_WEBVIEW
+namespace Microsoft.AspNetCore.Components.WebView
 #else
 namespace Microsoft.AspNetCore.Components.Server.Circuits
 #endif

src/Components/Shared/src/WebEventData.cs

@@ -6,7 +6,7 @@
 using System.Text.Json;
 using Microsoft.AspNetCore.Components.RenderTree;
 using static Microsoft.AspNetCore.Internal.LinkerFlags;
-
+#nullable enable
 namespace Microsoft.AspNetCore.Components.Web
 {
     internal class WebEventData

src/Components/Web.JS/.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/Debug/
 dist/Release/blazor.webassembly.js
+dist/Release/blazor.webview.js

src/Components/Web.JS/Microsoft.AspNetCore.Components.Web.JS.npmproj

@@ -15,6 +15,8 @@
     <BuildOutputFiles Condition=" '$(Configuration)' != 'Debug' " Include="dist\Release\blazor.server.js" />
     <BuildOutputFiles Condition=" '$(Configuration)' == 'Debug' " Include="dist\Debug\blazor.webassembly.js" />
     <BuildOutputFiles Condition=" '$(Configuration)' != 'Debug' " Include="dist\Release\blazor.webassembly.js" />
+    <BuildOutputFiles Condition=" '$(Configuration)' == 'Debug' " Include="dist\Debug\blazor.webview.js" />
+    <BuildOutputFiles Condition=" '$(Configuration)' != 'Debug' " Include="dist\Release\blazor.webview.js" />
   </ItemGroup>
 
   <ItemGroup>

src/Components/Web.JS/src/Boot.WebView.ts

@@ -0,0 +1,36 @@
+import { DotNet } from '@microsoft/dotnet-js-interop';
+import { Blazor } from './GlobalExports';
+import { shouldAutoStart } from './BootCommon';
+import { internalFunctions as navigationManagerFunctions } from './Services/NavigationManager';
+import { setEventDispatcher } from './Rendering/Events/EventDispatcher';
+import { startIpcReceiver } from './Platform/WebView/WebViewIpcReceiver';
+import { sendBrowserEvent, sendAttachPage, sendBeginInvokeDotNetFromJS, sendEndInvokeJSFromDotNet, sendLocationChanged } from './Platform/WebView/WebViewIpcSender';
+
+let started = false;
+
+async function boot(): Promise<void> {
+  if (started) {
+    throw new Error('Blazor has already started.');
+  }
+  started = true;
+
+  startIpcReceiver();
+
+  DotNet.attachDispatcher({
+    beginInvokeDotNetFromJS: sendBeginInvokeDotNetFromJS,
+    endInvokeJSFromDotNet: sendEndInvokeJSFromDotNet,
+  });
+
+  navigationManagerFunctions.enableNavigationInterception();
+  navigationManagerFunctions.listenForNavigationEvents(sendLocationChanged);
+
+  sendAttachPage(navigationManagerFunctions.getBaseURI(), navigationManagerFunctions.getLocationHref());
+}
+
+setEventDispatcher(sendBrowserEvent);
+
+Blazor.start = boot;
+
+if (shouldAutoStart()) {
+  boot();
+}

src/Components/Web.JS/src/Platform/WebView/WebViewIpcCommon.ts

@@ -0,0 +1,30 @@
+const ipcMessagePrefix = '__bwv:';
+let applicationIsTerminated = false;
+
+export function trySerializeMessage(messageType: string, args: any[]): string | null {
+  return applicationIsTerminated
+    ? null
+    : `${ipcMessagePrefix}${JSON.stringify([messageType, ...args])}`;
+}
+
+export function tryDeserializeMessage(message: string): IpcMessage | null {
+  if (applicationIsTerminated || !message || !message.startsWith(ipcMessagePrefix)) {
+    return null;
+  }
+
+  const messageAfterPrefix = message.substring(ipcMessagePrefix.length);
+  const [messageType, ...args] = JSON.parse(messageAfterPrefix);
+  return { messageType, args };
+}
+
+export function setApplicationIsTerminated() {
+    // If there's an unhandled exception, we'll prevent the webview from doing anything else until
+    // it reloads the page. This is equivalent to what happens in Blazor Server, and avoids anyone
+    // taking a dependency on being able to continue interacting after a fatal error.
+    applicationIsTerminated = true;
+}
+
+interface IpcMessage {
+  messageType: string;
+  args: any[];
+}

src/Components/Web.JS/src/Platform/WebView/WebViewIpcReceiver.ts

@@ -0,0 +1,62 @@
+import { DotNet } from '@microsoft/dotnet-js-interop';
+import { showErrorNotification } from '../../BootErrors';
+import { OutOfProcessRenderBatch } from '../../Rendering/RenderBatch/OutOfProcessRenderBatch';
+import { attachRootComponentToElement, renderBatch } from '../../Rendering/Renderer';
+import { setApplicationIsTerminated, tryDeserializeMessage } from './WebViewIpcCommon';
+import { sendRenderCompleted } from './WebViewIpcSender';
+import { internalFunctions as navigationManagerFunctions } from '../../Services/NavigationManager';
+
+export function startIpcReceiver() {
+  const messageHandlers = {
+
+    'AttachToDocument': (componentId: number, elementSelector: string) => {
+      attachRootComponentToElement(elementSelector, componentId);
+    },
+
+    'RenderBatch': (batchId: number, batchDataBase64: string) => {
+      try {
+        const batchData = base64ToArrayBuffer(batchDataBase64);
+        renderBatch(0, new OutOfProcessRenderBatch(batchData));
+        sendRenderCompleted(batchId, null);
+      } catch (ex) {
+        sendRenderCompleted(batchId, ex.toString());
+      }
+    },
+
+    'NotifyUnhandledException': (message: string, stackTrace: string) => {
+      setApplicationIsTerminated();
+      console.error(`${message}\n${stackTrace}`);
+      showErrorNotification();
+    },
+
+    'BeginInvokeJS': DotNet.jsCallDispatcher.beginInvokeJSFromDotNet,
+
+    'EndInvokeDotNet': DotNet.jsCallDispatcher.endInvokeDotNetFromJS,
+
+    'Navigate': navigationManagerFunctions.navigateTo,
+  };
+
+  (window.external as any).receiveMessage((message: string) => {
+    const parsedMessage = tryDeserializeMessage(message);
+    if (parsedMessage) {
+      if (messageHandlers.hasOwnProperty(parsedMessage.messageType)) {
+        messageHandlers[parsedMessage.messageType].apply(null, parsedMessage.args);
+      } else {
+        throw new Error(`Unsupported IPC message type '${parsedMessage.messageType}'`);
+      }
+    }
+  });
+}
+
+// https://stackoverflow.com/a/21797381
+// TODO: If the data is large, consider switching over to the native decoder as in https://stackoverflow.com/a/54123275
+// But don't force it to be async all the time. Yielding execution leads to perceptible lag.
+function base64ToArrayBuffer(base64: string) {
+  const binaryString = atob(base64);
+  const length = binaryString.length;
+  const result = new Uint8Array(length);
+  for (let i = 0; i < length; i++) {
+      result[i] = binaryString.charCodeAt(i);
+  }
+  return result;
+}

src/Components/Web.JS/src/Platform/WebView/WebViewIpcSender.ts

@@ -0,0 +1,34 @@
+import { EventDescriptor } from '../../Rendering/Events/EventDispatcher';
+import { trySerializeMessage } from './WebViewIpcCommon';
+
+export function sendAttachPage(baseUrl: string, startUrl: string) {
+  send('AttachPage', baseUrl, startUrl);
+}
+
+export function sendRenderCompleted(batchId: number, errorOrNull: string | null) {
+  send('OnRenderCompleted', batchId, errorOrNull);
+}
+
+export function sendBrowserEvent(descriptor: EventDescriptor, eventArgs: any) {
+  send('DispatchBrowserEvent', descriptor, eventArgs);
+}
+
+export function sendBeginInvokeDotNetFromJS(callId: number, assemblyName: string | null, methodIdentifier: string, dotNetObjectId: number | null, argsJson: string): void {
+  send('BeginInvokeDotNet', callId ? callId.toString() : null, assemblyName, methodIdentifier, dotNetObjectId || 0, argsJson);
+}
+
+export function sendEndInvokeJSFromDotNet(asyncHandle: number, succeeded: boolean, argsJson: any) {
+  send('EndInvokeJS', asyncHandle, succeeded, argsJson);
+}
+
+export function sendLocationChanged(uri: string, intercepted: boolean) {
+  send('OnLocationChanged', uri, intercepted);
+  return Promise.resolve(); // Like in Blazor Server, we only issue the notification here - there's no need to wait for a response
+}
+
+function send(messageType: string, ...args: any[]) {
+  const serializedMessage = trySerializeMessage(messageType, args);
+  if (serializedMessage) {
+    (window.external as any).sendMessage(serializedMessage);
+  }
+}