ovto 0.2.1 → 0.2.2

data/docs/api/Ovto/State/MissingValue.html

@@ -6,7 +6,7 @@
 <title>
   Exception: Ovto::State::MissingValue
   
-    &mdash; Documentation by YARD 0.9.12
+    &mdash; Documentation by YARD 0.9.16
   
 </title>
 
@@ -125,9 +125,9 @@
 </div>
 
       <div id="footer">
-  Generated on Fri Jun  1 21:07:20 2018 by
+  Generated on Wed Nov  7 18:02:02 2018 by
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
-  0.9.12 (ruby-2.4.2).
+  0.9.16 (ruby-2.5.3).
 </div>
 
     </div>

data/docs/api/Ovto/State/UnknownKey.html

@@ -6,7 +6,7 @@
 <title>
   Exception: Ovto::State::UnknownKey
   
-    &mdash; Documentation by YARD 0.9.12
+    &mdash; Documentation by YARD 0.9.16
   
 </title>
 
@@ -125,9 +125,9 @@
 </div>
 
       <div id="footer">
-  Generated on Fri Jun  1 21:07:20 2018 by
+  Generated on Wed Nov  7 18:02:02 2018 by
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
-  0.9.12 (ruby-2.4.2).
+  0.9.16 (ruby-2.5.3).
 </div>
 
     </div>

data/docs/api/Ovto/WiredActions.html

@@ -6,7 +6,7 @@
 <title>
   Class: Ovto::WiredActions
   
-    &mdash; Documentation by YARD 0.9.12
+    &mdash; Documentation by YARD 0.9.16
   
 </title>
 
@@ -216,12 +216,12 @@
       <pre class="lines">
 
 
-3
-4
-5</pre>
+5
+6
+7</pre>
     </td>
     <td>
-      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 3</span>
+      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 5</span>
 
 <span class='kw'>def</span> <span class='id identifier rubyid_initialize'>initialize</span><span class='lparen'>(</span><span class='id identifier rubyid_actions'>actions</span><span class='comma'>,</span> <span class='id identifier rubyid_app'>app</span><span class='comma'>,</span> <span class='id identifier rubyid_runtime'>runtime</span><span class='rparen'>)</span>
   <span class='ivar'>@actions</span><span class='comma'>,</span> <span class='ivar'>@app</span><span class='comma'>,</span> <span class='ivar'>@runtime</span> <span class='op'>=</span> <span class='id identifier rubyid_actions'>actions</span><span class='comma'>,</span> <span class='id identifier rubyid_app'>app</span><span class='comma'>,</span> <span class='id identifier rubyid_runtime'>runtime</span>
@@ -254,12 +254,12 @@
       <pre class="lines">
 
 
-7
-8
-9</pre>
+9
+10
+11</pre>
     </td>
     <td>
-      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 7</span>
+      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 9</span>
 
 <span class='kw'>def</span> <span class='id identifier rubyid_method_missing'>method_missing</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='comma'>,</span> <span class='id identifier rubyid_args_hash'>args_hash</span><span class='op'>=</span><span class='lbrace'>{</span><span class='rbrace'>}</span><span class='rparen'>)</span>
   <span class='id identifier rubyid_invoke_action'>invoke_action</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='comma'>,</span> <span class='id identifier rubyid_args_hash'>args_hash</span><span class='rparen'>)</span>
@@ -313,12 +313,12 @@
       <pre class="lines">
 
 
-11
-12
-13</pre>
+13
+14
+15</pre>
     </td>
     <td>
-      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 11</span>
+      <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 13</span>
 
 <span class='kw'>def</span> <span class='id identifier rubyid_respond_to?'>respond_to?</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='rparen'>)</span>
   <span class='ivar'>@actions</span><span class='period'>.</span><span class='id identifier rubyid_respond_to?'>respond_to?</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='rparen'>)</span>
@@ -333,9 +333,9 @@
 </div>
 
       <div id="footer">
-  Generated on Fri Jun  1 21:07:20 2018 by
+  Generated on Wed Nov  7 18:02:02 2018 by
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
-  0.9.12 (ruby-2.4.2).
+  0.9.16 (ruby-2.5.3).
 </div>
 
     </div>

data/docs/api/_index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>
-  Documentation by YARD 0.9.12
+  Documentation by YARD 0.9.16
   
 </title>
 
@@ -52,7 +52,7 @@
         <div class="clear"></div>
       </div>
 
-      <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.12</h1>
+      <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.16</h1>
 <div id="listing">
   <h1 class="alphaindex">Alphabetic Index</h1>
   
@@ -69,6 +69,8 @@
 <h2>Namespace Listing A-Z</h2>
 
 
+  <ul class="toplevel"><li><span class='object_link'><a href="top-level-namespace.html" title="Top Level Namespace (root)">Top Level Namespace</a></span></li></ul>
+
 
 
 <table>
@@ -219,9 +221,9 @@
 </div>
 
       <div id="footer">
-  Generated on Fri Jun  1 21:07:20 2018 by
+  Generated on Wed Nov  7 18:02:01 2018 by
   <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
-  0.9.12 (ruby-2.4.2).
+  0.9.16 (ruby-2.5.3).
 </div>
 
     </div>

data/docs/api/actions.html

@@ -4,7 +4,7 @@
     <head>
         <meta charset="UTF-8">
         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-        <title>Actions · GitBook</title>
+        <title>Ovto::Actions · GitBook</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="description" content="">
         <meta name="generator" content="GitBook 3.2.3">
@@ -134,7 +134,7 @@
                 <a href="app.html">
             
                     
-                    App
+                    Ovto::App
             
                 </a>
             
@@ -147,7 +147,7 @@
                 <a href="state.html">
             
                     
-                    State
+                    Ovto::State
             
                 </a>
             
@@ -160,7 +160,7 @@
                 <a href="actions.html">
             
                     
-                    Actions
+                    Ovto::Actions
             
                 </a>
             
@@ -173,7 +173,20 @@
                 <a href="component.html">
             
                     
-                    Component
+                    Ovto::Component
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.3.5" data-path="fetch.html">
+            
+                <a href="fetch.html">
+            
+                    
+                    Ovto.fetch
             
                 </a>
             
@@ -261,7 +274,7 @@
     <!-- Title -->
     <h1>
         <i class="fa fa-circle-o-notch fa-spin"></i>
-        <a href=".." >Actions</a>
+        <a href=".." >Ovto::Actions</a>
     </h1>
 </div>
 
@@ -316,6 +329,28 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
 </code></pre><p>Arguments are almost the same as the original but you don&apos;t need to provide <code>state</code>;
 it is automatically passed by <code>Ovto::WiredActions</code> class. It also updates the app
 state with the return value of the action, and schedules rendering the view.</p>
+<h2 id="skipping-state-update">Skipping state update</h2>
+<p>An action may return <code>nil</code> when no app state changes are needed.</p>
+<p>Promises are also special values which does not cause state changes (see the next section).</p>
+<h2 id="async-actions">Async actions</h2>
+<p>When calling server apis, you cannot tell how the app state will change until the server responds.
+In such cases, you can call another action via <code>actions</code> to tell Ovto to reflect the api result to the app state.</p>
+<p>Example:</p>
+<pre><code class="lang-rb">  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
+    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">fetch_tasks</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
+      Ovto.fetch(<span class="hljs-string">&apos;/tasks.json&apos;</span>).<span class="hljs-keyword">then</span> {|tasks_json|
+        actions.receive_tasks(<span class="hljs-symbol">tasks:</span> tasks_json)
+      }.fail {|e|
+        console.log(<span class="hljs-string">&quot;failed:&quot;</span>, e)
+      }
+    <span class="hljs-keyword">end</span>
+
+    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">receive_tasks</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>, <span class="hljs-symbol">tasks_json:</span>)</span></span>
+      tasks = tasks_json.map{|item| Task.new(**item)}
+      <span class="hljs-keyword">return</span> {<span class="hljs-symbol">tasks:</span> tasks}
+    <span class="hljs-keyword">end</span>
+  <span class="hljs-keyword">end</span>
+</code></pre>
 
                                 
                                 </section>
@@ -343,12 +378,12 @@ state with the return value of the action, and schedules rendering the view.</p>
 
             
                 
-                <a href="state.html" class="navigation navigation-prev " aria-label="Previous page: State">
+                <a href="state.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::State">
                     <i class="fa fa-angle-left"></i>
                 </a>
                 
                 
-                <a href="component.html" class="navigation navigation-next " aria-label="Next page: Component">
+                <a href="component.html" class="navigation navigation-next " aria-label="Next page: Ovto::Component">
                     <i class="fa fa-angle-right"></i>
                 </a>
                 
@@ -359,7 +394,7 @@ state with the return value of the action, and schedules rendering the view.</p>
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"Actions","level":"1.3.3","depth":2,"next":{"title":"Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/actions.md","mtime":"2018-05-15T12:55:41.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
+            gitbook.page.hasChanged({"page":{"title":"Ovto::Actions","level":"1.3.3","depth":2,"next":{"title":"Ovto::Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/actions.md","mtime":"2018-10-27T08:57:46.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
         });
     </script>
 </div>

data/docs/api/app.html

@@ -4,7 +4,7 @@
     <head>
         <meta charset="UTF-8">
         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-        <title>App · GitBook</title>
+        <title>Ovto::App · GitBook</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="description" content="">
         <meta name="generator" content="GitBook 3.2.3">
@@ -132,7 +132,7 @@
                 <a href="app.html">
             
                     
-                    App
+                    Ovto::App
             
                 </a>
             
@@ -145,7 +145,7 @@
                 <a href="state.html">
             
                     
-                    State
+                    Ovto::State
             
                 </a>
             
@@ -158,7 +158,7 @@
                 <a href="actions.html">
             
                     
-                    Actions
+                    Ovto::Actions
             
                 </a>
             
@@ -171,7 +171,20 @@
                 <a href="component.html">
             
                     
-                    Component
+                    Ovto::Component
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.3.5" data-path="fetch.html">
+            
+                <a href="fetch.html">
+            
+                    
+                    Ovto.fetch
             
                 </a>
             
@@ -259,7 +272,7 @@
     <!-- Title -->
     <h1>
         <i class="fa fa-circle-o-notch fa-spin"></i>
-        <a href=".." >App</a>
+        <a href=".." >Ovto::App</a>
     </h1>
 </div>
 
@@ -333,6 +346,19 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
 <p>Here we added <code>color_idx</code> to app state and <code>update_color</code> action to change it.
 The button is updated to have the color indicated by <code>color_idx</code> and
 now has <code>onclick</code> event handler which executes the action.</p>
+<h2 id="calling-actions-on-startup">Calling actions on startup</h2>
+<p>To invoke certain actions on app startup, define <code>MyApp#setup</code> and use <code>MyApp#actions</code>.</p>
+<p>Example:</p>
+<pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
+  <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">setup</span></span>
+    actions.fetch_data()
+  <span class="hljs-keyword">end</span>
+
+  ...
+<span class="hljs-keyword">end</span>
+
+MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;ovto-view&apos;</span>)
+</code></pre>
 
                                 
                                 </section>
@@ -361,7 +387,7 @@ now has <code>onclick</code> event handler which executes the action.</p>
             
                 
                 
-                <a href="state.html" class="navigation navigation-next navigation-unique" aria-label="Next page: State">
+                <a href="state.html" class="navigation navigation-next navigation-unique" aria-label="Next page: Ovto::State">
                     <i class="fa fa-angle-right"></i>
                 </a>
                 
@@ -372,7 +398,7 @@ now has <code>onclick</code> event handler which executes the action.</p>
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"App","level":"1.3.1","depth":2,"next":{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"previous":{"title":"API","level":"1.3","depth":1,"ref":"","articles":[{"title":"App","level":"1.3.1","depth":2,"path":"api/app.md","ref":"api/app.md","articles":[]},{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},{"title":"Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},{"title":"Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]}]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/app.md","mtime":"2018-05-15T12:55:33.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
+            gitbook.page.hasChanged({"page":{"title":"Ovto::App","level":"1.3.1","depth":2,"next":{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"previous":{"title":"API","level":"1.3","depth":1,"ref":"","articles":[{"title":"Ovto::App","level":"1.3.1","depth":2,"path":"api/app.md","ref":"api/app.md","articles":[]},{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},{"title":"Ovto::Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},{"title":"Ovto::Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},{"title":"Ovto.fetch","level":"1.3.5","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]}]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/app.md","mtime":"2018-10-27T08:04:24.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
         });
     </script>
 </div>

data/docs/api/component.html

@@ -4,7 +4,7 @@
     <head>
         <meta charset="UTF-8">
         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
-        <title>Component · GitBook</title>
+        <title>Ovto::Component · GitBook</title>
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="description" content="">
         <meta name="generator" content="GitBook 3.2.3">
@@ -57,6 +57,8 @@
     <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
 
     
+    <link rel="next" href="fetch.html" />
+    
     
     <link rel="prev" href="actions.html" />
     
@@ -132,7 +134,7 @@
                 <a href="app.html">
             
                     
-                    App
+                    Ovto::App
             
                 </a>
             
@@ -145,7 +147,7 @@
                 <a href="state.html">
             
                     
-                    State
+                    Ovto::State
             
                 </a>
             
@@ -158,7 +160,7 @@
                 <a href="actions.html">
             
                     
-                    Actions
+                    Ovto::Actions
             
                 </a>
             
@@ -171,7 +173,20 @@
                 <a href="component.html">
             
                     
-                    Component
+                    Ovto::Component
+            
+                </a>
+            
+
+            
+        </li>
+    
+        <li class="chapter " data-level="1.3.5" data-path="fetch.html">
+            
+                <a href="fetch.html">
+            
+                    
+                    Ovto.fetch
             
                 </a>
             
@@ -259,7 +274,7 @@
     <!-- Title -->
     <h1>
         <i class="fa fa-circle-o-notch fa-spin"></i>
-        <a href=".." >Component</a>
+        <a href=".." >Ovto::Component</a>
     </h1>
 </div>
 
@@ -279,31 +294,33 @@
 <h2 id="render-method">&apos;render&apos; method</h2>
 <p><code>render</code> is the only method you need to define in the <code>View</code> class.
 It must take the global app state as a keyword argument <code>state:</code>.</p>
-<pre><code>  class View &lt; Ovto::Component
-    def render(state:)
-      o &apos;div&apos; do
-        o &apos;h1&apos;, &apos;Your todos&apos;
-        o &apos;ul&apos; do
-          state.todos.each do |todo|
-            o &apos;li&apos;, todo.title
-          end
-        end
-      end
-    end
-  end
-</code></pre><h3 id="morethanonenode-error">MoreThanOneNode error</h3>
+<pre><code class="lang-rb">  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> &lt; Ovto::Component</span>
+    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
+      o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
+        o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
+        o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
+          state.todos.each <span class="hljs-keyword">do</span> |todo|
+            o <span class="hljs-string">&apos;li&apos;</span>, todo.title
+          <span class="hljs-keyword">end</span>
+        <span class="hljs-keyword">end</span>
+      <span class="hljs-keyword">end</span>
+    <span class="hljs-keyword">end</span>
+  <span class="hljs-keyword">end</span>
+</code></pre>
+<h3 id="morethanonenode-error">MoreThanOneNode error</h3>
 <p>If you missed the surrounding &apos;div&apos; tag, Ovto raises an <code>MoreThanOneNode</code> error. <code>render</code> must create a single DOM node.</p>
-<pre><code>    def render(state:)
-      o &apos;h1&apos;, &apos;Your todos&apos;
-      o &apos;ul&apos; do
-        state.todos.each do |todo|
-          o &apos;li&apos;, todo.title
-        end
-      end
-    end
-
-#=&gt; $MoreThanOneNode {name: &quot;MoreThanOneNode&quot;, message: &quot;MyApp::View#render must generate a single DOM node. Please wrap the tags with a &apos;div&apos; or something.&quot;, stack: &quot;MoreThanOneNode: MyApp::View#render must generate &#x2026;opbox/proj/ovto/example/tutorial/app.js:22887:18)&quot;}
-</code></pre><h2 id="the-o-method">The &apos;o&apos; method</h2>
+<pre><code class="lang-rb">    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
+      o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
+      o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
+        state.todos.each <span class="hljs-keyword">do</span> |todo|
+          o <span class="hljs-string">&apos;li&apos;</span>, todo.title
+        <span class="hljs-keyword">end</span>
+      <span class="hljs-keyword">end</span>
+    <span class="hljs-keyword">end</span>
+
+<span class="hljs-comment">#=&gt; $MoreThanOneNode {name: &quot;MoreThanOneNode&quot;, message: &quot;MyApp::View#render must generate a single DOM node. Please wrap the tags with a &apos;div&apos; or something.&quot;, stack: &quot;MoreThanOneNode: MyApp::View#render must generate &#x2026;opbox/proj/ovto/example/tutorial/app.js:22887:18)&quot;}</span>
+</code></pre>
+<h2 id="the-o-method">The &apos;o&apos; method</h2>
 <p><a name="the-o-method"></a></p>
 <p><code>Ovto::Component#o</code> describes your app&apos;s view. For example:</p>
 <pre><code class="lang-rb">o <span class="hljs-string">&apos;div&apos;</span>
@@ -359,7 +376,8 @@ You can get the input value with <code>e.target.value</code> here.</p>
 <p><a href="https://github.com/hyperapp/hyperapp#keys" target="_blank">https://github.com/hyperapp/hyperapp#keys</a></p>
 <h2 id="sub-components">Sub components</h2>
 <p><code>o</code> can take another component class to render.</p>
-<pre><code class="lang-rb">  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TodoList</span> &lt; Ovto::Component</span>
+<pre><code class="lang-rb">  <span class="hljs-comment"># Sub component</span>
+  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TodoList</span> &lt; Ovto::Component</span>
     <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">todos:</span>)</span></span>
       o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
         todos.each <span class="hljs-keyword">do</span> |todo|
@@ -369,6 +387,7 @@ You can get the input value with <code>e.target.value</code> here.</p>
     <span class="hljs-keyword">end</span>
   <span class="hljs-keyword">end</span>
 
+  <span class="hljs-comment"># Main View class</span>
   <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> &lt; Ovto::Component</span>
     <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
       o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
@@ -378,11 +397,13 @@ You can get the input value with <code>e.target.value</code> here.</p>
     <span class="hljs-keyword">end</span>
   <span class="hljs-keyword">end</span>
 </code></pre>
-<p>Note that you cannot call <code>o</code> more than once in the <code>render</code> method  of sub components too.
-In other words, sub component must yield a single DOM element.</p>
+<p>For sub components, the <code>state:</code> keyword of <code>render</code> method is optional. </p>
 <h2 id="text-node">Text node</h2>
 <p>Sometimes you may want to create a text node.</p>
 <pre><code class="lang-rb"><span class="hljs-comment">#=&gt; &lt;div&gt;Age: &lt;span class=&apos;age&apos;&gt;12&lt;/a&gt;&lt;/div&gt;</span>
+<span class="hljs-comment">#        ~~~~~</span>
+<span class="hljs-comment">#          |</span>
+<span class="hljs-comment">#          +--Raw text (not enclosed by an inner tag)</span>
 </code></pre>
 <p><code>o</code> generates a text node when <code>&apos;text&apos;</code> is specified as tag name. The above
 HTML could be described like this.</p>
@@ -418,11 +439,15 @@ HTML could be described like this.</p>
 
             
                 
-                <a href="actions.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Actions">
+                <a href="actions.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::Actions">
                     <i class="fa fa-angle-left"></i>
                 </a>
                 
                 
+                <a href="fetch.html" class="navigation navigation-next " aria-label="Next page: Ovto.fetch">
+                    <i class="fa fa-angle-right"></i>
+                </a>
+                
             
         
     </div>
@@ -430,7 +455,7 @@ HTML could be described like this.</p>
     <script>
         var gitbook = gitbook || [];
         gitbook.push(function() {
-            gitbook.page.hasChanged({"page":{"title":"Component","level":"1.3.4","depth":2,"next":{"title":"Guides","level":"1.4","depth":1,"ref":"","articles":[{"title":"Debugging","level":"1.4.1","depth":2,"path":"guides/debugging.md","ref":"guides/debugging.md","articles":[]},{"title":"Development","level":"1.4.2","depth":2,"path":"guides/development.md","ref":"guides/development.md","articles":[]}]},"previous":{"title":"Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/component.md","mtime":"2018-06-01T12:05:28.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
+            gitbook.page.hasChanged({"page":{"title":"Ovto::Component","level":"1.3.4","depth":2,"next":{"title":"Ovto.fetch","level":"1.3.5","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]},"previous":{"title":"Ovto::Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/component.md","mtime":"2018-10-27T07:15:05.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
         });
     </script>
 </div>