mosx
Version:
Multiview observable state management engine
78 lines (74 loc) • 24 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mosx 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/10.30f5ca67.js" as="script"><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/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="mosx-api"><a href="#mosx-api" class="header-anchor">#</a> Mosx API</h1> <h2 id="constructor"><a href="#constructor" class="header-anchor">#</a> Constructor</h2> <p>When Mosx object created by extending of Mosx class it can set parent and tags in constructor:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">class</span> <span class="token class-name">Player</span> <span class="token keyword">extends</span> <span class="token class-name">Mosx</span> <span class="token punctuation">{</span>
<span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token parameter">owner<span class="token punctuation">,</span> tags</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// super (owner?: Mosx, tags: string | string[] = [])</span>
<span class="token keyword">super</span><span class="token punctuation">(</span>owner<span class="token punctuation">,</span> tags<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>it's not possible to set parent or tags in constructor if @mx.Object was used</p></div> <h2 id="mosx-inject"><a href="#mosx-inject" class="header-anchor">#</a> Mosx.inject</h2> <p>Object can be converted to Mosx object via inject method:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">static</span> <span class="token function">inject</span><span class="token punctuation">(</span>target<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> owner<span class="token operator">?</span><span class="token operator">:</span> Mosx<span class="token punctuation">,</span> tags<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 operator">=</span> <span class="token punctuation">[</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>Example:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">class</span> <span class="token class-name">Item</span> <span class="token punctuation">{</span>
<span class="token keyword">constructor</span><span class="token punctuation">(</span><span class="token parameter">owner<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">,</span> tags<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
Mosx<span class="token punctuation">.</span><span class="token function">inject</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> owner<span class="token punctuation">,</span> tags<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> item <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Item</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item <span class="token keyword">instanceof</span> <span class="token class-name">Mosx</span><span class="token punctuation">)</span>
<span class="token comment">// true</span>
</code></pre></div><h2 id="mosx-new"><a href="#mosx-new" class="header-anchor">#</a> Mosx.new</h2> <p>Alias for creation of Mosx object and set parent/tags</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">static</span> <span class="token keyword">new</span><span class="token punctuation">(</span>Class<span class="token operator">:</span> MosxClass<span class="token punctuation">,</span> parent<span class="token operator">?</span><span class="token operator">:</span> Mosx<span class="token punctuation">,</span> tags<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span>
</code></pre></div><p>Example:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// alias for create Item and set parent/tags</span>
<span class="token comment">// const i1 = new Item(data)</span>
<span class="token comment">// Mosx.setTag(i1, "111")</span>
<span class="token comment">// Mosx.setParent(i1, p1)</span>
<span class="token keyword">const</span> i1 <span class="token operator">=</span> Mosx<span class="token punctuation">.</span><span class="token keyword">new</span><span class="token punctuation">(</span>Item<span class="token punctuation">,</span> p1<span class="token punctuation">,</span> <span class="token string">"111"</span><span class="token punctuation">)</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span>
</code></pre></div><h2 id="mosx-isparent"><a href="#mosx-isparent" class="header-anchor">#</a> Mosx.isParent</h2> <p>Check if Mosx object has parent:</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">isParent</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">,</span> parent<span class="token operator">:</span> Mosx<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
</code></pre></div><h2 id="mosx-getparent"><a href="#mosx-getparent" class="header-anchor">#</a> Mosx.getParent</h2> <p>Get parent of Mosx object</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">getParent</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">)</span><span class="token operator">:</span> Mosx <span class="token operator">|</span> <span class="token keyword">null</span>
</code></pre></div><h2 id="mosx-setparent"><a href="#mosx-setparent" class="header-anchor">#</a> Mosx.setParent</h2> <p>Set parent for Mosx object</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">setParent</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">,</span> owner<span class="token operator">?</span><span class="token operator">:</span> Mosx<span class="token punctuation">)</span>
</code></pre></div><h2 id="mosx-getsnapshot"><a href="#mosx-getsnapshot" class="header-anchor">#</a> Mosx.getSnapshot</h2> <p>Get snapshot of Mosx object</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">getSnapshot</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<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><span class="token operator">:</span> <span class="token builtin">any</span>
</code></pre></div><h2 id="mosx-createtracker"><a href="#mosx-createtracker" class="header-anchor">#</a> Mosx.createTracker</h2> <p>Create tracker for Mosx object</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">createTracker</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">,</span> params<span class="token operator">?</span><span class="token operator">:</span> IMosxTrackerParams<span class="token punctuation">)</span><span class="token operator">:</span> IMosxTracker
</code></pre></div><p>Tracker params are global for all listeners, but can setup by every listener individually:</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">IMosxTrackerParams</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 <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><p>The following serializers are currently avalible:</p> <ul><li>mpack</li> <li>light</li> <li>schema (will be added soon)</li></ul> <h3 id="serializer-mpack"><a href="#serializer-mpack" class="header-anchor">#</a> <strong>Serializer: "mpack"</strong></h3> <p>Simple serializer based on messagePack serializer. Patch converted to array format and then encoded with notepack.io serialization. DecodeMap is not required for decoding:</p> <p>Zero array element is used for patch.op converted to number:</p> <table><thead><tr><th>patch.op</th> <th>op</th></tr></thead> <tbody><tr><td>"add"</td> <td>0</td></tr> <tr><td>"replace"</td> <td>1</td></tr> <tr><td>"remove"</td> <td>2</td></tr></tbody></table> <p>First array element for patch.path, others elements for patch.value and patch.oldValue.</p> <p>Example of Json patch:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
<span class="token property">"op"</span><span class="token operator">:</span> <span class="token string">"add"</span><span class="token punctuation">,</span>
<span class="token property">"path"</span><span class="token operator">:</span> <span class="token string">"/players/0"</span><span class="token punctuation">,</span>
<span class="token property">"value"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"John"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>Patch converted to array:</p> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token punctuation">[</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">"/players/0"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string">"id"</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span> <span class="token string">"name"</span><span class="token operator">:</span> <span class="token string">"John"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span>
</code></pre></div><h3 id="serializer-light-advanced"><a href="#serializer-light-advanced" class="header-anchor">#</a> <strong>Serializer: "light" (advanced)</strong></h3> <p>This serialize method convert patch path from string to bytes with indexes in static decode Map. So DecoreMap is required for decoding.
The algoritms is following - patch consists of 2 parts: header and body:</p> <ul><li>Header includes excoded patch.op and patch.path</li> <li>Body includes array of params and value/oldValue and encoded with notepack.io</li></ul> <p>When light serializer used patch endoded in following way:</p> <table><thead><tr><th></th> <th>0</th> <th>1</th> <th>2...n+2</th> <th>n+3...</th></tr></thead> <tbody><tr><td>byte</td> <td>op</td> <td>n</td> <td>path</td> <td>[...params, value, oldValue]*</td></tr></tbody></table> <p>"*" - encoded with notepack</p> <p>Zero byte is used for operation:</p> <table><thead><tr><th>patch.op</th> <th>op</th></tr></thead> <tbody><tr><td>"add"</td> <td>0</td></tr> <tr><td>"replace"</td> <td>1</td></tr> <tr><td>"remove"</td> <td>2</td></tr></tbody></table> <p>First byte is used for path size - number of nodes in <code>patch.path</code> (x2 byte for each)</p> <p>From second byte to n + 2 path encoded:</p> <table><thead><tr><th>byte</th> <th>option 1</th> <th>option 2</th></tr></thead> <tbody><tr><td>0</td> <td>typeIndex</td> <td>-1</td></tr> <tr><td>1</td> <td>propIndex</td> <td>paramIndex</td></tr></tbody></table> <p>All map keys are not included in static encode Map as they are dynamic, so all keys added to body array.
patch.value and patch.oldValue also added to body array and encode with notepack.io</p> <h3 id="serializer-schema-advanced"><a href="#serializer-schema-advanced" class="header-anchor">#</a> <strong>Serializer: "schema" (advanced)</strong></h3> <p>This serialize algorithms is under development. The main difference from "light" version is that dynamic decode Map will be used (schema). The size of encoded patch will be reduced significantly.</p> <h2 id="mosx-gettracker"><a href="#mosx-gettracker" class="header-anchor">#</a> Mosx.getTracker</h2> <p>Get tracker of state tree</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">getTracker</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">)</span><span class="token operator">:</span> MosxTracker <span class="token operator">|</span> <span class="token keyword">null</span>
</code></pre></div><h2 id="mosx-gettags"><a href="#mosx-gettags" class="header-anchor">#</a> Mosx.getTags</h2> <p>Get tags of state tree node (Mosx object)</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">getTags</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">)</span><span class="token operator">:</span> Set<span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span> <span class="token operator">|</span> <span class="token keyword">null</span>
</code></pre></div><h2 id="mosx-addtag"><a href="#mosx-addtag" class="header-anchor">#</a> Mosx.addTag</h2> <p>Add tags to state tree node (Mosx object)</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">addTag</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">,</span> tags<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><h2 id="mosx-deletetag"><a href="#mosx-deletetag" class="header-anchor">#</a> Mosx.deleteTag</h2> <p>Delete tag from state tree node (Mosx object)</p> <div class="language-ts extra-class"><pre class="language-ts"><code> <span class="token keyword">static</span> <span class="token function">deleteTag</span><span class="token punctuation">(</span>target<span class="token operator">:</span> Mosx<span class="token punctuation">,</span> tag<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span>
</code></pre></div></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/10.30f5ca67.js" defer></script>
</body>
</html>