npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svroutes

v0.1.36-unhotfix1

Published

Powerful SPA router for Svelte.

Downloads

8

Readme

✈ This is svroutes!

⚠ This module is made for Svelte, not SvelteKit.

svroutes is an extension for Svelte to add SPA applications.

🖊 How do I use svroutes?

svroutes is fairly easy to use.

In your main svelte file (usually App.svelte), place a Router object. Within the Router object, you can place Route objects. It works pretty similarly to react-router.

📩 Installation

To install svroutes, run npm install svroutes. Simple as that. Now you can begin using svroutes!

🌎 Router object usage:

home (default '/')

Controls the base URL. All Route object paths will be {home}/{route_path}.

🌍 Route object usage:

path (default '/')

Controls the path for this route. Value will be converted to a RegExp unless the text property is present.

Paths can have special parameters using the :paramsName syntax. Wildcards can be created using the .* syntax. Read component (below) for how to access.

component (default null)

Component to display on screen when the user is on the current path. The component will be created with a params and wildcards property, meaning you can use

export let params;
export let wildcards;

to gain access to them.

If you don't pass in a component and instead decide to place it as a descendant of the Route object, you can use let:params.

<Route path='/hello/:userName' let:params>
	<h1>Hello, {params.userName}!</h1>
</Route>

exact (default false)

Decides whether there should be a '^' prepended and '$' appended to the RegExp. In text mode, this property is useless.

text (default false)

Controls whether the path property should be a string or RegExp. In text mode, you cannot use custom options or wildcards. (:customOption).

index (default false)

If enabled, path is ignored and this route will always show if others fail. Must be placed below all other routes to prevent errors.

🌏 Link object usage:

href or to (default '/')

Path to go to. Using Link will automatically update the page without need for reload. Using an anchor tag (a) will work, but is less optimized.

state (default 'history.state')

State to be passed when switching pages. You can access this via history.state.

replace (default false)

Decides whether using the link replace or pushes the state. Push means it adds to the history, while replace replaces the current one. Using replace isn't recommended for most cases because it can ruin the UX.

🚅 Navigate object usage:

The navigate object redirects the user to another page using components, rather than script. This object uses the same options as the Link object.

⛳ Navigation via Code

To navigate between pages, you can use the navigate function.

import { navigate } from 'svroutes';
navigate(url: string, state?: any, replace?: false);

Enjoy using svroutes! Report any bugs here.