Socket
Socket
Sign inDemoInstall

mobx-react

Package Overview
Dependencies
Maintainers
3
Versions
144
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mobx-react - npm Package Compare versions

Comparing version 5.4.3 to 6.0.0-rc.1

dist/mobx-react.d.ts
dist/mobx-react.js
dist/mobx-react.js.map
dist/mobx-react.mjs
dist/mobx-react.mjs.map
dist/mobx-react.module.js
dist/mobx-react.module.js.map
dist/mobx-react.umd.js
dist/mobx-react.umd.js.map

25

CHANGELOG.md
# MobX-React Changelog
### 6.0.0
**Breaking changes**
* The minimal supported version of React is 16.8.0
* Killed the possibility to directly pass store names to `observer`. Always use `inject` instead. (This was deprecated for a long time already). `observer(["a", "b"], component)` should now be written as `inject("a", "b")(component)`.
* `observer` components no longer automatically recover from errors (to prevent potential memory leaks). Instead, this is the responsibility of error boundaries.
* `inject` now supports ref forwarding. As such, the `.wrappedInstance` property has been removed since refs can be used instead. (Fixes [#616](https://github.com/mobxjs/mobx-react/issues/616) (See also [#619](https://github.com/mobxjs/mobx-react/pull/619) by [42shadow42](https://github.com/42shadow42))
* Changing the set of stores in `Provider` is no longer supported and while throw a hard error (this was a warning before), as the model of `Provider` / `inject` has always been to inject final values into the tree. (That is, fixed references, injected objects themselves can be stateful without problem). If you want to dynamically swap what is provided into the tree, use `React.createContext` instead of `Provider` / `inject`. The suppressChangedStoreWarning` flag for `Provider` has been dropped.
* The third argument of custom `storesToProps` functions passed to `inject` is no longer available.
* `<Observer>` no longer supports the deprecated `inject` property.
* Defining `shouldComponentUpdate` on `observer` based components is no longer supported
* `propTypes` is no longer exposed, use `PropTypes` instead
* `disposeOnUnmount` now only supports direct subclasses of `React.Component` and `React.PureComponent`. This prevents several unreliable edge cases that silently leaked memory before. Either only extend React.(Pure)Component when using `disposeOnUnmount`, or manually clean up stuff in `componentWillUnmount`.
* The `onError` global error handler has been removed. Use error boundaries instead.
* Improved dev tool names for `inject` wrapped components, see [#472](https://github.com/mobxjs/mobx-react/pull/472) by [SimeonC](https://github.com/SimeonC). Fixes [#466](https://github.com/mobxjs/mobx-react/issues/466)
**Improvements**
* Using `PureComponent` is now _recommended_.
* For `observer` components, there will now be an additional `Observer` component in the tree.
* `componentWillReact` has been dropped
**Migration guide**
### 5.4.3

@@ -4,0 +29,0 @@

54

package.json
{
"name": "mobx-react",
"version": "5.4.3",
"version": "6.0.0-rc.1",
"description": "React bindings for MobX. Create fully reactive components.",
"main": "index.js",
"jsnext:main": "index.module.js",
"module": "index.module.js",
"react-native": "native.js",
"typings": "index",
"source": "src/index.js",
"main": "dist/mobx-react.js",
"jsnext:main": "dist/mobx-react.module.js",
"umd:main": "dist/mobx-react.umd.js",
"unpkg": "dist/mobx-react.umd.js",
"module": "dist/mobx-react.module.js",
"react-native": "dist/mobx-react.module.js",
"types": "dist/mobx-react.d.ts",
"repository": {

@@ -19,3 +22,4 @@ "type": "git",

"test:travis": "npm run build && jest && npm run test:ts",
"build": "node build-rollup.js && shx cp src/index.d.ts index.d.ts && shx cp src/index.d.ts native.d.ts && shx cp src/index.d.ts custom.d.ts",
"build": "yarn bundle && shx cp src/index.d.ts dist/mobx-react.d.ts",
"bundle": "microbundle --external mobx,react,react-dom,react-native --globals react-dom=ReactDOM,react-native=ReactNative,react=React --name mobxReact",
"watch": "jest --watch"

@@ -31,3 +35,3 @@ },

"mobx": "^4.0.0 || ^5.0.0",
"react": "^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0"
"react": "^16.8.0"
},

@@ -45,30 +49,18 @@ "devDependencies": {

"@types/react-dom": "^16.0.1",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-jest": "^24.1.0",
"create-react-class": "^15.6.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.0.0",
"husky": "^1.0.0",
"jest": "^23.6.0",
"jest-environment-jsdom": "^23.4.0",
"jest": "^24.0.0",
"jest-environment-jsdom": "^24.0.0",
"lint-staged": "^7.0.5",
"lodash": "^4.17.4",
"microbundle": "^0.9.0",
"mobx": "^5.0.0",
"opn-cli": "^3.1.0",
"prettier": "^1.7.2",
"prop-types": "^15.6.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-test-renderer": "^16.6.3",
"regenerator-runtime": "^0.12.1",
"request": "^2.83.0",
"rollup": "^0.66.2",
"rollup-plugin-alias": "^1.3.0",
"rollup-plugin-babel": "^4.0.3",
"rollup-plugin-commonjs": "^9.0.0",
"rollup-plugin-filesize": "^5.0.0",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-uglify": "^6.0.0",
"shelljs": "^0.8.2",
"shelljs": "^0.8.3",
"shx": "^0.3.2",

@@ -78,5 +70,7 @@ "typescript": "^2.6.0"

"dependencies": {
"hoist-non-react-statics": "^3.0.0",
"react-lifecycles-compat": "^3.0.2"
"mobx-react-lite": "1.1.0"
},
"files": [
"dist"
],
"keywords": [

@@ -104,2 +98,2 @@ "mobx",

}
}
}

133

README.md

@@ -12,2 +12,19 @@ # mobx-react

## Choosing your version
There are currently two actively maintained versions of mobx-react:
| NPM Version | Supported React versions | Supports hook based components |
| --- | --- | -- |
| v6 | 16.8.0 and higher | Yes |
| v5 | 0.13 and higher | No, but it is possible to use `<Observer>` sections inside hook based components |
The V5 documentation can be found in the [README_v5](README_v5.md).
Version 6 is a repackage of the [mobx-react-lite](https://github.com/mobxjs/mobx-react-lite) package + following features from the `mobx-react@5` package added:
* Support for class based components for `observer` and `@observer`
* `Provider / inject` to pass stores around (but consider to use `React.createContext` instead)
* `PropTypes` to describe observable based property checkers (but consider to use TypeScript instead)
* The `disposeOnUnmount` utility / decorator to easily clean up resources such as reactions created in your class based components.
## Installation

@@ -30,13 +47,6 @@

## Boilerplate projects that use mobx-react
## API documentation
* Minimal MobX, React, ES6, JSX, Hot reloading: [MobX-React-Boilerplate](https://github.com/mobxjs/mobx-react-boilerplate)
* TodoMVC MobX, React, ES6, JSX, Hot reloading: [MobX-React-TodoMVC](https://github.com/mobxjs/mobx-react-todomvc)
* Minimal MobX, React, Typescript, TSX: [MobX-React-Typescript-Boilerplate](https://github.com/mobxjs/mobx-react-typescript-boilerplate)
* Minimal MobX, React, ES6(babel), JSPM with hot reloading modules:
[jspm-react](https://github.com/capaj/jspm-react)
* React Native Counter: [Mobx-React-Native-Counter](https://github.com/bartonhammond/mobx-react-native-counter)
Please check [mobx.js.org](https://mobx.js.org) for the general documentation. The documentation below highlights some specifics.
## API documentation
### observer(componentClass)

@@ -83,3 +93,3 @@

// ---- or just use a stateless component function: ----
// ---- or just use function components: ----

@@ -136,16 +146,3 @@ const TodoView = observer(({ todo }) => <div>{todo.title}</div>)

### Global error handler with `onError`
If a component throws an error, this logs to the console but does not 'crash' the app, so it might go unnoticed.
For this reason it is possible to attach a global error handler using `onError` to intercept any error thrown in the render of an `observer` component.
This can be used to hook up any client side error collection system.
```javascript
import { onError } from "mobx-react"
onError(error => {
console.log(error)
})
```
### Server Side Rendering with `useStaticRendering`

@@ -179,33 +176,2 @@

### About `shouldComponentUpdate`
When using `@observer` on a component, don't implement `shouldComponentUpdate`, as it will override the default implementation that MobX provides.
When using mobx-react, you should in general not need to write an `sCU` (in our entire Mendix code base we have none). If you really need to implement `sCU`, split the component into two, a reactive and non-reactive (with the `sCU`) part, or use `<Observer>` sections instead of `observer` on the entire component.
Similarly, `PureComponent` should not be combined with `observer`. As pure components are supposed to be dumb and never update themselves automatically, but only by getting passed in new props from the parent. `observer` is the opposite, it makes components smart and dependency aware, allowing them to update without the parents even needing to be aware of the change.
### `componentWillReact` (lifecycle hook)
React components usually render on a fresh stack, so that makes it often hard to figure out what _caused_ a component to re-render.
When using `mobx-react` you can define a new life cycle hook, `componentWillReact` (pun intended) that will be triggered when a component is scheduled to be re-rendered because
data it observes has changed. This makes it easy to trace renders back to the action that caused the rendering.
```javascript
import { observer } from "mobx-react"
@observer
class TodoView extends React.Component {
componentWillReact() {
console.log("I will re-render, since the todo has changed!")
}
render() {
return <div>{this.props.todo.title}</div>
}
}
```
* `componentWillReact` doesn't take arguments
* `componentWillReact` won't fire before the initial render (use use `componentDidMount` or `constructor` instead)
### `PropTypes`

@@ -268,7 +234,5 @@

* If a component asks for a store and receives a store via a property with the same name, the property takes precedence. Use this to your advantage when testing!
* If updates to an observable store are not triggering `render()`, make sure you are using Class methods for React lifecycle hooks such as `componentWillMount() {}`, using `componentWillMount = () => {}` will create a property on the instance and cause conflicts with mobx-react.
* Values provided through `Provider` should be final, to avoid issues like mentioned in [React #2517](https://github.com/facebook/react/issues/2517) and [React #3973](https://github.com/facebook/react/pull/3973), where optimizations might stop the propagation of new context. Instead, make sure that if you put things in `context` that might change over time, that they are `@observable` or provide some other means to listen to changes, like callbacks. However, if your stores will change over time, like an observable value of another store, MobX will warn you. To suppress that warning explicitly, you can use `suppressChangedStoreWarning={true}` as a prop at your own risk.
* When using both `@inject` and `@observer`, make sure to apply them in the correct order: `observer` should be the inner decorator, `inject` the outer. There might be additional decorators in between.
* The original component wrapped by `inject` is available as the `wrappedComponent` property of the created higher order component.
* For mounted component instances, the wrapped component instance is available through the `wrappedInstance` property (except for stateless components).

@@ -401,6 +365,2 @@ #### Inject as function

##### With Flow
Currently, there is a community-discussion around the best way to use `inject` with Flow. Join the discussion at [this gist](https://gist.github.com/vonovak/29c972c6aa9efbb7d63a6853d021fba9).
#### Testing store injection

@@ -451,3 +411,3 @@

// or function array
disposeOnUmount(this, [
disposeOnUnmount(this, [
reaction(...),

@@ -460,2 +420,13 @@ reaction(...)

## DevTools
`mobx-react@6` and higher are no longer compatible with the mobx-react-devtools.
That is, the MobX react devtools will no longer show render timings or dependency trees of the component.
The reason is that the standard React devtools are no also capable of highlighting re-rendering components.
And the dependency tree of a component can now be inspected by the standard devtools as well, as shown in the image below:
![hooks.png](hooks.png)
The event spy will still work as is.
## FAQ

@@ -487,41 +458,1 @@

This violates the React Lifecycle, `componentWillMount` should be used instead if state needs to be modified before mounting.
## Internal DevTools Api
### trackComponents()
Enables the tracking from components. Each rendered reactive component will be added to the `componentByNodeRegistery` and its renderings will be reported through the `renderReporter` event emitter.
### renderReporter
Event emitter that reports render timings and component destructions. Only available after invoking `trackComponents()`.
New listeners can be added through `renderReporter.on(function(data) { /* */ })`.
Data will have one of the following formats:
```javascript
{
event: 'render',
renderTime: /* time spend in the .render function of a component, in ms. */,
totalTime: /* time between starting a .render and flushing the changes to the DOM, in ms. */,
component: /* component instance */,
node: /* DOM node */
}
```
```javascript
{
event: 'destroy',
component: /* component instance */,
node: /* DOM Node */
}
```
### componentByNodeRegistery
WeakMap. Its `get` function returns the associated reactive component of the given node. The node needs to be precisely the root node of the component.
This map is only available after invoking `trackComponents`.
### Debugging reactions with trace
Using Mobx.trace() inside a React render function will print out the observable that triggered the change. See [the mobx trace docs](https://mobx.js.org/best/trace.html) for more information.
__mocks__/react-native.js
.browserlistrc
.editorconfig
.prettierignore
.prettierrc
.travis.yml
custom.d.ts
custom.js
custom.module.js
empty.js
index.d.ts
index.js
index.min.js
index.module.js
native.d.ts
native.js
yarn.lock
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc