{"id":22556262,"url":"https://github.com/substrate-system/route-event","last_synced_at":"2025-04-10T05:32:09.863Z","repository":{"id":220879080,"uuid":"752757896","full_name":"substrate-system/route-event","owner":"substrate-system","description":"Simple client side route event","archived":false,"fork":false,"pushed_at":"2025-03-08T02:11:13.000Z","size":84,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T06:51:45.734Z","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:12:23.000Z","updated_at":"2025-03-08T02:11:16.000Z","dependencies_parsed_at":"2024-06-20T19:08:33.215Z","dependency_job_id":"b6ee47e8-f96f-4487-b3e5-5432184d8baa","html_url":"https://github.com/substrate-system/route-event","commit_stats":{"total_commits":76,"total_committers":3,"mean_commits":"25.333333333333332","dds":0.4342105263157895,"last_synced_commit":"fbecd534038aaf98f11fc139403572b68770dcaf"},"previous_names":["nichoth/route-event","bicycle-codes/route-event","substrate-system/route-event"],"tags_count":44,"template":false,"template_full_name":"nichoth/template-ts-browser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Froute-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Froute-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Froute-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substrate-system%2Froute-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substrate-system","download_url":"https://codeload.github.com/substrate-system/route-event/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163150,"owners_count":21057879,"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:44.980Z","updated_at":"2025-04-10T05:32:09.793Z","avatar_url":"https://github.com/substrate-system.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# route event\n[![tests](https://github.com/bicycle-codes/route-event/actions/workflows/nodejs.yml/badge.svg)](https://github.com/bicycle-codes/route-event/actions/workflows/nodejs.yml)\n[![types](https://img.shields.io/npm/types/route-event?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[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE)\n\nSimple route event for the browser. This will handle URL changes client-side, so that navigating will not cause a page reload.\n\nCall a function with a path whenever someone clicks a link that is local to the server. Also, use the [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) to handle back/forward button clicks.\n\n## install\n\n```sh\nnpm i -S route-event\n```\n\n### CJS\n```js\nvar Route = require('route-event').default\n```\n\n### ESM\n```js\nimport Route from 'route-event'\n```\n\n## example\nListen for click events on `document.body`. If the event is triggered by using\nthe browser's back/forward button, then `{ popstate }` will be true.\n\n```js\nimport Route from 'route-event'\nconst onRoute = Route()  // by default listen on document.body\n\n// listen for click events on docuement.body. If the href is local to the\n// server, call `onRoute`\nvar stopListening = onRoute(function onRoute (path, data) {\n  console.log(path)\n  // =\u003e '/example/path'\n  console.log(data)\n  // =\u003e { scrollX: 0, scrollY: 0, popstate: false }\n\n  // handle scroll state like a web browser\n  // (restore scroll position on back/forward)\n  if (data.popstate) {\n      return window.scrollTo(data.scrollX, data.scrollY)\n  }\n\n  // if this was a link click (not back button), then scroll to top\n  window.scrollTo(0, 0)\n})\n\n// programmatically change the location and call the onRoute cb\nrouteEvent.setRoute('/some/path')\n\n// change the route, but don't call the callbacks\nrouteEvent.setRoute.push('/abc')\n\n// ...sometime in the future...\n// unsubscribe from route events\nstopListening()\n```\n\nPass in an element to listen to, and handle events with a router:\n```js\nimport Route from 'route-event'\nimport Router from '@substrate-system/routes'\n\nconst router = Router()\nconst routeEvent = Route({\n  el: document.getElementById('example')\n})\n\nrouter.addRoute('/', function () {\n  console.log('root')\n})\n\nrouteEvent(function onChange (path, ev) {\n  var m = router.match(path)\n  m.action()\n\n  // handle scroll state like a web browser\n  if (ev.popstate) {\n      return window.scrollTo(ev.scrollX, ev.scrollY)\n  }\n  window.scrollTo(0, 0)\n})\n```\n\n## API\n\n### Listener\nEvent listeners are functions that take an `href` and an object with previous\nscroll position and `popstate` -- a boolean indicating if this was a link\nclick or back / forward button (`true` means it was back/forward button).\n\n```ts\ninterface Listener {\n  (href:string, data:{\n    scrollX:number,\n    scrollY:number,\n    popstate:boolean\n  }):void;\n}\n```\n\n### Route\nCreate an instance of the event listener. Optionally take an element to listen to. Return a function that takes a callback that will receive route events. The returned function also has a property `setRoute` that will prgrammatically change the URL and call any route listeners.\n\n```js\nimport Route from 'route-event'\n```\n\n```ts\nfunction Route (opts:{ el?:HTMLElement } = {}):{\n    (cb:Listener):void;\n    setRoute:ReturnType\u003ctypeof singlePage\u003e\n}\n```\n\n### setRoute\nA property on the returned function so you can programmatically set the URL.\n\n```ts\nfunction setRoute (href:string):void\n```\n\n```js\nimport Route from '@substrate-system/route-event'\n\nconst routeEvent = Route()\nrouteEvent.setRoute('/example')\n```\n\n### `setRoute.push`\nChange the route, but don't call the callbacks.\n\n```ts\nimport Route from '@substrate-system/route-event'\n\nconst routeEvent = Route()\nrouteEvent.setRoute.push = function (href:string):void {\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Froute-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstrate-system%2Froute-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstrate-system%2Froute-event/lists"}