Packages

nitro

11.4.15
11.4.16 11.4.15 11.4.14 9.9.7 9.9.6 8.2.4 8.2.3 8.2.2 8.2.1 8.2.0 7.12.1 7.10.0 7.9.3 7.9.2 7.9.1 7.9.0 7.8.3 7.8.2 7.8.0 7.7.1 7.7.0 7.6.2 7.6.1 7.6.0 7.5.0 7.4.2 7.4.1 7.4.0 7.2.1 7.2.0 7.1.1 7.1.0 6.12.0 6.11.11 6.11.10 6.11.9 6.11.8 6.11.7 6.11.6 6.11.4 6.11.2 6.11.1 6.10.9 6.10.8 6.10.7 6.10.6 6.10.5 6.10.4 6.10.3 6.10.2 6.10.1 6.9.1 6.6.1 6.5.0 6.4.4 6.4.3 6.4.2 6.4.1 6.4.0 5.12.4 5.12.3 5.12.2 5.12.1 5.12.0 5.11.1 5.11.0 5.9.2 5.9.1 5.8.5 5.8.4 5.8.3 5.8.1 5.8.0 5.6.1 5.5.1 5.4.3 5.4.2 5.4.1 5.3.1 5.3.0 5.2.1 5.1.7 5.1.6 5.1.5 5.1.4 5.1.3 5.1.2 5.1.1 4.12.11 4.12.10 4.12.9 4.12.8 4.12.7 4.12.6 4.12.5 4.12.4 4.12.3 4.12.2 4.12.1 4.12.0 4.11.13 4.11.12 4.11.11 4.11.10 4.11.9 4.11.8 4.11.7 4.11.6 4.11.5 4.11.4 4.11.3 4.11.2 4.11.1 4.11.0 4.10.9 4.10.8 4.10.7 4.10.6 4.10.5 4.10.4 4.10.3 4.10.2 4.10.1 4.10.0 4.7.7 4.7.4 4.7.3 4.7.2 4.7.1 4.7.0 4.4.1 4.4.0 1.4.0

NITRO Nitrogen Web Framework

HexDocs

Current section

Files

Jump to
Readme
133 Versions
0 Dependencies
Dependants
Files
Activity
nitro man nitro.htm
Raw

man/nitro.htm 

<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.dev">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/ua/deps/nitro/man/nitro.htm">UA</a>

      <a href="#">EN</a>

    </div>

  </div>

</nav>

<header>

    <a href="../index.html"><img src="https://openmoji.org/data/color/svg/1F525.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>

        <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>

        <h4 id="q">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>

        <h4 id="qc">qc(atom()) -> term().</h4>

        <p>Retrieves from URL query string the particular value by its key.</p>

        <figure><code> event(init) -> io:format("~p~n",[nitro:qc(:name)]);</code></figure>

        <h4 id="jse">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>

        <h4 id=hte">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;"&lt;a&gt;&lt;/a&gt;"&gt;&gt;).

"&#38;lt;a&#38;gt;&#38;lt;/a&#38;gt;"</code></figure>

        <h4 id="wire">wire(list(#action{})) -> [].</h4>

        <p>Updates the process dictionary <b>actions</b> variable with the new list of records inherited 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>

        <h4 id="render">render(list(#action{} | #element{})) -> binary().</h4>

        <p>Renders HTML5 binary string by the record inherited 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>

        <h4 id="insert_top">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>

        <h4 id="insert_bottom">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>

        <h4 id="insert_adjacent">insert_adjacent(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">Adjacent</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>

        <h4 id="update">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 id="clear">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>

        <h4 id="remove">remove(atom()) -> [].</h4>

        <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 &#38;&#38; x.parentNode.removeChild(x);"&gt;&gt;

 ok</code></figure>

        <h4 id="display">display(atom(),atom()) -> [].</h4>

        <p>Wires a JavaScript that manipulate <b>style</b> field of a given DOM element.</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>

        <h4 id="compact">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></figure>

 <br/>

 <br/>

    </section>

    

</main>

<footer> 2005—2021 © Synrc Research Center </footer>

<script>function drop(){document.getElementById("dropdown").classList.toggle("show");}</script>

</body>

</html>