{"id":16476975,"url":"https://github.com/agilgur5/mst-persist","last_synced_at":"2025-04-13T05:26:00.181Z","repository":{"id":57304513,"uuid":"187457403","full_name":"agilgur5/mst-persist","owner":"agilgur5","description":"Persist and hydrate MobX-state-tree stores (in \u003c 100 LoC)","archived":false,"fork":false,"pushed_at":"2023-07-19T07:07:48.000Z","size":330,"stargazers_count":86,"open_issues_count":8,"forks_count":17,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-24T10:55:36.657Z","etag":null,"topics":["async","asyncstorage","hydrate","local","localforage","localstorage","mobx","mobx-state-tree","mst","persist","persistence","session","sessionstorage","state","state-tree","storage","tree"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agilgur5.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-19T09:30:26.000Z","updated_at":"2024-12-21T19:25:54.000Z","dependencies_parsed_at":"2024-06-18T16:49:29.719Z","dependency_job_id":"d334ae4b-1489-44f0-a3b2-60cd0571d3b0","html_url":"https://github.com/agilgur5/mst-persist","commit_stats":{"total_commits":67,"total_committers":3,"mean_commits":"22.333333333333332","dds":0.07462686567164178,"last_synced_commit":"4f8b9f116d1645112ac2eb790d41f007916b9ff0"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Fmst-persist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Fmst-persist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Fmst-persist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilgur5%2Fmst-persist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agilgur5","download_url":"https://codeload.github.com/agilgur5/mst-persist/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248667124,"owners_count":21142380,"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":["async","asyncstorage","hydrate","local","localforage","localstorage","mobx","mobx-state-tree","mst","persist","persistence","session","sessionstorage","state","state-tree","storage","tree"],"created_at":"2024-10-11T12:44:08.581Z","updated_at":"2025-04-13T05:26:00.139Z","avatar_url":"https://github.com/agilgur5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mst-persist\n\n\u003c!-- releases / versioning --\u003e\n[![package-json](https://img.shields.io/github/package-json/v/agilgur5/mst-persist.svg)](https://npmjs.org/package/mst-persist)\n[![releases](https://img.shields.io/github/tag-pre/agilgur5/mst-persist.svg)](https://github.com/agilgur5/mst-persist/releases)\n[![commits](https://img.shields.io/github/commits-since/agilgur5/mst-persist/v0.1.3.svg)](https://github.com/agilgur5/mst-persist/commits/master)\n\u003cbr\u003e\u003c!-- downloads --\u003e\n[![dt](https://img.shields.io/npm/dt/mst-persist.svg)](https://npmjs.org/package/mst-persist)\n[![dy](https://img.shields.io/npm/dy/mst-persist.svg)](https://npmjs.org/package/mst-persist)\n[![dm](https://img.shields.io/npm/dm/mst-persist.svg)](https://npmjs.org/package/mst-persist)\n[![dw](https://img.shields.io/npm/dw/mst-persist.svg)](https://npmjs.org/package/mst-persist)\n\u003cbr\u003e\u003c!-- status / activity --\u003e\n[![typings](https://img.shields.io/npm/types/mst-persist.svg)](src/index.ts)\n[![build status](https://img.shields.io/github/actions/workflow/status/agilgur5/mst-persist/ci.yml?branch=main)](https://github.com/agilgur5/mst-persist/actions/workflows/ci.yml?query=branch%3Amain)\n[![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/mst-persist/master.svg)](https://codecov.io/gh/agilgur5/mst-persist)\n\nPersist and hydrate [MobX-state-tree](https://github.com/mobxjs/mobx-state-tree) stores.\n\n## Installation\n\n```sh\nnpm i -S mst-persist\n```\n\n## Usage\n\n```javascript\nimport { types } from 'mobx-state-tree'\nimport localForage from 'localForage'\nimport { persist } from 'mst-persist'\n\nconst SomeStore = types.model('Store', {\n  name: 'John Doe',\n  age: 32\n})\n\nconst someStore = SomeStore.create()\n\npersist('some', someStore, {\n  storage: localForage,  // or AsyncStorage in react-native.\n                         // default: localStorage\n  jsonify: false  // if you use AsyncStorage, this shoud be true\n                  // default: true\n  whitelist: ['name']  // only these keys will be persisted\n}).then(() =\u003e console.log('someStore has been hydrated'))\n\n```\n\n### API\n\n#### `persist(key, store, options)`\n\n- arguments\n  - **key** *string* The key of your storage engine that you want to persist to.\n  - **store** *[MST](https://github.com/mobxjs/mobx-state-tree) store* The store to be persisted.\n  - **options** *object* Additional configuration options.\n    - **storage** *[localForage](https://github.com/localForage/localForage) / [AsyncStorage](https://github.com/react-native-community/async-storage) / [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)*\n      Any Storage Engine that has a Promise-style API similar to [`localForage`](https://github.com/localForage/localForage).\n      The default is [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), which has a built-in adaptor to make it support Promises.\n      For React Native, one may configure [`AsyncStorage`](https://github.com/react-native-community/async-storage) instead.\n      \u003cbr\u003e\n      Any of [`redux-persist`'s Storage Engines](https://github.com/rt2zz/redux-persist#storage-engines) should also be compatible with `mst-persist`.\n    - **jsonify** *bool* Enables serialization as JSON (default: `true`).\n    - **whitelist** *Array\\\u003cstring\\\u003e* Only these keys will be persisted (defaults to all keys).\n    - **blacklist** *Array\\\u003cstring\\\u003e* These keys will not be persisted (defaults to all keys).\n\n- returns a void Promise\n\n### Node and Server-Side Rendering (SSR) Usage\n\nNode environments are supported so long as you configure a Storage Engine that supports Node, such as [`redux-persist-node-storage`](https://github.com/pellejacobs/redux-persist-node-storage), [`redux-persist-cookie-storage`](https://github.com/abersager/redux-persist-cookie-storage), etc.\nThis allows you to hydrate your store server-side.\n\nFor SSR though, you may not want to hydrate your store server-side, so in that case you can call `persist` conditionally:\n\n```javascript\nif (typeof window !== 'undefined') { // window is undefined in Node\n  persist(...)\n}\n```\n\nWith this conditional check, your store will only be hydrated client-side.\n\n## Examples\n\nNone yet, but can take a look at [agilgur5/react-native-manga-reader-app](https://github.com/agilgur5/react-native-manga-reader-app) which uses it in production.\nCan view the commit that implements it [here](https://github.com/agilgur5/react-native-manga-reader-app/pull/2/commits/286725f417d321f25d16ee3858b0e7e6b7886e77).\n\nCan also view some of the internal [tests](test/).\n\n## How it works\n\nBasically just a small wrapper around MST's [`onSnapshot` and `applySnapshot`](https://github.com/mobxjs/mobx-state-tree#snapshots).\nThe source code is currently shorter than this README, so [take a look under the hood](https://github.com/agilgur5/mst-persist/tree/master/src)! :)\n\n## Credits\n\nInspiration for parts of the code and API came from [`redux-persist`](https://github.com/rt2zz/redux-persist), [`mobx-persist`](https://github.com/pinqy520/mobx-persist), and [this MST persist PoC gist](https://gist.github.com/benjick/c48dd2db575e79c7b0b1043de4556ebc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilgur5%2Fmst-persist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagilgur5%2Fmst-persist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilgur5%2Fmst-persist/lists"}