Flamethrower
🔥
Status: Meme
A 2kB zero-config router and prefetcher that makes a static site feel like a blazingly fast SPA.
Why?
Problem: Static sites feel slow and cannot easily share state between pages. This makes it hard to create a good UX with JavaScript libraries because each new page needs to reboot your JS from scratch.
The goal is to make route changes on static sites feel faster, like an SPA, without the need for a frontend framework to take over the entire DOM.
How?
- It tells the browser to prefetch visible links in the current page with
IntersectionObserver. - Intercepts click and popstate events, then updates the HTML5 history on route changes.
- Uses
fetchto get the next page, swaps the<body>out, merges the<head>, but does not re-execute head scripts (unless asked to).
This means you can have long-lived JavaScript behaviors between navigations. It works especially well with native web components.
QuickStart
npm i flamethrower-router
import flamethrower from 'flamethrower-router';
const router = flamethrower();
That's it. Your site now feels blazingly fast.
Advanced Usage
// with opts
const router = flamethrower({ prefetch: 'visible', log: false, pageTransitions: false });
// Navigate manually
router.go('/somewhere');
router.back();
router.forward();
// Listen to events
window.addEventListener('router:fetch', showLoader);
window.addEventListener('router:end', hideLoader);
// Disable it
router.enabled = false;
Opt-out of specific links for full page load.
<a href="/somewhere" data-cold></a>
Scripts in <body> will run on every page change, but you can force scripts in the <head> to run:
<script src="..." data-reload></script>
Prefetching
Prefecthing is disabled by default.
visible: prefetch visible links on the page with IntersectionObserverhover: prefetch links on hover
const router = flamethrower({ prefetch: 'visible' });
Misc
Supported in all browsers? Yes. It will fallback to standard navigation if window.history does not exist.
Does it work with Next.js? No, any framework that fully hydrates to an SPA does not need this - you already have a client-side router.
Does it work with Astro? I think so. It can share state between routes, but partially hydrated components may flash between routes.
Other things to know:
<head>scripts run only on the first page load.<body>scripts will still run on every page change (by design).- It's a good idea to show a global loading bar in case of a slow page load.
- This library is inspired by Turbo Drive.
- This project is experimental.
Contributing
Build it:
npm run dev
Serve the example:
npm run serve
Make sure all playwright tests pass before submitting new features.
npm run test
![[help] cannot find imported module](https://avatars.githubusercontent.com/u/6134774?v=4)
6 Sep 22, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Jan 22, 2022
26 Dec 10, 2022
66 Jan 6, 2023
7 Apr 6, 2022
112 Dec 27, 2022
141 Dec 5, 2022
6 Oct 17, 2022
29 Nov 19, 2022
9 Oct 4, 2022
5.8k Jan 2, 2023
9 Aug 17, 2022
29.4k Jan 4, 2023
20 Dec 15, 2022
17 Dec 21, 2022
12 Dec 29, 2022