mosx

Version:

Multiview observable state management engine

80 lines (77 loc) • 16.9 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Tracker API | Mosx Documentation</title> <meta name="generator" content="VuePress 1.5.2"> <meta name="description" content="State management framework"> <link rel="preload" href="/mosx/assets/css/0.styles.d0f6037d.css" as="style"><link rel="preload" href="/mosx/assets/js/app.e7b6d6a7.js" as="script"><link rel="preload" href="/mosx/assets/js/2.8b048e3e.js" as="script"><link rel="preload" href="/mosx/assets/js/15.d234781f.js" as="script"><link rel="prefetch" href="/mosx/assets/js/10.30f5ca67.js"><link rel="prefetch" href="/mosx/assets/js/11.8bd80320.js"><link rel="prefetch" href="/mosx/assets/js/12.81130ef0.js"><link rel="prefetch" href="/mosx/assets/js/13.cad4915b.js"><link rel="prefetch" href="/mosx/assets/js/14.50dee50d.js"><link rel="prefetch" href="/mosx/assets/js/3.a2975a35.js"><link rel="prefetch" href="/mosx/assets/js/4.f6e08b70.js"><link rel="prefetch" href="/mosx/assets/js/5.7b46edaa.js"><link rel="prefetch" href="/mosx/assets/js/6.689986cb.js"><link rel="prefetch" href="/mosx/assets/js/7.81819134.js"><link rel="prefetch" href="/mosx/assets/js/8.8ec53007.js"><link rel="prefetch" href="/mosx/assets/js/9.7ddab2d4.js"> <link rel="stylesheet" href="/mosx/assets/css/0.styles.d0f6037d.css"> </head> <body> <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/mosx/" class="home-link router-link-active"> Mosx Documentation</a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> </div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://github.com/udamir/mosx" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> </nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://github.com/udamir/mosx" target="_blank" rel="noopener noreferrer" class="nav-link external"> Github <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> </nav> <ul class="sidebar-links"><li><a href="/mosx/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/mosx/overview.html" class="sidebar-link">Overview</a></li><li><a href="/mosx/mosx-api.html" class="sidebar-link">Mosx API</a></li><li><a href="/mosx/tracker-api.html" aria-current="page" class="active sidebar-link">Tracker API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/mosx/tracker-api.html#concept" class="sidebar-link">Concept</a></li><li class="sidebar-sub-header"><a href="/mosx/tracker-api.html#create-tracker" class="sidebar-link">Create tracker</a></li><li class="sidebar-sub-header"><a href="/mosx/tracker-api.html#get-tracker" class="sidebar-link">Get tracker</a></li><li class="sidebar-sub-header"><a href="/mosx/tracker-api.html#tracker-snapshot" class="sidebar-link">tracker.snapshot</a></li><li class="sidebar-sub-header"><a href="/mosx/tracker-api.html#tracker-onpatch" class="sidebar-link">tracker.onPatch</a></li></ul></li><li><a href="/mosx/serializer.html" class="sidebar-link">Serializer</a></li><li><a href="/mosx/examples.html" class="sidebar-link">Examples</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tracker-api"><a href="#tracker-api" class="header-anchor">#</a> Tracker API</h1> <h2 id="concept"><a href="#concept" class="header-anchor">#</a> Concept</h2> Tracker instance can be created only to root node (Mosx object) of state tree, then it will be avalible in all child nodes. Only one tracker can be created for state. <h2 id="create-tracker"><a href="#create-tracker" class="header-anchor">#</a> Create tracker</h2> <div class="language-ts extra-class"><pre class="language-ts"><code>// create new tracker const tracker = Mosx.createTracker(state, { serializer, reversible }) </code></pre></div>The following parameters can be used: <div class="language-ts extra-class"><pre class="language-ts"><code>export interface IMosxTrackerParams { serializer?: any reversible?: boolean privateMapValuePatch?: boolean } </code></pre></div>Set <code>reversible</code> as true if you need to get oldValue in JsonPatch: <div class="language-ts extra-class"><pre class="language-ts"><code>export interface IEncodedJsonPatch { op: "replace" | "remove" | "add" path: Path value?: any // value is not available for remove operations oldValue?: any // only if reversible enabled } </code></pre></div>Set <code>serializer</code> if you need to get encoded patch in JsonPatch: <div class="language-ts extra-class"><pre class="language-ts"><code>export interface IEncodedJsonPatch { op: "replace" | "remove" | "add" path: Path value?: any // value is not available for remove operations oldValue?: any // only if reversible enabled encoded?: Buffer // only if serializer set } </code></pre></div>::: info Read more about <a href="/mosx/mosx/serializer.html">serializer</a> ::: Set <code>privateMapValuePatch</code> if you need to get patches for hidden map items as undefined <h2 id="get-tracker"><a href="#get-tracker" class="header-anchor">#</a> Get tracker</h2> Get tracker from any node of state tree: <div class="language-ts extra-class"><pre class="language-ts"><code> const player = state.players[0] // get existing tracker const tracker = Mosx.getTracker(player) </code></pre></div><h2 id="tracker-snapshot"><a href="#tracker-snapshot" class="header-anchor">#</a> tracker.snapshot</h2> Return serialized snapshot if serialized is defined, if not - return Mosx.getSnapshot <div class="language-ts extra-class"><pre class="language-ts"><code> snapshot(params: IMosxSnapshotParams) { const snapshot = Mosx.getSnapshot(this.root, params && params.tags) return this.serializer ? this.serializer.encodeSnapshot(snapshot) : snapshot } </code></pre></div><div class="language-ts extra-class"><pre class="language-ts"><code>export interface IMosxSnapshotParams { tags?: string | string[] spy?: boolean } </code></pre></div>Set access <code>tags</code> parameter to get snapshot with private objects/properties. Set <code>spy</code> as true if you need to get full snapshot including all private objects/properties <h2 id="tracker-onpatch"><a href="#tracker-onpatch" class="header-anchor">#</a> tracker.onPatch</h2> <div class="language-ts extra-class"><pre class="language-ts"><code>onPatch (listener: MosxPatchListener<T>, params?: IMosxPatchParams) => IDisposer </code></pre></div>Use <code>onPatch</code> method to add listener for state stree change. The following parameters can be used: <div class="language-ts extra-class"><pre class="language-ts"><code>export interface IMosxPatchParams { tags?: string | string[] filter?: JsonPatchOp | JsonPatchOp[] reversible?: boolean spy?: boolean } </code></pre></div>Set access <code>tags</code> parameter to recieve patches for private objects/properties. Set <code>filter</code> parameter to any operations ("add", "replace", "remove") fo recieve patches for choosen operations. Set <code>reversible</code> as true if you need to get oldValue in JsonPatch: <div class="language-ts extra-class"><pre class="language-ts"><code>export interface IReversibleJsonPatch { op: "replace" | "remove" | "add" path: Path value?: any // value is not available for remove operations oldValue?: any // only if reversible enabled } </code></pre></div>Set <code>spy</code> as true if you need to recieve all patches including private objects/properties <h3 id="tracker-dispose"><a href="#tracker-dispose" class="header-anchor">#</a> tracker.dispose</h3> <div class="language-ts extra-class"><pre class="language-ts"><code> dispose(): void </code></pre></div>Dispose tracker.</div> <footer class="page-edit"> </footer> <div class="page-nav"> ← <a href="/mosx/mosx-api.html" class="prev"> Mosx API </a> <a href="/mosx/serializer.html"> Serializer </a> → </div> </main></div><div class="global-ui"></div></div> <script src="/mosx/assets/js/app.e7b6d6a7.js" defer></script><script src="/mosx/assets/js/2.8b048e3e.js" defer></script><script src="/mosx/assets/js/15.d234781f.js" defer></script> </body> </html>