From 6de638cbae47bf986e14e0dc7831320cb947ff6c Mon Sep 17 00:00:00 2001 From: Mister Magoo Date: Fri, 27 Dec 2019 02:12:13 +0000 Subject: [PATCH] Swapped to a new method of detecting pre-rendering and included a service so you don't have to use the cascading value if you don't want to. Updated to aspnetcore 3.1.0 --- Directory.Build.props | 3 +- README.md | 42 ++++++++++++----- samples/PreRenderSample/Components/App.razor | 19 +++++--- .../Components/Pages/Counter.razor | 14 ++++-- .../Components/Pages/FetchData.razor | 17 +++++-- .../Components/Pages/Index.razor | 15 ++++-- .../{_ViewImports.cshtml => _Imports.razor} | 0 .../Components/Shared/NavMenu.razor | 4 +- .../{_ViewImports.cshtml => _Imports.razor} | 4 +- .../Pages/{Index.cshtml => _Host.cshtml} | 26 ++++++++-- samples/PreRenderSample/Pages/_Imports.razor | 1 + .../PreRenderSample/Pages/_ViewImports.cshtml | 3 -- .../PreRenderSample/PreRenderSample.csproj | 12 ++--- samples/PreRenderSample/Program.cs | 32 +++++-------- .../Properties/launchSettings.json | 2 +- .../Services/IWeatherForecastService.cs | 11 +++++ .../Services/WeatherForecast.cs | 14 +++--- .../Services/WeatherForecastService.cs | 34 +++++++------- samples/PreRenderSample/Startup.cs | 28 +++++------ src/PreRenderComponent/IPreRenderFlag.cs | 7 +++ src/PreRenderComponent/PreRenderCascade.cs | 47 ++----------------- .../PreRenderComponent.csproj | 16 +++---- src/PreRenderComponent/PreRenderFlag.cs | 36 ++++++++++++++ .../Properties/launchSettings.json | 27 ----------- 24 files changed, 221 insertions(+), 193 deletions(-) rename samples/PreRenderSample/Components/Pages/{_ViewImports.cshtml => _Imports.razor} (100%) rename samples/PreRenderSample/Components/{_ViewImports.cshtml => _Imports.razor} (62%) rename samples/PreRenderSample/Pages/{Index.cshtml => _Host.cshtml} (52%) create mode 100644 samples/PreRenderSample/Pages/_Imports.razor delete mode 100644 samples/PreRenderSample/Pages/_ViewImports.cshtml create mode 100644 samples/PreRenderSample/Services/IWeatherForecastService.cs create mode 100644 src/PreRenderComponent/IPreRenderFlag.cs create mode 100644 src/PreRenderComponent/PreRenderFlag.cs delete mode 100644 src/PreRenderComponent/Properties/launchSettings.json diff --git a/Directory.Build.props b/Directory.Build.props index d52bd6e..8608cb6 100644 --- a/Directory.Build.props +++ b/Directory.Build.props @@ -1,6 +1,5 @@ - 0.9.0-preview3-19154-02 - 0.1.0-beta-1 + 0.2.0-beta-1 \ No newline at end of file diff --git a/README.md b/README.md index 83ecb5d..1f0cb95 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,49 @@ # PreRenderComponent -Provides a CascadingValue exposing whether the app is in PreRendering or not. +Provides a DI Service and/or a CascadingValue exposing whether the app is in PreRendering or not. ## Usage Install the nuget https://nuget.org/packages/PreRenderComponent -Add references to Components/_ViewImports.cshtml +### Add the service (Required) +Add the service to your startup Configure method +This component has a dependency on HttpContextAccessor, so also add that. -``` -@using PreRenderComponent -@addTagHelper *, PreRenderComponent +``` CSharp +services.AddHttpContextAccessor(); +services.AddScoped(); ``` +Consume the service wherever you need it (unless you want to use the Cascading Value component) +``` HTML +@inject PreRenderComponent.IPreRenderFlag PreRenderFlag +@if (PreRenderFlag.IsPreRendering) +{ +

Pre-Rendering

+} +``` +### Cascading Value (Optional) Wrap the Router component in PreRenderCascade in the App.razor file -``` - - - +``` HTML + + + + + + + +

Sorry, there's nothing at this address.

+ + + + ``` Consume the CascadingValue in your own pages/components -``` +``` CSharp @if (IsPreRendering) { @@ -34,7 +54,7 @@ else } -@functions { +@code { [CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; } } diff --git a/samples/PreRenderSample/Components/App.razor b/samples/PreRenderSample/Components/App.razor index b9e1aed..793d6bf 100644 --- a/samples/PreRenderSample/Components/App.razor +++ b/samples/PreRenderSample/Components/App.razor @@ -1,7 +1,12 @@ -@* - The Router component displays whichever component has a @page - directive matching the current URI. -*@ - - - \ No newline at end of file + + + + + + + +

Sorry, there's nothing at this address.

+ + + + \ No newline at end of file diff --git a/samples/PreRenderSample/Components/Pages/Counter.razor b/samples/PreRenderSample/Components/Pages/Counter.razor index c20205c..d8f2b72 100644 --- a/samples/PreRenderSample/Components/Pages/Counter.razor +++ b/samples/PreRenderSample/Components/Pages/Counter.razor @@ -1,6 +1,12 @@ @page "/counter" -To see the Pre-Rendering in effect, open the browser dev tools, -set the network speed to slow, then refresh. + + To see the Pre-Rendering in effect, open the browser dev tools, + set the network speed to slow, then refresh. + +@if (IsPreRendering) +{ +

Pre-Rendering

+}

Counter

@@ -8,11 +14,11 @@ set the network speed to slow, then refresh. @if (IsPreRendering) { - + } else { - + } @functions { diff --git a/samples/PreRenderSample/Components/Pages/FetchData.razor b/samples/PreRenderSample/Components/Pages/FetchData.razor index ea48234..00132b7 100644 --- a/samples/PreRenderSample/Components/Pages/FetchData.razor +++ b/samples/PreRenderSample/Components/Pages/FetchData.razor @@ -1,6 +1,15 @@ @page "/fetchdata" @using PreRenderSample.Services -@inject WeatherForecastService ForecastService +@inject PreRenderComponent.IPreRenderFlag PreRenderFlag +@inject IWeatherForecastService ForecastService + + To see the Pre-Rendering in effect, open the browser dev tools, + set the network speed to slow, then refresh. + +@if (PreRenderFlag.IsPreRendering) +{ +

Pre-Rendering

+}

Weather forecast

@@ -34,11 +43,11 @@ else } - -@functions { +@code +{ WeatherForecast[] forecasts; - protected override async Task OnInitAsync() + protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } diff --git a/samples/PreRenderSample/Components/Pages/Index.razor b/samples/PreRenderSample/Components/Pages/Index.razor index c1bbe86..d6381c0 100644 --- a/samples/PreRenderSample/Components/Pages/Index.razor +++ b/samples/PreRenderSample/Components/Pages/Index.razor @@ -1,17 +1,24 @@ @page "/" + + To see the Pre-Rendering in effect, open the browser dev tools, + set the network speed to slow, then refresh. + Also check out the Counter page and Weather forecast for other examples. + +@if (IsPreRendering) +{ +

Pre-Rendering

+}

Hello, world!

Welcome to your new app. -To see the Pre-Rendering in effect, open the browser dev tools and set the network speed to slow, then refresh. -Also check out the Counter page for another example. @if (IsPreRendering) { -

Warming up the engine...

+

Warming up the engine...

} @functions { - [CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; } + [CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; } } diff --git a/samples/PreRenderSample/Components/Pages/_ViewImports.cshtml b/samples/PreRenderSample/Components/Pages/_Imports.razor similarity index 100% rename from samples/PreRenderSample/Components/Pages/_ViewImports.cshtml rename to samples/PreRenderSample/Components/Pages/_Imports.razor diff --git a/samples/PreRenderSample/Components/Shared/NavMenu.razor b/samples/PreRenderSample/Components/Shared/NavMenu.razor index f35aeee..3a0382c 100644 --- a/samples/PreRenderSample/Components/Shared/NavMenu.razor +++ b/samples/PreRenderSample/Components/Shared/NavMenu.razor @@ -1,11 +1,11 @@
PreRenderSample -
-
+
  • diff --git a/samples/PreRenderSample/Components/_ViewImports.cshtml b/samples/PreRenderSample/Components/_Imports.razor similarity index 62% rename from samples/PreRenderSample/Components/_ViewImports.cshtml rename to samples/PreRenderSample/Components/_Imports.razor index 65b8a50..99e03d0 100644 --- a/samples/PreRenderSample/Components/_ViewImports.cshtml +++ b/samples/PreRenderSample/Components/_Imports.razor @@ -1,8 +1,6 @@ @using System.Net.Http @using Microsoft.AspNetCore.Components.Forms -@using Microsoft.AspNetCore.Components.Layouts +@using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Routing @using Microsoft.JSInterop @using PreRenderSample.Components.Shared -@using PreRenderComponent -@addTagHelper *, PreRenderComponent diff --git a/samples/PreRenderSample/Pages/Index.cshtml b/samples/PreRenderSample/Pages/_Host.cshtml similarity index 52% rename from samples/PreRenderSample/Pages/Index.cshtml rename to samples/PreRenderSample/Pages/_Host.cshtml index 011cab6..59c4913 100644 --- a/samples/PreRenderSample/Pages/Index.cshtml +++ b/samples/PreRenderSample/Pages/_Host.cshtml @@ -1,6 +1,9 @@ -@page "{*clientPath}" +@page "/" +@namespace PreRenderSample.Pages +@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers + - + @@ -14,13 +17,26 @@ asp-fallback-href="css/bootstrap/bootstrap.min.css" asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" crossorigin="anonymous" - integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"/> + integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" /> - @(await Html.RenderComponentAsync()) + + + + +
    + + An error has occurred. This application may no longer respond until reloaded. + + + An unhandled exception has occurred. See browser dev tools for details. + + Reload + 🗙 +
    - + diff --git a/samples/PreRenderSample/Pages/_Imports.razor b/samples/PreRenderSample/Pages/_Imports.razor new file mode 100644 index 0000000..699dae5 --- /dev/null +++ b/samples/PreRenderSample/Pages/_Imports.razor @@ -0,0 +1 @@ +@using PreRenderSample.Components diff --git a/samples/PreRenderSample/Pages/_ViewImports.cshtml b/samples/PreRenderSample/Pages/_ViewImports.cshtml deleted file mode 100644 index eaddf7a..0000000 --- a/samples/PreRenderSample/Pages/_ViewImports.cshtml +++ /dev/null @@ -1,3 +0,0 @@ -@using PreRenderSample.Components -@namespace PreRenderSample.Pages -@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers diff --git a/samples/PreRenderSample/PreRenderSample.csproj b/samples/PreRenderSample/PreRenderSample.csproj index c83d234..a990b0f 100644 --- a/samples/PreRenderSample/PreRenderSample.csproj +++ b/samples/PreRenderSample/PreRenderSample.csproj @@ -1,16 +1,10 @@ - + - netcoreapp3.0 - 7.3 - <_RazorComponentInclude>Components\**\*.cshtml + netcoreapp3.1 + latest - - - - - diff --git a/samples/PreRenderSample/Program.cs b/samples/PreRenderSample/Program.cs index 81cf03c..1fc1b7e 100644 --- a/samples/PreRenderSample/Program.cs +++ b/samples/PreRenderSample/Program.cs @@ -1,28 +1,20 @@ -using System; -using System.Collections.Generic; -using System.IO; -using System.Linq; -using System.Threading.Tasks; -using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; -using Microsoft.Extensions.Configuration; using Microsoft.Extensions.Hosting; -using Microsoft.Extensions.Logging; namespace PreRenderSample { - public class Program + public class Program { - public static void Main(string[] args) - { - CreateHostBuilder(args).Build().Run(); - } + public static void Main(string[] args) + { + CreateHostBuilder(args).Build().Run(); + } - public static IHostBuilder CreateHostBuilder(string[] args) => - Host.CreateDefaultBuilder(args) - .ConfigureWebHostDefaults(webBuilder => - { - webBuilder.UseStartup(); - }); - } + public static IHostBuilder CreateHostBuilder(string[] args) => + Host.CreateDefaultBuilder(args) + .ConfigureWebHostDefaults(webBuilder => + { + webBuilder.UseStartup(); + }); + } } diff --git a/samples/PreRenderSample/Properties/launchSettings.json b/samples/PreRenderSample/Properties/launchSettings.json index 3e7ccd6..5961170 100644 --- a/samples/PreRenderSample/Properties/launchSettings.json +++ b/samples/PreRenderSample/Properties/launchSettings.json @@ -18,7 +18,7 @@ "PreRenderSample": { "commandName": "Project", "launchBrowser": true, - "applicationUrl": "http://localhost:5000;https://localhost:5000", + "applicationUrl": "http://localhost:5001;https://localhost:5002", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } diff --git a/samples/PreRenderSample/Services/IWeatherForecastService.cs b/samples/PreRenderSample/Services/IWeatherForecastService.cs new file mode 100644 index 0000000..018b457 --- /dev/null +++ b/samples/PreRenderSample/Services/IWeatherForecastService.cs @@ -0,0 +1,11 @@ +using System; +using System.Threading.Tasks; + +namespace PreRenderSample.Services +{ + public interface IWeatherForecastService + { + + Task GetForecastAsync(DateTime startDate); + } +} diff --git a/samples/PreRenderSample/Services/WeatherForecast.cs b/samples/PreRenderSample/Services/WeatherForecast.cs index bf5ea11..ad79e66 100644 --- a/samples/PreRenderSample/Services/WeatherForecast.cs +++ b/samples/PreRenderSample/Services/WeatherForecast.cs @@ -2,14 +2,14 @@ namespace PreRenderSample.Services { - public class WeatherForecast - { - public DateTime Date { get; set; } + public class WeatherForecast + { + public DateTime Date { get; set; } - public int TemperatureC { get; set; } + public int TemperatureC { get; set; } - public int TemperatureF { get; set; } + public int TemperatureF { get; set; } - public string Summary { get; set; } - } + public string Summary { get; set; } + } } diff --git a/samples/PreRenderSample/Services/WeatherForecastService.cs b/samples/PreRenderSample/Services/WeatherForecastService.cs index 04b63b9..01f3205 100644 --- a/samples/PreRenderSample/Services/WeatherForecastService.cs +++ b/samples/PreRenderSample/Services/WeatherForecastService.cs @@ -4,22 +4,22 @@ namespace PreRenderSample.Services { - public class WeatherForecastService - { - private static string[] Summaries = new[] - { - "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" - }; + public class WeatherForecastService : IWeatherForecastService + { + private static string[] Summaries = new[] + { + "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" + }; - public Task GetForecastAsync(DateTime startDate) - { - var rng = new Random(); - return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast - { - Date = startDate.AddDays(index), - TemperatureC = rng.Next(-20, 55), - Summary = Summaries[rng.Next(Summaries.Length)] - }).ToArray()); - } - } + public Task GetForecastAsync(DateTime startDate) + { + var rng = new Random(); + return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast + { + Date = startDate.AddDays(index), + TemperatureC = rng.Next(-20, 55), + Summary = Summaries[rng.Next(Summaries.Length)] + }).ToArray()); + } + } } diff --git a/samples/PreRenderSample/Startup.cs b/samples/PreRenderSample/Startup.cs index 4a617a0..dfd4257 100644 --- a/samples/PreRenderSample/Startup.cs +++ b/samples/PreRenderSample/Startup.cs @@ -1,14 +1,8 @@ -using System; -using System.Collections.Generic; -using System.Linq; -using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Hosting; -using Microsoft.AspNetCore.Http; -using Microsoft.AspNetCore.HttpsPolicy; using Microsoft.Extensions.DependencyInjection; using Microsoft.Extensions.Hosting; -using PreRenderSample.Components; +using PreRenderComponent; using PreRenderSample.Services; namespace PreRenderSample @@ -19,12 +13,11 @@ public class Startup // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices(IServiceCollection services) { - services.AddMvc() - .AddNewtonsoftJson(); - - services.AddRazorComponents(); - - services.AddSingleton(); + services.AddRazorPages(); + services.AddServerSideBlazor(); + services.AddSingleton(); + services.AddHttpContextAccessor(); + services.AddScoped(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. @@ -43,10 +36,13 @@ public void Configure(IApplicationBuilder app, IWebHostEnvironment env) app.UseHttpsRedirection(); app.UseStaticFiles(); - app.UseRouting(routes => + app.UseRouting(); + + app.UseEndpoints(endpoints => { - routes.MapRazorPages(); - routes.MapComponentHub("app"); + endpoints.MapControllers(); + endpoints.MapBlazorHub(); + endpoints.MapFallbackToPage("/_Host"); }); } } diff --git a/src/PreRenderComponent/IPreRenderFlag.cs b/src/PreRenderComponent/IPreRenderFlag.cs new file mode 100644 index 0000000..65feb82 --- /dev/null +++ b/src/PreRenderComponent/IPreRenderFlag.cs @@ -0,0 +1,7 @@ +namespace PreRenderComponent +{ + public interface IPreRenderFlag + { + bool IsPreRendering { get; } + } +} diff --git a/src/PreRenderComponent/PreRenderCascade.cs b/src/PreRenderComponent/PreRenderCascade.cs index 05f3892..8e5f179 100644 --- a/src/PreRenderComponent/PreRenderCascade.cs +++ b/src/PreRenderComponent/PreRenderCascade.cs @@ -1,60 +1,21 @@ using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.RenderTree; -using System.Reflection; +using Microsoft.AspNetCore.Components.Rendering; namespace PreRenderComponent { public class PreRenderCascade : ComponentBase { - [Parameter] protected RenderFragment ChildContent { get; set; } - bool IsPreRendering { get; set; } + [Parameter] public RenderFragment ChildContent { get; set; } + [Inject] IPreRenderFlag PreRenderFlag { get; set; } protected override void BuildRenderTree(RenderTreeBuilder builder) { - DetectRenderMode(builder); base.BuildRenderTree(builder); builder.OpenComponent>(0); - builder.AddAttribute(1, "Value", IsPreRendering); + builder.AddAttribute(1, "Value", PreRenderFlag.IsPreRendering); builder.AddAttribute(2, "Name", "PreRendering"); builder.AddAttribute(3, "ChildContent", ChildContent); builder.CloseComponent(); } - private void DetectRenderMode(RenderTreeBuilder builder) - { - try - { - var btype = builder.GetType(); - var rendererFI = btype.GetField("_renderer", BindingFlags.NonPublic | BindingFlags.Instance); - if (rendererFI is null) - { - IsPreRendering = false; - return; - } - var renderer = rendererFI.GetValue(builder); - if (renderer is null) - { - IsPreRendering = false; - return; - } - var rendererType = renderer.GetType(); - if (rendererType is null) - { - IsPreRendering = false; - return; - } - var renderModeFI = rendererType.GetField("_prerenderMode", BindingFlags.NonPublic | BindingFlags.Instance); - if (renderModeFI is null) - { - IsPreRendering = false; - return; - } - - IsPreRendering = (bool)renderModeFI.GetValue(renderer); - } - catch - { - // older previews didn't have pre-render - } - } } } diff --git a/src/PreRenderComponent/PreRenderComponent.csproj b/src/PreRenderComponent/PreRenderComponent.csproj index 6194ccd..74c2523 100644 --- a/src/PreRenderComponent/PreRenderComponent.csproj +++ b/src/PreRenderComponent/PreRenderComponent.csproj @@ -1,12 +1,9 @@ - + netstandard2.0 Library true - - https://dotnet.myget.org/f/blazor-dev/api/v3/index.json; - latest true Mister Magoo @@ -24,10 +21,9 @@ - - - - + + + @@ -37,4 +33,8 @@ + + + + diff --git a/src/PreRenderComponent/PreRenderFlag.cs b/src/PreRenderComponent/PreRenderFlag.cs new file mode 100644 index 0000000..9c314e2 --- /dev/null +++ b/src/PreRenderComponent/PreRenderFlag.cs @@ -0,0 +1,36 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Http; +using Microsoft.JSInterop; +using System; + +namespace PreRenderComponent +{ + public class PreRenderFlag : IPreRenderFlag + { + private bool _isPreRendering = false; +#nullable enable + [Inject] IJSRuntime? JSRuntime { get; set; } +#nullable disable + public PreRenderFlag() + { + if (JSRuntime is null || !(JSRuntime is IJSInProcessRuntime)) + { + throw new ApplicationException("Please add an HttpContextAccessor to detect PreRendering"); + } + } + public PreRenderFlag(IHttpContextAccessor httpContextAccessor) + { + HttpContext = httpContextAccessor.HttpContext; + if (HttpContext.Response.HasStarted) + { + _isPreRendering = false; + } + else + { + _isPreRendering = true; + } + } + public bool IsPreRendering { get => _isPreRendering; } + public HttpContext HttpContext { get; } + } +} diff --git a/src/PreRenderComponent/Properties/launchSettings.json b/src/PreRenderComponent/Properties/launchSettings.json deleted file mode 100644 index e1be0b1..0000000 --- a/src/PreRenderComponent/Properties/launchSettings.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "iisSettings": { - "windowsAuthentication": false, - "anonymousAuthentication": true, - "iisExpress": { - "applicationUrl": "http://localhost:58113/", - "sslPort": 0 - } - }, - "profiles": { - "IIS Express": { - "commandName": "IISExpress", - "launchBrowser": true, - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - } - }, - "PreRenderComponent": { - "commandName": "Project", - "launchBrowser": true, - "environmentVariables": { - "ASPNETCORE_ENVIRONMENT": "Development" - }, - "applicationUrl": "http://localhost:58114/" - } - } -} \ No newline at end of file