UNPKG

spyne

Version:

Reactive Real-DOM Framework for Advanced Javascript applications

github.com/spynejs/spyne

706 lines (500 loc) • 75 kB

JavaScript

const spyneDocsDomStr = `<main id="app" class="reveal"> <header id="header"><ul id="my-list"> <li class="has-svg logo" data-channel="ROUTE" data-page-id="home" data-section="" data-menu-item="" id="home"> <svg version="1.1" id="spyne-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 120" style="enable-background:new 0 0 400 120;" xml:space="preserve"> <style type="text/css"> .st0-header { fill: #fff; } </style> <g> <path class="st0-header" d="M218.3,6c0,2.2-4.5,11.2-13.6,26.9c-4.8,8.2-8.3,15-10.5,20.4c-0.4,1.3-1,3.2-1.5,5.5 c-0.9,4.3-1.3,10.8-1.4,12.7c-0.2,7.5-0.4,12.3-0.4,19.1c-0.1,15.4,0.2,22.3,0.3,23h5.3c-0.8-12-1.2-23.7-1.2-35.1 c0-6,3.4-14.8,10.2-26.3c2.9-5,9.2-14.5,18.8-28.4C231,14,234.4,8,234.4,6H218.3z"></path> <path class="st0-header" d="M186.8,113.6l0.4-21.3l0.4-20.6c-0.1-15.5,0.9-13.5-1-19.5c-2.4-5.3-5.9-11.9-10.6-19.8 C166.5,16.2,161.8,7.4,161.8,6h-17c0,1.4,3.2,6.9,9.5,16.5c8.3,12.4,14.2,21.9,17.8,28.4c6.3,11.7,9.5,20.9,9.5,27.5 c0,12.1-0.4,23.8-1.1,35.2H186.8z"></path> </g> <g> <path class="st0-header" d="M321.6,113.6H310c0-0.9-9-14.1-27.1-39.6c-18.9-26.7-29.7-43.6-32.3-50.6h-0.8c1,13.3,1.5,24.7,1.5,34.2 c0,18.5,0.4,37.2,1.2,56.1h-13.9c0.9-17.9,1.4-36.8,1.4-56.6c0-19.5-0.5-36.5-1.4-51.1h15.9c0,1.5,8.3,14.1,25,37.7 c17.4,24.8,27.3,41,29.8,48.5h0.8c-0.9-13.5-1.4-24.9-1.4-34.2c0-20.4-0.4-37.7-1.2-51.9h14.1c-0.9,14.6-1.4,31.6-1.4,51.1 C320.2,76.9,320.6,95.7,321.6,113.6z"></path> <path class="st0-header" d="M396.1,101.2l-0.5,12.5h-66.6c0.8-17.1,1.2-35.9,1.2-56.6c0-19.4-0.4-36.4-1.2-51.1h62.5l-0.7,12.3 c-15.2-0.7-31.2-1-48.2-1c0.3,8.5,0.5,20.1,0.5,34.6c14.7,0,27.7-0.3,39.2-1v12.3c-12.2-0.5-25.3-0.7-39.2-0.7 c0,14.2,0.2,27.5,0.7,39.9C362.1,102.4,379.5,102,396.1,101.2z"></path> </g> <g> <path class="st0-header" d="M74.5,85.8c0,20.4-14.2,30.6-42.6,30.6c-10.4,0-19.6-1.2-27.6-3.6l2.9-13c9.3,3.2,18.1,4.8,26.4,4.8 c18.7,0,28.1-5.3,28.1-15.9c0-5.3-2.4-9.9-7.3-13.7c-3.3-2.5-9.6-5.9-19.2-10.2c-10-4.5-17.1-8.6-21.1-12.3 C8.5,47.4,5.8,40.8,5.8,33c0-8.2,2.8-14.8,8.5-19.9c6.3-5.7,15.3-8.6,26.9-8.6c13.1,0,22.1,0.9,27,2.6l-2,13.1 c-8.4-2.6-17.3-4-26.7-4c-14.2,0-21.3,4.7-21.3,14.2c0,4.6,2,8.4,6.1,11.5c2.6,1.9,8.5,4.9,17.5,8.8c10.3,4.5,17.8,8.7,22.3,12.7 C71,69.5,74.5,77,74.5,85.8z"></path> <path class="st0-header" d="M150.5,32.7c0,12.6-4.8,22-14.3,28.2c-9.5,6.2-22.4,9.3-38.5,9.3c-2,0-3.8-0.1-5.3-0.2c0,12,0.4,26.5,1.3,43.6 H77.9c0.8-15.7,1.2-34.5,1.2-56.6c0-19-0.4-36-1.2-51.1h11.8c1.3,0,4.9-0.1,10.9-0.2c6-0.2,11.1-0.2,15.3-0.2 c10.6,0,19,2.4,25.3,7.2C147.4,17.5,150.5,24.2,150.5,32.7z M136.7,37.5c0-14.2-9.7-21.3-29-21.3c-4.7,0-10.1,0.4-16,1.2 c0.4,9,0.6,23,0.6,42c1.9,0.1,4.3,0.2,7.1,0.2C124.2,59.6,136.7,52.3,136.7,37.5z"></path> </g> </svg> </li> <li data-channel="ROUTE" data-el="#docs" data-page-id="guide" data-section="overview" data-menu-item="" id="docs">OVERVIEW</li> <li data-channel="ROUTE" data-page-id="guide" data-section="reference" data-menu-item="" id="reference" class="">REFERENCE</li> <li data-channel="ROUTE" data-page-id="about" data-section="" data-menu-item="" id="about" class="">ABOUT</li> <li class="has-svg github" data-channel="UI" data-type="link" data-link-type="external" data-url="https://github.com/spynejs/spyne"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" style="enable-background:new 0 0 120 120;" xml:space="preserve"> <style type="text/css"> .github-st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;} </style> <path class="github-st0" d="M61.6,5C30.3,5,4.9,30.4,4.9,61.7c0,25.1,16.3,46.3,38.8,53.8c2.8,0.5,3.9-1.2,3.9-2.7c0-1.3,0-4.9-0.1-9.6 c-15.8,3.4-19.1-7.6-19.1-7.6c-2.6-6.6-6.3-8.3-6.3-8.3c-5.2-3.5,0.4-3.4,0.4-3.4c5.7,0.4,8.7,5.8,8.7,5.8 c5.1,8.7,13.3,6.2,16.5,4.7c0.5-3.7,2-6.2,3.6-7.6c-12.6-1.4-25.8-6.3-25.8-28c0-6.2,2.2-11.3,5.8-15.2c-0.6-1.4-2.5-7.2,0.6-15 c0,0,4.8-1.5,15.6,5.8c4.5-1.3,9.4-1.9,14.2-1.9c4.8,0,9.7,0.7,14.2,1.9c10.8-7.3,15.6-5.8,15.6-5.8c3.1,7.8,1.1,13.6,0.6,15 c3.6,4,5.8,9,5.8,15.2c0,21.8-13.3,26.6-25.9,28c2,1.8,3.9,5.2,3.9,10.5c0,7.6-0.1,13.7-0.1,15.6c0,1.5,1,3.3,3.9,2.7 c22.5-7.5,38.8-28.8,38.8-53.8C118.3,30.4,92.9,5,61.6,5z"></path> </svg> </li> </ul></header><section id="page-holder"><section id="guide" class="page-view reference" style="opacity: 1;"><div id="spyne-content-references" class="guide-content"><dl id="channels-base" class="page-guide-class"><dt class="title"> <h2>ChannelsBase</h2> </dt> <dd class="constructor"> <div class="constructor-description"> <h5>DESCRIPTION:</h5> <p>This class is extended when creating a new Channel.</p> </div> <div class="constructor-method"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">new ChannelsBase<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">props</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">object</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">This</span> <span class="string">json</span> <span class="string">object</span> <span class="string">takes</span> <span class="string">in</span> <span class="string">parameters</span> <span class="string">to</span> <span class="string">initialize</span> <span class="string">the</span> <span class="string">channel</span></p> </div> <h3 class="right-paren">) {</h3> </div> </dd> <dd class="props-holder"> <div><h5>PROPERTIES:</h5> <div class="table-props code-example ">  <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">this</span><span class="syntax">.</span><span class="method">observer</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">Subject</span><span class="syntax">(</span><span class="syntax">)</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">Subject</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">Depending</span> <span class="string">on</span> <span class="string">required</span> <span class="string">behavior</span><span class="syntax">,</span> <span class="string">this</span> <span class="string">can</span> <span class="string">be</span> <span class="string">a</span> <span class="string">Subject</span><span class="syntax">,</span> <span class="string">BehaviorSubject</span> <span class="string">or</span> <span class="method">AsynSubject</span><span class="syntax">.</span></p> <p class="empty"></p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> </div> <h3 class="bracket bracket-right">}</h3> </div></dd> <dd class="methods"> <h5>METHODS</h5> <ul class="methods-list"> <li id="method-channels-base-get-channel" class="method method-getChannel"> <h2 class="method">getChannel()</h2> <dd class="constructor"> <div class="constructor-description"> <p>This method allows channels to subscribe to other channels.</p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.getChannel<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">channel</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">String</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">The</span> <span class="string">registered</span> <span class="string">name</span> <span class="string">of</span> <span class="string">the</span> <span class="string">requested</span> <span class="method">channel</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="returns"> <h5>RETURNS:</h5> <h4 class="constructor param-name">This will return the observer$ Subject variable.</h4> </dd> </li></ul> </dd> </dl><dl id="dom-item" class="page-guide-class"><dt class="title"> <h2>DomEl</h2> </dt> <dd class="constructor"> <div class="constructor-description"> <h5>DESCRIPTION:</h5> <p>This class is mostly used internally by the ViewStream object, but it can be also used to generate a lightweight dom element that contains no props or parameters.</p> </div> <div class="constructor-method"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">new DomEl<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">tagName</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">string</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="string">tagname</span> <span class="string">for</span> <span class="string">this</span> <span class="string">dom</span> <span class="method">element</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">attributes</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">object</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">any</span> <span class="string">domElement</span> <span class="string">attribute</span> <span class="syntax">(</span><span class="string">except</span> <span class="string">for</span> <span class="keyword">class</span> <span class="syntax">)</span></p> <p class="constructor code-example param-method"><span class="string">content</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">string</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">string</span> <span class="string">for</span> <span class="string">text</span> <span class="string">tags</span> <span class="string">and</span> <span class="string">json</span> <span class="string">for</span> <span class="string">templates</span></p> <p class="constructor code-example param-method"><span class="string">template</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">template</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">undefined</span></p> </div> <h3 class="right-paren">) {</h3> </div> </dd> <dd class="props-holder"> <div><h5>PROPERTIES:</h5> <div class="table-props code-example ">  <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">tagName</span> <span class="syntax">=</span> <span class="string">'</span><span class="string">div</span><span class="string">'</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">String</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">Default</span> <span class="string">for</span> <span class="method">tagName</span><span class="syntax">.</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">attributes</span> <span class="syntax">=</span> <span class="syntax">{</span><span class="syntax">}</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">Object</span></p> <p class="code-example constructor right-comment param-description"></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">content</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">String</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">This</span> <span class="string">is</span> <span class="string">either</span> <span class="string">a</span> <span class="string">String</span> <span class="string">for</span> <span class="string">an</span> <span class="string">element</span> <span class="string">or</span> <span class="string">JSON</span> <span class="string">data</span> <span class="string">object</span> <span class="string">for</span> <span class="string">a</span> <span class="method">template</span><span class="syntax">.</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">template</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">String</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">If</span> <span class="string">a</span> <span class="string">template</span> <span class="string">is</span> <span class="string">defined</span><span class="syntax">,</span> <span class="string">the</span> <span class="string">DomEl</span> <span class="string">will</span> <span class="string">use</span> <span class="method">it</span><span class="syntax">.</span></p> <p class="empty"></p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> </div> <h3 class="bracket bracket-right">}</h3> </div></dd> <dd class="methods"> <h5>METHODS</h5> <ul class="methods-list"> <li id="method-dom-item-render" class="method method-render"> <h2 class="method">render()</h2> <dd class="constructor"> <div class="constructor-description"> <p>This method will render the HTML Element</p> </div> <div class="constructor-method method-item hide-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.render<span class="paren">(</span></h3> <div class="constructor-params code-example"> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="returns"> <h5>RETURNS:</h5> <h4 class="constructor param-name">el - The HTML element.</h4> </dd> </li></ul> </dd> </dl><dl id="view-stream" class="page-guide-class"><dt class="title"> <h2>ViewStream</h2> </dt> <dd class="constructor"> <div class="constructor-description"> <h5>DESCRIPTION:</h5> <p>The ViewStream is a special type of view that not only renders dom elements, but can be combined with other ViewStreams to create a 'smart' dom tree that automatically renders, change state and disposes of itself based on other ViewsStreams within its branch and based on subscribed channels.</p> </div> <div class="constructor-method"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">new ViewStream<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">props</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">object</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">This</span> <span class="string">json</span> <span class="string">object</span> <span class="string">takes</span> <span class="string">in</span> <span class="string">parameters</span> <span class="string">to</span> <span class="string">generate</span> <span class="string">or</span> <span class="string">reference</span> <span class="string">the</span> <span class="string">dom</span> <span class="string">element</span></p> </div> <h3 class="right-paren">) {</h3> </div> </dd> <dd class="props-holder"> <div><h5>PROPERTIES:</h5> <div class="table-props code-example ">  <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">tagName</span> <span class="syntax">=</span> <span class="string">'</span><span class="string">div</span><span class="string">'</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">string</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">This</span> <span class="string">can</span> <span class="string">be</span> <span class="string">any</span> <span class="string">dom</span> <span class="string">tag</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">el</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">domItem</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">if</span> <span class="string">defined</span><span class="syntax">,</span> <span class="method">ViewStream</span> <span class="string">will</span> <span class="string">connect</span> <span class="string">to</span> <span class="string">that</span> <span class="string">element</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">data</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">string</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">string</span> <span class="string">for</span> <span class="string">innerText</span> <span class="string">or</span> <span class="string">Json</span> <span class="string">object</span> <span class="string">for</span> <span class="string">html</span> <span class="string">template</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">animateIn</span> <span class="syntax">=</span> <span class="string">false</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">boolean</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">animates</span> <span class="string">in</span> <span class="string">View</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">animateInTime</span> <span class="syntax">=</span> <span class="syntax">.</span><span class="method">5</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">number</span></p> <p class="code-example constructor right-comment param-description"></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">animateOut</span> <span class="syntax">=</span> <span class="string">false</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">boolean</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">animates</span> <span class="string">in</span> <span class="string">View</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">animateOutTime</span> <span class="syntax">=</span> <span class="syntax">.</span><span class="method">5</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">number</span></p> <p class="code-example constructor right-comment param-description"></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">sendLifecyleEvents</span> <span class="syntax">=</span> <span class="string">false</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">boolean</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">When</span> <span class="string">set</span> <span class="string">to</span> <span class="string">true</span><span class="syntax">,</span> <span class="string">the</span> <span class="string">view</span> <span class="string">will</span> <span class="string">automatically</span> <span class="string">send</span> <span class="string">its</span> <span class="string">rendering</span> <span class="string">and</span> <span class="string">disposing</span> <span class="string">events</span> <span class="string">to</span> <span class="string">the</span> <span class="string">VIEW_LIFECYCLE</span> <span class="method">Channel</span><span class="syntax">.</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">id</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">string</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">generates</span> <span class="string">a</span> <span class="string">random</span> <span class="string">id</span> <span class="string">if</span> <span class="string">left</span> <span class="string">undefined</span></p> <p class="empty"></p>  <p class="empty"></p> <p class="constructor param-name"><span class="method">props</span><span class="syntax">.</span><span class="method">template</span> <span class="syntax">=</span> <span class="string">undefined</span><span class="syntax">;</span></p> <p class="code-example constructor left-comment param-type"><span class="string">template</span></p> <p class="code-example constructor right-comment param-description"> <span class="string">html</span> <span class="string">template</span></p> <p class="empty"></p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> <p class="empty"> </p> </div> <h3 class="bracket bracket-right">}</h3> </div></dd> <dd class="methods"> <h5>METHODS</h5> <ul class="methods-list"> <li id="method-view-stream-append-to-dom" class="method method-appendToDom"> <h2 class="method">appendToDom()</h2> <dd class="constructor"> <div class="constructor-description"> <p>Appends a ViewStream object to an existing dom element.</p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.appendToDom<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">node</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">dom</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="method">ViewStream</span> <span class="string">child</span> <span class="string">that</span> <span class="string">is</span> <span class="string">to</span> <span class="string">be</span> <span class="method">attached</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="examples"> <h5>EXAMPLE:</h5> <section class="code-example"> <pre style="position:relative;text-align:left;"><span class="syntax">/</span><span class="syntax">/</span> <span class="keyword">return</span><span class="string">s</span> <span class="syntax"><</span><span class="string">body</span><span class="syntax">></span> <span class="syntax"><</span><span class="string">h2</span><span class="syntax">></span><span class="string">Hello</span> <span class="string">World</span><span class="syntax"><</span><span class="syntax">/</span><span class="string">h2</span><span class="syntax">></span> <span class="syntax"><</span><span class="syntax">/</span><span class="string">body</span><span class="syntax">></span> <span class="keyword">let</span> <span class="method">viewStream</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="string">'</span><span class="string">h2</span><span class="string">'</span><span class="syntax">,</span> <span class="string">'</span><span class="string">Hello</span> <span class="string">World</span><span class="string">'</span><span class="syntax">)</span><span class="syntax">;</span> <span class="method">viewStream</span><span class="syntax">.</span><span class="method">appendToDom</span><span class="syntax">(</span><span class="method">document</span><span class="syntax">.</span><span class="method">body</span><span class="syntax">)</span><span class="syntax">;</span></pre> </section> </dd> </li><li id="method-view-stream-prepend-to-dom" class="method method-prependToDom"> <h2 class="method">prependToDom()</h2> <dd class="constructor"> <div class="constructor-description"> <p>Prepends the current ViewStream object to an existing dom element.</p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.prependToDom<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">node</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">dom</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="method">ViewStream</span> <span class="string">child</span> <span class="string">that</span> <span class="string">is</span> <span class="string">to</span> <span class="string">be</span> <span class="method">attached</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="examples"> <h5>EXAMPLE:</h5> <section class="code-example"> <pre style="position:relative;text-align:left;"><span class="method">this</span><span class="syntax">.</span><span class="method">prependToDom</span><span class="syntax">(</span><span class="method">document</span><span class="syntax">.</span><span class="method">body</span><span class="syntax">)</span><span class="syntax">;</span></pre> </section> </dd> </li><li id="method-view-stream-append-view" class="method method-appendView"> <h2 class="method">appendView()</h2> <dd class="constructor"> <div class="constructor-description"> <p>This method appends a child ViewStream object. <br>After the attachment, rxjs observables are exchanged between the parent and child ViewStream objects.<br><br></p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.appendView<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">v</span>,</p> <p class="constructor code-example param-type left-comment"><span class="method">ViewStream</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="method">ViewStream</span> <span class="string">child</span> <span class="string">that</span> <span class="string">is</span> <span class="string">to</span> <span class="string">be</span> <span class="method">attached</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">query</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">string</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">a</span> <span class="string">querySelector</span> <span class="string">within</span> <span class="string">this</span> <span class="method">ViewStream</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="examples"> <h5>EXAMPLE:</h5> <section class="code-example"> <pre style="position:relative;text-align:left;"><span class="syntax">/</span><span class="syntax">/</span> <span class="keyword">return</span><span class="string">s</span> <span class="syntax"><</span><span class="string">body</span><span class="syntax">></span> <span class="syntax"><</span><span class="string">main</span><span class="syntax">></span> <span class="syntax"><</span><span class="string">h2</span><span class="syntax">></span><span class="string">Hello</span> <span class="string">World</span><span class="syntax"><</span><span class="syntax">/</span><span class="string">h2</span><span class="syntax">></span> <span class="syntax"><</span><span class="syntax">/</span><span class="string">main</span><span class="syntax">></span> <span class="syntax"><</span><span class="syntax">/</span><span class="string">body</span><span class="syntax">></span> <span class="keyword">let</span> <span class="method">parentView</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="string">'</span><span class="string">main</span><span class="string">'</span><span class="syntax">)</span><span class="syntax">;</span> <span class="method">parentView</span><span class="syntax">.</span><span class="method">appendToDom</span><span class="syntax">(</span><span class="method">document</span><span class="syntax">.</span><span class="method">body</span><span class="syntax">)</span><span class="syntax">;</span> <span class="keyword">let</span> <span class="method">childView</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="syntax">{</span><span class="string">tagName</span><span class="syntax">:</span><span class="string">'</span><span class="string">h2</span><span class="string">'</span><span class="syntax">,</span> <span class="string">data</span><span class="syntax">:</span><span class="string">'</span><span class="string">Hello</span> <span class="string">World</span><span class="string">'</span><span class="syntax">}</span><span class="syntax">;</span> <span class="method">parentView</span><span class="syntax">.</span><span class="method">appendView</span><span class="syntax">(</span><span class="string">childView</span><span class="syntax">)</span></pre> </section> </dd> </li><li id="method-view-stream-append-view-to-parent" class="method method-appendViewToParentEl"> <h2 class="method">appendViewToParentEl()</h2> <dd class="constructor"> <div class="constructor-description"> <p>This method appends a child ViewStream object to a parent ViewStream object.</p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.appendViewToParentEl<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">v</span>,</p> <p class="constructor code-example param-type left-comment"><span class="method">ViewStream</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="method">ViewStream</span> <span class="method">parent</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">query</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">string</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">a</span> <span class="string">querySelector</span> <span class="string">within</span> <span class="string">this</span> <span class="method">ViewStream</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">this</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">level</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">parameters</span> <span class="string">can</span> <span class="string">attach</span> <span class="string">the</span> <span class="string">viewStream</span><span class="string">'</span><span class="string">s</span> <span class="string">dom</span> <span class="string">element</span> <span class="string">up</span> <span class="string">the</span> <span class="string">dom</span> <span class="string">tree</span> <span class="string">while</span> <span class="string">still</span> <span class="string">maintaining</span> <span class="string">the</span> <span class="string">parent</span><span class="string">-</span><span class="string">child</span> <span class="string">relationship</span> <span class="string">of</span> <span class="string">the</span> <span class="method">ViewStream</span> <span class="method">objects</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="examples"> <h5>EXAMPLE:</h5> <section class="code-example"> <pre style="position:relative;text-align:left;"><span class="syntax">/</span><span class="syntax">/</span> <span class="keyword">return</span><span class="string">s</span> <span class="syntax"><</span><span class="string">body</span><span class="syntax">></span> <span class="syntax"><</span><span class="string">main</span><span class="syntax">></span> <span class="syntax"><</span><span class="string">h2</span><span class="syntax">></span><span class="string">Hello</span> <span class="string">World</span><span class="syntax"><</span><span class="syntax">/</span><span class="string">h2</span><span class="syntax">></span> <span class="syntax"><</span><span class="syntax">/</span><span class="string">main</span><span class="syntax">></span> <span class="syntax"><</span><span class="syntax">/</span><span class="string">body</span><span class="syntax">></span> <span class="keyword">let</span> <span class="method">parentView</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="string">'</span><span class="string">main</span><span class="string">'</span><span class="syntax">)</span><span class="syntax">;</span> <span class="method">parentView</span><span class="syntax">.</span><span class="method">appendToDom</span><span class="syntax">(</span><span class="method">document</span><span class="syntax">.</span><span class="method">body</span><span class="syntax">)</span><span class="syntax">;</span> <span class="keyword">let</span> <span class="method">childView</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="syntax">{</span><span class="string">tagName</span><span class="syntax">:</span><span class="string">'</span><span class="string">h2</span><span class="string">'</span><span class="syntax">,</span> <span class="string">data</span><span class="syntax">:</span><span class="string">'</span><span class="string">Hello</span> <span class="string">World</span><span class="string">'</span><span class="syntax">}</span><span class="syntax">;</span> <span class="method">childView</span><span class="syntax">.</span><span class="method">appendToParent</span><span class="syntax">(</span><span class="string">parentView</span><span class="syntax">)</span></pre> </section> </dd> </li><li id="method-view-stream-prepend-view-to-parent" class="method method-prependViewToParentEl"> <h2 class="method">prependViewToParentEl()</h2> <dd class="constructor"> <div class="constructor-description"> <p>This method prepends a child ViewStream object to a parent ViewStream object.</p> </div> <div class="constructor-method method-item show-constructor"> <h5>CONSTRUCTOR:</h5> <h3 class="constructor-instance">this.prependViewToParentEl<span class="paren">(</span></h3> <div class="constructor-params code-example"> <p class="constructor code-example param-method"><span class="string">v</span>,</p> <p class="constructor code-example param-type left-comment"><span class="method">ViewStream</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">the</span> <span class="method">ViewStream</span> <span class="method">parent</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">query</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">string</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">a</span> <span class="string">querySelector</span> <span class="string">within</span> <span class="string">this</span> <span class="method">ViewStream</span><span class="syntax">.</span></p> <p class="constructor code-example param-method"><span class="string">level</span>,</p> <p class="constructor code-example param-type left-comment"><span class="string">number</span>: </p> <p class="constructor code-example param-description right-comment"><span class="string">this</span> <span class="string">parameter</span> <span class="string">can</span> <span class="string">attach</span> <span class="string">the</span> <span class="string">viewStream</span><span class="string">'</span><span class="string">s</span> <span class="string">dom</span> <span class="string">element</span> <span class="string">up</span> <span class="string">the</span> <span class="string">dom</span> <span class="string">tree</span> <span class="string">while</span> <span class="string">still</span> <span class="string">maintaining</span> <span class="string">the</span> <span class="string">parent</span><span class="string">-</span><span class="string">child</span> <span class="string">relationship</span> <span class="string">of</span> <span class="string">the</span> <span class="method">ViewStream</span> <span class="method">objects</span><span class="syntax">.</span></p> </div> <h3 class="right-paren">)</h3> </div> </dd> <dd class="examples"> <h5>EXAMPLE:</h5> <section class="code-example"> <pre style="position:relative;text-align:left;"><span class="keyword">let</span> <span class="method">parentView</span> <span class="syntax">=</span> <span class="string">new</span> <span class="method">ViewStream</span><span class="syntax">(</span><span class="string">'</span><span class="string">main</span><span class="string">'</span><