style: intergrate blazor component

foxminchan · Jun 9, 2024 · af3b4be · af3b4be
1 parent 8529e05
commit af3b4be
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 23 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -76,6 +76,7 @@
 		<!-- Scaffolding -->
 		<PackageVersion Include="Microsoft.TypeScript.MSBuild" Version="5.4.4" />
 		<PackageVersion Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="8.0.2" />
+		<PackageVersion Include="Microsoft.Web.LibraryManager.Build" Version="2.1.175" />
 		<!-- xUnit -->
 		<PackageVersion Include="xunit" Version="2.8.1" />
 		<PackageVersion Include="xunit.runner.visualstudio" Version="2.8.1" />

diff --git a/src/RookieShop.StoreFront/Components/App.razor b/src/RookieShop.StoreFront/Components/App.razor
@@ -0,0 +1 @@
+@* No-op App component *@
diff --git a/src/RookieShop.StoreFront/Components/_Imports.razor b/src/RookieShop.StoreFront/Components/_Imports.razor
@@ -0,0 +1,10 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using RookieShop.Storefront
+@using RookieShop.Storefront.Components
diff --git a/src/RookieShop.StoreFront/Program.cs b/src/RookieShop.StoreFront/Program.cs
@@ -7,6 +7,7 @@
 using RookieShop.Storefront.Options;
 using RookieShop.Storefront.Services;
 using SmartComponents.Inference.OpenAI;
+using RookieShop.Storefront.Components;
 using Stripe;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -15,6 +16,10 @@
 
 builder.Configuration.Bind(appSettings);
 
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents()
+    .AddCircuitOptions(opt => opt.DetailedErrors = true);
+
 builder.AddServiceDefaults();
 
 StripeConfiguration.ApiKey = appSettings.StripeSettings.StripeSecretKey;
@@ -90,6 +95,11 @@
 
 app.UseAuthorization();
 
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode();
+
 app.MapControllerRoute(
     "Product",
     "{area:exists}/{controller=Home}/{action=Index}/{id?}");

diff --git a/src/RookieShop.StoreFront/RookieShop.Storefront.csproj b/src/RookieShop.StoreFront/RookieShop.Storefront.csproj
@@ -28,12 +28,10 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Microsoft.TypeScript.MSBuild">
-			<PrivateAssets>all</PrivateAssets>
-			<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
-		</PackageReference>
+		<PackageReference Include="Microsoft.TypeScript.MSBuild" />
 		<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" />
 		<PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
+		<PackageReference Include="Microsoft.Web.LibraryManager.Build" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -59,6 +57,10 @@
 		</PackageReference>
 	</ItemGroup>
 
+	<ItemGroup>
+	  <Folder Include="wwwroot\lib\dist\hyperscript.org\" />
+	</ItemGroup>
+
 	<Target Name="Tailwind" BeforeTargets="Build">
 		<Message Importance="Normal" Text="Installing node packages" Condition="!Exists('node_modules')" />
 		<Exec Command="bun install" Condition="!Exists('node_modules')" WorkingDirectory="$(MSBuildProjectDirectory)" />

diff --git a/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml b/src/RookieShop.StoreFront/Views/Shared/_Layout.cshtml
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <base href="~/"/>
+    <component type="typeof(Microsoft.AspNetCore.Components.Web.HeadOutlet)"
+               render-mode="ServerPrerendered"/>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <partial name="Partials/_DefaultMetaTagsPartital"/>
@@ -69,19 +72,19 @@
                                hx-target="#head"
                                hx-trigger="confirmed"
                                onClick="Swal.fire({
-                                            title: 'Are you sure?' ,
-                                            text: 'You will be logged out.' ,
-                                            icon: 'warning',
-                                            showCancelButton: true,
-                                            confirmButtonColor: '#3085d6',
-                                            cancelButtonColor: '#d33' ,
-                                            confirmButtonText: 'Yes, log out!'
-                                        }).then((result)=>{
-                                            if(result.isConfirmed){
-                                                htmx.trigger(this, 'confirmed');
-                                                toastr.success('You have been logged out');
-                                            } 
-                                        })"
+                                                title: 'Are you sure?' ,
+                                                text: 'You will be logged out.' ,
+                                                icon: 'warning',
+                                                showCancelButton: true,
+                                                confirmButtonColor: '#3085d6',
+                                                cancelButtonColor: '#d33' ,
+                                                confirmButtonText: 'Yes, log out!'
+                                            }).then((result)=>{
+                                                if(result.isConfirmed){
+                                                    htmx.trigger(this, 'confirmed');
+                                                    toastr.success('You have been logged out');
+                                                } 
+                                            })"
                                class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-4 py-2 text-center cursor-pointer">
                                 Log Out
                             </a>
@@ -145,30 +148,30 @@
                 asp-append-version="true"
                 integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
                 crossorigin="anonymous">
-        </script>
+            </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.11.0/sweetalert2.min.js"
                 asp-fallback-src="~/lib/dist/sweetalert2/sweetalert2.min.js"
                 asp-fallback-test="window.Swal"
                 asp-append-version="true"
                 integrity="sha512-Wi5Ms24b10EBwWI9JxF03xaAXdwg9nF51qFUDND/Vhibyqbelri3QqLL+cXCgNYGEgokr+GA2zaoYaypaSDHLg=="
                 crossorigin="anonymous"
                 referrerpolicy="no-referrer">
-        </script>
+            </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"
                 asp-fallback-src="~/lib/dist/toastr.js/toastr.min.js"
                 asp-fallback-test="window.toastr"
                 asp-append-version="true"
                 integrity="sha512-lbwH47l/tPXJYG9AcFNoJaTMhGvYWhVM9YI43CT+uteTRRaiLCui8snIgyAN8XWgNjNhCqlAUdzZptso6OCoFQ=="
                 crossorigin="anonymous"
                 referrerpolicy="no-referrer">
-        </script>
+            </script>
         <script src="https://unpkg.com/[email protected]"
                 asp-fallback-src="~/lib/dist/htmx/htmx.min.js"
                 asp-fallback-test="window.htmx"
                 asp-append-version="true"
                 integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
                 crossorigin="anonymous">
-        </script>
+            </script>
         <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
                 asp-fallback-src="~/lib/dist/alpinejs/cdn.min.js"
                 asp-fallback-test="window.Alpine"
@@ -178,8 +181,7 @@
                 asp-append-version="true"></script>
     </environment>
 </cache>
-
 @await RenderSectionAsync("Scripts", false)
-
+<script src="~/_framework/blazor.server.js"></script>
 </body>
 </html>