{"id":15914703,"url":"https://github.com/neetjn/riot-routing","last_synced_at":"2025-03-03T10:13:44.848Z","repository":{"id":36465024,"uuid":"202946307","full_name":"neetjn/riot-routing","owner":"neetjn","description":"Lightweight client sided router for Riot.js.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:09:02.000Z","size":1968,"stargazers_count":3,"open_issues_count":21,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T21:54:40.348Z","etag":null,"topics":["html","html5","javascript","js","node","riot","riot4","riotjs","route","routing","web"],"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/neetjn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-18T01:17:33.000Z","updated_at":"2020-11-05T06:58:19.000Z","dependencies_parsed_at":"2023-01-17T01:43:29.085Z","dependency_job_id":null,"html_url":"https://github.com/neetjn/riot-routing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neetjn%2Friot-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neetjn%2Friot-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neetjn%2Friot-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neetjn%2Friot-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neetjn","download_url":"https://codeload.github.com/neetjn/riot-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241523946,"owners_count":19976424,"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":["html","html5","javascript","js","node","riot","riot4","riotjs","route","routing","web"],"created_at":"2024-10-06T17:05:33.149Z","updated_at":"2025-03-03T10:13:44.827Z","avatar_url":"https://github.com/neetjn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# riot-routing\n\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fneetjn%2Friot-routing%2Fbadge\u0026style=flat)](https://actions-badge.atrox.dev/neetjn/riot-routing/goto)\n[![codecov](https://codecov.io/gh/neetjn/riot-routing/branch/master/graph/badge.svg)](https://codecov.io/gh/neetjn/riot-routing)\n[![npm version](https://badge.fury.io/js/riot-routing.svg)](https://badge.fury.io/js/riot-routing)\n\n[![NPM](https://nodei.co/npm/riot-routing.png)](https://nodei.co/npm/riot-routing/)\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)\n\nLightweight Riot.js client sided router built on top of the [core-routing](https://github.com/neetjn/core-routing) project using the HTML 5 history api.\n\n### Support\n\n\u003e Support is available for older browsers without the HTML 5 history api, however events may be dispatched irregularly and all features may not be available.\n\n| Chome  | Edge | Firefox | Opera    | Safari |\n|--------|------|---------|----------|--------|\n| 5.0+ ✔ |  ✔   | 4.0+ ✔  | 11.50+ ✔ | 5.0+ ✔ |\n\n**riot-routing** only supports Riot.js 4.x, for Riot.js 3.x see [riot-view-router](https://github.com/neetjn/riot-view-router).\n\n### About\n\nThis project was created in wake of a redesign of the **riot-view-router** project. **riot-routing** consists of two simple exported components leveraging **core-routing** in a lightweight client.\n\n## Install\n\nTo install via NPM:\n```sh\nnpm install riot-routing\n```\nFor a quick start using jsdelivr:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/corriote-routing/dist/riot-routing.browser.js\"\u003e\u003c/script\u003e\n```\n\n### Use\n\nThe router at it's core is quite simple to use. The project exposes two Riot.js components and an `install` function that can be imported like so:\n\n```js\nimport { Router, LinkTo } from 'riot-routing'\n\n...\n\nexport default {\n  components: {\n    Router,\n    LinkTo\n  }\n}\n```\n\nor\n\n```js\nimport { register } from 'riot'\nimport { install } from 'riot-routing'\n\n// will expose the `Router` and `LinkTo` components globally\ninstall(register)\n```\n\nThe module also supports es2015:\n\n```js\nconst { install } = require('riot-routing')\n```\n\nWhen referencing from a browser, a global definition `RiotRouting` will be exposed:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/riot/4.6.2/riot+compiler.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/riot-routing/dist/riot-routing.browser.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\n  const { install } = RiotRouting\n  install(riot.register)\n\u003c/script\u003e\n```\n\n### Example\n\n\u003e The router component takes three props (`default-path` and `fallback` are optional):\n\n```html\n\u003croot\u003e\n  \u003crouter default-path=\"/\"\n          fallback=\"/not-found\"\n          routes={routes}/\u003e\n  \u003cscript\u003e\n    import { Router, LinkTo } from 'riot-routing'\n\n    import Home from './components/home.riot'\n    import NotFound from './components/not-found.riot'\n    import UserProfile from './components/user-profile.riot'\n\n    const routes = [\n      {\n        component: Home,\n        path: ['/', '/home']\n      },\n      {\n        component: NotFound,\n        path: '/not-found'\n      },\n      {\n        componentName: 'user-profile',\n        path: '/user/:userId',\n        test(data, transition) {\n          if (data.args.userId) {\n            ...\n          } else {\n            transition('/not-found')\n          }\n        }\n      }\n    ]\n\n    export default {\n      components: {\n        Router,\n        Home,\n        NotFound,\n        UserProfile\n      },\n      routes\n    }\n  \u003c/script\u003e\n\u003c/root\u003e\n```\n\nRoutes are defined in the form:\n\n```ts\ninterface Route = {\n  component?: {\n    css: string,\n    name: string,\n    template: ...,\n    exports: any\n  },\n  componentName?: string,\n  path: string | Array\u003cstring\u003e,\n  test (data: ..., transition: fn(route?: string)): void\n}\n```\n\n## Development\n\nRefer to the following npm commands to simplify your development workflow:\n\n* **lint** - Lint core project and tests.\n* **pretty** - Use prettier to clean/format core project.\n* **test** - Run test suite.\n* **build:web** - Compile bundle for browser.\n* **build:prod** - Compile bundle for production.\n* **build** - Lint, compile, and test the project.\n\n## Contributors\n\n* **John Nolette** (john@neetgroup.net)\n\nContributing guidelines are as follows,\n\n* Any new features or bug fixes must include either a test.\n  * Branches for bugs and features should be structured like so, `issue-x-username`.\n* Before putting in a pull request, be sure to verify you've built all your changes and your code adheres to the defined TS and JS style rules.\n  * Use `npm run lint` to lint your code and `npm run pretty` to format.\n* Include your name and email in the contributors list.\n\n---\n\nCopyright (c) 2020 John Nolette Licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneetjn%2Friot-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneetjn%2Friot-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneetjn%2Friot-routing/lists"}