Merge pull request #1 from SQL-MisterMagoo/new-detection-method

Swapped to a new method of detecting pre-rendering and included a ser…

Directory.Build.props

@@ -1,6 +1,5 @@
 <Project>
  <PropertyGroup>
-   <BlazorVersion>0.9.0-preview3-19154-02</BlazorVersion>
-   <ReleaseVersion>0.1.0-beta-1</ReleaseVersion>
+   <ReleaseVersion>0.2.0-beta-1</ReleaseVersion>
  </PropertyGroup>
 </Project>

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<IPreRenderFlag,PreRenderFlag>();
 ```
 
+Consume the service wherever you need it (unless you want to use the Cascading Value component)
+``` HTML
+@inject PreRenderComponent.IPreRenderFlag PreRenderFlag
+@if (PreRenderFlag.IsPreRendering)
+{
+    <h1>Pre-Rendering</h1>
+}
+```
+### Cascading Value (Optional)
 Wrap the Router component in PreRenderCascade in the App.razor file
 
-```
-<PreRenderCascade>
-    <Router AppAssembly="typeof(Startup).Assembly" />
-</PreRenderCascade>
+``` HTML
+<PreRenderComponent.PreRenderCascade>
+    <Router AppAssembly="typeof(App).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </Found>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p>Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</PreRenderComponent.PreRenderCascade>
 ```
 
 Consume the CascadingValue in your own pages/components
 
-```
+``` CSharp
 @if (IsPreRendering)
 {
   <button class="btn btn-dark" onclick="@IncrementCount" disabled>Don't Click me</button>
@@ -34,7 +54,7 @@ else
 }
 
 
-@functions {
+@code {
 [CascadingParameter(Name = "PreRendering")] 
 protected bool IsPreRendering { get; set; }
 }

samples/PreRenderSample/Components/App.razor

@@ -1,7 +1,12 @@
-@*
-    The Router component displays whichever component has a @page
-    directive matching the current URI.
-*@
-<PreRenderCascade>
-    <Router AppAssembly="typeof(Startup).Assembly" />
-</PreRenderCascade>
+<PreRenderComponent.PreRenderCascade>
+    <Router AppAssembly="typeof(App).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </Found>
+        <NotFound>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p>Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</PreRenderComponent.PreRenderCascade>

samples/PreRenderSample/Components/Pages/Counter.razor

@@ -1,18 +1,24 @@
 @page "/counter"
-To see the Pre-Rendering in effect, open the browser dev tools, 
-set the network speed to slow, then refresh.
+<mark>
+    To see the Pre-Rendering in effect, open the browser dev tools,
+    set the network speed to slow, then refresh.
+</mark>
+@if (IsPreRendering)
+{
+    <h1>Pre-Rendering</h1>
+}
 
 <h1>Counter</h1>
 
 <p>Current count: @currentCount</p>
 
 @if (IsPreRendering)
 {
-  <button class="btn btn-dark" onclick="@IncrementCount" disabled>Don't Click me</button>
+    <button class="btn btn-dark" @onclick="IncrementCount" disabled>Don't Click me</button>
 }
 else
 {
-  <button class="btn btn-primary" onclick="@IncrementCount">Click me</button>
+    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 }
 
 @functions {

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
+<mark>
+    To see the Pre-Rendering in effect, open the browser dev tools,
+    set the network speed to slow, then refresh.
+</mark>
+@if (PreRenderFlag.IsPreRendering)
+{
+    <h1>Pre-Rendering</h1>
+}
 
 <h1>Weather forecast</h1>
 
@@ -34,11 +43,11 @@ else
         </tbody>
     </table>
 }
-
-@functions {
+@code
+{
     WeatherForecast[] forecasts;
 
-    protected override async Task OnInitAsync()
+    protected override async Task OnInitializedAsync()
     {
         forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
     }

samples/PreRenderSample/Components/Pages/Index.razor

@@ -1,17 +1,24 @@
 @page "/"
+<mark>
+    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.
+</mark>
+@if (IsPreRendering)
+{
+    <h1>Pre-Rendering</h1>
+}
 
 <h1>Hello, world!</h1>
 
 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)
 {
-  <h2>Warming up the engine...</h2>
+    <h2>Warming up the engine...</h2>
 }
 @functions {
-  [CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; }
+    [CascadingParameter(Name = "PreRendering")] protected bool IsPreRendering { get; set; }
 }

samples/PreRenderSample/Components/Shared/NavMenu.razor

@@ -1,11 +1,11 @@
 <div class="top-row pl-4 navbar navbar-dark">
     <a class="navbar-brand" href="">PreRenderSample</a>
-    <button class="navbar-toggler" onclick="@ToggleNavMenu">
+    <button class="navbar-toggler" @onclick="ToggleNavMenu">
         <span class="navbar-toggler-icon"></span>
     </button>
 </div>
 
-<div class="@NavMenuCssClass" onclick="@ToggleNavMenu">
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
     <ul class="nav flex-column">
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">

samples/PreRenderSample/Components/_ViewImports.cshtml → 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

samples/PreRenderSample/Pages/Index.cshtml → samples/PreRenderSample/Pages/_Host.cshtml

@@ -1,6 +1,9 @@
-@page "{*clientPath}"
+@page "/"
+@namespace PreRenderSample.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -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" />
     </environment>
     <link href="css/site.css" rel="stylesheet" />
 </head>
 <body>
-    <app>@(await Html.RenderComponentAsync<App>())</app>
+    <app>
+        <component type="typeof(PreRenderSample.Components.App)" render-mode="ServerPrerendered" />
+    </app>
+
+    <div id="blazor-error-ui">
+        <environment include="Staging,Production">
+            An error has occurred. This application may no longer respond until reloaded.
+        </environment>
+        <environment include="Development">
+            An unhandled exception has occurred. See browser dev tools for details.
+        </environment>
+        <a href class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
 
-    <script src="_framework/components.server.js"></script>
+    <script src="_framework/blazor.server.js"></script>
 </body>
 </html>

samples/PreRenderSample/Pages/_Imports.razor

@@ -0,0 +1 @@
+@using PreRenderSample.Components

samples/PreRenderSample/PreRenderSample.csproj

@@ -1,16 +1,10 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>netcoreapp3.0</TargetFramework>
-    <LangVersion>7.3</LangVersion>
-    <_RazorComponentInclude>Components\**\*.cshtml</_RazorComponentInclude>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+    <LangVersion>latest</LangVersion>
   </PropertyGroup>
 
-  <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.Server" Version="3.0.0-preview3-19153-02" />
-    <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.0.0-preview3-19153-02" />
-  </ItemGroup>
-
   <ItemGroup>
     <ProjectReference Include="..\..\src\PreRenderComponent\PreRenderComponent.csproj" />
   </ItemGroup>

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<Startup>();
-						});
-	}
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder.UseStartup<Startup>();
+                });
+    }
 }

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"
       }

samples/PreRenderSample/Services/IWeatherForecastService.cs

@@ -0,0 +1,11 @@
+using System;
+using System.Threading.Tasks;
+
+namespace PreRenderSample.Services
+{
+    public interface IWeatherForecastService
+    {
+
+        Task<WeatherForecast[]> GetForecastAsync(DateTime startDate);
+    }
+}

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; }
+    }
 }