{"id":17103366,"url":"https://github.com/farwayer/mst-decorators","last_synced_at":"2025-04-13T00:42:53.253Z","repository":{"id":40773330,"uuid":"203062818","full_name":"farwayer/mst-decorators","owner":"farwayer","description":"Class based MobX-State-Tree definitions","archived":false,"fork":false,"pushed_at":"2023-01-06T02:05:33.000Z","size":1462,"stargazers_count":26,"open_issues_count":16,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-20T12:17:13.116Z","etag":null,"topics":["class","decorators","mobx","mobx-state-tree","model"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/farwayer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-08-18T22:29:43.000Z","updated_at":"2023-07-03T02:24:25.000Z","dependencies_parsed_at":"2023-02-05T02:30:45.812Z","dependency_job_id":null,"html_url":"https://github.com/farwayer/mst-decorators","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmst-decorators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmst-decorators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmst-decorators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/farwayer%2Fmst-decorators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/farwayer","download_url":"https://codeload.github.com/farwayer/mst-decorators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650417,"owners_count":21139672,"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":["class","decorators","mobx","mobx-state-tree","model"],"created_at":"2024-10-14T15:33:10.445Z","updated_at":"2025-04-13T00:42:53.231Z","avatar_url":"https://github.com/farwayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## mst-decorators\n\n_Class based MobX-State-Tree definitions._\n\n[![NPM version](https://img.shields.io/npm/v/mst-decorators.svg)](https://www.npmjs.com/package/mst-decorators)\n[![Build Status](https://travis-ci.com/farwayer/mst-decorators.svg?branch=master)](https://travis-ci.com/farwayer/mst-decorators)\n[![Coverage Status](https://coveralls.io/repos/github/farwayer/mst-decorators/badge.svg)](https://coveralls.io/github/farwayer/mst-decorators)\n\nSome features:\n- simple syntax without need to use extra helpers etc, just type decorators\n- es6 extending\n- autodetect actions, flows, getter views, volatile\n- actions and flows auto-bind to model so you can pass it to callbacks without\nworrying about `this` context\n- result of decorator function is decorator. Feel power in constructing types! \n- model class is decorator so it can be used in another model (`@Location`)\n- late definition for recursive models (`@late(() =\u003e ref(Category)) topCategory`)\n- `preProcessSnapshot`/`postProcessSnapshot` as static class methods\n- can specify `onPatch`/`onSnapshot`/`onAction` just in class\n- lifecycle hook actions, composing and `getEnv()` works as well\n- several extra decorators: `@jsonDate`, `@setter`\n\n## How to use\n\n```bash\nyarn add mst-decorators\n```\n\n```js\nimport {getEnv} from 'mobx-state-tree'\nimport {model, view, ref, bool, array, map, maybe, id, str, jsonDate} from 'mst-decorators'\n\n@model class BaseUser {\n  @id id\n  @str username\n  @str password\n}\n\n@model class User extends BaseUser {\n  @maybe(str) phone\n  @maybe(str) firstName\n  @maybe(str) lastName\n  \n  // view\n  get fullName() {\n    if (!this.firstName \u0026\u0026 !this.lastName) return\n    if (!this.lastName) return this.firstName\n    if (!this.firstName) return this.lastName\n    return `${this.firstName} ${this.lastName}`\n  }\n\n  // view with parameter\n  // we need @view to distinguish it from actions\n  @view prefixName(prefix) {\n    return `${prefix} ${this.fullName}`\n  }\n\n  // action\n  setPhone(phone) {\n    this.phone = phone\n  }\n}\n\n@model class Location {\n  @num long\n  @num lat\n}\n\nconst Sender = maybe(ref(User))\n\n@model class Message {\n  @id id\n  @Sender sender\n  @str text\n  @jsonDate date\n  @bool unread = true // default value\n  @model(class {\n    @maybe(Location) location\n    @array(str) files\n    @array(str) images\n  }) attachments\n\n  static preProcessSnapshot(snap) {\n    //...\n  }\n  static postProcessSnapshot(snap) {\n    //...\n  }\n  \n  // attach watchers to model instance\n  // they are not actions so you can't modify state tree here\n  onPatch(patch, reversePatch) {\n    //...\n  }\n  onSnapshot(snapshot) {\n    //...\n  }\n  onAction(call) {\n    //...\n  }\n}\n\n@model class Chat {\n  @id id\n  @array(Message) messages\n  @map(User) users\n\n  api = undefined // volatile; you should set any value (!)\n\n  // lifecycle hook action\n  afterCreate() {\n    this.api = getEnv(this).api\n  }\n\n  // flow\n  *fetchMessages() {\n    this.messages = yield this.api.fetchMessages(this.id)\n  }\n}\n\nconst chat = Chat.create({id: '1'}, {api})\nchat.fetchMessages()\n```\n\n## TS\n\nBecause class decorator\n[can't modify type declaration](https://github.com/microsoft/TypeScript/issues/4881)\nin TS you should use `model` function instead `@model` decorator.\n\n```js\nclass Message {\n  @str text\n}\n\nexport default model(Message)\n```\n\n```js\nimport Message from './message'\n\nclass Chat {\n  @array(Message) text\n}\n\nexport default model(Chat)\n```\n\n## API\n\n- `@model`\n- `@prop`, `@view`\n- `@string` (`@str`), `@number` (`@num`), `@integer` (`@int`),\n`@boolean` (`@bool`), `@date`, `@map`, `@array`, `@frozen`,\n`@identifier` (`@id`), `@identifierNumber` (`@idNum`), `@enumeration`,\n`@reference` (`@ref`), `@safeReference` (`@safeRef`), `@union`,\n`@optional` (`@opt`), `@maybe`, `@maybeNull`, `@refinement`, `@undef`, `@nul`,\n`@late`, `@snapshotProcessor` (`@snapProc`), `@compose`, `@custom`, `@jsonDate`\n- `@setter`\n- `getMstType`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarwayer%2Fmst-decorators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarwayer%2Fmst-decorators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarwayer%2Fmst-decorators/lists"}