{"id":22556242,"url":"https://github.com/substrate-system/single-page","last_synced_at":"2025-04-10T05:31:56.285Z","repository":{"id":220913906,"uuid":"752760807","full_name":"substrate-system/single-page","owner":"substrate-system","description":"Write single-page apps with a single callback to handle pushState events","archived":false,"fork":false,"pushed_at":"2025-02-12T02:28:28.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T06:51:44.377Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substrate-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-04T18:22:20.000Z","updated_at":"2025-02-12T02:28:27.000Z","dependencies_parsed_at":"2024-02-05T06:27:02.125Z","dependency_job_id":"418c8e57-6682-44d5-97b7-6d8ee3bdfe35","html_url":"https://github.com/substrate-system/single-page","commit_stats":{"total_commits":53,"total_committers":4,"mean_commits":13.25,"dds":"0.37735849056603776","last_synced_commit":"e587a4a58ecfc8014e378a9b440729487235e58c"},"previous_names":["nichoth/single-page","substrate-system/single-page"],"tags_count":19,"template":false,"template_full_name":"nichoth/template-ts-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fsingle-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fsingle-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fsingle-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Fsingle-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/single-page/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163119,"owners_count":21057873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T19:11:41.350Z","updated_at":"2025-04-10T05:31:56.203Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# single page\n[![types](https://img.shields.io/npm/types/@substrate-system/single-page?style=flat-square)](README.md)\n[![module](https://img.shields.io/badge/module-ESM%2FCJS-blue?style=flat-square)](README.md)\n[![semantic versioning](https://img.shields.io/badge/semver-2.0.0-blue?logo=semver\u0026style=flat-square)](https://semver.org/)\n[![Common Changelog](https://nichoth.github.io/badge/common-changelog.svg)](./CHANGELOG.md)\n[![install size](https://flat.badgen.net/packagephobia/install/@bicycle-codes/keys?cache-control=no-cache)](https://packagephobia.com/result?p=@bicycle-codes/keys)\n[![dependencies](https://img.shields.io/badge/dependencies-zero-brightgreen.svg?style=flat-square)](package.json)\n[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)\n\n\nWrite 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).\n\nLike the classic [@substack module](https://www.npmjs.com/package/single-page), but now with ESM + CJS versions and types.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [install](#install)\n  * [example](#example)\n    + [ESM](#esm)\n    + [CJS](#cjs)\n  * [methods](#methods)\n    + [var showPage = singlePage(cb, opts)](#var-showpage--singlepagecb-opts)\n    + [showPage(href)](#showpagehref)\n    + [showPage.push(href)](#showpagepushhref)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n# install\n```sh\nnpm i -S @substrate-system/single-page\n```\n\n## example\n\n### ESM\n```js\nimport { singlePage } from '@substrate-system/single-page'\n```\n\n### CJS\n```js\nconst singlePage = require('@substrate-system/single-page').default\n```\n\nGiven some html with elements `#foo`, `#bar`, and `#baz`:\n\n```html\n\u003chtml\u003e\n  \u003cstyle\u003e\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"foo\"\u003e\n      foo foO fOo fOO Foo FoO FOo FOO\n      \u003cdiv\u003e\u003ca href=\"/bar\"\u003ebar\u003c/a\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv id=\"bar\"\u003e\n      bar baR bAr bAR Bar BaR BAr BAR\n      \u003cdiv\u003e\u003ca href=\"/baz\"\u003ebaz\u003c/a\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cdiv id=\"baz\"\u003e\n      baz baZ bAz bAZ Baz BaZ BAz BAZ\n      \u003cdiv\u003e\u003ca href=\"/foo\"\u003efoo\u003c/a\u003e\u003c/div\u003e\n    \u003c/div\u003e\n    \n    \u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNow turn each of the divs into pages with their own routes.\nNote that this module doesn't update the link callbacks for you. You'll need to\nhandle that for yourself.\n\n```js\nvar divs = {\n    foo: document.querySelector('#foo'),\n    bar: document.querySelector('#bar'),\n    baz: document.querySelector('#baz')\n};\n\nconst singlePage = require('@substrate-system/single-page').default\n\nvar showPage = singlePage(function (href) {\n    Object.keys(divs).forEach(function (key) {\n        hide(divs[key]);\n    });\n    \n    var div = divs[href.replace(/^\\//, '')];\n    if (div) show(div)\n    else show(divs.foo)\n    \n    function hide (e) { e.style.display = 'none' }\n    function show (e) { e.style.display = 'block' }\n});\n\nvar links = document.querySelectorAll('a[href]');\nfor (var i = 0; i \u003c links.length; i++) {\n    links[i].addEventListener('click', function (ev) {\n        ev.preventDefault();\n        showPage(this.getAttribute('href'));\n    });\n}\n```\n\nYou'll need to have a server that will serve up the same static content for each\nof the pushState routes. Something like this will work:\n\n```js\nvar http = require('http');\nvar ecstatic = require('ecstatic')(__dirname);\n\nvar server = http.createServer(function (req, res) {\n    if (/^\\/[^\\/.]+$/.test(req.url)) {\n        req.url = '/';\n    }\n    ecstatic(req, res);\n});\nserver.listen(5000);\n```\n\nNow when you go to `http://localhost:5000` and click around, you'll see `/foo`,\n`/bar` and `/baz` in the address bar when you click links, even though you're\nnot reloading the page.\n\n## methods\n\n```js\nvar singlePage = require('@substrate-system/single-page').default\n```\n\n### var showPage = singlePage(cb, opts)\n\nFire `cb(href, page)` at the start and whenever the page navigation changes so\nyou can update the page contents accordingly.\n\nIf `opts.saveScroll` is `!== false`, `page.scrollX` and `page.scrollY` are saved\nfor every unique `href` so that you can jump back to the same scroll position\nthat the user left off at.\n\n### showPage(href)\n\nNavigate to `href`, firing the callback passed to singlePage.\n\n### showPage.push(href)\n\nUpdate the location href in the address bar without firing any callbacks.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fsingle-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Fsingle-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Fsingle-page/lists"}