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

svelte-yet-another-router

v2.0.1

Published

A declarative browser router for Svelte 4 single page applications.

Downloads

235

Readme

svelte-yet-another-router

Getting started

This Svelte router has a simple API with a total of only five components. The two most important ones are the Route and the Link components. The purpose of the Route component is to conditionally render its children based on the current location. The purpose of the Link component is to provide clickable links which doesn't reload the entire page from the server but instead casues Svelte to update the application and it's Route components based on the Link's target.

    <script>
        import { Link, Route, Switch, pathBase, location } from 'svelte-yet-another-router';

        // If your app is published in a subfolder, you can set the path base to make all
        // <Route>s, <Link>s and <Redirect>s automatically work with you path base.
        pathBase.set('/base');
    </script>

    <h1>My app!</h1>
    <Route path="/">
        <p>
            This is the home page. Why don't you visit <Link href="/page1">another page</Link>? Or <Link href="page2">yet another</Link>?
        </p>
        <p>
            <Link href="/page3">This link</Link> will take you right back to the start.
        </p>
    </Route>
    <Switch>
        <Route path="/page1">
            <p>Another page!</p>
        </Route>
        <Route path="/page2">
            <p>Yet another page!</p>
        </Route>
        <!--
            The location store allows you to read the current location (URI) _and_ push a
            new URI (and corresponding state to the browser history).
        -->
        <Route path="/page3" on:match={() => location.push('/')}>
            <p>Going home!</p>
        </Route>
        <Route path="/" exact={false}>
            <p>404: Unknown page!</p>
        </Route>
    </Switch>

Additionally, the Redirect and ExternalRedirect components are available, which will redirect the user to the provided target whenever it is rendered. The difference is that the Redirect component will only redirect within the same application by triggering Svelte to update the rendering while ExternalRedirect will simply change the browser's location to whichever URL is provided.

Finally, a Switch component is available. Among the first level of Route components contained within a Switch component, only the first one with a matching path is rendered. This, among other things, allows for the construction of "catch all" routes for handling unknown paths.

Breaking changes from version 1 to 2

$activeClassName is no longer available

In version 1, handling af active links was managed through the store $activeClassName, through which you could set which CSS class would be applied to an active <Link /> (i.e. a link component which points to the currently active URL).

In version 2, management of active links is more powerful. Not only can you set which attribute value to use but also the attribute name (i.e., you're not restricted to only set the class attribute).

You could, for example, do something like:

<script>
    import { activePropName, activePropValue } from 'svelte-yet-another-router';

    $activePropName = 'aria-current';
    $activePropValue = 'page';
</script>

<Link href="/test">Go to the test</Link>

which would render to

<a aria-current="page" href="/test">Go to the test</a>

$push is no longer available

In version 1, it was possible to push a new URL on the browser's history by using the push store, simply by calling $push('new-url') from your Svelte component.

In version 2, this functionality has been merged into the location store. Pushing a new URL to the browser history is now done by calling location.push('new-url') from your Svelte component.