mobx-state-tree
Advanced tools
Comparing version 0.7.3 to 0.8.2
@@ -0,5 +1,15 @@ | ||
# 0.8.1 | ||
* Fixed issue in release script, rendering 0.8.0 useless | ||
# 0.8.0 | ||
* **BREAKING** Dropped `types.extend` in favor of `types.compose`. See [#192](https://github.com/mobxjs/mobx-state-tree/issues/192) | ||
* Introduced the lifecycle hooks `preProcessSnapshot` and `postProcessSnapshot`. See [#203](https://github.com/mobxjs/mobx-state-tree/pull/203) / [#100](https://github.com/mobxjs/mobx-state-tree/issues/100) | ||
* Use rollup as bundler [#196](https://github.com/mobxjs/mobx-state-tree/pull/196) | ||
# 0.7.3 | ||
* Introduced the concept of volatile / local state in models. See #168, or [docs](https://github.com/mobxjs/mobx-state-tree/tree/master#volatile-state) | ||
* Fixed issue with types.map() with types.identifier(types.number) reported by @boatkorachal | ||
* Introduced the concept of volatile / local state in models. See [#168](https://github.com/mobxjs/mobx-state-tree/issues/168), or [docs](https://github.com/mobxjs/mobx-state-tree/tree/master#volatile-state) | ||
* Fixed issue with types.map() with types.identifier(types.number) [#191](https://github.com/mobxjs/mobx-state-tree/issues/191) reported by @boatkorachal | ||
* Fixed issue with reconciler that affected types.map when node already existed at that key reported by @boatkorachal [#191](https://github.com/mobxjs/mobx-state-tree/issues/191) | ||
@@ -35,3 +45,3 @@ | ||
* Fixed issue with map of primitive types and applySnapshot @pioh [#155](https://github.com/mobxjs/mobx-state-tree/issues/155) | ||
* Better type declarations for union, up to 10 supported types | ||
* Better type declarations for union, up to 10 supported types | ||
@@ -38,0 +48,0 @@ # 0.6.2 |
{ | ||
"name": "mobx-state-tree", | ||
"version": "0.7.3", | ||
"version": "0.8.2", | ||
"description": "Opinionated, transactional, MobX powered state container", | ||
"main": "lib/index.js", | ||
"typings": "lib/index.d.ts", | ||
"main": "dist/mobx-state-tree.js", | ||
"umd:main": "dist/mobx-state-tree.umd.js", | ||
"module": "dist/mobx-state-tree.module.js", | ||
"typings": "dist/index.d.ts", | ||
"scripts": { | ||
"build": "npm run quick-build && npm run webpack", | ||
"build": "npm run quick-build && cpr lib dist --delete-first --filter=\\\\.js && rollup -c", | ||
"quick-build": "tsc", | ||
"webpack": "webpack -p", | ||
"rollup": "rollup -c", | ||
"build-tests": "tsc -p test/", | ||
"test": "npm run build-tests && ava", | ||
"test": "npm run build-tests && ava && npm run test-cyclic", | ||
"test-cyclic": "npm run build && node -e \"require('.')\"", | ||
"watch": "tsc -p test && concurrently --kill-others --names 'build-tests,test-runner' 'tsc --watch -p test' --raw 'ava --watch'", | ||
@@ -31,4 +34,3 @@ "_prepublish": "npm run build && npm run build-docs", | ||
"files": [ | ||
"lib/", | ||
"mobx-state-tree.umd.js" | ||
"dist/" | ||
], | ||
@@ -39,2 +41,3 @@ "devDependencies": { | ||
"coveralls": "^2.11.4", | ||
"cpr": "^2.1.0", | ||
"documentation": "^4.0.0-beta9", | ||
@@ -46,9 +49,12 @@ "husky": "^0.13.4", | ||
"prettier": "^1.4.4", | ||
"rollup": "^0.43.0", | ||
"rollup-plugin-commonjs": "^8.0.2", | ||
"rollup-plugin-filesize": "^1.3.2", | ||
"rollup-plugin-node-resolve": "^3.0.0", | ||
"rollup-plugin-uglify": "^2.0.1", | ||
"tape": "^4.6.0", | ||
"tslib": "^1.7.1", | ||
"tslint": "^3.15.1", | ||
"typescript": "2.3.2", | ||
"webpack": "^1.13.1", | ||
"webpack-fail-plugin": "^1.0.6" | ||
"typescript": "2.3.2" | ||
}, | ||
"dependencies": {}, | ||
"peerDependencies": { | ||
@@ -55,0 +61,0 @@ "mobx": "^3.1.15" |
@@ -18,2 +18,3 @@ <p align="center"> | ||
* [MST overview for the impatient](#quick-overview-for-the-impatient) | ||
* [Getting Started](docs/getting-started.md) | ||
* [Concepts](#concepts) | ||
@@ -30,2 +31,3 @@ * [Trees, types and state](#trees-types-and-state) | ||
* [Volatile state](#volatile-state) | ||
* [Dependency injection](#dependency-injection) | ||
* [Types overview](#types-overview) | ||
@@ -43,2 +45,3 @@ * [Api overview](#api-overview) | ||
* CDN: https://unpkg.com/mobx-state-tree/mobx-state-tree.umd.js (exposed as `window.mobxStateTree`) | ||
* Playground: [https://mattiamanzati.github.io/mobx-state-tree-playground/](https://mattiamanzati.github.io/mobx-state-tree-playground/) (with React UI, snapshots, patches and actions display) | ||
* JSBin [playground](http://jsbin.com/petoxeheta/edit?html,js,console) (without UI) | ||
@@ -508,2 +511,45 @@ | ||
## Dependency injection | ||
When creating a new state tree it is possible to pass in environment specific data by passing an object as second argument to a `.create` call. | ||
This object should be (shallowly) immutable and can be accessed by any model in the tree by calling `getEnv(this)`. | ||
This is useful to inject environment or test specific utilities like a transport layer, loggers etc. This is a very useful to mock behavior in unit tests or provide instantiated utilties to models without requiring singleton modules. | ||
See also the (bookshop example)[https://github.com/mobxjs/mobx-state-tree/blob/a4f25de0c88acf0e239acb85e690e91147a8f0f0/examples/bookshop/src/stores/ShopStore.test.js#L9] for inspiration. | ||
```javascript | ||
import { types, getEnv } from "mobx-state-tree" | ||
const Todo = types.model({ | ||
title: "" | ||
}, { | ||
setTitle(newTitle) { | ||
// grab injected logger and log | ||
getEnv(this).logger.log("Changed title to: " + newTitle) | ||
this.title = newTitle | ||
} | ||
}) | ||
const Store = types.model({ | ||
todos: types.array(Todo) | ||
}) | ||
// setup logger and inject it when the store is created | ||
const logger = { | ||
log(msg) { | ||
console.log(msg) | ||
} | ||
} | ||
const store = Store.create({ | ||
todos: [{ title: "Grab tea" }] | ||
}, { | ||
logger: logger // inject logger to the tree | ||
}) | ||
store.todos[0].setTitle("Grab coffee") | ||
// prints: Changed title to: Grab coffee | ||
``` | ||
# Types overview | ||
@@ -535,2 +581,4 @@ | ||
* `types.frozen` Accepts any kind of serializable value (both primitive and complex), but assumes that the value itself is immutable. | ||
* `types.compose(name?, type1...typeX)`, creates a new model type by taking a bunch of existing types and combining it into a new one | ||
* `types.compose(name?, baseType, props, volatileState?, actions?)`, creates a new model type by taking an existing type and introducing additional properties, state and actions | ||
@@ -547,4 +595,6 @@ ## Property types | ||
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| `preProcessSnapshot` | Before creating an instance or before applying a snapshot to an existing instance, this hook is called to give the option to transform the snapshot before it is applied. The hook should be _pure_ function that returns a new snapshot. This can be useful to do some data conversion, enrichtments, property renames etc. etc. This hook is not called for individual property updates or when applying patches. | | ||
| `afterCreate` | Immediately after an instance is created and initial values are applied. Children will fire this event before parents | | ||
| `afterAttach` | As soon as the _direct_ parent is assigned (this node is attached to an other node) | | ||
| `postProcessSnapshot` | This hook is called every time a new snapshot is being generated. Typically it is the inverse function of `preProcessSnapshot`. This function should be a pure function that returns a new snapshot. | ||
| `beforeDetach` | As soon as the node is removed from the _direct_ parent, but only if the node is _not_ destroyed. In other words, when `detach(node)` is used | | ||
@@ -631,27 +681,31 @@ | `beforeDestroy` | Before the node is destroyed as a result of calling `destroy` or removing or replacing the node from the tree. Child destructors will fire before parents | | ||
There is no notion of inheritance in MST. The recommended approach is to keep an references to the original configuration of a model to compose it into a new one. (`types.extend` achieves this as well, but it might change or even be removed). So a classical animal inheritance could be expressed using composition as follows: | ||
There is no notion of inheritance in MST. The recommended approach is to keep an references to the original configuration of a model to compose it into a new one, for example by using `types.compose`. So a classical animal inheritance could be expressed using composition as follows: | ||
```javascript | ||
const animalProperties: { | ||
age: types.number, | ||
sound: types.string | ||
} | ||
const animalActions = { | ||
makeSound() { | ||
console.log(this.sound) | ||
const Square = types.model( | ||
"Square", | ||
{ | ||
width: types.number, | ||
surface() { | ||
return this.width * this.width | ||
} | ||
} | ||
} | ||
const Dog = types.model( | ||
{ ...animalProperties, sound: "woof" }, | ||
animalActions | ||
) | ||
const Cat = types.model( | ||
{ ...animalProperties, sound: "meaow" }, | ||
animalActions | ||
const Box = types.compose( | ||
"Box", | ||
Square, // Base type, copy properties, state and actions from this type | ||
{ | ||
// new properties | ||
volume() { | ||
// super call | ||
return Square.actions.surface.call(this) * this.width | ||
} | ||
}, | ||
{ }, // new volatile state | ||
{ }, // new actions | ||
) | ||
const Animal = types.union(Dog, Cat) | ||
// no inheritance, but, union types and code reuse | ||
const Shape = types.union(Box, Square) | ||
``` | ||
@@ -673,6 +727,2 @@ | ||
### Storing non-serializable data with models | ||
TODO `types.localState` | ||
# FAQ | ||
@@ -679,0 +729,0 @@ |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
6531
781
371776
19
39
1
7