ovto 0.4.0 → 0.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/Gemfile.lock +1 -0
  4. data/docs/api/Ovto.html +4 -4
  5. data/docs/api/Ovto/Actions.html +55 -3
  6. data/docs/api/Ovto/App.html +3 -3
  7. data/docs/api/Ovto/Component.html +67 -15
  8. data/docs/api/Ovto/Component/MoreThanOneNode.html +3 -3
  9. data/docs/api/Ovto/Runtime.html +12 -4
  10. data/docs/api/Ovto/State.html +3 -3
  11. data/docs/api/Ovto/State/MissingValue.html +3 -3
  12. data/docs/api/Ovto/State/UnknownKey.html +3 -3
  13. data/docs/api/Ovto/WiredActions.html +84 -15
  14. data/docs/api/_index.html +4 -4
  15. data/docs/api/actions.html +30 -17
  16. data/docs/api/app.html +28 -15
  17. data/docs/api/component.html +29 -17
  18. data/docs/api/fetch.html +25 -12
  19. data/docs/api/file.README.html +6 -6
  20. data/docs/api/frames.html +1 -1
  21. data/docs/api/index.html +6 -6
  22. data/docs/api/js/app.js +11 -0
  23. data/docs/api/method_list.html +62 -38
  24. data/docs/api/state.html +25 -12
  25. data/docs/api/top-level-namespace.html +3 -3
  26. data/docs/gitbook/gitbook.js +2 -2
  27. data/docs/gitbook/theme.js +1 -1
  28. data/docs/guides/debugging.html +25 -12
  29. data/docs/guides/development.html +25 -12
  30. data/docs/guides/tutorial.html +33 -20
  31. data/docs/index.html +33 -14
  32. data/docs/search_index.json +1 -1
  33. data/examples/sinatra/Gemfile.lock +7 -6
  34. data/examples/static/Gemfile.lock +3 -1
  35. data/lib/ovto/version.rb +1 -1
  36. data/ovto.gemspec +1 -0
  37. metadata +16 -3
data/docs/api/_index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>
7
- Documentation by YARD 0.9.16
7
+ Documentation by YARD 0.9.19
8
8
 
9
9
  </title>
10
10
 
@@ -52,7 +52,7 @@
52
52
  <div class="clear"></div>
53
53
  </div>
54
54
 
55
- <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.16</h1>
55
+ <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.19</h1>
56
56
  <div id="listing">
57
57
  <h1 class="alphaindex">Alphabetic Index</h1>
58
58
 
@@ -221,9 +221,9 @@
221
221
  </div>
222
222
 
223
223
  <div id="footer">
224
- Generated on Mon Dec 24 21:23:44 2018 by
224
+ Generated on Fri Apr 19 12:51:38 2019 by
225
225
  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
226
- 0.9.16 (ruby-2.5.3).
226
+ 0.9.19 (ruby-2.5.5).
227
227
  </div>
228
228
 
229
229
  </div>
data/docs/api/actions.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>Ovto::Actions · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
- <meta name="generator" content="GitBook 3.2.2">
10
+ <meta name="generator" content="GitBook 3.2.3">
11
11
 
12
12
 
13
13
 
@@ -102,7 +102,20 @@
102
102
 
103
103
  </li>
104
104
 
105
- <li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
105
+ <li class="chapter " data-level="1.2" data-path="../">
106
+
107
+ <a href="../">
108
+
109
+
110
+ Introduction
111
+
112
+ </a>
113
+
114
+
115
+
116
+ </li>
117
+
118
+ <li class="chapter " data-level="1.3" data-path="../guides/tutorial.html">
106
119
 
107
120
  <a href="../guides/tutorial.html">
108
121
 
@@ -115,7 +128,7 @@
115
128
 
116
129
  </li>
117
130
 
118
- <li class="chapter " data-level="1.3" >
131
+ <li class="chapter " data-level="1.4" >
119
132
 
120
133
  <span>
121
134
 
@@ -129,7 +142,7 @@
129
142
  <ul class="articles">
130
143
 
131
144
 
132
- <li class="chapter " data-level="1.3.1" data-path="app.html">
145
+ <li class="chapter " data-level="1.4.1" data-path="app.html">
133
146
 
134
147
  <a href="app.html">
135
148
 
@@ -142,7 +155,7 @@
142
155
 
143
156
  </li>
144
157
 
145
- <li class="chapter " data-level="1.3.2" data-path="state.html">
158
+ <li class="chapter " data-level="1.4.2" data-path="state.html">
146
159
 
147
160
  <a href="state.html">
148
161
 
@@ -155,7 +168,7 @@
155
168
 
156
169
  </li>
157
170
 
158
- <li class="chapter active" data-level="1.3.3" data-path="actions.html">
171
+ <li class="chapter active" data-level="1.4.3" data-path="actions.html">
159
172
 
160
173
  <a href="actions.html">
161
174
 
@@ -168,7 +181,7 @@
168
181
 
169
182
  </li>
170
183
 
171
- <li class="chapter " data-level="1.3.4" data-path="component.html">
184
+ <li class="chapter " data-level="1.4.4" data-path="component.html">
172
185
 
173
186
  <a href="component.html">
174
187
 
@@ -181,7 +194,7 @@
181
194
 
182
195
  </li>
183
196
 
184
- <li class="chapter " data-level="1.3.5" data-path="fetch.html">
197
+ <li class="chapter " data-level="1.4.5" data-path="fetch.html">
185
198
 
186
199
  <a href="fetch.html">
187
200
 
@@ -199,7 +212,7 @@
199
212
 
200
213
  </li>
201
214
 
202
- <li class="chapter " data-level="1.4" >
215
+ <li class="chapter " data-level="1.5" >
203
216
 
204
217
  <span>
205
218
 
@@ -213,7 +226,7 @@
213
226
  <ul class="articles">
214
227
 
215
228
 
216
- <li class="chapter " data-level="1.4.1" data-path="../guides/debugging.html">
229
+ <li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
217
230
 
218
231
  <a href="../guides/debugging.html">
219
232
 
@@ -226,7 +239,7 @@
226
239
 
227
240
  </li>
228
241
 
229
- <li class="chapter " data-level="1.4.2" data-path="../guides/development.html">
242
+ <li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
230
243
 
231
244
  <a href="../guides/development.html">
232
245
 
@@ -294,8 +307,8 @@
294
307
  the <code>Actions</code> class. Here is some more conventions:</p>
295
308
  <ul>
296
309
  <li>You must use keyword arguments</li>
297
- <li>You must provide <code>state:</code> keyword to receive the app state</li>
298
310
  <li>You must return state updates as a Hash. It will be merged into the app state.</li>
311
+ <li>You can get the current state by <code>state</code> method</li>
299
312
  </ul>
300
313
  <p>Example:</p>
301
314
  <pre><code class="lang-rb"><span class="hljs-keyword">require</span> <span class="hljs-string">&apos;opal&apos;</span>
@@ -307,13 +320,13 @@ the <code>Actions</code> class. Here is some more conventions:</p>
307
320
  <span class="hljs-keyword">end</span>
308
321
 
309
322
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
310
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">increment</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>, <span class="hljs-symbol">by:</span>)</span></span>
323
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">increment</span><span class="hljs-params">(<span class="hljs-symbol">by:</span>)</span></span>
311
324
  <span class="hljs-keyword">return</span> {<span class="hljs-symbol">count:</span> state.count + by}
312
325
  <span class="hljs-keyword">end</span>
313
326
  <span class="hljs-keyword">end</span>
314
327
 
315
328
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
316
- <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>
329
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
317
330
  o <span class="hljs-string">&apos;span&apos;</span>, state.count
318
331
  o <span class="hljs-string">&apos;button&apos;</span>, <span class="hljs-symbol">onclick:</span> -&gt;{ actions.increment(<span class="hljs-symbol">by:</span> <span class="hljs-number">1</span>) }
319
332
  <span class="hljs-keyword">end</span>
@@ -337,7 +350,7 @@ state with the return value of the action, and schedules rendering the view.</p>
337
350
  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>
338
351
  <p>Example:</p>
339
352
  <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>
340
- <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>
353
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">fetch_tasks</span></span>
341
354
  Ovto.fetch(<span class="hljs-string">&apos;/tasks.json&apos;</span>).<span class="hljs-keyword">then</span> {|tasks_json|
342
355
  actions.receive_tasks(<span class="hljs-symbol">tasks:</span> tasks_json)
343
356
  }.fail {|e|
@@ -345,7 +358,7 @@ In such cases, you can call another action via <code>actions</code> to tell Ovto
345
358
  }
346
359
  <span class="hljs-keyword">end</span>
347
360
 
348
- <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>
361
+ <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">tasks_json:</span>)</span></span>
349
362
  tasks = tasks_json.map{|item| Task.new(**item)}
350
363
  <span class="hljs-keyword">return</span> {<span class="hljs-symbol">tasks:</span> tasks}
351
364
  <span class="hljs-keyword">end</span>
@@ -394,7 +407,7 @@ In such cases, you can call another action via <code>actions</code> to tell Ovto
394
407
  <script>
395
408
  var gitbook = gitbook || [];
396
409
  gitbook.push(function() {
397
- 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-12-23T09:45:52.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-12-24T12:23:40.758Z"},"basePath":"..","book":{"language":""}});
410
+ gitbook.page.hasChanged({"page":{"title":"Ovto::Actions","level":"1.4.3","depth":2,"next":{"title":"Ovto::Component","level":"1.4.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"Ovto::State","level":"1.4.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":"2019-04-18T08:50:22.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-19T03:51:35.766Z"},"basePath":"..","book":{"language":""}});
398
411
  });
399
412
  </script>
400
413
  </div>
data/docs/api/app.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>Ovto::App · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
- <meta name="generator" content="GitBook 3.2.2">
10
+ <meta name="generator" content="GitBook 3.2.3">
11
11
 
12
12
 
13
13
 
@@ -100,7 +100,20 @@
100
100
 
101
101
  </li>
102
102
 
103
- <li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
103
+ <li class="chapter " data-level="1.2" data-path="../">
104
+
105
+ <a href="../">
106
+
107
+
108
+ Introduction
109
+
110
+ </a>
111
+
112
+
113
+
114
+ </li>
115
+
116
+ <li class="chapter " data-level="1.3" data-path="../guides/tutorial.html">
104
117
 
105
118
  <a href="../guides/tutorial.html">
106
119
 
@@ -113,7 +126,7 @@
113
126
 
114
127
  </li>
115
128
 
116
- <li class="chapter " data-level="1.3" >
129
+ <li class="chapter " data-level="1.4" >
117
130
 
118
131
  <span>
119
132
 
@@ -127,7 +140,7 @@
127
140
  <ul class="articles">
128
141
 
129
142
 
130
- <li class="chapter active" data-level="1.3.1" data-path="app.html">
143
+ <li class="chapter active" data-level="1.4.1" data-path="app.html">
131
144
 
132
145
  <a href="app.html">
133
146
 
@@ -140,7 +153,7 @@
140
153
 
141
154
  </li>
142
155
 
143
- <li class="chapter " data-level="1.3.2" data-path="state.html">
156
+ <li class="chapter " data-level="1.4.2" data-path="state.html">
144
157
 
145
158
  <a href="state.html">
146
159
 
@@ -153,7 +166,7 @@
153
166
 
154
167
  </li>
155
168
 
156
- <li class="chapter " data-level="1.3.3" data-path="actions.html">
169
+ <li class="chapter " data-level="1.4.3" data-path="actions.html">
157
170
 
158
171
  <a href="actions.html">
159
172
 
@@ -166,7 +179,7 @@
166
179
 
167
180
  </li>
168
181
 
169
- <li class="chapter " data-level="1.3.4" data-path="component.html">
182
+ <li class="chapter " data-level="1.4.4" data-path="component.html">
170
183
 
171
184
  <a href="component.html">
172
185
 
@@ -179,7 +192,7 @@
179
192
 
180
193
  </li>
181
194
 
182
- <li class="chapter " data-level="1.3.5" data-path="fetch.html">
195
+ <li class="chapter " data-level="1.4.5" data-path="fetch.html">
183
196
 
184
197
  <a href="fetch.html">
185
198
 
@@ -197,7 +210,7 @@
197
210
 
198
211
  </li>
199
212
 
200
- <li class="chapter " data-level="1.4" >
213
+ <li class="chapter " data-level="1.5" >
201
214
 
202
215
  <span>
203
216
 
@@ -211,7 +224,7 @@
211
224
  <ul class="articles">
212
225
 
213
226
 
214
- <li class="chapter " data-level="1.4.1" data-path="../guides/debugging.html">
227
+ <li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
215
228
 
216
229
  <a href="../guides/debugging.html">
217
230
 
@@ -224,7 +237,7 @@
224
237
 
225
238
  </li>
226
239
 
227
- <li class="chapter " data-level="1.4.2" data-path="../guides/development.html">
240
+ <li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
228
241
 
229
242
  <a href="../guides/development.html">
230
243
 
@@ -303,7 +316,7 @@
303
316
  <span class="hljs-keyword">end</span>
304
317
 
305
318
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
306
- <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>
319
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
307
320
  o <span class="hljs-string">&apos;input&apos;</span>, <span class="hljs-symbol">type:</span> <span class="hljs-string">&apos;button&apos;</span>, <span class="hljs-symbol">value:</span> <span class="hljs-string">&apos;Hello&apos;</span>
308
321
  <span class="hljs-keyword">end</span>
309
322
  <span class="hljs-keyword">end</span>
@@ -323,14 +336,14 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
323
336
  <span class="hljs-keyword">end</span>
324
337
 
325
338
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
326
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">update_color</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
339
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">update_color</span></span>
327
340
  new_idx = (state.color_idx + <span class="hljs-number">1</span>) % COLORS.length
328
341
  <span class="hljs-keyword">return</span> {<span class="hljs-symbol">color_idx:</span> new_idx}
329
342
  <span class="hljs-keyword">end</span>
330
343
  <span class="hljs-keyword">end</span>
331
344
 
332
345
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
333
- <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>
346
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
334
347
  o <span class="hljs-string">&apos;input&apos;</span>, {
335
348
  <span class="hljs-symbol">type:</span> <span class="hljs-string">&apos;button&apos;</span>,
336
349
  <span class="hljs-symbol">value:</span> <span class="hljs-string">&apos;Hello&apos;</span>,
@@ -398,7 +411,7 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
398
411
  <script>
399
412
  var gitbook = gitbook || [];
400
413
  gitbook.push(function() {
401
- 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-12-23T09:45:52.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-12-24T12:23:40.758Z"},"basePath":"..","book":{"language":""}});
414
+ gitbook.page.hasChanged({"page":{"title":"Ovto::App","level":"1.4.1","depth":2,"next":{"title":"Ovto::State","level":"1.4.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"previous":{"title":"API","level":"1.4","depth":1,"ref":"","articles":[{"title":"Ovto::App","level":"1.4.1","depth":2,"path":"api/app.md","ref":"api/app.md","articles":[]},{"title":"Ovto::State","level":"1.4.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},{"title":"Ovto::Actions","level":"1.4.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},{"title":"Ovto::Component","level":"1.4.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},{"title":"Ovto.fetch","level":"1.4.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":"2019-04-18T08:51:42.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-19T03:51:35.766Z"},"basePath":"..","book":{"language":""}});
402
415
  });
403
416
  </script>
404
417
  </div>
data/docs/api/component.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <title>Ovto::Component · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
- <meta name="generator" content="GitBook 3.2.2">
10
+ <meta name="generator" content="GitBook 3.2.3">
11
11
 
12
12
 
13
13
 
@@ -102,7 +102,20 @@
102
102
 
103
103
  </li>
104
104
 
105
- <li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
105
+ <li class="chapter " data-level="1.2" data-path="../">
106
+
107
+ <a href="../">
108
+
109
+
110
+ Introduction
111
+
112
+ </a>
113
+
114
+
115
+
116
+ </li>
117
+
118
+ <li class="chapter " data-level="1.3" data-path="../guides/tutorial.html">
106
119
 
107
120
  <a href="../guides/tutorial.html">
108
121
 
@@ -115,7 +128,7 @@
115
128
 
116
129
  </li>
117
130
 
118
- <li class="chapter " data-level="1.3" >
131
+ <li class="chapter " data-level="1.4" >
119
132
 
120
133
  <span>
121
134
 
@@ -129,7 +142,7 @@
129
142
  <ul class="articles">
130
143
 
131
144
 
132
- <li class="chapter " data-level="1.3.1" data-path="app.html">
145
+ <li class="chapter " data-level="1.4.1" data-path="app.html">
133
146
 
134
147
  <a href="app.html">
135
148
 
@@ -142,7 +155,7 @@
142
155
 
143
156
  </li>
144
157
 
145
- <li class="chapter " data-level="1.3.2" data-path="state.html">
158
+ <li class="chapter " data-level="1.4.2" data-path="state.html">
146
159
 
147
160
  <a href="state.html">
148
161
 
@@ -155,7 +168,7 @@
155
168
 
156
169
  </li>
157
170
 
158
- <li class="chapter " data-level="1.3.3" data-path="actions.html">
171
+ <li class="chapter " data-level="1.4.3" data-path="actions.html">
159
172
 
160
173
  <a href="actions.html">
161
174
 
@@ -168,7 +181,7 @@
168
181
 
169
182
  </li>
170
183
 
171
- <li class="chapter active" data-level="1.3.4" data-path="component.html">
184
+ <li class="chapter active" data-level="1.4.4" data-path="component.html">
172
185
 
173
186
  <a href="component.html">
174
187
 
@@ -181,7 +194,7 @@
181
194
 
182
195
  </li>
183
196
 
184
- <li class="chapter " data-level="1.3.5" data-path="fetch.html">
197
+ <li class="chapter " data-level="1.4.5" data-path="fetch.html">
185
198
 
186
199
  <a href="fetch.html">
187
200
 
@@ -199,7 +212,7 @@
199
212
 
200
213
  </li>
201
214
 
202
- <li class="chapter " data-level="1.4" >
215
+ <li class="chapter " data-level="1.5" >
203
216
 
204
217
  <span>
205
218
 
@@ -213,7 +226,7 @@
213
226
  <ul class="articles">
214
227
 
215
228
 
216
- <li class="chapter " data-level="1.4.1" data-path="../guides/debugging.html">
229
+ <li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
217
230
 
218
231
  <a href="../guides/debugging.html">
219
232
 
@@ -226,7 +239,7 @@
226
239
 
227
240
  </li>
228
241
 
229
- <li class="chapter " data-level="1.4.2" data-path="../guides/development.html">
242
+ <li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
230
243
 
231
244
  <a href="../guides/development.html">
232
245
 
@@ -293,9 +306,9 @@
293
306
  <p>An Ovto app must have <code>MainComponent</code> class, a subclass of <code>Ovto::Component</code>.</p>
294
307
  <h2 id="render-method">&apos;render&apos; method</h2>
295
308
  <p><code>render</code> is the only method you need to define in the <code>MainComponent</code> class.
296
- It must take the global app state as a keyword argument <code>state:</code>.</p>
309
+ You can get the global app state by calling <code>state</code> method.</p>
297
310
  <pre><code class="lang-rb"> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
298
- <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>
311
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
299
312
  o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
300
313
  o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
301
314
  o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
@@ -309,7 +322,7 @@ It must take the global app state as a keyword argument <code>state:</code>.</p>
309
322
  </code></pre>
310
323
  <h3 id="morethanonenode-error">MoreThanOneNode error</h3>
311
324
  <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>
312
- <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>
325
+ <pre><code class="lang-rb"> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
313
326
  o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
314
327
  o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
315
328
  state.todos.each <span class="hljs-keyword">do</span> |todo|
@@ -389,7 +402,7 @@ You can get the input value with <code>e.target.value</code> here.</p>
389
402
 
390
403
  <span class="hljs-comment"># Main component</span>
391
404
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
392
- <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>
405
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
393
406
  o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
394
407
  o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
395
408
  o TodoList, <span class="hljs-symbol">todos:</span> state.todos
@@ -397,7 +410,6 @@ You can get the input value with <code>e.target.value</code> here.</p>
397
410
  <span class="hljs-keyword">end</span>
398
411
  <span class="hljs-keyword">end</span>
399
412
  </code></pre>
400
- <p>For sub components, the <code>state:</code> keyword of <code>render</code> method is optional. </p>
401
413
  <h2 id="text-node">Text node</h2>
402
414
  <p>Sometimes you may want to create a text node.</p>
403
415
  <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>
@@ -455,7 +467,7 @@ HTML could be described like this.</p>
455
467
  <script>
456
468
  var gitbook = gitbook || [];
457
469
  gitbook.push(function() {
458
- 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-12-23T09:45:52.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-12-24T12:23:40.758Z"},"basePath":"..","book":{"language":""}});
470
+ gitbook.page.hasChanged({"page":{"title":"Ovto::Component","level":"1.4.4","depth":2,"next":{"title":"Ovto.fetch","level":"1.4.5","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]},"previous":{"title":"Ovto::Actions","level":"1.4.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":"2019-04-18T08:50:59.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-04-19T03:51:35.766Z"},"basePath":"..","book":{"language":""}});
459
471
  });
460
472
  </script>
461
473
  </div>