Refactor to Server SSR (#205)

* 🚧 feat: wip

* remove old project

* udpate dockerfile

Masa.Blazor.Pro/Global/Config/GlobalConfig.cs → Masa.Blazor.Pro.Client/Global/Config/GlobalConfig.cs

@@ -30,12 +30,17 @@ public GlobalConfig(CookieStorage cookieStorage, I18n i18n)
 
     public EventHandler? NavigationStyleChanged { get; set; }
 
+    public EventHandler? PageModeChanged { get; set; }
+
+    public EventHandler? ExpandOnHoverChanged { get; set; }
+
     public string PageMode
     {
         get => _pageMode ?? PageModes.PageTab;
         set
         {
             _pageMode = value;
+            PageModeChanged?.Invoke(this, EventArgs.Empty);
             _cookieStorage.SetAsync(PageModeKey, value);
         }
     }
@@ -57,6 +62,7 @@ public bool ExpandOnHover
         set
         {
             _expandOnHover = value;
+            ExpandOnHoverChanged?.Invoke(this, EventArgs.Empty);
             _cookieStorage.SetAsync(ExpandOnHoverCookieKey, value);
         }
     }
@@ -83,10 +89,10 @@ public CultureInfo Culture
 
     public async Task InitFromStorage()
     {
-        _pageMode = await _cookieStorage.GetAsync(PageModeKey);
-        _navigationStyle = await _cookieStorage.GetAsync(NavigationStyleKey);
-        _expandOnHover = Convert.ToBoolean(await _cookieStorage.GetAsync(ExpandOnHoverCookieKey));
-        _favorite = await _cookieStorage.GetAsync(FavoriteCookieKey);
+        PageMode = await _cookieStorage.GetAsync(PageModeKey);
+        NavigationStyle = await _cookieStorage.GetAsync(NavigationStyleKey);
+        ExpandOnHover = Convert.ToBoolean(await _cookieStorage.GetAsync(ExpandOnHoverCookieKey));
+        Favorite = await _cookieStorage.GetAsync(FavoriteCookieKey);
 
         var lang = await _cookieStorage.GetAsync(LangCookieKey);
         if (!string.IsNullOrWhiteSpace(lang))

Masa.Blazor.Pro/Global/CookieStorage.cs → Masa.Blazor.Pro.Client/Global/CookieStorage.cs

@@ -13,7 +13,15 @@ public CookieStorage(IJSRuntime jsRuntime)
 
     public async Task<string> GetAsync(string key)
     {
-        return await _jsRuntime.InvokeAsync<string>(JsInteropConstants.GetCookie, key);
+        try
+        {
+            return await _jsRuntime.InvokeAsync<string>(JsInteropConstants.GetCookie, key);
+        }
+        catch (JSDisconnectedException)
+        {
+            // ignore
+            return string.Empty;
+        }
     }
 
     public async void SetAsync<T>(string key, T? value)
@@ -22,9 +30,9 @@ public async void SetAsync<T>(string key, T? value)
         {
             await _jsRuntime.InvokeVoidAsync(JsInteropConstants.SetCookie, key, value?.ToString());
         }
-        catch
+        catch (JSDisconnectedException)
         {
-            // ignored
+            // ignore
         }
     }
 }

Masa.Blazor.Pro/Global/ServiceCollectionExtensions.cs → Masa.Blazor.Pro.Client/Global/ServiceCollectionExtensions.cs

@@ -1,4 +1,6 @@
-namespace Microsoft.Extensions.DependencyInjection
+using System.Net.Http.Json;
+
+namespace Microsoft.Extensions.DependencyInjection
 {
     public static class ServiceCollectionExtensions
     {

Masa.Blazor.Pro/Shared/Favorite.razor.cs → Masa.Blazor.Pro.Client/Layout/Favorite.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Shared
+namespace Masa.Blazor.Pro.Client.Layout
 {
     public partial class Favorite
     {

Masa.Blazor.Pro/Shared/MainLayout.razor → Masa.Blazor.Pro.Client/Layout/MainLayout.razor

@@ -15,7 +15,7 @@
                     <Login />
                 </div>
                 <div class="default-app-bar__nav @PageModeClass">
-                    @if (_pageTab == PageModes.PageTab)
+                    @if (GlobalConfig.PageMode == PageModes.PageTab)
                     {
                         <PageTabs @ref="_pageTabs" SelfPatterns="@s_selfPatterns" />
                     }
@@ -30,7 +30,7 @@
 
             <MMain Class="fill-lighten-1">
                 <div class="pa-6">
-                    @if (_pageTab == PageModes.PageTab)
+                    @if (GlobalConfig.PageMode == PageModes.PageTab)
                     {
                         <PPageContainer PageTabs="@_pageTabs?.PPageTabs" SelfPatterns="@s_selfPatterns">
                             @Body
@@ -42,25 +42,41 @@
                     }
                 </div>
             </MMain>
-            <Settings @bind-PageModel="_pageTab" @bind-Show=_showSetting />
+            <Settings @bind-Show=_showSetting />
         </CascadingValue>
     </PPageTabsProvider>
 </MApp>
 
+<div id="blazor-error-ui" data-nosnippet>
+    An unhandled error has occurred.
+    <a href="." class="reload">Reload</a>
+    <span class="dismiss">🗙</span>
+</div>
+
 @code {
 
     private static readonly string[] s_selfPatterns =
-    {
+    [
         "/app/todo"
-    };
+    ];
 
     private bool? _showSetting;
 
-    private string? _pageTab;
-
     private PageTabs? _pageTabs;
 
-    private string PageModeClass => _pageTab == PageModes.PageTab ? "page-mode--tab" : "page-mode--breadcrumb";
+    private string PageModeClass => GlobalConfig.PageMode == PageModes.PageTab ? "page-mode--tab" : "page-mode--breadcrumb";
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        GlobalConfig.PageModeChanged += PageModeChanged;
+    }
+
+    private void PageModeChanged(object? sender, EventArgs e)
+    {
+        InvokeAsync(StateHasChanged);
+    }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -69,6 +85,7 @@
         if (firstRender)
         {
             await GlobalConfig.InitFromStorage();
+            StateHasChanged();
         }
     }
 

Masa.Blazor.Pro.Client/Layout/MainLayout.razor.css

@@ -0,0 +1,19 @@
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }

Masa.Blazor.Pro/Shared/Navigation.razor → Masa.Blazor.Pro.Client/Layout/Navigation.razor

@@ -3,15 +3,14 @@
 @inject GlobalConfig GlobalConfig
 @implements IDisposable
 
-<MNavigationDrawer @bind-Value="Visible" 
+<MNavigationDrawer @bind-Value="Visible"
                    Class="@($"navigation {ComputedNavigationClass}")"
-                   Width=300 
+                   Width=300
                    MiniVariantWidth=80
                    Floating
-                   ExpandOnHover="GlobalConfig.ExpandOnHover"
-                   MiniVariant="GlobalConfig.ExpandOnHover"
+                   ExpandOnHover="@GlobalConfig.ExpandOnHover"
+                   MiniVariant="@GlobalConfig.ExpandOnHover"
                    App>
-
     <div class="logo" @onclick="() => NavHelper.NavigateTo(GlobalVariables.DefaultRoute)">
         <img class="hover-pointer" height="49" src="/img/mainLayout/logo-en.svg" />
     </div>
@@ -77,6 +76,8 @@
     [Inject]
     public MasaBlazor Masa { get; set; } = default!;
 
+    private CancellationTokenSource? _cancellationTokenSource;
+
     public bool? Visible { get; set; } = true;
 
     public string ComputedNavigationClass => (GlobalConfig.NavigationStyle == NavigationStyles.Rounded ? "rounded-r-xl" : string.Empty);
@@ -85,12 +86,24 @@
     {
         base.OnInitialized();
 
-        GlobalConfig.NavigationStyleChanged += NavigationStyleChanged;
+        GlobalConfig.NavigationStyleChanged += GlobalConfigChanged;
+        GlobalConfig.ExpandOnHoverChanged += GlobalConfigChanged;
     }
 
-    private void NavigationStyleChanged(object? sender, EventArgs e)
+    private async void GlobalConfigChanged(object? sender, EventArgs e)
     {
-        InvokeAsync(StateHasChanged);
+        _cancellationTokenSource?.Cancel();
+        _cancellationTokenSource = new CancellationTokenSource();
+
+        try
+        {
+            await Task.Delay(100, _cancellationTokenSource.Token);
+            await InvokeAsync(StateHasChanged);
+        }
+        catch (TaskCanceledException)
+        {
+            // ignore
+        }
     }
 
     public void Switch()
@@ -108,7 +121,8 @@
 
     void IDisposable.Dispose()
     {
-        GlobalConfig.NavigationStyleChanged -= NavigationStyleChanged;
+        GlobalConfig.NavigationStyleChanged -= GlobalConfigChanged;
+        GlobalConfig.ExpandOnHoverChanged -= GlobalConfigChanged;
     }
 
 }

Masa.Blazor.Pro/Shared/Settings.razor → Masa.Blazor.Pro.Client/Layout/Settings.razor

@@ -38,32 +38,21 @@
     [Parameter]
     public EventCallback<bool?> ShowChanged { get; set; }
 
-    [Parameter]
-    public string PageModel { get; set; } = PageModes.PageTab;
-
     [Parameter]
     public string NavigationStyle { get; set; } = NavigationStyles.Flat;
 
-    [Parameter]
-    public EventCallback<string> PageModelChanged { get; set; }
-
     [Parameter]
     public EventCallback<string> NavigationBarStyleChanged { get; set; }
 
     protected override async Task OnInitializedAsync()
     {
-        if (PageModelChanged.HasDelegate)
-            await PageModelChanged.InvokeAsync(GlobalConfig.PageMode);
         if (NavigationBarStyleChanged.HasDelegate)
             await NavigationBarStyleChanged.InvokeAsync(GlobalConfig.NavigationStyle);
     }
 
-    async Task PageModeChanged(string value)
+    void PageModeChanged(string value)
     {
         GlobalConfig.PageMode = value;
-        if (PageModelChanged.HasDelegate)
-            await PageModelChanged.InvokeAsync(value);
-        else PageModel = value;
     }
 
     async Task NavigationStyleChanged(string value)

Masa.Blazor.Pro.Client/Masa.Blazor.Pro.Client.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
+    <StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Masa.Blazor" Version="1.3.0-beta.6" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
+  </ItemGroup>
+
+</Project>

Masa.Blazor.Pro/Pages/App/ECommerce/Shop/Shop.razor.cs → Masa.Blazor.Pro.Client/Pages/App/ECommerce/Shop/Shop.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.ECommerce.Shop
+namespace Masa.Blazor.Pro.Client.Pages.App.ECommerce.Shop
 {
     public partial class Shop : ProComponentBase
     {

Masa.Blazor.Pro/Pages/App/ECommerce/Shop/ViewModel/ShopPage.cs → Masa.Blazor.Pro.Client/Pages/App/ECommerce/Shop/ViewModel/ShopPage.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.ECommerce.Shop;
+namespace Masa.Blazor.Pro.Client.Pages.App.ECommerce.Shop;
 
 public class ShopPage
 {

Masa.Blazor.Pro/Pages/App/Invoice/Add.razor → Masa.Blazor.Pro.Client/Pages/App/Invoice/Add.razor

@@ -223,4 +223,4 @@
     </MCol>
 </MRow>
 
-<Masa.Blazor.Pro.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />
+<Masa.Blazor.Pro.Client.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />

Masa.Blazor.Pro/Pages/App/Invoice/Add.razor.cs → Masa.Blazor.Pro.Client/Pages/App/Invoice/Add.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.Invoice
+namespace Masa.Blazor.Pro.Client.Pages.App.Invoice
 {
     public partial class Add : ProComponentBase
     {

Masa.Blazor.Pro/Pages/App/Invoice/Components/InvoiceList.razor.cs → Masa.Blazor.Pro.Client/Pages/App/Invoice/Components/InvoiceList.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.Invoice.Components;
+namespace Masa.Blazor.Pro.Client.Pages.App.Invoice.Components;
 
 public partial class InvoiceList
 {

Masa.Blazor.Pro.Client/Pages/App/Invoice/List.razor

@@ -0,0 +1,3 @@
+@page "/app/invoice/list"
+
+<Masa.Blazor.Pro.Client.Pages.App.Invoice.Components.InvoiceList />

Masa.Blazor.Pro/Pages/App/Invoice/Preview.razor → Masa.Blazor.Pro.Client/Pages/App/Invoice/Preview.razor

@@ -163,5 +163,5 @@
     </MCol>
 </MRow>
 
-<Masa.Blazor.Pro.Pages.App.Invoice.Components.SendInvoice @bind-Show="_showSendInvoice" />
-<Masa.Blazor.Pro.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />
+<Masa.Blazor.Pro.Client.Pages.App.Invoice.Components.SendInvoice @bind-Show="_showSendInvoice" />
+<Masa.Blazor.Pro.Client.Pages.App.Invoice.Components.AddPayment @bind-Show="_showAddPayment" />

Masa.Blazor.Pro/Pages/App/Invoice/Preview.razor.cs → Masa.Blazor.Pro.Client/Pages/App/Invoice/Preview.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.Invoice
+namespace Masa.Blazor.Pro.Client.Pages.App.Invoice
 {
     public partial class Preview
     {

Masa.Blazor.Pro/Pages/App/Invoice/ViewModel/InvoicePage.cs → Masa.Blazor.Pro.Client/Pages/App/Invoice/ViewModel/InvoicePage.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.Invoice;
+namespace Masa.Blazor.Pro.Client.Pages.App.Invoice;
 
 public class InvoicePage
 {

Masa.Blazor.Pro/Pages/App/Todo/Todo.razor.cs → Masa.Blazor.Pro.Client/Pages/App/Todo/Todo.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.Todo
+namespace Masa.Blazor.Pro.Client.Pages.App.Todo
 {
     public partial class Todo
     {

Masa.Blazor.Pro/Pages/App/Todo/TodoDetail.razor.cs → Masa.Blazor.Pro.Client/Pages/App/Todo/TodoDetail.razor.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Components.Forms;
 
-namespace Masa.Blazor.Pro.Pages.App.Todo;
+namespace Masa.Blazor.Pro.Client.Pages.App.Todo;
 
 public partial class TodoDetail
 {

Masa.Blazor.Pro/Pages/App/User/List.razor.cs → Masa.Blazor.Pro.Client/Pages/App/User/List.razor.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.User
+namespace Masa.Blazor.Pro.Client.Pages.App.User
 {
     public partial class List
     {

Masa.Blazor.Pro/Pages/App/User/View.razor → Masa.Blazor.Pro.Client/Pages/App/User/View.razor

@@ -212,7 +212,7 @@
     </MCol>
 </MRow>
 
-<Masa.Blazor.Pro.Pages.App.Invoice.Components.InvoiceList />
+<Masa.Blazor.Pro.Client.Pages.App.Invoice.Components.InvoiceList />
 
 @code {
 

Masa.Blazor.Pro/Pages/App/User/ViewModel/UserPage.cs → Masa.Blazor.Pro.Client/Pages/App/User/ViewModel/UserPage.cs

@@ -1,4 +1,4 @@
-namespace Masa.Blazor.Pro.Pages.App.User;
+namespace Masa.Blazor.Pro.Client.Pages.App.User;
 
 public class UserPage
 {

Masa.Blazor.Pro/Pages/Authentication/Components/Login.razor.cs → Masa.Blazor.Pro.Client/Pages/Authentication/Components/Login.razor.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Components.Web;
 
-namespace Masa.Blazor.Pro.Pages.Authentication.Components;
+namespace Masa.Blazor.Pro.Client.Pages.Authentication.Components;
 
 public partial class Login
 {