n4u
/
nitro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
							<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Maxim Sokhatsky" />
<title>NITRO</title>
<link rel="stylesheet" href="https://n2o.dev/blank.css" />
<link rel="stylesheet" href="https://n2o.dev/zima.css" />
</head>
<body>
<nav>
    <a href="https://n2o.dev">DEV</a>
    <a href="https://nitro.n2o.space">NITRO</a>
    <a href="#" style="background:#ededed;">API</a>
  <div class="dropdown">
    <a onclick="drop()" class="dropbtn">EN</a>
    <div id="dropdown" class="dropdown-content">
      <a href="https://n2o.dev/deps/nitro/man/ua/nitro.htm">UA</a>
      <a href="#">EN</a>
    </div>
  </div>
</nav>
<header>
    <a href="../index.html"><img src="https://n2o.space/img/Synrc Neo.svg" /></a>
    <h1>NITRO</h1>
</header>
<main>
    <section>
        <h3>INTRO</h3>
        <p>The refined SYNRC API of the Nitrogen Web Framework brought to us by Rusty Klophaus.</p>
    </section>
    <section>
        <h3>API</h3>
        <a name="q"></a>
        <p>The basic Rusty's idea was to stream small pieces of JavaScript
           to the thin client that performs simple <b>eval</b>. This is
           server side rendering framework with SDK for creating rich and complex
           control elements such as virtual grid or file upload element.</p>
        <a name="jse"></a>
        <h4>q(atom()) -> term().</h4>
        <p>Retrieves from process dictionary by atom-key the value of client DOM element
           passed by over the network in <b>#ev</b> record as a part of <b>#pickle</b> message.</p>
        <figure><code> event(click) -> io:format("~p~n",[nitro:q(:name)]);</code></figure>
        <a name="hte"></a>
        <h4>jse([] | binary()) -> [] | binary().</h4>
        <p>Performs JavaScript escaping that is safe to eval and <b>&lt;script&gt;</b> injection. See more about
           <a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html">XSS</a>.</p>
        <figure><code> > nitro:jse(&lt;&lt;"Ім'я"/utf8&gt;&gt;).
 &lt;&lt;"Ім\\'я"/utf8&gt;&gt;</code></figure>
        <a name="wire"></a>
        <h4>hte([] | binary()) -> [] | binary().</h4>
        <p>Performs HTML escaping that is safe to display as a text on a page.</p>
        <figure><code> > nitro:hte(&lt;&lt;"<a></a>"&gt;&gt;).
"&#38;lt;a&#38;gt;&lt;/a&#38;gt;"</code></figure>
        <a name="render"></a>
        <h4>wire(list(#action{})) -> [].</h4>
        <p>Updates the process dictionary <b>actions</b> variable with the new list of records inhereted from <b>#action</b>.
           This process dictionary variable is a way data is passed from your <b>event</b> handlers into the output rendering pipeline.
           This is fixed by Nitrogen Web Framework API.</p>
        <figure><code> > nitro:wire([#alert{text="hello"}]).
 []
 > get(actions).
 [#wire{ancestor = action,
        trigger = [],
        target = [],
        module = action_wire,
        actions = [#alert{ancestor = action,
                          trigger = [],
                          target = [],
                          module = action_alert,
                          actions = [],
                          source = [],
                          text = "hello"}],
        source = []}]</code></figure>
        <a name="insert_top"></a>
        <h4>render(list(#action{} | #element{})) -> binary().</h4>
        <p>Renders HTML5 binary string by the record inhereted from <b>#element</b>.</p>
        <figure><code> > rr(nitro).
 [abbr,action,address,alert,api,area,article,aside,audio,
  author,b,base,bdi,bdo,bind,blockquote,body,br,button,
  calendar,canvas,caption,checkbox,cite,code,col,colgroup,
  color,command|...]
 &gt; #element{}.
 #element{ancestor = element,id = [],module = undefined,
          delegate = [],validation = [],validate = [],actions = [],
          class = [],style = [],source = [],onmouseover = [],
          onkeypress = [],onchange = [],onkeyup = [],onkeydown = [],
          onclick = [],data_fields = [],aria_states = [],body = [],
          role = [],tabindex = [],show_if = true,html_tag = [],
          title = [],postback = [],accesskey = [],
          contenteditable = [],contextmenu = [],...}
 &lt; nitro:render(#alert{text="hello"}).
 ["alert(\"","hello","\");"]
 &gt; nitro:render(#element{}).
 [&lt;&lt;"&lt;"&gt;&gt;,&lt;&lt;"element"&gt;&gt;,
  [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]],
  &lt;&lt;"&gt;"&gt;&gt;,&lt;&lt;&gt;&gt;,&lt;&lt;"&lt;/"&gt;&gt;,&lt;&lt;"element"&gt;&gt;,&lt;&lt;"&gt;"&gt;&gt;]
 &gt; iolist_to_binary(nitro:render(#element{})).
 &lt;&lt;"&lt;element&gt;&lt;/element&gt;"&gt;&gt;
 &gt; iolist_to_binary(nitro:render(setelement(1,#element{},tag))).
 &lt;&lt;"&lt;tag&gt;&lt;/tag&gt;"&gt;&gt;</code></figure>
        <a name="insert_bottom"></a>
        <h4>insert_top(atom(), list(#element{})) -> [].</h4>
        <p>Wires a JavaScript for adding the NITRO element as a first child of a given DOM id at the client.</p>
        <figure><code> > nitro:insert_top(panel,#button{}).
 []
 > nitro:actions().
 [#wire{ancestor = action,trigger = [],target = [],
        module = action_wire,
        actions = "qi('panel').insertBefore((function(){var div = qn('div');
                   div.innerHTML = '&lt;button type=\"button\"&gt;&lt;/button&gt;';
                   return div.firstChild; })(),qi('panel').firstChild);",
        source = []}]
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"qi('panel').insertBefore((function(){var div
 = qn('div'); div.innerHTML = '&lt;button type=\"button\"&gt;&lt;/button&gt;';
 return div.firstChild; })(),qi('panel').firstChild);"&gt;&gt;
 ok</code></figure>
        <a name="insert_adjustment"></a>
        <h4>insert_bottom(atom(), list(#element{})) -> [].</h4>
        <p>Wires a JavaScript for adding the NITRO element as a last child of a given DOM id at the client.</p>
        <figure><code> > nitro:insert_bottom(panel,#button{}).
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"(function(){ var div = qn('div'); div.innerHTML =
 '&lt;button type=\"button\"&gt;&lt;/button&gt;';qi('panel')
 .appendChild(div.firstChild); })();"&gt;&gt;
 ok</code></figure>
        <a name="update"></a>
        <h4>insert_adjustment(beforebegin | afterbegin
               | beforeend | afterend, atom(), list(#element{})) -> [].</h4>
        <p>Wires a JavaScript for different
        <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML">adjustment</a> modes.</p>
        <figure><code> > nitro:insert_adjacent(beforebegin, panel, #button{}).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"qi('panel').insertAdjacentHTML('beforebegin',
 '&lt;button type=\"button\"&gt;&lt;/button&gt;');"&gt;&gt;
 ok</code></figure>
        <a name="clear"></a>
        <h4>update(atom(), list(#element{})) -> [].</h4>
        <p>Wires a JavaScript for updating the DOM element at the client by the render of a given NITRO element.</p>
        <figure><code> > nitro:update(panel,#button{}).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"qi('panel').outerHTML='&lt;button type=\"button\"&lt;&gt;/button>';"&gt;&gt;
 ok</code></figure>
        <h4>remove(atom()) -> [].</h4>
        <h4>clear(atom()) -> [].</h4>
        <p>Wires a JavaScript that clear at the client all the children of a given DOM element id.</p>
        <figure><code> > nitro:clear(panel).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"var x = qi('panel'); while (x.firstChild) x.removeChild(x.firstChild);""&gt;&gt;
 ok</code></figure>
        <a name="display"></a>
        <a name="remove"></a>
        <p>Wires a JavaScript that remove particular DOM element from the tree at the client.</p>
        <figure><code> > nitro:remove(panel).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"var x=qi('panel'); x && x.parentNode.removeChild(x);"&gt;&gt;
 ok</code></figure>
        <a name="compact"></a>
        <h4>display(atom(),atom()) -> [].</h4>
        <p>Wires a JavaScript that remove particular DOM element from the tree at the client.</p>
        <figure><code> > nitro:display(panel,none).
 []
 > rp(iolist_to_binary(nitro:render(nitro:actions()))).
 &lt;&lt;"{ var x = qi('panel'); if (x) x.style.display = 'none'; }"&gt;&gt;
 ok</code></figure>
         <p>Wires a JavaScript that manipulate <b>style</b> field of a given DOM element.</p>
        <h4>compact(term()) -> binary().</h4>
         <p>Pretty-prints the term into more compact format to display by a recursive cut
            the tuples with no more that 9 elements width.</p>
        <figure><code> &gt; iolist_to_binary(nitro:compact({1,2,3,4,5,{1,2,3,4},7,8,9,10,11})).
 &lt;&lt;"{1,2,3,4,5,{1,2,3,4},7,8,9}"&gt;&gt;</code>
 <br/>
 <br/>
    </section>
    
</main>
<footer> 2005—2019 © Synrc Research Center </footer>
<script>function drop(){document.getElementById("dropdown").classList.toggle("show");}</script>
</body>
</html>