waystone
v0.2.6
Published
MPAs that feels like SPAs
Readme
waystone
MPAs that feels like SPA
Install
npm i waystoneyarn add waystonepnpm add waystoneUsage
import 'waystone';NOTE: Waystone is required to only run once, so it's ideal to serve it on JS files where the module is going to be instanciated once.
Replace instead of Push
You can use ws:replace to replace the History state rather than push when navigating
<a href="/my-page" ws:replace>My page</a>Scroll control
By default, anchor tags will scroll up instantly to the top of the page when navigated to. You can add ws:scroll="none" to preserve scroll or you can use ws:scroll="smooth" if you want the page to scroll up smoothly.
Prefetch strategies
You can add one of the following attributes to your anchor tags prefetch strategies:
ws:animation-frame: Prefetches throughrequestAnimationFramews:delay="1000": Prefetches throughsetTimeoutws:idle: Prefetches throughrequestIdleCallbackws:interaction: Prefetches when the element receives focus, is hovered or about to be touched.ws:load: Prefetches after the current window has loaded.ws:media="(orientation: portrait)": Prefetches using media queryws:ready-state="interactive": Prefetches usingdocument.readyStatews:visible: Prefetches when the element is visible in the viewport
Opting-out
You can add ws:disabled to your anchor element.
<a href="/my-page" ws:disabled>My Page</a>Lifecycle Events
Waystone provides lifecycle events through on.
import { on } from 'waystone';
on('unload', () => {
cleanupStuff();
});Waystone lifecycle involves three steps:
beforeunload: This is called beforeunloadhappens. In this event, you can cancel the navigation by callingevent.preventDefault()
on('beforeunload', (event) => {
const prompt = window.confirm('Are you sure you want to leave?');
if (!prompt) {
event.preventDefault();
}
})unload: This is called before the document is replaced.load: This is called after the document is replaced.
DOM diffing
Please use with caution!
By default, waystone replaces the entire page when navigating to a new one, which means that every element from the previous page would get disposed. If you want to skip elements that are similar from the previous page (or any page), you can add ws:diff to your <html>.
<html ws:diff>
...
</html>ws:diff utilizes morphdom and DOMParser.
The difference, however, would be:
- Scripts will no longer run on the new page.
window'sDOMContentLoadedandloadevents wouldn't work.
Live demos
- Basic Astro demo
- Astro Blog template demo
License
MIT © lxsmnsyc