mobx-mantle 0.3.6 → 0.3.7

package/README.md

@@ -1,6 +1,6 @@
 # MobX Mantle
 
-A lightweight library for building React components with a class-based API and MobX reactivity built in. Get full access to the React ecosystem, with better access to vanilla JS libraries, and simpler overall DX for both.
+A lightweight library for building React components with a familiar class-based API and MobX reactivity built in. Get full access to the React ecosystem, with better access to vanilla JS libraries, and simpler overall DX for both.
 
 ## Why
 
@@ -79,8 +79,8 @@ toggle(id: number) {    // automatically bound to this
 
 **React to changes explicitly:**
 ```tsx
-onMount() {
-  return reaction(
+onCreate() {
+  this.watch(
     () => this.props.filter,
     (filter) => this.applyFilter(filter)
   );
@@ -159,6 +159,8 @@ onCreate() {
 }
 ```
 
+`this.watch` wraps MobX's `reaction` with automatic lifecycle disposal. For advanced MobX patterns (`autorun`, `when`, custom schedulers), use `reaction` directly and return a dispose function from `onMount`.
+
 ### Props Reactivity
 
 `this.props` is reactive: your component re-renders when accessed props change.
@@ -370,42 +372,6 @@ function Parent() {
 }
 ```
 
-## Reactions
-
-```tsx
-class SearchView extends View<Props> {
-  query = '';
-  results: string[] = [];
-
-  onMount() {
-    const dispose = reaction(
-      () => this.query,
-      async (query) => {
-        if (query.length > 2) {
-          this.results = await searchApi(query);
-        }
-      },
-      { delay: 300 }
-    );
-
-    return dispose;
-  }
-
-  setQuery(e: React.ChangeEvent<HTMLInputElement>) {
-    this.query = e.target.value;
-  }
-
-  render() {
-    return (
-      <div>
-        <input value={this.query} onChange={this.setQuery} />
-        <ul>{this.results.map(r => <li key={r}>{r}</li>)}</ul>
-      </div>
-    );
-  }
-}
-```
-
 ## React Hooks
 
 Hooks work inside `render()`:
@@ -439,20 +405,19 @@ class ChartView extends View<{ data: number[] }> {
   containerRef = this.ref<HTMLDivElement>();
   chart: Chart | null = null;
 
+  onCreate() {
+    this.watch(
+      () => this.props.data,
+      (data) => this.chart?.update(data)
+    );
+  }
+
   onMount() {
     this.chart = new Chart(this.containerRef.current!, {
       data: this.props.data,
     });
 
-    const dispose = reaction(
-      () => this.props.data,
-      (data) => this.chart?.update(data)
-    );
-
-    return () => {
-      dispose();
-      this.chart?.destroy();
-    };
+    return () => this.chart?.destroy();
   }
 
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-mantle",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "A lightweight library for building React components with a familiar class-based API and MobX reactivity built in.",
   "author": "Craig Albert <me@craigalbert.com>",
   "repository": {