-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
34 lines (29 loc) · 72.5 KB
/
Copy pathindex.html
File metadata and controls
34 lines (29 loc) · 72.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html><html><head><title>Trooba</title><link rel="icon" type="image/png" sizes="32x21" href="/favicon-21709fb7.png"><meta name="viewport" content="width=device-width, initial-scale=1"><script>
var scalingBodyFont = false;
function scaleBodyFont() {
var height = Math.max(window.outerHeight, window.screen.height);
document.documentElement.style.fontSize = Math.pow(Math.min(window.innerWidth, height), 0.25)*19+'%';
scalingBodyFont = false;
}
window.addEventListener('resize', function() {
requestAnimationFrame(scaleBodyFont);
});
scaleBodyFont();
</script><link rel="stylesheet" href="/index-4af534b6.css"></head><body class="home"><header class="site-header" id="s0"><a href="/"><img src="/logo-header-3015f806.png" class="site-logo"></a><div class="stuff"><nav class="site-menu"><a href="/docs/introduction-overview/">Getting started</a><a href="/docs/trooba-book-overview/">Book</a><a href="https://github.com/trooba/trooba">github</a><form class="site-search search" id="s0-c0" data-marko='{"onclick":"focus s0-c0","onsubmit":"search s0-c0"}'><img src="/search-c29a7d7d.png"><input type="search" placeholder="search the docs..." id="s0-c0-input"></form></nav><button class="menu" data-marko='{"onclick":"emit s0 0"}'>☰</button></div></header><div class="doc-sidebar" id="s1-sidebar"><button class="close" data-marko='{"onclick":"hide s1"}'>✕</button><h1>Trooba <select id="s1-c0" data-marko='{"onchange":"switchVersion s1-c0"}'><option value="current" selected>2.0.2</option></select></h1><form class="site-search search" id="s1-c1" data-marko='{"onclick":"focus s1-c1","onsubmit":"search s1-c1"}'><img src="/search-c29a7d7d.png"><input type="search" placeholder="search the docs..." id="s1-c1-input"></form><ul class="toc-level0"><li class="section"><a href="/docs/introduction-overview/">INTRODUCTION</a></li><li><a href="/docs/installing/">Installing</a></li><li><a href="/docs/getting-started/">Getting Started</a></li><li><a href="/docs/api/">API</a></li><li><a href="/docs/handlers/">Handlers</a></li><li><a href="/docs/transports/">Transports</a></li><li><a href="/docs/custom-api/">Custom API</a></li><li><a href="/docs/streaming/">Streaming</a></li><li><a href="/docs/tracing/">Tracing</a></li><li><a href="/docs/enforcing-delivery/">Enforcing Delivery</a></li></ul><ul class="toc-level0"><li class="section"><a href="/docs/trooba-book-overview/">TROOBA BOOK</a></li><li><a href="/docs/scalable-pipelines/">Scalable Pipelines</a></li><li><a href="/docs/ideal-framework/">Ideal Framework</a></li><li><a href="/docs/separation-of-concerns/">Separation Of Concerns</a></li><li><a href="/docs/using-trooba/">Using Trooba</a></li><li><a href="/docs/bootstrapping-from-config/">Bootstrapping From Config</a></li><li><a href="/docs/pipelines-everywhere/">Pipelines Everywhere!</a></li><li><a href="/docs/pipeline-lifecycle/">Pipeline Lifecycle</a></li><li><a href="/docs/transport-with-context/">Transport With Context</a></li></ul></div><div class="content"><header class="home-header" id="s2"><img src="/logo-ad0fdd51.png" class="logo"><div class="header-content"><h1 id="s2-tagline">Fast isomorphic lightweight framework to build pipelines</h1><div class="actions"><a href="/docs/getting-started/" class="button get-started"><span>Get started</span></a><a href="https://github.com/trooba/trooba" class="github-link" id="s2-c0"><img src="/github-02f398dc.svg"><span class="text">GitHub</span><span class="stars" id="s2-c0-star-count"></span></a></div></div></header><header class="home-features"><div class="feature"><h2 class="blue">generic.</h2><p>Protocol and transport agnostic, defines only basic concepts</p></div><div class="feature"><h2 class="red">extensible.</h2><p>Define new events and data types and implement your own architecture</p></div><div class="feature"><h2 class="yellow">isomorphic.</h2><p>Run it in browser or server side</p></div></header><header class="home-components solid-color"><h1 class="heading title"><a name="building-a-pipe" class="anchor" href="#building-a-pipe"><span class="header-link"></span></a>Building a pipe</h1><p class="description">You can build any pipeline, not just service related. Let's build a slot machine.</p><div class="code-example-container"><script>
if(localStorage.getItem('markojs-website:syntax') === 'concise') {
document.body.classList.add('concise');
}
</script><pre class="editor editor-colors"><div class="line"><span class="text marko"><span class="storage type class js"><span>class</span></span><span> </span><span class="source js embedded"><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="meta method js"><span class="entity name function js"><span>onCreate</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span><span> reels</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="punctuation section scope begin js"><span>[</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍊</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍉</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍈</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>]</span></span><span>.join</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span> </span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="punctuation section scope end js"><span>}</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="meta method js"><span class="entity name function js"><span>spin</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> trooba</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="entity name type"><span>require</span></span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>trooba</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> create a pipeline</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> sharablePipe</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>trooba</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span></span><span>spinReel</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> reel 1</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span></span><span>spinReel</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> reel 2</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span></span><span>spinReel</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> reel 3</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span></span><span>validate</span><span class="punctuation section scope end js"><span>)</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.build</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type function js"><span>function</span></span><span> </span><span class="meta method js"><span class="entity name function js"><span>spinReel</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span>pipe</span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> symbols</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="punctuation section scope begin js"><span>[</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍊</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍉</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍈</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍇</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍆</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍅</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>🍄</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>]</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> pipe</span><span>.once</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>request</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="storage type function js"><span>function</span></span><span> </span><span class="punctuation section scope begin js"><span>(</span></span><span>request, next</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> position</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>Math</span><span>.round</span><span class="punctuation section scope begin js"><span>(</span></span><span>Math</span><span>.random</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="keyword operator js"><span>*</span></span><span> </span><span class="punctuation section scope begin js"><span>(</span></span><span>symbols</span><span>.length</span><span> - </span><span class="constant numeric js"><span>1</span></span><span class="punctuation section scope end js"><span>)</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> request</span><span>.push</span><span class="punctuation section scope begin js"><span>(</span></span><span>symbols</span><span class="punctuation section scope begin js"><span>[</span></span><span>position</span><span class="punctuation section scope end js"><span>]</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> next</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type function js"><span>function</span></span><span> </span><span class="meta method js"><span class="entity name function js"><span>validate</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span>pipe</span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> pipe</span><span>.once</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>request</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="storage type function js"><span>function</span></span><span> </span><span class="punctuation section scope begin js"><span>(</span></span><span>request, next</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> line</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>request</span><span>.join</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span> </span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="keyword control js"><span>if</span></span><span> </span><span class="punctuation section scope begin js"><span>(</span></span><span>line</span><span> </span><span class="keyword operator js"><span>===</span></span><span> </span><span class="punctuation section scope begin js"><span>[</span></span><span>request</span><span class="punctuation section scope begin js"><span>[</span></span><span class="constant numeric js"><span>0</span></span><span class="punctuation section scope end js"><span>]</span></span><span>, request</span><span class="punctuation section scope begin js"><span>[</span></span><span class="constant numeric js"><span>0</span></span><span class="punctuation section scope end js"><span>]</span></span><span>, request</span><span class="punctuation section scope begin js"><span>[</span></span><span class="constant numeric js"><span>0</span></span><span class="punctuation section scope end js"><span>]</span><span>]</span></span><span>.join</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span> </span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span><span>)</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> you won!</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="keyword control js"><span>return</span></span><span> pipe</span><span>.respond</span><span class="punctuation section scope begin js"><span>(</span></span><span>line</span><span> </span><span class="keyword operator js"><span>+</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span> Yay!</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> pipe</span><span>.respond</span><span class="punctuation section scope begin js"><span>(</span></span><span>line</span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> create a generic client and inject context</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> client</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>sharablePipe</span><span>.create</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> make a request</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> client</span><span>.request</span><span class="punctuation section scope begin js"><span>(</span><span>[</span></span><span class="punctuation section scope end js"><span>]</span></span><span>, </span><span class="punctuation section scope begin js"><span>(</span></span><span>err, result</span><span class="punctuation section scope end js"><span>)</span></span><span class="storage type function arrow js"><span> => </span></span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.reels</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>result</span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span> </span></span></div><div class="line"><span class="text marko"><span class="storage type marko css"><span>style</span></span><span> </span><span class="punctuation section scope begin css"><span>{</span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>reels</span></span></span><span> </span><span class="meta property-list css"><span class="punctuation section property-list begin bracket curly css"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant other color rgb-value hex css"><span class="punctuation definition constant css"><span>#</span></span><span>09c</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>3</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="punctuation section property-list end bracket curly css"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>example-button</span></span></span><span> </span><span class="meta property-list css"><span class="punctuation section property-list begin bracket curly css"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>1</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>0.5</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="punctuation section property-list end bracket curly css"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation section scope end css"><span>}</span></span></span></div><div class="line"><span class="text marko"><span> </span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>div</span></span><span class="entity other attribute-name shorthand"><span>.reels</span></span><span class="punctuation definition tag end open html"><span>></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta section marko-placeholder"><span class="keyword operator marko"><span>${</span></span><span class="entity name type"><span>state</span></span><span>.reels</span><span class="keyword operator marko"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>div</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>button</span></span><span class="entity other attribute-name shorthand"><span>.example-button</span></span><span> </span><span class="support function marko-attribute"><span>on-click</span></span><span class="meta brace round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>spin</span><span class="punctuation definition string end js"><span>'</span></span></span><span>)</span><span class="punctuation definition tag end open html"><span>></span></span></span></div><div class="line"><span class="text marko"><span> Spin</span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>button</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div></pre><div class="running-example"><div class="reels" id="s3-_r0">🍊 🍉 🍈</div><button class="example-button" id="s3-_r1" data-marko='{"onclick":"spin s3"}'>Spin</button></div></div></header><header class="home-components solid-color odd"><h1 class="heading title"><a name="building-a-service-pipe" class="anchor" href="#building-a-service-pipe"><span class="header-link"></span></a>Building a service pipe</h1><p class="description">Let's make a service call to https://api.github.com/repos/trooba/trooba</p><div class="code-example-container"><pre class="editor editor-colors"><div class="line"><span class="text marko"><span class="storage type class js"><span>class</span></span><span> </span><span class="source js embedded"><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="meta method js"><span class="entity name function js"><span>onCreate</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span><span class="punctuation section scope end js"><span>}</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.token</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.jsonData</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.error</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span class="punctuation definition string end js"><span>'</span></span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="meta method js"><span class="entity name function js"><span>makeCall</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.error</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.jsonData</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> trooba</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="entity name type"><span>require</span></span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>trooba</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> transport</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="entity name type"><span>require</span></span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>trooba-xhr-transport</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> create a pipeline</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> sharablePipe</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>trooba</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span><span>(</span></span><span>pipe</span><span class="punctuation section scope end js"><span>)</span></span><span class="storage type function arrow js"><span> => </span></span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> pipe</span><span>.once</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>request</span><span class="punctuation definition string end js"><span>'</span></span></span><span>, </span><span class="punctuation section scope begin js"><span>(</span></span><span>request, next</span><span class="punctuation section scope end js"><span>)</span></span><span class="storage type function arrow js"><span> => </span></span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> request</span><span>.headers</span><span>.authorization</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>token </span><span class="punctuation definition string end js"><span>'</span></span></span><span> </span><span class="keyword operator js"><span>+</span></span><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.token</span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> next</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.use</span><span class="punctuation section scope begin js"><span>(</span></span><span>transport, </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> protocol</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>https:</span><span class="punctuation definition string end js"><span>'</span></span></span><span>,</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> hostname</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>api.github.com</span><span class="punctuation definition string end js"><span>'</span></span></span><span>,</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> path</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>/repos/trooba/trooba</span><span class="punctuation definition string end js"><span>'</span></span></span><span>,</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> socketTimeout</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant numeric js"><span>5000</span></span><span>,</span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> withCredentials</span><span class="keyword operator js"><span>:</span></span><span> </span><span class="constant language boolean false js"><span>false</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span>.build</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> create a client with superagent api</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="storage type var js"><span>var</span></span><span> client</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>sharablePipe</span><span>.create</span><span class="punctuation section scope begin js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>client:default</span><span class="punctuation definition string end js"><span>'</span></span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="comment line double-slash js"><span class="punctuation definition comment js"><span>//</span></span><span> make a request</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> client</span><span>.get</span><span class="punctuation section scope begin js"><span>(</span></span><span class="punctuation section scope end js"><span>)</span></span><span>.end</span><span class="punctuation section scope begin js"><span>(</span><span>(</span></span><span>err, result</span><span class="punctuation section scope end js"><span>)</span></span><span class="storage type function arrow js"><span> => </span></span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="keyword control js"><span>if</span></span><span> </span><span class="punctuation section scope begin js"><span>(</span></span><span>err</span><span class="punctuation section scope end js"><span>)</span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.error</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="entity name type"><span>JSON</span></span><span>.stringify</span><span class="punctuation section scope begin js"><span>(</span></span><span>err</span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="keyword control js"><span>return</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.jsonData</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span class="entity name type"><span>JSON</span></span><span>.stringify</span><span class="punctuation section scope begin js"><span>(</span></span><span>result, </span><span class="constant language null js"><span>null</span></span><span>, </span><span class="constant numeric js"><span>2</span></span><span class="punctuation section scope end js"><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span><span>)</span></span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="meta method js"><span class="entity name function js"><span>updateToken</span></span><span class="punctuation definition parameters begin js"><span>(</span></span><span>e</span><span class="punctuation definition parameters END js"><span>)</span></span></span><span> </span><span class="punctuation section scope begin js"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="variable language js"><span>this</span></span><span>.</span><span class="entity name type"><span>state</span></span><span>.token</span><span> </span><span class="keyword operator js"><span>=</span></span><span> </span><span>e</span><span>.target</span><span>.value</span><span class="punctuation terminator statement js"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span> </span><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="source js embedded"><span class="punctuation section scope end js"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span> </span></span></div><div class="line"><span class="text marko"><span class="storage type marko css"><span>style</span></span><span> </span><span class="punctuation section scope begin css"><span>{</span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>jsonData</span></span></span><span> </span><span class="meta property-list css"><span class="punctuation section property-list begin bracket curly css"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant other color rgb-value hex css"><span class="punctuation definition constant css"><span>#</span></span><span>09c</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>0.5</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="punctuation section property-list end bracket curly css"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>error</span></span></span><span> </span><span class="meta property-list css"><span class="punctuation section property-list begin bracket curly css"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>color</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant other color rgb-value hex css"><span class="punctuation definition constant css"><span>#</span></span><span>f00</span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>1</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="punctuation section property-list end bracket curly css"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta selector css"><span class="entity other attribute-name class css"><span class="punctuation definition entity css"><span>.</span></span><span>example-button</span></span></span><span> </span><span class="meta property-list css"><span class="punctuation section property-list begin bracket curly css"><span>{</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>font-size</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>1</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="meta property-name css"><span class="support type property-name css"><span>padding</span></span></span><span class="punctuation separator key-value css"><span>:</span></span><span class="meta property-value css"><span class="constant numeric css"><span>0.5</span><span class="keyword other unit em css"><span>em</span></span></span></span><span class="punctuation terminator rule css"><span>;</span></span></span></span></div><div class="line"><span class="text marko"><span class="meta property-list css"><span> </span><span class="punctuation section property-list end bracket curly css"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation section scope end css"><span>}</span></span></span></div><div class="line"><span class="text marko"><span> </span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>b</span></span><span class="punctuation definition tag end open html"><span>></span></span><span>Github Token</span><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>b</span></span><span class="punctuation definition tag end close html"><span>></span></span><span>:</span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>input</span></span><span> </span><span class="entity other attribute-name html"><span>type</span></span><span class="punctuation separator key-value html"><span>=</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>text</span><span class="punctuation definition string end js"><span>"</span></span></span><span> </span><span class="entity other attribute-name html"><span>value</span></span><span class="punctuation separator key-value html"><span>=</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span class="meta section marko-placeholder"><span class="keyword operator marko"><span>${</span></span><span class="entity name type"><span>state</span></span><span>.token</span><span class="keyword operator marko"><span>}</span></span></span><span class="punctuation definition string end js"><span>"</span></span></span><span> </span><span class="support function marko-attribute"><span>on-change</span></span><span class="meta brace round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>updateToken</span><span class="punctuation definition string end js"><span>'</span></span></span><span>)</span><span class="punctuation definition tag end self-close html"><span>></span></span><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>br</span></span><span class="punctuation definition tag end self-close html"><span>></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>button</span></span><span class="entity other attribute-name shorthand"><span>.example-button</span></span><span> </span><span class="support function marko-attribute"><span>on-click</span></span><span class="meta brace round js"><span>(</span></span><span class="string quoted single js"><span class="punctuation definition string begin js"><span>'</span></span><span>makeCall</span><span class="punctuation definition string end js"><span>'</span></span></span><span>)</span><span class="punctuation definition tag end open html"><span>></span></span></span></div><div class="line"><span class="text marko"><span> Make a Call</span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>button</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>br</span></span><span class="punctuation definition tag end self-close html"><span>/></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>b</span></span><span class="punctuation definition tag end open html"><span>></span></span><span>Response</span><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>b</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>div</span></span><span class="entity other attribute-name shorthand"><span>.error</span></span><span class="punctuation definition tag end open html"><span>></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta section marko-placeholder"><span class="keyword operator marko"><span>${</span></span><span class="entity name type"><span>state</span></span><span>.error</span><span class="keyword operator marko"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>div</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin open html"><span><</span></span><span class="entity name tag open html"><span>textarea</span></span><span class="entity other attribute-name shorthand"><span>.jsonData</span></span><span> </span><span class="entity other attribute-name html"><span>rows</span></span><span class="punctuation separator key-value html"><span>=</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>50</span><span class="punctuation definition string end js"><span>"</span></span></span><span> </span><span class="entity other attribute-name html"><span>cols</span></span><span class="punctuation separator key-value html"><span>=</span></span><span class="string quoted double js"><span class="punctuation definition string begin js"><span>"</span></span><span>80</span><span class="punctuation definition string end js"><span>"</span></span></span><span class="punctuation definition tag end open html"><span>></span></span></span></div><div class="line"><span class="text marko"><span> </span><span class="meta section marko-placeholder"><span class="keyword operator marko"><span>${</span></span><span class="entity name type"><span>state</span></span><span>.jsonData</span><span class="keyword operator marko"><span>}</span></span></span></span></div><div class="line"><span class="text marko"><span class="punctuation definition tag begin close html"><span></</span></span><span class="entity name tag close html"><span>textarea</span></span><span class="punctuation definition tag end close html"><span>></span></span></span></div></pre><div class="running-example"><b id="s4-_r0">Github Token</b>: <input type="text" value="" id="s4-_r1" data-marko='{"onchange":"updateToken s4"}'><br id="s4-_r2"><button class="example-button" id="s4-_r3" data-marko='{"onclick":"makeCall s4"}'>Make a Call</button><br id="s4-_r4"><b id="s4-_r5">Response</b><div class="error" id="s4-_r6"></div><textarea rows="50" cols="80" class="jsonData" id="s4-_r7">
</textarea></div></div></header></div><footer class="site-footer"><span><img src="/ebay-e69eedab.svg"> open source</span><div class="copyright">Copyright © 2017 eBay Inc. — <a href="https://github.com/trooba/trooba/blob/master/LICENSE">The MIT License</a></div></footer><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103058606-1', 'trooba.github.io');
ga('send', 'pageview');
</script><script>
((window.gitter = {}).chat = {}).options = {
room: 'trooba/general'
};
</script><script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script><script src="/index-a3622654.js"></script>
<script>$_mod.ready();</script><script>(function(){var w=window;w.$components=(w.$components||[]).concat({"o":{"w":[["s0-c0",1,{"class":"search"},{"d":[["blur","shrink","s0-c0-input",null],["focus","grow","s0-c0-input",null]]}],["s0",0,{},{"b":[["toggle-menu"]]}],["s1-c0",3,{},{}],["s1-c1",1,{"class":"search"},{"d":[["blur","shrink","s1-c1-input",null],["focus","grow","s1-c1-input",null]]}],["s1",2,{},{"r":["sidebar"]}],["s2",4,{},{"_":1}],["s3",5,{"_target":{"path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/slot-machine-example/index.marko.js","ak_":true,"meta":{"deps":["package: ./browser.json",{"type":"css","code":".reels {\n color:#09c;\n font-size:3em;\n }\n .example-button {\n font-size:1em;\n padding:0.5em;\n }","virtualPath":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/slot-machine-example/index.marko.css","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/slot-machine-example/index.marko"},{"type":"require","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/slot-machine-example/index.marko"}]},"deps":[{"type":"package","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/slot-machine-example/browser.json"},null,null]}},{"r":["_r0","_r1"],"s":{"reels":"🍊 🍉 🍈"},"_":1}],["s4",6,{"_target":{"path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/xhr-example/index.marko.js","ak_":true,"meta":{"deps":["package: ./browser.json",{"type":"css","code":".jsonData {\n color:#09c;\n font-size:0.5em;\n }\n .error {\n color:#f00;\n font-size:1em;\n }\n .example-button {\n font-size:1em;\n padding:0.5em;\n }","virtualPath":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/xhr-example/index.marko.css","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/xhr-example/index.marko"},{"type":"require","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/xhr-example/index.marko"}]},"deps":[{"type":"package","path":"/Users/dsemenov/Views/trooba-website-x/routes/index/components/xhr-example/browser.json"},null,null]}},{"r":["_r0","_r1","_r2","_r3","_r4","_r5","_r6","_r7"],"s":{"token":"","jsonData":"","error":""},"_":1}]],"t":["/trooba-website$1.0.0/components/site-header/component-browser","/trooba-website$1.0.0/components/site-search/component-browser","/trooba-website$1.0.0/components/doc-sidebar/component-browser","/trooba-website$1.0.0/components/doc-sidebar/components/version-switcher/component-browser","/trooba-website$1.0.0/routes/index/components/home-hero/index.marko","/trooba-website$1.0.0/routes/index/components/slot-machine-example/index.marko","/trooba-website$1.0.0/routes/index/components/xhr-example/index.marko"]},"$$":[{"l":["w",6,2,"_target","deps",1],"r":["w",6,2,"_target","meta","deps",1]},{"l":["w",6,2,"_target","deps",2],"r":["w",6,2,"_target","meta","deps",2]},{"l":["w",7,2,"_target","deps",1],"r":["w",7,2,"_target","meta","deps",1]},{"l":["w",7,2,"_target","deps",2],"r":["w",7,2,"_target","meta","deps",2]}]})||w.$components})()</script></body></html>