{"id":13656876,"url":"https://github.com/blikblum/slick-router","last_synced_at":"2025-03-24T22:35:43.327Z","repository":{"id":34883863,"uuid":"186896239","full_name":"blikblum/slick-router","owner":"blikblum","description":"Powerful and flexible client side router","archived":false,"fork":false,"pushed_at":"2024-07-28T02:26:31.000Z","size":4325,"stargazers_count":27,"open_issues_count":53,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T09:14:06.363Z","etag":null,"topics":["router","state","web-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/blikblum.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":"2019-05-15T20:13:02.000Z","updated_at":"2024-07-28T02:26:34.000Z","dependencies_parsed_at":"2024-04-15T11:31:01.502Z","dependency_job_id":"66789ee6-f77e-4c21-86ef-086772e99253","html_url":"https://github.com/blikblum/slick-router","commit_stats":{"total_commits":649,"total_committers":15,"mean_commits":"43.266666666666666","dds":"0.44838212634822805","last_synced_commit":"e71214816769bccd2256ad0dd1fddec1eb471940"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blikblum%2Fslick-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blikblum%2Fslick-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blikblum%2Fslick-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blikblum%2Fslick-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blikblum","download_url":"https://codeload.github.com/blikblum/slick-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244358437,"owners_count":20440360,"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":["router","state","web-components"],"created_at":"2024-08-02T05:00:33.731Z","updated_at":"2025-03-24T22:35:38.312Z","avatar_url":"https://github.com/blikblum.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Slick Router\n\nSlick Router is a powerful, flexible router that translates URL changes into route transitions allowing to put the application into a desired state. It is derived from [cherrytree](https://github.com/QubitProducts/cherrytree) library (see [differences](docs/versions-differences.md)).\n\n## Features\n\n- Out of the box support for Web Components:\n  - Streamlined support for code spliting and lazy loading\n  - Expose route state (query, params) to components\n  - Property hooks to map global state to component props\n  - Declarative handling of router links\n- Can nest routes allowing to create nested UI and/or state\n- Route transition is a first class citizen - abort, pause, resume, retry\n- Generate links in a systematic way, e.g. `router.generate('commit', {sha: '1e2760'})`\n- Use pushState or hashchange for URL change detection\n- Define path dynamic segments\n- Trigger router navigate programatically\n- With builtin middlewares/components:\n  - components/animated-outlet: enable animation on route transitions\n  - components/router-links: handle route related links state\n  - middlewares/wc: advanced Web Component rendering and lifecycle (included in default export)\n  - middlewares/router-links: handle route related links state (included in default export)\n  - middlewares/events: fires route events on window\n\n## Installation\n\nThe default export (including web component support and routerLinks) is 17kb. The core Router class is ~12kB minified (without gzip compression). AnimatedOutlet web component, which can be used independent from the router, has a 2.5kb size.\nSee [webpack test project](examples/tree-shaking) for more results.\n\n    $ npm install --save slick-router\n\n## Docs\n\n- [Intro Guide](docs/intro.md)\n- [Router Configuration](docs/router-configuration.md)\n- [Programmatic Navigation and Link Handling](docs/programmatic-navigation-and-link.md)\n- [Route Transition](docs/route-transition.md)\n- [Common Situations](docs/common-situations.md)\n- [Changelog](CHANGELOG.md)\n\n## Builtin middlewares\n\n- [wc](docs/middlewares/wc.md) (advanced Web Component rendering and lifecycle)\n- [routerLinks](docs/middlewares/routerlinks.md) (handle route related links state)\n- [events](docs/middlewares/events.md) (fires route events on window)\n\n## Builtin components\n\n- [animated-outlet](docs/components/animated-outlet.md) (enable animation on route transitions)\n- [router-links](docs/middlewares/routerlinks.md) (handle route related links state)\n\n## Usage\n\n### With Web Components\n\nThe default Router class comes with Web Components and router links support.\n\n```js\nimport { Router } from 'slick-router'\n\nfunction checkAuth(transition) {\n  if (!!localStorage.getItem('token')) {\n    transition.redirectTo('login')\n  }\n}\n\n// route tree definition\nconst routes = function (route) {\n  route('application', { path: '/', component: 'my-app' }, function () {\n    route('feed', { path: '' })\n    route('messages')\n    route('status', { path: ':user/status/:id' })\n    route('profile', { path: ':user', beforeEnter: checkAuth }, function () {\n      route('profile.lists', { component: 'profile-lists' })\n      route('profile.edit', { component: 'profile-edit' })\n    })\n  })\n}\n\n// create the router\nvar router = new Router({\n  routes,\n})\n\n// start listening to URL changes\nrouter.listen()\n```\n\n### Custom middlewares\n\nIs possible to create a router with customized behavior by using the core Router with middlewares.\n\nCheck how to create middlewares in the [Router Configuration Guide](docs/router-configuration.md).\n\n```js\nimport { Router } from 'slick-router/core.js'\n\n// create a router similar to page.js - https://github.com/visionmedia/page.js\n\nconst user = {\n  list() {},\n  async load() {},\n  show() {},\n  edit() {},\n}\n\nconst routes = [\n  {\n    name: 'users',\n    path: '/',\n    handler: user.list,\n  },\n  {\n    name: 'user.show',\n    path: '/user/:id/edit',\n    handler: [user.load, user.show],\n  },\n  ,\n  {\n    name: 'user.edit',\n    path: '/user/:id/edit',\n    handler: [user.load, user.edit],\n  },\n]\n\nconst router = new Router({ routes })\n\nfunction normalizeHandlers(handlers) {\n  return Array.isArray(handlers) ? handlers : [handlers]\n}\n\nrouter.use(async function (transition) {\n  for (const route of transition.routes) {\n    const handlers = normalizeHandlers(route.options.handler)\n    for (const handler of handlers) {\n      await handler(transition)\n    }\n  }\n})\n\n// protect private routes\nrouter.use(function privateHandler(transition) {\n  if (transition.routes.some((route) =\u003e route.options.private)) {\n    if (!userLogged()) {\n      transition.cancel()\n    }\n  }\n})\n\n// for error logging attach a catch handler to transition promise...\nrouter.use(function errorHandler(transition) {\n  transition.catch(function (err) {\n    if (err.type !== 'TransitionCancelled' \u0026\u0026 err.type !== 'TransitionRedirected') {\n      console.error(err.stack)\n    }\n  })\n})\n\n// ...or use the error hook\nrouter.use({\n  error: function (transition, err) {\n    if (err.type !== 'TransitionCancelled' \u0026\u0026 err.type !== 'TransitionRedirected') {\n      console.error(err.stack)\n    }\n  },\n})\n\n// start listening to URL changes\nrouter.listen()\n```\n\n## Examples\n\n- [lit-element-mobx-realworld](https://github.com/blikblum/lit-element-mobx-realworld-example-app) A complete app that uses router advanced features. [Live demo](https://blikblum.github.io/lit-element-mobx-realworld-example-app)\n\nYou can also clone this repo and run the `examples` locally:\n\n- [hello-world-jquery](examples/hello-world-jquery) - minimal example with good old jquery\n- [hello-world-wc](examples/hello-world-wc) - minimal example with Web Component (no build required)\n- [vanilla-blog](examples/vanilla-blog) - a small static demo of blog like app that uses no framework\n\n## Browser Support\n\nSlick Router works in all modern browsers. No IE support.\n\n---\n\nCopyright (c) 2024 Luiz Américo Pereira Câmara\n\nCopyright (c) 2017 Karolis Narkevicius\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblikblum%2Fslick-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblikblum%2Fslick-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblikblum%2Fslick-router/lists"}