Slocation
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
popstateandhashchangeevents - 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.
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
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
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 .
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
