## Install

```bash
npm i svelte-store-router --save-dev
```

## Usage

Create a route store in your `stores.js`:
```javascript
import { createRouteStore } from 'svelte-store-router'

export const route = createRouteStore({
delay: 300,
queryClean: true,
fragmentClean: true
})
```

Now you can access it as usual store.
```svelte

import { route } from './stores.js'

Full route: {$route}
Path: {$route.path}
Query: {$route.query}
Fragment: {$route.fragment}
```

You can change it.
```svelte
$route.path = '/'}>home page
$route.path = '/users'}>user list

$route.query.sort = 'name'}>sort by name
$route.query.team = 'svelte'}>filter by team

$route.fragment.modal = true}>open modal window
$route.fragment.scroll = 5}>skip first 50 users
```

You can bind store values.
```svelte

```

You can navigate to the full path you want by assigning a string value to the store or by calling the store's `goto` function (without $). Don't forget that the route must be relative to the base path. So calling `goto('https://google.com')` with `base: '/test'` redirects you to `/test/https://google.com`.
```svelte
$route = '/users?orderBy=karma&limit=10'}>show top 10 users
route.goto('/users?orderBy=karma&limit=10')}>show top 10 users
```

You can match path pattern and parametrize it ([regexparam](https://github.com/lukeed/regexparam)).
```svelte

import { Match } from 'svelte-store-router'
import { route } from './stores.js'

User list

User {id} profile

```

You can show only first matching path.
```svelte

import { Match, Matcher } from 'svelte-store-router'
import { route } from './stores.js'

User list


User {id} profile


Page not found


This content will never be displayed, because
the previous handle all possible routes

```

You can use nested match components using the `loose` parameter.
```svelte

import { Match, Matcher } from 'svelte-store-router'
import { route } from './stores.js'

Begin of users template


Users list


User {id} profile


End of users template


Page not found

```

Or you can do it all above manually using `match` function instead of components.
```svelte

import { match } from 'svelte-store-router'
import { route } from './stores'

let params

{#if match($route)}
{#if match($route, '/users', true)}
Begin of users template

{#if params = match($route, '/users/:id')}
User {params.id}
{:else if params = match($route, '/users/:id/friends')}
User {params.id} friends
{/if}

End of users template
{:else}
Page not found
{/if}
{/if}
```

## Options

#### base [String]
Base path of application. Routes and links which not match under this path will not be handled. `''` by default.

#### delay [Number]
Sets delay in milliseconds before `history.pushstate` was called. This prevents a large number of items from appearing in History state. For example, it could be useful when the parameter of `query` or `fragment` is binded with the `search` input field. `0` by default.

#### queryParse, fragmentParse [Boolean]
Enables `query` and `fragment` string to objects conversion. `true` by default.

#### queryTyped, fragmentTyped [Boolean]
Converts query and fragment string values to JavaScript types. `true` by default. For example strings will be converted from -> to:
```
"1" -> 1
"0.123" -> 0.123
"true" -> true
"null" -> null
"undefined" -> undefined
"01234" -> 1234
"a1234" -> "a1234"
```

#### queryClean, fragmentClean [Boolean]
Clean query and fragment from empty (`null` / `undefined` / `""`) values. Might be useful to avoid `/path?page=undefined&search=`. `false` by default.

#### queryShortBoolean, fragmentShortBoolean [Boolean]
Automatically shortens the parameter string for boolean values, e.g. `a=true&b=false&c=true` into `a&c`. So for parameters with `true` only the parameter name will be shown, and with `false` they will be hidden completely. `false` by default.

#### sideEffect [Boolean]
Controls side effect of route changing which push items to History. `true` by default in browser, always `false` on server side.