Svelte Store Router

Overview:

The store-based router for Svelte is a routing solution that takes a different approach by considering routing as just another global state. It suggests that History API changes are optional side effects of this state. This router allows for easy manipulation of different parts of the state, such as the path, query, and fragment, individually. It also offers automatic parsing of query and fragment parameters, configurable delay of History changing, conversion of query and fragment string values to JavaScript types, and cleaning of empty values. Additionally, it provides support for handling navigation without reloading the page and works well with server-side rendering.

Features:

• Just another global state: Routing is treated as another global state in the application.
• No restrictions on state application: The router does not impose any restrictions on how the routing state is applied to the application.
• Manipulate different parts of the state separately: The router allows for easy manipulation of the path, query, and fragment individually.
• Automatic parsing of query and fragment parameters: Query and fragment parameters are automatically parsed by the router.
• Components for path matching and parameter extraction: The router provides components for path matching and extracting parameters using regexparam.
• Configurable delay of History changing: The delay before History pushstate is called can be configured to prevent a large number of items from appearing in the History state.
• Conversion of query and fragment string values to JavaScript types: Query and fragment string values can be converted to their respective JavaScript types.
• Cleaning of query and fragment from empty values: The router cleans query and fragment from empty values like null, undefined, and empty strings.
• Automatic handling of <a> navigation: Navigation using <a> tags can be handled automatically, allowing for updating the route state without reloading the page.
• Works well with server-side rendering: The router is compatible with server-side rendering.

Installation:

To install the store-based router for Svelte, follow these steps:

1. Create a route store in your stores.js file.

import { writable } from 'svelte/store';

export const routeStore = writable({});

2. Access the route store in your components as you would with any other Svelte store.

import { routeStore } from './stores.js';

3. Change the route store values as needed.

routeStore.set({ path: '/new-path' });

4. Bind store values to your components.

<script>
  import { routeStore } from './stores.js';
  
  let currentRoute;
  routeStore.subscribe(route => {
    currentRoute = route;
  });
</script>

<p>The current route is {currentRoute.path}.</p>

5. Navigate to a specific path by assigning a string value to the route store or by calling the store’s goto function. Note that the route must be relative to the base path.

routeStore.set('/new-path');
// or
routeStore.goto('/new-path');

Summary:

The store-based router for Svelte offers a unique approach to routing by treating it as just another global state. It provides a range of features such as individual manipulation of routing parts, automatic parsing of parameters, and support for server-side rendering. With easy installation and usage, this router offers a flexible and efficient solution for handling routes in Svelte applications.