A tiny unframework for making SPAs in Svelte.
This library intercepts clicks on internal links and turns them into history.pushState() calls. The browser's location object is exposed through a Svelte store, which updates upon these intercepted clicks and upon popstate events. It also optionally provides a mechanism for hosts which do not support falling back to index.html for missing files.
If your host supports falling back to index.html for requests of all unknown files, you should use that feature. Copy location.js into your project, and you're done.
You'll use a custom 404 page that redirects to the root and encodes the original URL in a query parameter. The root page then rewrites the URL using history.replaceState().
Add 404.html to your project at the appropriate path. Uncomment the lines at the top of location.js to handle the rewrite after the redirection.
import location from '.../location.js';This is a Svelte store containing the location object, and updates whenever a link click is intercepted or a popstate event occurs.
Interception occurs when all of the following are met:
- The link is same-origin.
- The link is not merely a
#hashchange. - The link does not have a
targetattribute. - The link does not have a
downloadattribute. - The link was left clicked.
- The link was not clicked while pressing Alt/Ctrl/Meta/Shift.
- The link click was not
preventDefaulted.
The store also contains goto(url, replace) and scroll() methods.
goto(url, replace)navigates to a URL.urlis resolved according to normal rules.replaceis a boolean indicating whether to usehistory.pushState()orhistory.replaceState().
scroll()scrolls to either the top of the page or the element indicated by the#hashportion of the URL. This should be called after you've finished rendering a page.