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

hotroute

v0.0.7

Published

Fast stateful routing for static and server rendered sites using web components

Downloads

24

Readme

hotroute ⚡

Status: Experimental 🧫

An 2.5kB zero-config router and prefetcher for static or server-rendered sites.

Why?

HTTP is stateless. What if you could maintain state between full page changes without building an SPA?

Ideal for static or server-rendered web apps using web components that want super fast page changes without losing stateful data in JavaScript. Expect page transitions under 50ms for an average blog post on an average network.

How?

(1) It prefetches visible links in the page with intersection observer, thanks to quicklink. (2) Intercepts click and popstate events, then updates the HTML5 history on qualifed route changes. (3) Swaps the body out, while preserving most of the head (will change title and meta tags automatically).

This means if you use a global state management system, i.e. Angular DI or React Context or just plain old JS, your static content will change, but your web components will maintain state across HTTP requests.

It will fallback to standard naviation if window.history does not exist.

QuickStart

npm i hotroute
import hotroute from hotroute;
const router = hotroute();

That's it. Magic (maybe too much).

Advanced Usage

// with opts 
const router = hotroute({ log: true, prefetch: true });

// Navigate manually
router.go('/somewhere');

// Listen to events
window.addEventListener('router:fetch', showLoader);
window.addEventListener('router:end', hideLoader);

What is happening in the DOM?

Here's how things change in the DOM on a navigation event.

<head>
    <!-- meta tags change -->
    <meta name="description" content="my cool page">

    <!-- title changes -->
    <title>Document</title> 

    <!-- everything else does NOT change -->
    <script src="my-bundle.js"></script> 

    <!-- head scripts or nodes can be re-evaluated with data-reload -->
    <script data-reload src="my-other-bundle.js"></script> 
</head>
<body>
    <!-- ALL body content changes -->
    
    <!-- nodes can be cloned with data-stateful -->
    <nav data-stateful></nav> 
</body>

Caveats

  • Body scripts will never run (but you should be using defer anyway)