{"id":20455072,"url":"https://github.com/atomic-router/forest","last_synced_at":"2025-10-09T13:12:18.025Z","repository":{"id":50563552,"uuid":"519446861","full_name":"atomic-router/forest","owner":"atomic-router","description":"Atomic Router for your forest 🍃 projects","archived":false,"fork":false,"pushed_at":"2024-08-02T14:44:31.000Z","size":21,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-09T02:00:01.491Z","etag":null,"topics":["atomic-router","effector","forest","javascript","router","typescript"],"latest_commit_sha":null,"homepage":"https://npmjs.com/atomic-router-forest","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/atomic-router.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-30T07:14:06.000Z","updated_at":"2024-08-02T14:44:00.000Z","dependencies_parsed_at":"2025-04-13T03:38:24.769Z","dependency_job_id":"4b2a6080-f4c6-4df5-b421-757e6abb6c3a","html_url":"https://github.com/atomic-router/forest","commit_stats":null,"previous_names":["sergeysova/atomic-router-forest"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/atomic-router/forest","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomic-router%2Fforest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomic-router%2Fforest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomic-router%2Fforest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomic-router%2Fforest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomic-router","download_url":"https://codeload.github.com/atomic-router/forest/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomic-router%2Fforest/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001544,"owners_count":26083102,"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","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["atomic-router","effector","forest","javascript","router","typescript"],"created_at":"2024-11-15T11:17:50.714Z","updated_at":"2025-10-09T13:12:18.003Z","avatar_url":"https://github.com/atomic-router.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# atomic-router-forest\n\n[Forest](https://github.com/effector/effector/tree/master/packages/forest) bindings for [atomic-router](https://github.com/atomic-router/atomic-router)\n\n\u003e **Note**: [forest](https://github.com/effector/effector/tree/master/packages/forest) still in active development phase. This bindings will be in v0.x too.\n\n\u003e ❗️ **Attention**: At the moment atomic-router team collecting issues and feature requests to redesign and release update. Use current version of atomic-router on your own risk. We are going to write migration guide when/if the release will contain breaking changes. Thank you for reporting issues 🧡\n\n[//]: # '[Example on StackBlitz](https://stackblitz.com/edit/react-fglswy)'\n\n## Installation\n\nInstall the router and forest bingings:\n\n```bash\nnpm i atomic-router atomic-router-forest\n```\n\nDon't forget about peer dependencies, if you haven't installed them yet:\n\n```bash\nnpm i effector forest history\n```\n\n## Usage\n\nFirst of all you need to create `Link` component to route to from the UI.\nIn general, you need to create you own internal library `router` or something like:\n\n```ts\n// src/shared/lib/router.ts\nimport {createLink} from 'atomic-router-forest';\n\nexport const Link = createLink();\n```\n\nFor each page you need to create a route instance:\n\n```ts\n// src/shared/routes.ts\nimport {createRoute} from 'atomic-router';\n\nexport const home = createRoute();\nexport const postsList = createRoute();\nexport const postView = createRoute\u003c{postId: string}\u003e();\n```\n\nNow you can create each page:\n\n```ts\n// pages/home/index.ts\nimport {h, text} from 'forest';\nimport {withRoute} from 'atomic-router-forest';\n\nimport * as routes from '~/shared/routes';\nimport {Link} from '~/shared/lib/router';\n\nexport function HomePage() {\n  h('div', {\n    classList: ['flex', 'flex-col'],\n    fn() {\n      // This allows to show/hide route if page is matched\n      // It is required to call `withRoute` inside `h` call\n      withRoute(routes.home);\n\n      text`Hello from the home page`;\n\n      Link(router.postList, {\n        text: `Show posts list`,\n      });\n    },\n  });\n}\n```\n\nAnd the same for the other pages. You can pass `params` and `query` into the `Link`:\n\n```ts\nLink(routes.postView, {\n  params: {postId: remap($post, 'id')},\n  text: remap($post, 'title'),\n});\n\n// or\n\nLink(routes.postList, {\n  query: {offset: $currentOffset.map((offset) =\u003e offset + 10)},\n  text: 'Show next posts',\n});\n```\n\nNext step you need to define your paths for each route:\n\n```ts\n// src/pages/index.ts\n// ~ stands for root alias\nimport * as routes from '~/shared/routes';\n\nimport {HomePage} from './home';\nimport {PostListPage} from './post-list';\nimport {PostViewPage} from './post-view';\n\nexport const ROUTES = [\n  {path: '/', route: routes.home},\n  {path: '/posts', route: routes.postsList},\n  // be sure your postId parameter matches generic parameter in `createRoute`\n  {path: '/posts/:postId', route: routes.postView},\n];\n\nexport function Pages() {\n  HomePage();\n  PostListPage();\n  PostViewPage();\n}\n```\n\nLast step is create router and link it with the Link and App:\n\n```ts\n// src/app.ts\nimport {sample, createEvent} from 'effector';\nimport {h, node, using} from 'forest';\nimport {createBrowserHistory} from 'history';\nimport {createHistoryRouter} from 'atomic-router';\nimport {linkRouter, onAppMount} from 'atomic-router-forest';\n\nimport {ROUTES, Pages} from '~/pages';\nimport {Link} from '~/shared/lib/router';\n\n// Create history instance and router instance to control routing in the app\nconst history = createBrowserHistory();\nconst router = createHistoryRouter({routes: ROUTES});\n\n// This event need to setup initial configuration. You can move it into src/shared\nconst appMounted = createEvent();\n\n// Attach history for the router on the app start\nsample({\n  clock: appMounted,\n  fn: () =\u003e history,\n  target: router.setHistory,\n});\n\n// Add router into the Link instance to easily resolve routes paths\nlinkRouter({\n  clock: appMounted,\n  router,\n  Link,\n});\n\nfunction Application() {\n  Pages();\n  onAppMount(appMounted);\n}\n\nusing(document.querySelector('#root')!, Application);\n```\n\nThat's all!\n\nSSR guide will be there asap.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomic-router%2Fforest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomic-router%2Fforest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomic-router%2Fforest/lists"}