mosx
Version:
Multiview observable state management engine
75 lines (68 loc) • 15.5 kB
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/13.cad4915b.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/14.50dee50d.js"><link rel="prefetch" href="/mosx/assets/js/15.d234781f.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"><!----> <span class="site-name">Mosx Documentation</span></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" class="sidebar-link">Tracker API</a></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> <p>Tracker instance can be created to root node (Mosx object) of state tree, then it will be avalible in all child nodes:</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token comment">// create new tracker</span>
<span class="token keyword">const</span> tracker <span class="token operator">=</span> Mosx<span class="token punctuation">.</span><span class="token function">createTracker</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span>
</code></pre></div><p>Get tracker from any node of state tree:</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">const</span> player <span class="token operator">=</span> state<span class="token punctuation">.</span>players<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
<span class="token comment">// get existing tracker</span>
<span class="token keyword">const</span> tracker <span class="token operator">=</span> Mosx<span class="token punctuation">.</span><span class="token function">getTracker</span><span class="token punctuation">(</span>player<span class="token punctuation">)</span>
</code></pre></div><h2 id="tracker-snapshot"><a href="#tracker-snapshot" class="header-anchor">#</a> tracker.snapshot</h2> <p>Alias to Mosx.getSnapshot()</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token function">snapshot</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token operator">:</span> IMosxSnapshotParams</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> Mosx<span class="token punctuation">.</span><span class="token function">getSnapshot</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>root<span class="token punctuation">,</span> params <span class="token operator">&&</span> params<span class="token punctuation">.</span>tags<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IMosxSnapshotParams</span> <span class="token punctuation">{</span>
tags<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Set access <code>tags</code> parameter to get snapshot with private objects/properties.</p> <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> <span class="token function">onPatch</span> <span class="token punctuation">(</span><span class="token parameter">listener<span class="token operator">:</span> MosxPatchListener<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">,</span> params<span class="token operator">?</span><span class="token operator">:</span> IMosxPatchParams</span><span class="token punctuation">)</span> <span class="token operator">=></span> IDisposer
</code></pre></div><p>Use <code>onPatch</code> method to add listener for state stree change.</p> <p>The following parameters can be used:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IMosxPatchParams</span> <span class="token punctuation">{</span>
tags<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
filter<span class="token operator">?</span><span class="token operator">:</span> JsonPatchOp <span class="token operator">|</span> JsonPatchOp<span class="token punctuation">[</span><span class="token punctuation">]</span>
reversible<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
serializer<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Set access <code>tags</code> parameter to recieve patches for private objects/properties.</p> <p>Set <code>filter</code> parameter to any operations ("add", "replace", "remove") fo recieve patches for choosen operations.</p> <p>Set <code>reversible</code> as true if you need to get oldValue in JsonPatch:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IEncodedJsonPatch</span> <span class="token punctuation">{</span>
op<span class="token operator">:</span> <span class="token string">"replace"</span> <span class="token operator">|</span> <span class="token string">"remove"</span> <span class="token operator">|</span> <span class="token string">"add"</span>
path<span class="token operator">:</span> Path
value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span> <span class="token comment">// value is not available for remove operations</span>
oldValue<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span> <span class="token comment">// only if reversible enabled</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Set <code>serializer</code> if you need to get encoded patch in JsonPatch:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IEncodedJsonPatch</span> <span class="token punctuation">{</span>
op<span class="token operator">:</span> <span class="token string">"replace"</span> <span class="token operator">|</span> <span class="token string">"remove"</span> <span class="token operator">|</span> <span class="token string">"add"</span>
path<span class="token operator">:</span> Path
value<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span> <span class="token comment">// value is not available for remove operations</span>
encoded<span class="token operator">?</span><span class="token operator">:</span> Buffer <span class="token comment">// only if serializer set</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="tracker-decodemap"><a href="#tracker-decodemap" class="header-anchor">#</a> tracker.decodeMap</h2> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token function">decodeMap</span><span class="token punctuation">(</span>serializer<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span>
</code></pre></div><p>Generate decodeMap for choosen serializer.</p> <h4 id="decodemap-for-light-serialized"><a href="#decodemap-for-light-serialized" class="header-anchor">#</a> <strong>decodeMap for light serialized</strong></h4> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ILightSchema</span> <span class="token punctuation">{</span>
<span class="token punctuation">[</span><span class="token keyword">type</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> ISchemaItem
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ISchemaItem</span> <span class="token punctuation">{</span>
index<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token comment">// typeIndex</span>
parent<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// parent class name</span>
props<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// array of props name</span>
schema<span class="token operator">:</span> IPropsSchema
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IPropsSchema</span> <span class="token punctuation">{</span>
<span class="token punctuation">[</span>prop<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> IPropSchema
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">IPropSchema</span> <span class="token punctuation">{</span>
<span class="token keyword">type</span><span class="token operator">:</span> <span class="token string">"map"</span> <span class="token operator">|</span> <span class="token string">"set"</span> <span class="token operator">|</span> <span class="token string">"array"</span>
items<span class="token operator">:</span> <span class="token builtin">string</span>
<span class="token punctuation">}</span>
</code></pre></div><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> <span class="token function">dispose</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword">void</span>
</code></pre></div><p>Dispose tracker.</p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </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/13.cad4915b.js" defer></script>
</body>
</html>