Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wetix/svelte-history-router
Svelte High Performance History Router
https://github.com/wetix/svelte-history-router
browser cypress fast history-based-router lightweight router svelte-components svelte-router svelte3 typescript
Last synced: 3 months ago
JSON representation
Svelte High Performance History Router
- Host: GitHub
- URL: https://github.com/wetix/svelte-history-router
- Owner: wetix
- License: mit
- Created: 2021-04-19T03:57:14.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-27T15:03:21.000Z (almost 2 years ago)
- Last Synced: 2024-10-11T14:01:49.669Z (3 months ago)
- Topics: browser, cypress, fast, history-based-router, lightweight, router, svelte-components, svelte-router, svelte3, typescript
- Language: Svelte
- Homepage:
- Size: 92.8 KB
- Stars: 5
- Watchers: 4
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Svelte History Router
> A high performance history based router using History API.
[](https://svelte.dev)
[](https://www.npmjs.com/package/svelte-history-router)
[](https://www.npmjs.com/package/svelte-history-router)
[](https://bundlephobia.com/result?p=svelte-history-router)
[](https://github.com/wetix/svelte-history-router/blob/main/LICENSE)
## 🔨 Installation
```console
npm install svelte-history-router
```
or
```console
yarn add svelte-history-router
```
## ❓ Why another Router?
- Most of the router implementation are pretty naive, they use regex under the hook, which may have bad performance on routing especially with huge routing tree.
- Most of the router using context api, which may required some setup when we use with `vite` or `snowpack`.
## ✨ Features
- History based routing
- TypeScript as First Class Citizen
- Lightweight
- High performance
- Ship with multiple output formats (commonjs, iife, esmodule)
- No extra dependency
- Reactive functions
- Simple and configurable
## 📝 How to use?
### Define your routes
Each route is a normal Svelte component, with the markup, scripts, bindings, etc. Any Svelte component can be a route.
The route definition is just a JavaScript dictionary (object) where the key is a string with the path (including parameters, etc), and the value is the route object.
For example:
```js
import Home from "./Home.svelte";
import AboutUs from "./AboutUs.svelte";
import MyProfile from "./MyProfile.svelte";
import MyInfo from "./MyInfo.svelte";
import MyPage from "./MyPage.svelte";
import NotFound from "./NotFound.svelte";
const routes = {
// Exact path
"/": Home,
"/about-us": AboutUs,
// Using named parameters, with last being optional
"/me/:name/profile": MyProfile,
"/me/:name/info": MyInfo,
// Wildcard parameter
"/me/*": MyPage,
// Catch-all
// This is optional, but if present it must be the last
"*": NotFound,
};
```
Routes must begin with / (or \* for the catch-all route). When you using \* wildcard route, you cannot place route path after \*.
The order do matters! Because the routing is follows the following priority :
1. Exact match
2. Placeholder match
3. Wildcard match
### Include the router view
To display the router, in a Svelte component (usually App.svelte), first import the router component. Then, display the router anywhere you'd like by placing the component in the markup. For example:
```svelte
import Router from 'svelte-history-router';
import routes from './routes.ts';
```
### Navigating between pages
You can navigate between pages using anchor () tag with svelte action `link`. For example:
```svelte
import { link } from 'svelte-history-router';
Futhermore, you can navigate between pages programmatically too:
```js
import { push, pop, replace } from "svelte-history-router";
// The push(url) method navigates to another page, just like clicking on a link
push("/me/joker/profile");
// The pop() method is equivalent to hitting the back button in the browser
pop();
// The replace(url) method navigates to a new page, but without adding a new entry in the browser's history stack
// So, clicking on the back button in the browser would not lead to the page users were visiting before the call to replace()
replace("/me/profile");
```
These methods can be used inside Svelte markup too, for example:
```svelte
push('/page')}>Go somewhere
```
The push, pop and replace methods perform navigation actions only in the next iteration ("tick") of the JavaScript event loop. This makes it safe to use them also inside onMount callbacks within Svelte components.
### URL
You can get the page url information (it's an [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) object) from the `$url` readable store. This is a Svelte store, so it can be used reactively too.
```svelte
import { url } from 'svelte-history-router';
const { searchParams } = $url;
The page query string is : {searchParams.toString()}
```
### Parameters
You can get the page parameters from the `$params` readable store. This is a Svelte store, so it can be used reactively too.
```svelte
import { params } from 'svelte-history-router';
The page parameters is : {JSON.stringify($params)}
```
## 🔋 Sponsors
## 📄 License
[svelte-history-router](https://github.com/wetix/svelte-history-router) is 100% free and open-source, under the [MIT license](https://github.com/wetix/svelte-history-router/blob/master/LICENSE).
## 🎉 Big Thanks To
Thanks to these awesome companies for their support of Open Source developers ❤
[](https://github.com/open-source)
[](https://www.npmjs.com/)
Inspired by [radix-router](https://github.com/charlieduong94/radix-router) and [svelte-spa-router](https://github.com/ItalyPaleAle/svelte-spa-router)