-
-
+[Mobx](https://mobxjs.github.io/mobx) bindings specifically for [Preact](https://preactjs.com/).
+*This package has recently bumped to version 1.x and is now being supported.*
-This is a fork of [mobx-react](https://github.com/mobxjs/mobx-react) for [Preact](https://preactjs.com/)
+## Installation
+
+`npm install mobx-preact --save`
+
+```javascript
+import {observer} from 'mobx-preact';
+```
-This package provides the bindings for [MobX](https://mobxjs.github.io/mobx).
+This package provides the bindings for MobX and Preact. See the [official documentation](http://mobxjs.github.io/mobx/intro/overview.html) for how to get started. Code and documentation originated from [mobx-react](https://github.com/mobxjs/mobx-react). The feature set of `mobx-preact` is a slightly slimmed down adaptation of `mobx-react`. The features available are reflected by this document. The features omitted are:
-**_It's not really maintained, if someone wants to take over, ping me on github!_**
+* [Global error handler with onError](https://github.com/mobxjs/mobx-react#global-error-handler-with-onerror)
+* [Stuff to do with PropTypes](https://github.com/mobxjs/mobx-react#proptypes)
+* [Dev Tools](https://github.com/mobxjs/mobx-react#internal-devtools-api)
+* Typescript bindings
-Consider using [mobx-observer](https://www.npmjs.com/package/mobx-observer) or another library instead.
+If you would like to see any of these features included please create an issue or PR.
-Exports the `connect` (or alias `observer`) decorator and some development utilities.
+## API documentation
-## Installation
+### observer(componentClass)
+Function (and decorator) that converts a Preact component class or stand-alone render function into a reactive component, which tracks which observables are used by `render` and automatically re-renders the component when one of these values changes.
+See the [MobX](https://mobxjs.github.io/mobx/refguide/observer-component.html) documentation for more details.
+
+```javascript
+import {Component} from 'preact';
+import {observer} from "mobx-preact";
+
+const TodoView = observer(class TodoView extends Component {
+ render() {
+ return This is manual sanity check for testing in the browser.
+ + + + \ No newline at end of file diff --git a/sample/rollup.config.js b/sample/rollup.config.js new file mode 100644 index 0000000..da6cec5 --- /dev/null +++ b/sample/rollup.config.js @@ -0,0 +1,20 @@ +// rollup.config.js +import resolve from 'rollup-plugin-node-resolve'; +import commonjs from 'rollup-plugin-commonjs'; + +// I couldn't get Babel + decorators working with rollup, so babel is handled externally. +// See `npm run build:sample` script + +export default { + input: 'sample/dist/sample.es5.js', + output: { + file: 'sample/dist/sample.bundle.js', + format: 'iife', + }, + name: 'mobxPreactSample', + plugins: [ + resolve(), + commonjs(), + + ], +}; \ No newline at end of file diff --git a/sample/sample.js b/sample/sample.js new file mode 100644 index 0000000..f7ff9da --- /dev/null +++ b/sample/sample.js @@ -0,0 +1,71 @@ +import { h, Component, render } from 'preact'; +import { observable, action } from 'mobx'; +import { observer, Provider, inject, connect } from '../../lib/index'; + +const store = { + @observable count: 0, + @action increment: function () { + this.count++; + }, +}; + +class App extends Component { + render() { + return ( +Comp count is { store.count }
; + } +} + +@connect(['store']) +class CounterConnect extends Component { + render({ store }) { + returnComp count is { store.count }
; + } +} + +const CounterStateless = inject('store')(observer(function({ store}) { + returnStateless count is { store.count }
; +})); + +const NotObserver = inject('store')(function NotObserver({ store }) { + returnI will not change: { store.count } :(
; +}); + +const IncrementButton = inject('store')(function({ store }) { + return ; +}); + +render({ data.x }
; + }, + }) + ); + render(+ {this.counter} + +
+ ); + } + } + + render(