flare-router
Version:
Blazingly fast SPA-like router for static sites - Pure vanilla JS
83 lines (72 loc) • 2.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="../favicon.ico" type="image/png" />
<meta name="description" content="The About Page" />
<meta name="extra" content="test" />
<title>About</title>
<script defer type="module">
import flare from '/flare.js';
flare({ prefetch: 'visible', log: true, pageTransitions: true });
</script>
<script defer data-reload src="/script1.js"></script>
<script defer src="/script2.js"></script>
<style>
#heading {
color: blue;
}
#load-bar {
background-color: blue;
position: fixed;
top: 0;
left: 0;
width: 0;
height: 5px;
}
</style>
</head>
<body>
<div id="load-bar"></div>
<h1 id="heading">About</h1>
<a href="/">Home</a> | <a href="#chapter">Heading</a> | <a href="https://google.com">External</a> |
<button id="go">Go</button>
<button id="back">Back</button>
<div id="keep" flare-preserve>
<article>
<p>This text should be preserved when starting from about</p>
</article>
</div>
<script type="module">
const router = window.flare;
document.getElementById('go').onclick = () => {
router.go('/');
};
document.getElementById('back').onclick = () => router.back();
</script>
<h3>Scripts</h3>
<p>Scripts from body or head with data-reload attr should always run</p>
<p id="bodyCheck"></p>
<p id="headCheck"></p>
<p id="headCheck2">default text</p>
<div style="margin-top: 1000px"></div>
<h3 id="chapter">Heading</h3>
<a href="/">Home</a>
<a href="/test">Test</a> |
<div style="margin-top: 1000px"></div>
<script>
console.log('body script');
document.getElementById('bodyCheck').innerText = '✔️ body script works';
</script>
<script>
// test content length progress
window.addEventListener('flare:router:fetch-progress', ({ detail }) => {
const loadBar = document.getElementById('load-bar');
console.log('Fetch Progress:', detail);
loadBar.style.width = detail.progress + '%';
});
</script>
</body>
</html>