mosx

Version:

Multiview observable state management engine

76 lines (63 loc) • 15.1 kB

HTML

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Примеры | 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/9.7ddab2d4.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/7.81819134.js"><link rel="prefetch" href="/mosx/assets/js/8.8ec53007.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" 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="примеры"><a href="#примеры" class="header-anchor">#</a> Примеры</h1> <h2 id="magx-example-projects"><a href="#magx-example-projects" class="header-anchor">#</a> Magx example projects</h2> The easiest way to try out MosX is using the <a href="https://github.com/udamir/magx-examples" target="_blank" rel="noopener noreferrer">magx-examples<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 class="language- extra-class"><pre class="language-text"><code>git clone https://github.com/udamir/magx-examples.git cd magx-examples npm install </code></pre></div>To run the MagX server, run <code>npm start</code> <h2 id="basic-state-example"><a href="#basic-state-example" class="header-anchor">#</a> Basic state example</h2> <ol><li>Install magx and mosx packages:</li></ol> <div class="language- extra-class"><pre class="language-text"><code>npm install --save mosx </code></pre></div><ol><li>Define MosX object for Player:</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code>import { Mosx, mx } from "mosx" @mx.Object class Player { @mx public x = Math.floor(Math.random() * 400) @mx public y = Math.floor(Math.random() * 400) } </code></pre></div><ol start="2"><li>Define MosX state:</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code>@mx.Object export class State { @mx public players = new Map<string, Player>() public createPlayer(id: string) { const player = new Player() this.players.set(id, player) } public removePlayer(id: string) { this.players.delete(id) } public movePlayer(id: string, movement: any) { const player = this.players.get(id) if (!player) { return } player.x += movement.x ? movement.x * 10 : 0 player.y += movement.y ? movement.y * 10 : 0 } } </code></pre></div><ol start="3"><li>Start track state changes:</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code>const state = new State() const tracker = Mosx.createTracker(state) tracker.onPatch((change) => console.log(change)) </code></pre></div><ol start="4"><li>Update state and check track patches</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code>state.createPlayer("Player 1") // Patch in JsonPatch format // { // op: 'add', // path: '/players/Player 1', // value: { x: 77, y: 393 } // } state.movePlayer("Player 1", { x: 5, y: -5 }) // { op: 'replace', path: '/players/Player 1/x', value: 127 } // { op: 'replace', path: '/players/Player 1/y', value: 343 } </code></pre></div><ol start="5"><li>Get snapshot of current state</li></ol> <div class="language-ts extra-class"><pre class="language-ts"><code>const snapshot = Mosx.getSnapshot(state) console.log(snapshot) // { players: { 'Player 1': { x: 127, y: 343 } } } </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/9.7ddab2d4.js" defer></script> </body> </html>