{"id":15314650,"url":"https://github.com/unframework/atomic-routes","last_synced_at":"2025-10-09T00:32:26.803Z","repository":{"id":25668031,"uuid":"29103840","full_name":"unframework/atomic-routes","owner":"unframework","description":"Decentralized nested client-side routing with Promises. Framework-agnostic, composable, simple: designed to work with component-based application UIs.","archived":true,"fork":false,"pushed_at":"2017-01-15T20:28:00.000Z","size":31,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-11T08:06:10.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-11T19:56:44.000Z","updated_at":"2023-01-28T11:49:10.000Z","dependencies_parsed_at":"2022-07-10T13:00:22.807Z","dependency_job_id":null,"html_url":"https://github.com/unframework/atomic-routes","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fatomic-routes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fatomic-routes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fatomic-routes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unframework%2Fatomic-routes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unframework","download_url":"https://codeload.github.com/unframework/atomic-routes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877250,"owners_count":16554912,"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-10-01T08:46:31.761Z","updated_at":"2025-10-09T00:32:21.537Z","avatar_url":"https://github.com/unframework.png","language":"CoffeeScript","readme":"# Atomic Routes\n\nDecentralized nested client-side routing with Promises. Framework-agnostic, composable, simple: designed to work with component-based application UIs.\n\n```js\nvar rootNav = new RootRoute();\n\nrootNav.when('/foo', function (fooNav) {\n    // create a container widget\n    console.log('entered \"foo\" state');\n    var rootDom = $('\u003cdiv\u003eRoot View\u003c/div\u003e').appendTo('body');\n\n    fooNav.whenDestroyed.then(function() {\n        // destroy the container widget\n        console.log('left \"foo\" state');\n        rootDom.remove();\n    });\n\n    fooNav.when('/bar', function (barNav) {\n        // create a sub-widget and attach to container\n        console.log('entered \"foo/bar\" state');\n        var fooDom = $('\u003cdiv\u003eFooBar View\u003c/div\u003e').appendTo(rootDom);\n\n        barNav.whenDestroyed.then(function() {\n            // destroy the sub-widget\n            console.log('left \"foo/bar\" state');\n            fooDom.remove();\n        });\n    });\n});\n\nrootNav.when('/baz/:someParam', function (someParam, bazNav) {\n    console.log('entered \"baz\" state with \"' + someParam + '\"');\n\n    bazNav.whenDestroyed.then(function() {\n        console.log('left \"baz\" state with \"' + someParam + '\"');\n    });\n});\n```\n\nInspired by [AngularJS UI Router](https://github.com/angular-ui/ui-router) nested routes concept and modern techniques like Promises that emphasize immutable, functional state.\n\nUnlike AngularJS UI Router and most other routing libraries, Atomic Routes are defined on-demand and in a decentralized fashion. There is no need for a massive central \"routes\" file which has to run at bootstrap time.\n\nComposition example:\n\n```js\n// RootView.js: top-level \"page\" view\nfunction RootView() {\n    var rootNav = new RootRoute();\n    var $dom = $('body');\n\n    rootNav.when('/fizz-buzz', function (fizzBuzzNav) {\n        var fizzBuzzView = new FizzBuzzView($dom, fizzBuzzNav);\n    });\n}\n```\n\n```js\n// FizzBuzzView.js: sub-component in another file which expects delegated nav state\nfunction FizzBuzzView($dom, nav) {\n    // ... render DOM, etc\n\n    // can create sub-routes without needing to know what the parent URL is\n    nav.when('/foo-bar', function (fooBarNav) {\n        // render more sub-route DOM, etc\n    });\n}\n```\n\n## Usage Patterns\n\nRoutes are defined via `when` method. Each route body is executed when a navigation state is entered (immediately if it already matches current route). The navigation state can be used to define nested routes, and to track when the user leaves that navigation state. The library defines the \"root\" navigation state that is always active - that is the starting place where routes are registered.\n\nTo detect when a navigation state is no longer active, register a callback on the state object using the `whenDestroyed.then` method. The `whenDestroyed` property is a full-fledged promise object, so the callback will be called even when trying to register *after* the user left the navigation state. This is needed to easily clean up UI created as a result of an asynchronous operation: the operation may complete after the navigation state has become inactive, so attaching a simple event listener would miss out on the cleanup.\n\n## More Examples\n\nFor more examples see `/example/index.html`.\n\n## To Do\n\nConsider an Express-style \"use\" clause. I.e. instead of actual live route body this would define a template body, executed on init rather than at navigation time. This would help get const references to routes to help link, etc.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fatomic-routes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funframework%2Fatomic-routes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funframework%2Fatomic-routes/lists"}