mosx

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Overview | 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/7.81819134.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/6.689986cb.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" aria-current="page" class="active sidebar-link">Overview</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/mosx/overview.html#mosx-object" class="sidebar-link">Mosx object</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#supported-types" class="sidebar-link">Supported types</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#snapshots" class="sidebar-link">Snapshots</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#change-tracker" class="sidebar-link">Change tracker</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#computed-and-observable-properies" class="sidebar-link">Computed and Observable properies</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#private-objects-and-properties" class="sidebar-link">Private objects and properties</a></li><li class="sidebar-sub-header"><a href="/mosx/overview.html#visiblity-management" class="sidebar-link">Visiblity management</a></li></ul></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="overview"><a href="#overview" class="header-anchor">#</a> Overview</h1> <h2 id="mosx-object"><a href="#mosx-object" class="header-anchor">#</a> Mosx object</h2> Mosx object can be created in 2 ways: <ul><li>by <code>@mx.Object</code> decorator</li> <li>by extending Mosx class</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code>// wrap with class decorator @mx.Object class State { // property decorator @mx clients = new Map() // ... } // extending Mosx class class Item extends Mosx { @mx name = "abc" // ... } // inheritance is also supported class Child extends Item { // ... } </code></pre></div><div class="custom-block tip">TIP Instanses of State, Item and Child classes will be Mosx object</div> <div class="language-ts extra-class"><pre class="language-ts"><code>console.log(new State() instanceof Mosx) // true console.log(new Item() instanceof Mosx) // true console.log(new Child() instanceof Mosx) // true </code></pre></div><h2 id="supported-types"><a href="#supported-types" class="header-anchor">#</a> Supported types</h2> <ul><li>primitive types: number, string, boolean</li> <li>complex types: embeded object (Mosx), array, map</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class Item { // simple types: string, number, boolen @mx name = "abc" @mx id = 123 @mx bool = false // complex types: object, array, map @mx obj = new Item() // must be Mosx instance @mx arr = new Array<Item>() @mx map = new Map<string, Item>() } </code></pre></div><h2 id="snapshots"><a href="#snapshots" class="header-anchor">#</a> Snapshots</h2> Snapshots are the immutable, structurally shared, representation of Mosx object (and it's children). Basically, when a change is performed over a Mosx object then a new immutable snapshot can be generated via <code>Mosx.getSnapshot</code> method. Getting the snapshot out of any Mosx object is as easy as this: <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class Item { @mx name = "abc" @mx id = 123 @mx bool = false } const item = new Item() // get snapshot of item console.log(Mosx.getSnapshot(item)) // { name: "abc", id: 123, bool: false } </code></pre></div><h2 id="change-tracker"><a href="#change-tracker" class="header-anchor">#</a> Change tracker</h2> Every change of Mosx state can be tracked. First you need to create tracker and then subscribe for patches: <div class="language-ts extra-class"><pre class="language-ts"><code>const tracker = Mosx.createTracker(state) const disposer = tracker.onPatch((patch: IEncodedJsonPatch, obj: any, state: State) => { // ... console.log(patch) }) </code></pre></div>A patch object has this structure: <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 used } </code></pre></div><h2 id="computed-and-observable-properies"><a href="#computed-and-observable-properies" class="header-anchor">#</a> Computed and Observable properies</h2> Computed property can be tracked also if it depends on any <code>@mx</code> property (including <code>@mx.oservable</code>). Use <code>@mx.computed</code> decorator to wrap computed property. <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class Item { // computed property @mx.computed get flag() { return this.mobx ? "Computed value" : "" } // observable property @mx.observable public mobx = true } const item = new Item() // get snapshot of item console.log(Mosx.getSnapshot(item)) // { flag: 'Computed value' } // update observable property item.mobx = false // get updated snapdhot of item console.log(Mosx.getSnapshot(item)) // { flag: '' } </code></pre></div>Observable properties are hidden for tracker and snapshots <div class="custom-block tip">TIP <code>@mx.observable === mobx.observable</code></div> <h2 id="private-objects-and-properties"><a href="#private-objects-and-properties" class="header-anchor">#</a> Private objects and properties</h2> By default all <code>@mx</code> objects/properties are public and visible for all listeners. If it is required to manage visibility of objects/properies you need to make them private. Use <code>@mx.Object.private</code> decorator for private objects: <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object.private class PrivateItem { ... } </code></pre></div>Use <code>@mx.private</code> decorator for private properties and <code>@mx.computed.private</code> decorator for private computed properties: <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class Item { // public property @mx name = "abc" // private property @mx.private value = 100 // private computed property @mx.computed.private get flag() { // ... } } const item = new Item() // get snapshot of item console.log(Mosx.getSnapshot(item)) // { name: 'abc' } </code></pre></div>Private objects and properties are not visible for tracker and in snapshots without access tags. Access for private objects and properties are described in Visibility management. <h2 id="visiblity-management"><a href="#visiblity-management" class="header-anchor">#</a> Visiblity management</h2> <h3 id="access-tags"><a href="#access-tags" class="header-anchor">#</a> Access tags</h3> Access tags can be added to any Mosx object. All listeners with one of this tag can see all private properties of Mosx object. To manage access tags of object use <code>addTag, deleteTag, getTags</code> methods: <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class Item { // public property @mx name = "abc" // private property @mx.private value = 100 } const item = new Item() // add access tags to object Mosx.addTag(item, ["123", "234"]) // get snapshot of item with access tag console.log(Mosx.getSnapshot(item, "123")) // { name: 'abc', value: 100 } console.log(Mosx.getSnapshot(item, "234")) // { name: 'abc', value: 100 } // delete one of tags Mosx.deleteTag(item, "123") console.log(Mosx.getSnapshot(item, "123")) // { name: 'abc' } console.log(Mosx.getSnapshot(item, "234")) // { name: 'abc', value: 100 } console.log(Mosx.getTags(item)) // Set(1) {"234"} </code></pre></div><h3 id="virtual-objects-tree-advanced"><a href="#virtual-objects-tree-advanced" class="header-anchor">#</a> Virtual objects tree (advanced)</h3> Every Mosx object has virtual Mosx parent and inherits parent tags and tracker. By default parent of all Mosx objects are root state Object. To manage virtual objects tree use <code>setParent</code> method: <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object class State { @mx players = new Array() @mx objects = new Map() } class Player extends Mosx { @mx.private id: string @mx name: string constructor(id: string, name: string) { super(null, id) // setTag for player this.id = id this.name = name } } @mx.Object.private class Item { @mx created = Date.now() } // create state and players const state = new State() const p1 = new Player("1", "John") const p2 = new Player("2", "Tony") // create 2 items and set p1 as parent const i1 = new Item() Mosx.setParent(i1, p1) // Mosx.new - short alias const i2 = Mosx.new(Item, p1)() // add players and items to state state.players.push(p1, p2) state.objects.set("item1", i1) state.objects.set("item2", i2) // check state for player p1 console.log(Mosx.getSnapshot(state, p1.id)) // { // players: [ { id: '1', name: 'John' }, { name: 'Tony' } ], // objects: { item1: { created: 1603317890537 }, item2: { created: 1603317890538 }} // } // check state for player p2 console.log(Mosx.getSnapshot(state, p2.id)) // { // players: [ { name: 'John' }, { id: '2', name: 'Tony' } ], // objects: { item1: undefined, item2: undefined } // } </code></pre></div></div> <footer class="page-edit"> </footer> <div class="page-nav"> ← <a href="/mosx/" class="prev router-link-active"> Introduction </a> <a href="/mosx/mosx-api.html"> Mosx API </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/7.81819134.js" defer></script> </body> </html>