{"id":21678533,"url":"https://github.com/js2me/mobx-wouter","last_synced_at":"2025-05-09T01:27:38.716Z","repository":{"id":263430392,"uuid":"890378556","full_name":"js2me/mobx-wouter","owner":"js2me","description":"MobX integration with Wouter","archived":false,"fork":false,"pushed_at":"2025-01-15T14:54:52.000Z","size":1013,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T15:58:42.691Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/js2me.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}},"created_at":"2024-11-18T13:21:17.000Z","updated_at":"2025-01-15T14:54:47.000Z","dependencies_parsed_at":"2024-11-18T15:08:30.643Z","dependency_job_id":"2e2ff159-5c1c-4dd4-96dc-0d624225ac01","html_url":"https://github.com/js2me/mobx-wouter","commit_stats":null,"previous_names":["js2me/mobx-wouter"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-wouter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-wouter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-wouter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-wouter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js2me","download_url":"https://codeload.github.com/js2me/mobx-wouter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235569499,"owners_count":19011184,"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-11-25T14:37:26.146Z","updated_at":"2025-05-09T01:27:38.707Z","avatar_url":"https://github.com/js2me.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"assets/logo.png\" align=\"right\" height=\"156\" alt=\"logo\" /\u003e\n\n# mobx-wouter  \n\n[![NPM version][npm-image]][npm-url] [![test status][github-test-actions-image]][github-actions-url] [![build status][github-build-actions-image]][github-actions-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]\n\n\n[npm-image]: http://img.shields.io/npm/v/mobx-wouter.svg\n[npm-url]: http://npmjs.org/package/mobx-wouter\n[github-build-actions-image]: https://github.com/js2me/mobx-wouter/workflows/Build/badge.svg\n[github-test-actions-image]: https://github.com/js2me/mobx-wouter/workflows/Test/badge.svg\n[github-actions-url]: https://github.com/js2me/mobx-wouter/actions\n[download-image]: https://img.shields.io/npm/dm/mobx-wouter.svg\n[download-url]: https://npmjs.org/package/mobx-wouter\n[bundlephobia-url]: https://bundlephobia.com/result?p=mobx-wouter\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/mobx-wouter\n\n_**MobX** integration with **Wouter**_\n\n\n## What package has   \n\n### [`PageViewModelBase`](src/page-view-model/page-view-model.base.ts), [`PageViewModel`](src/page-view-model/page-view-model.ts)   \n\nSimple [`ViewModel`](https://github.com/js2me/mobx-view-model?tab=readme-ov-file#mobx-view-model) wrapper for pages  \n\n#### Usage:  \n\n```ts\nimport { PageViewModelBase } from 'mobx-wouter';\n\nclass HomePageVM extends PageViewModelBase\u003c{ pathParam: string }\u003e {\n  @observable\n  accessor value = 'value';\n\n  mount() {\n    super.mount();\n    document.title = 'Home';\n    // do something\n  }\n}\n```\n\n\n### [`withPageViewModel()`](src/page-view-model/with-page-view-model.tsx)  \n\nHOC for integration `PageViewModel` with view component of **React**  \n\n#### Usage:  \n\n```tsx\nimport { ViewModelProps } from 'mobx-view-model';  \nimport { withPageViewModel } from 'mobx-wouter';\n\nconst HomePageView = observer(({ model }: ViewModelProps\u003cHomePageVM\u003e) =\u003e {\n  return \u003cdiv\u003e{`render value - ${model.value}`}\u003c/div\u003e\n})\n\nexport const HomePage = withPageViewModel(HomePageVM)(HomePageView);\n```\n\n### [`withLazyPageViewModel()`](src/page-view-model/with-lazy-page-view-model.tsx)  \n\nSame as [`withPageViewModel()`](src/page-view-model/with-page-view-model.tsx) but with lazy loading view and view model  \n\n### [`MobxRouter`](src/router/router.ts)   \n\nRouter for client navigation  \n\n### [`MobxLocation`, `MobxHistory`, `QueryParams` and etc](https://github.com/js2me/mobx-location-history)  \n\nExports from [mobx-location-history](https://github.com/js2me/mobx-location-history)  \n\n\n### Usage   \n\n```ts\nimport { MobxRouter, MobxLocation, MobxHistory, QueryParams } from \"mobx-wouter\";\n\nconst router = new MobxRouter({\n  history: //, new MobxLocation()\n  location: //, new MobxHistory()\n  queryParams: //, new QueryParams(),\n  abortSignal: //\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs2me%2Fmobx-wouter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs2me%2Fmobx-wouter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs2me%2Fmobx-wouter/lists"}