Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/farwayer/mst-decorators
Class based MobX-State-Tree definitions
https://github.com/farwayer/mst-decorators
class decorators mobx mobx-state-tree model
Last synced: 2 months ago
JSON representation
Class based MobX-State-Tree definitions
- Host: GitHub
- URL: https://github.com/farwayer/mst-decorators
- Owner: farwayer
- Created: 2019-08-18T22:29:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:05:33.000Z (almost 2 years ago)
- Last Synced: 2024-04-20T12:17:13.116Z (8 months ago)
- Topics: class, decorators, mobx, mobx-state-tree, model
- Language: JavaScript
- Size: 1.39 MB
- Stars: 26
- Watchers: 4
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
## mst-decorators
_Class based MobX-State-Tree definitions._
[](https://www.npmjs.com/package/mst-decorators)
[](https://travis-ci.com/farwayer/mst-decorators)
[](https://coveralls.io/github/farwayer/mst-decorators)
Some features:
- simple syntax without need to use extra helpers etc, just type decorators
- es6 extending
- autodetect actions, flows, getter views, volatile
- actions and flows auto-bind to model so you can pass it to callbacks without
worrying about `this` context
- result of decorator function is decorator. Feel power in constructing types!
- model class is decorator so it can be used in another model (`@Location`)
- late definition for recursive models (`@late(() => ref(Category)) topCategory`)
- `preProcessSnapshot`/`postProcessSnapshot` as static class methods
- can specify `onPatch`/`onSnapshot`/`onAction` just in class
- lifecycle hook actions, composing and `getEnv()` works as well
- several extra decorators: `@jsonDate`, `@setter`
## How to use
```bash
yarn add mst-decorators
```
```js
import {getEnv} from 'mobx-state-tree'
import {model, view, ref, bool, array, map, maybe, id, str, jsonDate} from 'mst-decorators'
@model class BaseUser {
@id id
@str username
@str password
}
@model class User extends BaseUser {
@maybe(str) phone
@maybe(str) firstName
@maybe(str) lastName
// view
get fullName() {
if (!this.firstName && !this.lastName) return
if (!this.lastName) return this.firstName
if (!this.firstName) return this.lastName
return `${this.firstName} ${this.lastName}`
}
// view with parameter
// we need @view to distinguish it from actions
@view prefixName(prefix) {
return `${prefix} ${this.fullName}`
}
// action
setPhone(phone) {
this.phone = phone
}
}
@model class Location {
@num long
@num lat
}
const Sender = maybe(ref(User))
@model class Message {
@id id
@Sender sender
@str text
@jsonDate date
@bool unread = true // default value
@model(class {
@maybe(Location) location
@array(str) files
@array(str) images
}) attachments
static preProcessSnapshot(snap) {
//...
}
static postProcessSnapshot(snap) {
//...
}
// attach watchers to model instance
// they are not actions so you can't modify state tree here
onPatch(patch, reversePatch) {
//...
}
onSnapshot(snapshot) {
//...
}
onAction(call) {
//...
}
}
@model class Chat {
@id id
@array(Message) messages
@map(User) users
api = undefined // volatile; you should set any value (!)
// lifecycle hook action
afterCreate() {
this.api = getEnv(this).api
}
// flow
*fetchMessages() {
this.messages = yield this.api.fetchMessages(this.id)
}
}
const chat = Chat.create({id: '1'}, {api})
chat.fetchMessages()
```
## TS
Because class decorator
[can't modify type declaration](https://github.com/microsoft/TypeScript/issues/4881)
in TS you should use `model` function instead `@model` decorator.
```js
class Message {
@str text
}
export default model(Message)
```
```js
import Message from './message'
class Chat {
@array(Message) text
}
export default model(Chat)
```
## API
- `@model`
- `@prop`, `@view`
- `@string` (`@str`), `@number` (`@num`), `@integer` (`@int`),
`@boolean` (`@bool`), `@date`, `@map`, `@array`, `@frozen`,
`@identifier` (`@id`), `@identifierNumber` (`@idNum`), `@enumeration`,
`@reference` (`@ref`), `@safeReference` (`@safeRef`), `@union`,
`@optional` (`@opt`), `@maybe`, `@maybeNull`, `@refinement`, `@undef`, `@nul`,
`@late`, `@snapshotProcessor` (`@snapProc`), `@compose`, `@custom`, `@jsonDate`
- `@setter`
- `getMstType`