mosx
Version:
Multiview observable state management engine
78 lines (74 loc) • 21.3 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/6.689986cb.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/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/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" aria-current="page" class="active sidebar-link">Mosx API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#constructor" class="sidebar-link">Constructor</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-inject" class="sidebar-link">Mosx.inject</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-new" class="sidebar-link">Mosx.new</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-isparent" class="sidebar-link">Mosx.isParent</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-getparent" class="sidebar-link">Mosx.getParent</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-setparent" class="sidebar-link">Mosx.setParent</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-getsnapshot" class="sidebar-link">Mosx.getSnapshot</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-createtracker" class="sidebar-link">Mosx.createTracker</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-gettracker" class="sidebar-link">Mosx.getTracker</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-gettags" class="sidebar-link">Mosx.getTags</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-addtag" class="sidebar-link">Mosx.addTag</a></li><li class="sidebar-sub-header"><a href="/mosx/mosx-api.html#mosx-deletetag" class="sidebar-link">Mosx.deleteTag</a></li></ul></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><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> Mosx
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>you can use <code>Mosx.inject</code> to set parent or tags in constructor if @mx.Object was used</p></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><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>Mosx.setParent</code> also convert object to Mosx</p></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> spy <span class="token operator">=</span> <span class="token boolean">false</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:</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> Serializer
<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><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> <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 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><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>Mosx.addTag</code> also convert target to Mosx</p></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> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/mosx/overview.html" class="prev">
Overview
</a></span> <span class="next"><a href="/mosx/tracker-api.html">
Tracker API
</a>
→
</span></p></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/6.689986cb.js" defer></script>
</body>
</html>