slocation

Reactive Svelte Location Store

Introduction

slocation is Reactive Svelte Location Store . location which is used to access information about current Location is not Reactive . slocation wraps location as Readable Svelte Store which gets updated every time location changes thus making it Reactive.

It also provides extra methods to update URL without reloading the page . With reactive location Object and methods to route without reloading the page , slocation can be viable minimal alternative to Router. It is also a very small library.

Features

• Small in Size
• Reactive location Object
• Listens to popstate and hashchange events
• Supports both History API and hash
• Can be viable small alternative to Routers
• Written in TypeScript

Installation

Install slocation as dependency in your project .

npm install slocation

Usage

slocation is Readable Svelte Store. It must be imported to be used.

import slocation from "slocation";

It wraps location reactively

<div>{JSON.stringify($slocation)}</div>

It's properties are reactive too!

<pre>
{$slocation.href}
{$slocation.origin}
{$slocation.protocol}
{$slocation.host}
{$slocation.hostname}
{$slocation.port}
{$slocation.pathname}
{$slocation.search}
{$slocation.hash}
</pre>

Most Important among these are href , pathname , search and hash because other properties of location only change on page reload. With these important properties , you can create routing in your Svelte Application.

Note that Since slocation wraps location , methods of location are also exposed with slocation . Methods which are common to both location and slocation are effectively same.

Usage as History-API based Router

{#if $slocation.pathname === '/'}
<HomeComponent />
{:else if $slocation.pathname === '/about'}
<AboutComponent />
{:else if $slocation.pathname.startsWith('/browse/') }
<!-- This Component will only appear if route begins with '/browse/' -->
<!-- $slocation.pathname / $slocation.href can further -->
<!-- be parsed to get required params (Out of Scope for this library) -->
<!-- Parse $slocation.search to get queries -->
<!-- Parse $slocation.hash to parse hash/fragment identifier -->
<SpecialComponent />
{:else}
<FallBackComponent />
{/if}

To Navigate without refreshing / reloading the Page , slocation provides these extra methods.

1. slocation.goto(url?: string, replace?: boolean | undefined) => void

Navigates to specified URL path. replace is optional and defaults to false. If replace is given true, most recent entry on the history stack will be updated with new one.

Example:

slocation.goto("/about"); // This will Navigate to '/about' without refreshing the page
slocation.goto("/help", true); // This will Navigate to '/help' without
// refreshing the page but history State will be replaced instead of adding new one

2. slocation.pushState(data: any,title: string,url?: string | null | undefined) => void

If history.pushState is used , slocation store will not be updated breaking it's reactivity. So, slocation.pushState must be used which will update slocation. slocation.pushState is just wrapper function to history.pushState which also updates slocation to keep it reactive.

Example:

slocation.pushState({}, "", "/about"); // This will Navigate to '/about'
// without refreshing the page
// Code Below won't update slocation
// history.pushState({}, "", "/about"); // Although , this navigates to '/about',
// slocation store won't be updated

3. slocation.replaceState(data: any,title: string,url?: string | null | undefined) => void

Same as slocation.pushState but slocation.replaceState is wrapper to history.replaceState . slocation.replaceState must be used instead of history.replaceState .

4. slocation.reset() => void

Resets slocation with current location object . This force-updates slocation store.

Note that history.back() , history.forward() , history.go() will update slocation automatically , so these can be used. Only use slocation.pushState() and slocation.replaceState() instead of history.pushState() and history.replaceState() respectively.

Usage as Hash based Router

{#if $slocation.hash === ''}
<HomeComponent />
{:else if $slocation.hash === '#/about'}
<AboutComponent />
{:else if $slocation.hash.startsWith('#/browse/') }
<!-- This Component will only appear if hash route begins with '/browse/' -->
<!-- Parse $slocation.hash to parse hash/fragment identifier -->
<SpecialComponent />
{:else}
<FallBackComponent />
{/if}

To Update the Route , you just need to update hash of location object which also updates slocation.

location.hash = "#/about";

This must update the Hash Along with slocation store.

License

MIT