ReactivityAdaptercreateMobXReactivity: a factory function returning the same adapter (useful for explicit instantiation)@stratasync/core (see Re-exported core APIs)npm install @stratasync/mobx mobx| Package | Version |
|---|---|
mobx | ^6.0.0 |
Pass the adapter when creating the sync client.
import { createSyncClient } from "@stratasync/client";
import { mobxReactivityAdapter } from "@stratasync/mobx";
const client = createSyncClient({
reactivity: mobxReactivityAdapter,
// ... storage, transport
});All decorated model properties become MobX observables:
autorun, reaction, when track reads and re-execute on changesobserver() re-render on observed changesrunInActionSingleton ReactivityAdapter implementation.
import { mobxReactivityAdapter } from "@stratasync/mobx";The adapter implements these methods:
| Method | MobX Implementation | Description |
|---|---|---|
createBox(initialValue) | observable + makeObservable | Creates a reactive boxed value. |
createMap(entries) | observable.map | Creates a reactive key-value map. |
createArray(items) | observable.array | Creates a reactive array. |
makeObservable(target) | observable(target) | Makes a plain object deeply observable. |
batch(fn) | runInAction(fn) | Batches multiple updates into a single reaction cycle. |
runInAction(fn) | runInAction(fn) | Runs a function inside a MobX action. |
reaction(expr, effect, options) | reaction(expr, effect, options) | Creates a reaction that tracks an expression and runs an effect. |
computed(getter) | computed(getter) | Creates a MobX computed value. |
Factory that returns the mobxReactivityAdapter singleton. Both approaches are equivalent:
import { createMobXReactivity, mobxReactivityAdapter } from "@stratasync/mobx";
// These are the same object
const adapter1 = mobxReactivityAdapter;
const adapter2 = createMobXReactivity();
// adapter1 === adapter2Signature: createMobXReactivity(): ReactivityAdapter
From @stratasync/core:
interface ReactivityAdapter {
createBox<T>(initialValue: T, options?: ObservableOptions): ObservableBox<T>;
createMap<K, V>(
entries?: Iterable<[K, V]>,
options?: ObservableOptions
): ObservableMap<K, V>;
createArray<T>(items?: T[], options?: ObservableOptions): ObservableArray<T>;
makeObservable<T extends object>(target: T, options?: ObservableOptions): T;
batch(fn: () => void): void;
runInAction<T>(fn: () => T): T;
reaction<T>(
expression: () => T,
effect: (value: T) => void,
options?: ReactionOptions
): DisposeFn;
computed<T>(getter: () => T, options?: ObservableOptions): { get(): T };
}Import decorators and base classes directly from @stratasync/mobx:
import {
BackReference,
Model,
ClientModel,
OneToMany,
Property,
Reference,
ReferenceArray,
mobxReactivityAdapter,
} from "@stratasync/mobx";Define models and configure reactivity from a single import:
import {
Model,
ClientModel,
Property,
createDirtyTracker,
computedReference,
mobxReactivityAdapter,
} from "@stratasync/mobx";
@ClientModel("Task")
class Task extends Model {
@Property() title!: string;
@Property() description!: string;
@Property() priority!: number;
}Additional root exports:
import {
cloneModelData,
computedCollection,
computedReference,
createDirtyTracker,
diffModels,
getDirtyTracker,
initMobXObservability,
isModelDirty,
toPlainObject,
} from "@stratasync/mobx";All model property storage uses MobX observables, so any autorun, reaction, computed, or observer that reads a property gets notified on change. Sync updates are wrapped in runInAction for batching.
Bridges @stratasync/core with MobX.
sync-core (defines ReactivityAdapter interface)
^-- sync-mobx (implements ReactivityAdapter with MobX)
^-- sync-client (uses adapter for observable state)
The sync system is reactivity-agnostic: the same interface works with other state libraries.