Implemented INavigationHistoryService

Author: majorimi

.github/docs/JsInterop.md

@@ -15,7 +15,6 @@ For code examples [see usage](https://github.com/majorimi/blazor-components/blob
 You can try it out by using the [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop).
 
 # Features
-
 - **Click JS**: 
   - `ClickBoundariesElement` is a component which wraps the given content to a DIV and subscribes to all click events: `OnOutsideClick`, `OnInsideClick`. 
   - Also an **injectable `IClickBoundariesHandler` service** for callback event handlers.
@@ -31,8 +30,9 @@ You can try it out by using the [demo app](https://blazorextensions.z6.web.core.
 - **Language JS**: is an **injectable `ILanguageService` service** for detect the browser language preference.
 - **Browser Date JS**: is an **injectable `IBrowserDateService` service** is a simple JS call to `new Date();` to retrieve client machine date and time.
 - **Browser Theme JS**: is an **injectable `IBrowserThemeService` service** to handle Browser color scheme queries and changes.
-- **Geo JS**: is an **injectable `IGeolocationService` service** for detect the device Geolocation (GPS position, speed, heading, etc.).
+- **Geo JS**: is an **injectable `IGeolocationService` service** for detect the device [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) (GPS position, speed, heading, etc.).
 - **Head JS**: is an **injectable `IHtmlHeadService` service** for accessing and setting HTML document `Head tags`.
+- **Browser History JS**: is an **injectable `INavigationHistoryService` service** to access [HTML History API](https://developer.mozilla.org/en-US/docs/Web/API/History) functionality.
 
 ## Click JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#click-js))
 **NOTE: Blazor supports `@onclick` event which is equivalent with `OnInsideClick`. 
@@ -290,7 +290,6 @@ Removes event listener for `prefers-color-scheme` HTML event for the Browser.
 - **`DisposeAsync`: `ValueTask IAsyncDisposable()` interface** <br />
 Implements `IAsyncDisposable` interface the injected service should be Disposed.
 
-
 ## Geolocation JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#geo-js))
 **Geolocation JS** is an injectable `IGeolocationService` service for **detect the device Geolocation (GPS position, speed, heading, etc.)**. 
 It is using the Geolocation API which allows users to provide their location to web applications if they desire.
@@ -328,6 +327,26 @@ If you have multiple fav icon tags set in the Head first call `GetHtmlFavIconsAs
 - **`DisposeAsync`: `ValueTask IAsyncDisposable()` interface** <br />
 Implements `IAsyncDisposable` interface the injected service should be Disposed.
 
+## Browser History JS (See: [demo app](https://blazorextensions.z6.web.core.windows.net/jsinterop#history-js))
+**Browser History JS** is an injectable `INavigationHistoryService` service** to access HTML History API functionality. 
+It is useful when don't want to rely on Blazor `NavigationManager` which does not have access to full History list and when it navigates trigger a page load/update.
+
+### Functions
+- **`GetLengthAsync`**: **`ValueTask<int> GetLengthAsync()`** <br />
+Returns an Integer representing the number of elements in the session history, including the currently loaded page.
+- **`GetScrollRestorationAsync`**: **`ValueTask<string> GetScrollRestorationAsync()`** <br />
+Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.
+- **`BackAsync`**: **`ValueTask BackAsync()`** <br />
+This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1).
+- **`ForwardAsync`**: **`ValueTask ForwardAsync()`** <br />
+This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1).
+- **`GoAsync`**: **`ValueTask GoAsync(int delta)`** <br />
+Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page.
+- **`ReplaceStateAsync`**: **`ValueTask ReplaceStateAsync(ExpandoObject? state, string title, string url)`** <br />
+Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL.
+- **`PushStateAsync`**: **`ValueTask PushStateAsync(ExpandoObject? state, string title, string url)`** <br />
+Pushes the given data onto the session history stack with the specified title (and, if provided, URL).
+
 
 # Configuration
 
@@ -366,6 +385,8 @@ Add using statement to your Blazor <component/page>.razor file. Or globally refe
 @using Majorsoft.Blazor.Components.Common.JsInterop.BrowserDate
 @*Only if you want to use Browser ColorTheme*@
 @using Majorsoft.Blazor.Components.Common.JsInterop.BrowserColorTheme
+@*Only if you want to use Browser History*@
+@using Majorsoft.Blazor.Components.Common.JsInterop.History
 ```
 
 

src/Majorsoft.Blazor.Components.Common.JsInterop/JsInteropExtension.cs

@@ -9,6 +9,7 @@
 using Majorsoft.Blazor.Components.Common.JsInterop.GlobalMouseEvents;
 using Majorsoft.Blazor.Components.Common.JsInterop.Head;
 using Majorsoft.Blazor.Components.Common.JsInterop.Language;
+using Majorsoft.Blazor.Components.Common.JsInterop.Navigation;
 using Majorsoft.Blazor.Components.Common.JsInterop.Resize;
 using Majorsoft.Blazor.Components.Common.JsInterop.Scroll;
 
@@ -44,6 +45,7 @@ public static IServiceCollection AddJsInteropExtensions(this IServiceCollection
 			services.AddTransient<IHtmlHeadService, HtmlHeadService>();
 			services.AddTransient<IBrowserDateService, BrowserDateService>();
 			services.AddTransient<IBrowserThemeService, BrowserThemeService>();
+			services.AddTransient<INavigationHistoryService, NavigationHistoryService>();
 
 			return services;
 		}

src/Majorsoft.Blazor.Components.Common.JsInterop/Majorsoft.Blazor.Components.Common.JsInterop.xml

@@ -0,0 +1,61 @@
+using System.Dynamic;
+using System.Threading.Tasks;
+
+namespace Majorsoft.Blazor.Components.Common.JsInterop.Navigation
+{
+	/// <summary>
+	/// Injectable service to handle Browser history JS Interops.
+	/// https://developer.mozilla.org/en-US/docs/Web/API/History
+	/// </summary>
+	public interface INavigationHistoryService
+	{
+		/// <summary>
+		/// Returns an Integer representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1.
+		/// </summary>
+		/// <returns>ValueTask</returns>
+		ValueTask<int> GetLengthAsync();
+
+		/// <summary>
+		/// Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either `auto` or `manual`.
+		/// </summary>
+		/// <returns>ValueTask</returns>
+		ValueTask<string> GetScrollRestorationAsync();
+
+		/// <summary>
+		/// This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1).
+		/// </summary>
+		/// <returns>ValueTask</returns>
+		ValueTask BackAsync();
+
+		/// <summary>
+		/// This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1).
+		/// </summary>
+		/// <returns>ValueTask</returns>
+		ValueTask ForwardAsync();
+
+		/// <summary>
+		/// Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page.
+		/// </summary>
+		/// <param name="delta">The position in the history to which you want to move, relative to the current page. A negative value moves backwards, a positive value moves forwards.</param>
+		/// <returns>ValueTask</returns>
+		ValueTask GoAsync(int delta);
+
+		/// <summary>
+		/// Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL.
+		/// </summary>
+		/// <param name="state">Arbitrary object of the page</param>
+		/// <param name="title">Page tile</param>
+		/// <param name="url">New URL to show and add to history</param>
+		/// <returns>ValueTask</returns>
+		ValueTask ReplaceStateAsync(ExpandoObject? state, string title, string url);
+
+		/// <summary>
+		/// Pushes the given data onto the session history stack with the specified title (and, if provided, URL).
+		/// </summary>
+		/// <param name="state">Arbitrary object of the page</param>
+		/// <param name="title">Page tile</param>
+		/// <param name="url">New URL to show and add to history</param>
+		/// <returns>ValueTask</returns>
+		ValueTask PushStateAsync(ExpandoObject? state, string title, string url);
+	}
+}

src/Majorsoft.Blazor.Components.Common.JsInterop/Navigation/INavigationHistoryService.cs

@@ -0,0 +1,38 @@
+using System.Dynamic;
+using System.Threading.Tasks;
+
+using Microsoft.JSInterop;
+
+namespace Majorsoft.Blazor.Components.Common.JsInterop.Navigation
+{
+	/// <summary>
+	/// Implementation of <see cref="INavigationHistoryService"/>
+	/// </summary>
+	public class NavigationHistoryService : INavigationHistoryService
+	{
+		private readonly IJSRuntime _jSRuntime;
+
+		public NavigationHistoryService(IJSRuntime jSRuntime)
+		{
+			_jSRuntime = jSRuntime;
+		}
+
+		public async ValueTask<int> GetLengthAsync() => await _jSRuntime.InvokeAsync<int>("eval", "history.length");
+		public async ValueTask<string> GetScrollRestorationAsync() => await _jSRuntime.InvokeAsync<string>("eval", "history.scrollRestoration");
+
+		public async ValueTask BackAsync()
+			=> await _jSRuntime.InvokeVoidAsync("history.back");
+
+		public async ValueTask ForwardAsync()
+			=> await _jSRuntime.InvokeVoidAsync("history.forward");
+
+		public async ValueTask GoAsync(int delta)
+			=> await _jSRuntime.InvokeVoidAsync("history.go", delta);
+
+		public async ValueTask PushStateAsync(ExpandoObject? state, string title, string url)
+			=> await _jSRuntime.InvokeVoidAsync("history.pushState", state, title, url);
+
+		public async ValueTask ReplaceStateAsync(ExpandoObject? state, string title, string url)
+			=> await _jSRuntime.InvokeVoidAsync("history.replaceState", state, title, url);
+	}
+}

src/Majorsoft.Blazor.Components.Common.JsInterop/Navigation/NavigationHistoryService.cs

@@ -2,6 +2,7 @@
 
 using Bunit;
 
+using Majorsoft.Blazor.Components.Common.JsInterop.Navigation;
 using Majorsoft.Blazor.Components.Common.JsInterop.Scroll;
 using Majorsoft.Blazor.Components.CommonTestsBase;
 
@@ -18,17 +19,20 @@ public class PermaLinkBlazorServerInitializerTest : ComponentsTestBase<PermaLink
 	{
 		private Mock<IPermaLinkWatcherService> _permaLinkWatcherServiceMock;
 		private Mock<IScrollHandler> _scrollHandlerMock;
+		private Mock<INavigationHistoryService> _navigationHistoryServiceMock;
 
 		[TestInitialize]
 		public void Init()
 		{
 			var logger = new Mock<ILogger<IPermaLinkWatcherService>>();
 			_permaLinkWatcherServiceMock = new Mock<IPermaLinkWatcherService>();
 			_scrollHandlerMock = new Mock<IScrollHandler>();
+			_navigationHistoryServiceMock = new Mock<INavigationHistoryService>();
 
 			_testContext.Services.Add(new ServiceDescriptor(typeof(ILogger<IPermaLinkWatcherService>), logger.Object));
 			_testContext.Services.Add(new ServiceDescriptor(typeof(IPermaLinkWatcherService), _permaLinkWatcherServiceMock.Object));
 			_testContext.Services.Add(new ServiceDescriptor(typeof(IScrollHandler), _scrollHandlerMock.Object));
+			_testContext.Services.Add(new ServiceDescriptor(typeof(INavigationHistoryService), _navigationHistoryServiceMock.Object));
 			_testContext.Services.Add(new ServiceDescriptor(typeof(SingletonComponentService<PermaLinkBlazorServerInitializer>), new SingletonComponentService<PermaLinkBlazorServerInitializer>()));
 			_testContext.Services.Add(new ServiceDescriptor(typeof(SingletonComponentService<PermalinkBlazorWasmInitializer>), new SingletonComponentService<PermalinkBlazorWasmInitializer>()));
 		}

src/Majorsoft.Blazor.Components.PermaLink.Tests/PermaLinkBlazorServerInitializerTest.cs

@@ -3,6 +3,7 @@
 
 @inject IScrollHandler _scrollHandler
 @inject NavigationManager _navigationManager
+@inject INavigationHistoryService _navigationHistoryService
 @inject ILogger<IPermaLinkWatcherService> _logger
 @inject SingletonComponentService<PermaLinkBlazorServerInitializer> _singleton
 
@@ -26,7 +27,7 @@
         if (firstRender)
         {
             //setup permalink
-            _permalinkWatcher = new PermaLinkWatcherService(_scrollHandler, _navigationManager, _logger);
+            _permalinkWatcher = new PermaLinkWatcherService(_scrollHandler, _navigationManager, _logger, _navigationHistoryService);
             _permalinkWatcher.WatchPermaLinks();
         }
     }

src/Majorsoft.Blazor.Components.PermaLink/PermaLinkBlazorServerInitializer.razor

@@ -1,6 +1,7 @@
 using System;
 using System.Text.RegularExpressions;
 
+using Majorsoft.Blazor.Components.Common.JsInterop.Navigation;
 using Majorsoft.Blazor.Components.Common.JsInterop.Scroll;
 
 using Microsoft.AspNetCore.Components;
@@ -19,17 +20,22 @@ public class PermaLinkWatcherService : IPermaLinkWatcherService
 		private readonly IScrollHandler _scrollHandler;
 		private readonly NavigationManager _navigationManager;
 		private readonly ILogger<IPermaLinkWatcherService> _logger;
+		private readonly INavigationHistoryService _navigationHistoryService;
 
 		public event EventHandler<PermalinkDetectedEventArgs> PermalinkDetected;
 
 		public bool SmoothScroll { get; set; }
 
-		public PermaLinkWatcherService(IScrollHandler scrollHandler, NavigationManager navigationManager, ILogger<IPermaLinkWatcherService> logger, bool smoothScroll = false)
+		public PermaLinkWatcherService(IScrollHandler scrollHandler, 
+			NavigationManager navigationManager, 
+			ILogger<IPermaLinkWatcherService> logger,
+			INavigationHistoryService navigationHistoryService,
+			bool smoothScroll = false)
 		{
 			_scrollHandler = scrollHandler;
 			_navigationManager = navigationManager;
 			_logger = logger;
-
+			_navigationHistoryService = navigationHistoryService;
 			SmoothScroll = smoothScroll;
 		}
 
@@ -55,7 +61,7 @@ private void HandleLocationChanged(object sender, LocationChangedEventArgs e)
 				if(PermalinkDetected is not null)
 				{
 					PermalinkDetected.Invoke(this, new PermalinkDetectedEventArgs(e, perma));
-				}	
+				}
 
 				_scrollHandler.ScrollToElementByNameAsync(perma, SmoothScroll);
 			}
@@ -90,7 +96,7 @@ private void SetBrowserUrl(string uri, bool doNotNavigate)
 		{
 			if(doNotNavigate)
 			{
-				//TODO: history.pushState(null, '', url);
+				_navigationHistoryService?.PushStateAsync(null, "", uri);
 				return;
 			}
 

src/Majorsoft.Blazor.Components.PermaLink/PermaLinkWatcherService.cs

@@ -5,4 +5,5 @@
 @using Majorsoft.Blazor.Components.Common.JsInterop.Scroll
 @using Majorsoft.Blazor.Components.Common.JsInterop.Clipboard
 
-@using Majorsoft.Blazor.Components.Core.Events
+@using Majorsoft.Blazor.Components.Core.Events
+@using Majorsoft.Blazor.Components.Common.JsInterop.Navigation

src/Majorsoft.Blazor.Components.PermaLink/_Imports.razor

@@ -50,6 +50,7 @@
 				<li><NavLink href="jsinterop#theme-js">Browser Theme Js</NavLink></li>
 				<li><NavLink href="jsinterop#geo-js">Geo Js</NavLink></li>
 				<li><NavLink href="jsinterop#head-js">Head Js</NavLink></li>
+				<li><NavLink href="jsinterop#history-js">Browser History Js</NavLink></li>
 			</ul>
 		</li>
 		<li>