Implementing Browser History Navigation in a Vue.js Application

This challenge focuses on adding browser history navigation (back/forward buttons) to a Vue.js application without relying on Vue Router. This is useful when you want fine-grained control over navigation or are building a single-page application (SPA) where Vue Router's overhead isn't necessary, or when integrating with a custom navigation system. You'll be responsible for managing the application's state and updating the browser's history stack.

Problem Description

You need to create a Vue.js component that manages browser history. This component should allow you to:

1. Push new states to the history stack: The pushState method should add a new entry to the browser's history, updating the URL without reloading the page. This method should accept a URL and a state object.
2. Replace the current state: The replaceState method should replace the current history entry with a new one, also updating the URL without a page reload. It should accept a URL and a state object.
3. Go back and forward in history: The goBack and goForward methods should navigate the user through the browser's history using the standard window.history API.
4. Listen for popstate events: The component should listen for popstate events (triggered by the user clicking the back/forward buttons) and update the application's state accordingly. The popstate event handler should receive the new URL and state from the history.
5. Provide a reactive state: The component should expose a reactive state object containing the current URL and state. This allows other components to access and react to changes in the history.

Key Requirements:

• The solution must be implemented in TypeScript.
• The component should be reusable and independent of any specific application logic.
• The component should correctly handle edge cases, such as attempting to go back or forward beyond the beginning or end of the history stack.
• The component should not interfere with any existing routing mechanisms (if present).

Expected Behavior:

• Calling pushState should update the browser's URL and add a new entry to the history.
• Calling replaceState should update the browser's URL and replace the current history entry.
• Clicking the browser's back/forward buttons should trigger the popstate event and update the component's state.
• The reactive state object should always reflect the current URL and state.

Examples

Example 1:

Input: Initial state: URL = '/', State = { page: 'home' }
pushState('/about', { page: 'about' })
replaceState('/contact', { page: 'contact' })
goBack()

Output:
- URL: '/about', State: { page: 'about' }
- URL: '/contact', State: { page: 'contact' }
- URL: '/', State: { page: 'home' }

Explanation: The first pushState adds '/about' to the history. replaceState replaces the current entry with '/contact'. goBack navigates back to the previous state ('/').

Example 2:

Input: Initial state: URL = '/', State = { page: 'home' }
pushState('/products', { page: 'products', category: 'electronics' })
pushState('/cart', { page: 'cart', items: [ { id: 1, name: 'Laptop' } ] })
goForward()

Output:
- URL: '/products', State: { page: 'products', category: 'electronics' }
- URL: '/cart', State: { page: 'cart', items: [ { id: 1, name: 'Laptop' } ] }
- URL: '/products', State: { page: 'products', category: 'electronics' }

Explanation: Two states are pushed. goForward() returns to the previous state.

Example 3: (Edge Case)

Input: Initial state: URL = '/', State = { page: 'home' }
goBack()
goBack()
pushState('/home', { page: 'home' })
goForward()

Output:
- URL: '/', State: { page: 'home' } (attempt to go back when already at the beginning)
- URL: '/', State: { page: 'home' } (attempt to go back again)
- URL: '/home', State: { page: 'home' }
- URL: '/', State: { page: 'home' }

Explanation: Attempting to go back when already at the beginning of history does nothing. Pushing a new state and then going forward returns to the previous state.

Constraints

• The solution must be implemented using Vue 3 and TypeScript.
• The component should be lightweight and avoid unnecessary dependencies.
• The pushState and replaceState methods should not accept null or undefined values for the URL. Throw an error if they do.
• The component should handle popstate events gracefully, even if the state data is invalid or missing.
• The component should be performant and avoid blocking the main thread during history updates.

Notes

• Consider using Vue's reactivity system (ref or reactive) to manage the component's state.
• The window.history API provides the necessary methods for manipulating the browser's history.
• Think about how to handle errors and edge cases gracefully.
• Focus on creating a clean, reusable, and well-documented component.
• You don't need to implement a full-fledged router; the focus is on managing the browser's history stack.