[Blazor] Adds static web assets support for Blazor desktop (#31041)

* Wires up static web assets support on the WebViewManager.
dotnet · Mar 19, 2021 · 8cc970c · 8cc970c
1 parent 58b37d6
commit 8cc970c
Show file tree

Hide file tree

Showing 18 changed files with 402 additions and 2 deletions.
diff --git a/AspNetCore.sln b/AspNetCore.sln
@@ -1626,6 +1626,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "testassets", "testassets",
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "WpfTestApp", "src\Components\WebView\Platforms\Wpf\testassets\WpfTestApp\WpfTestApp.csproj", "{036C6BDA-7B69-4E8C-A921-822DA5972A56}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WebviewAppShared", "src\Components\WebView\Samples\WebviewAppShared\WebviewAppShared.csproj", "{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -7685,6 +7687,18 @@ Global
 		{036C6BDA-7B69-4E8C-A921-822DA5972A56}.Release|x64.Build.0 = Release|Any CPU
 		{036C6BDA-7B69-4E8C-A921-822DA5972A56}.Release|x86.ActiveCfg = Release|Any CPU
 		{036C6BDA-7B69-4E8C-A921-822DA5972A56}.Release|x86.Build.0 = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|x64.Build.0 = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Debug|x86.Build.0 = Debug|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|x64.ActiveCfg = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|x64.Build.0 = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|x86.ActiveCfg = Release|Any CPU
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -8488,6 +8502,7 @@ Global
 		{99EE7769-3C81-477B-B947-0A5CBCD5B27D} = {F0849E7E-61DB-4849-9368-9E7BC125DCB0}
 		{94D0D6F3-8632-41DE-908B-47A787D570FF} = {5241CF68-66A0-4724-9BAA-36DB959A5B11}
 		{036C6BDA-7B69-4E8C-A921-822DA5972A56} = {94D0D6F3-8632-41DE-908B-47A787D570FF}
+		{64C3BAC8-C4F8-466A-9E84-0400EE54B25A} = {D3B76F4E-A980-45BF-AEA1-EA3175B0B5A1}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {3E8720B3-DBDD-498C-B383-2CC32A054E8F}

diff --git a/src/Components/ComponentsNoDeps.slnf b/src/Components/ComponentsNoDeps.slnf
@@ -44,6 +44,7 @@
       "src\\Components\\WebView\\Platforms\\Wpf\\testassets\\WpfTestApp\\WpfTestApp.csproj",
       "src\\Components\\WebView\\Samples\\BlazorWinFormsApp\\BlazorWinFormsApp.csproj",
       "src\\Components\\WebView\\Samples\\BlazorWpfApp\\BlazorWpfApp.csproj",
+      "src\\Components\\WebView\\Samples\\WebviewAppShared\\WebviewAppShared.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",

diff --git a/src/Components/WebView/Samples/BlazorWinFormsApp/BlazorWinFormsApp.csproj b/src/Components/WebView/Samples/BlazorWinFormsApp/BlazorWinFormsApp.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
     <TargetFramework>$(DefaultNetCoreTargetFramework)-windows</TargetFramework>
@@ -11,6 +11,10 @@
     <Reference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" />
   </ItemGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\WebviewAppShared\WebviewAppShared.csproj" />
+  </ItemGroup>
+
   <ItemGroup>
     <Content Update="wwwroot\**">
       <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>

diff --git a/src/Components/WebView/Samples/BlazorWinFormsApp/Pages/Index.razor b/src/Components/WebView/Samples/BlazorWinFormsApp/Pages/Index.razor
@@ -1,5 +1,6 @@
 @page "/"
 @inject AppState AppState
+@using WebviewAppShared
 
 <h3>Hello, world!</h3>
 
@@ -8,6 +9,9 @@
 <button @onclick="IncrementCount">Increment</button>
 <button @onclick="TriggerException">Throw</button>
 
+<p>This is a shared component</p>
+<SharedComponent />
+
 @code {
     void IncrementCount()
     {

diff --git a/src/Components/WebView/Samples/BlazorWinFormsApp/wwwroot/index.html b/src/Components/WebView/Samples/BlazorWinFormsApp/wwwroot/index.html
@@ -7,6 +7,7 @@
     <title>Blazor WinForms app</title>
     <base href="/" />
     <link href="css/app.css" rel="stylesheet" />
+    <link href="BlazorWinFormsApp.styles.css" rel="stylesheet" />
 </head>
 
 <body>

diff --git a/src/Components/WebView/Samples/BlazorWpfApp/BlazorWpfApp.csproj b/src/Components/WebView/Samples/BlazorWpfApp/BlazorWpfApp.csproj
@@ -7,6 +7,10 @@
     <IsShippingPackage>false</IsShippingPackage>
   </PropertyGroup>
 
+  <ItemGroup>
+    <ProjectReference Include="..\WebviewAppShared\WebviewAppShared.csproj" />
+  </ItemGroup>
+
   <ItemGroup>
     <Reference Include="Microsoft.AspNetCore.Components.WebView.Wpf" />
   </ItemGroup>

diff --git a/src/Components/WebView/Samples/BlazorWpfApp/Pages/Index.razor b/src/Components/WebView/Samples/BlazorWpfApp/Pages/Index.razor
@@ -1,5 +1,5 @@
 @page "/"
-
+@using WebviewAppShared
 // NOTE: The full namespace is included here to work around this bug: https://github.com/dotnet/aspnetcore/issues/30851
 @inject BlazorWpfApp.AppState AppState
 
@@ -10,6 +10,9 @@
 <button @onclick="IncrementCount">Increment</button>
 <button @onclick="TriggerException">Throw</button>
 
+<p>This is a shared component</p>
+<SharedComponent />
+
 @code {
     void IncrementCount()
     {

diff --git a/src/Components/WebView/Samples/BlazorWpfApp/wwwroot/index.html b/src/Components/WebView/Samples/BlazorWpfApp/wwwroot/index.html
@@ -7,6 +7,7 @@
     <title>Blazor WPF app</title>
     <base href="/" />
     <link href="css/app.css" rel="stylesheet" />
+    <link href="BlazorWpfApp.styles.css" rel="stylesheet" />
 </head>
 
 <body>

diff --git a/src/Components/WebView/Samples/WebviewAppShared/ExampleJsInterop.cs b/src/Components/WebView/Samples/WebviewAppShared/ExampleJsInterop.cs
@@ -0,0 +1,39 @@
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace WebviewAppShared
+{
+    // This class provides an example of how JavaScript functionality can be wrapped
+    // in a .NET class for easy consumption. The associated JavaScript module is
+    // loaded on demand when first needed.
+    //
+    // This class can be registered as scoped DI service and then injected into Blazor
+    // components for use.
+
+    public class ExampleJsInterop : IAsyncDisposable
+    {
+        private readonly Lazy<Task<IJSObjectReference>> moduleTask;
+
+        public ExampleJsInterop(IJSRuntime jsRuntime)
+        {
+            moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
+               "import", "./_content/WebviewAppShared/exampleJsInterop.js").AsTask());
+        }
+
+        public async ValueTask<string> Prompt(string message)
+        {
+            var module = await moduleTask.Value;
+            return await module.InvokeAsync<string>("showPrompt", message);
+        }
+
+        public async ValueTask DisposeAsync()
+        {
+            if (moduleTask.IsValueCreated)
+            {
+                var module = await moduleTask.Value;
+                await module.DisposeAsync();
+            }
+        }
+    }
+}
diff --git a/src/Components/WebView/Samples/WebviewAppShared/SharedComponent.razor b/src/Components/WebView/Samples/WebviewAppShared/SharedComponent.razor
@@ -0,0 +1,3 @@
+<div class="my-component">
+    This Blazor component is defined in the <strong>WebviewAppShared</strong> package.
+</div>
diff --git a/src/Components/WebView/Samples/WebviewAppShared/SharedComponent.razor.css b/src/Components/WebView/Samples/WebviewAppShared/SharedComponent.razor.css
@@ -0,0 +1,6 @@
+.my-component {
+    border: 2px dashed red;
+    padding: 1em;
+    margin: 1em 0;
+    background-image: url('background.png');
+}
diff --git a/src/Components/WebView/Samples/WebviewAppShared/WebviewAppShared.csproj b/src/Components/WebView/Samples/WebviewAppShared/WebviewAppShared.csproj
@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <TargetFramework>$(DefaultNetCoreTargetFramework)</TargetFramework>
+  </PropertyGroup>
+
+
+  <ItemGroup>
+    <SupportedPlatform Include="browser" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Reference Include="Microsoft.AspNetCore.Components.Web" />
+  </ItemGroup>
+
+</Project>
diff --git a/src/Components/WebView/Samples/WebviewAppShared/_Imports.razor b/src/Components/WebView/Samples/WebviewAppShared/_Imports.razor
@@ -0,0 +1 @@
+@using Microsoft.AspNetCore.Components.Web
diff --git a/src/Components/WebView/Samples/WebviewAppShared/wwwroot/background.png b/src/Components/WebView/Samples/WebviewAppShared/wwwroot/background.png
diff --git a/src/Components/WebView/Samples/WebviewAppShared/wwwroot/exampleJsInterop.js b/src/Components/WebView/Samples/WebviewAppShared/wwwroot/exampleJsInterop.js
@@ -0,0 +1,6 @@
+// This is a JavaScript module that is loaded on demand. It can export any number of
+// functions, and may import other JavaScript modules if required.
+
+export function showPrompt(message) {
+  return prompt(message, 'Type anything here');
+}
diff --git a/src/Components/WebView/WebView/src/Microsoft.AspNetCore.Components.WebView.csproj b/src/Components/WebView/WebView/src/Microsoft.AspNetCore.Components.WebView.csproj
@@ -32,6 +32,7 @@
     <Reference Include="Microsoft.Extensions.Configuration.Json" />
     <Reference Include="Microsoft.Extensions.Configuration.Binder" />
     <Reference Include="Microsoft.Extensions.FileProviders.Embedded" />
+    <Reference Include="Microsoft.Extensions.FileProviders.Composite" />
     <Reference Include="Microsoft.Extensions.Logging" />
 
     <ProjectReference