https://github.com/substrate-system/single-page
Write single-page apps with a single callback to handle pushState events
https://github.com/substrate-system/single-page
Last synced: about 1 year ago
JSON representation
Write single-page apps with a single callback to handle pushState events
- Host: GitHub
- URL: https://github.com/substrate-system/single-page
- Owner: substrate-system
- License: mit
- Created: 2024-02-04T18:22:20.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-12T02:28:28.000Z (over 1 year ago)
- Last Synced: 2025-03-24T06:51:44.377Z (about 1 year ago)
- Language: TypeScript
- Size: 55.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# single page
[](README.md)
[](README.md)
[](https://semver.org/)
[](./CHANGELOG.md)
[](https://packagephobia.com/result?p=@bicycle-codes/keys)
[](package.json)
[](LICENSE)
Write single-page apps with a single callback to handle pushState events. This is used as a part of [`route-event`](https://github.com/substrate-system/route-event).
Like the classic [@substack module](https://www.npmjs.com/package/single-page), but now with ESM + CJS versions and types.
Contents
- [install](#install)
* [example](#example)
+ [ESM](#esm)
+ [CJS](#cjs)
* [methods](#methods)
+ [var showPage = singlePage(cb, opts)](#var-showpage--singlepagecb-opts)
+ [showPage(href)](#showpagehref)
+ [showPage.push(href)](#showpagepushhref)
# install
```sh
npm i -S @substrate-system/single-page
```
## example
### ESM
```js
import { singlePage } from '@substrate-system/single-page'
```
### CJS
```js
const singlePage = require('@substrate-system/single-page').default
```
Given some html with elements `#foo`, `#bar`, and `#baz`:
```html
```
Now turn each of the divs into pages with their own routes.
Note that this module doesn't update the link callbacks for you. You'll need to
handle that for yourself.
```js
var divs = {
foo: document.querySelector('#foo'),
bar: document.querySelector('#bar'),
baz: document.querySelector('#baz')
};
const singlePage = require('@substrate-system/single-page').default
var showPage = singlePage(function (href) {
Object.keys(divs).forEach(function (key) {
hide(divs[key]);
});
var div = divs[href.replace(/^\//, '')];
if (div) show(div)
else show(divs.foo)
function hide (e) { e.style.display = 'none' }
function show (e) { e.style.display = 'block' }
});
var links = document.querySelectorAll('a[href]');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('click', function (ev) {
ev.preventDefault();
showPage(this.getAttribute('href'));
});
}
```
You'll need to have a server that will serve up the same static content for each
of the pushState routes. Something like this will work:
```js
var http = require('http');
var ecstatic = require('ecstatic')(__dirname);
var server = http.createServer(function (req, res) {
if (/^\/[^\/.]+$/.test(req.url)) {
req.url = '/';
}
ecstatic(req, res);
});
server.listen(5000);
```
Now when you go to `http://localhost:5000` and click around, you'll see `/foo`,
`/bar` and `/baz` in the address bar when you click links, even though you're
not reloading the page.
## methods
```js
var singlePage = require('@substrate-system/single-page').default
```
### var showPage = singlePage(cb, opts)
Fire `cb(href, page)` at the start and whenever the page navigation changes so
you can update the page contents accordingly.
If `opts.saveScroll` is `!== false`, `page.scrollX` and `page.scrollY` are saved
for every unique `href` so that you can jump back to the same scroll position
that the user left off at.
### showPage(href)
Navigate to `href`, firing the callback passed to singlePage.
### showPage.push(href)
Update the location href in the address bar without firing any callbacks.