ovto 0.5.0 → 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/.gitmodules +3 -0
  3. data/CHANGELOG.md +14 -2
  4. data/Gemfile +2 -3
  5. data/Gemfile.lock +23 -27
  6. data/book/SUMMARY.md +2 -0
  7. data/book/api/actions.md +1 -1
  8. data/book/api/middleware.md +99 -0
  9. data/book/api/pure_component.md +3 -0
  10. data/docs/api/Array.html +190 -0
  11. data/docs/api/Hash.html +196 -0
  12. data/docs/api/Ovto/Actions.html +128 -40
  13. data/docs/api/Ovto/App.html +254 -40
  14. data/docs/api/Ovto/Component/MoreThanOneNode.html +6 -6
  15. data/docs/api/Ovto/Component.html +96 -29
  16. data/docs/api/Ovto/Middleware/Actions.html +428 -0
  17. data/docs/api/Ovto/Middleware/Base.html +605 -0
  18. data/docs/api/Ovto/Middleware/Component.html +354 -0
  19. data/docs/api/Ovto/Middleware.html +286 -0
  20. data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +6 -6
  21. data/docs/api/Ovto/PureComponent.html +11 -11
  22. data/docs/api/Ovto/Runtime.html +7 -7
  23. data/docs/api/Ovto/State/MissingValue.html +6 -6
  24. data/docs/api/Ovto/State/{UnknownKey.html → UnknownStateKey.html} +11 -11
  25. data/docs/api/Ovto/State.html +59 -43
  26. data/docs/api/Ovto/WiredActionSet.html +636 -0
  27. data/docs/api/Ovto/WiredActions.html +78 -35
  28. data/docs/api/Ovto.html +223 -30
  29. data/docs/api/_index.html +77 -11
  30. data/docs/api/actions.html +29 -3
  31. data/docs/api/app.html +28 -2
  32. data/docs/api/class_list.html +3 -3
  33. data/docs/api/component.html +30 -4
  34. data/docs/api/css/style.css +3 -2
  35. data/docs/api/fetch.html +30 -4
  36. data/docs/api/file.README.html +76 -78
  37. data/docs/api/file_list.html +2 -2
  38. data/docs/api/frames.html +2 -2
  39. data/docs/api/index.html +76 -78
  40. data/docs/api/js/app.js +14 -3
  41. data/docs/api/method_list.html +303 -31
  42. data/docs/api/middleware.html +498 -0
  43. data/docs/api/pure_component.html +428 -0
  44. data/docs/api/state.html +28 -2
  45. data/docs/api/top-level-namespace.html +11 -9
  46. data/docs/guides/debugging.html +28 -2
  47. data/docs/guides/development.html +28 -2
  48. data/docs/guides/install.html +28 -2
  49. data/docs/guides/tutorial.html +28 -2
  50. data/docs/index.html +28 -2
  51. data/docs/search_index.json +1 -1
  52. data/examples/sinatra/Gemfile +2 -0
  53. data/examples/sinatra/Gemfile.lock +32 -30
  54. data/examples/sinatra/app.rb +1 -4
  55. data/examples/sinatra/config.ru +6 -6
  56. data/examples/static/Gemfile.lock +9 -9
  57. data/lib/ovto/actions.rb +11 -0
  58. data/lib/ovto/app.rb +37 -13
  59. data/lib/ovto/component.rb +130 -67
  60. data/lib/ovto/middleware.rb +121 -0
  61. data/lib/ovto/pure_component.rb +1 -1
  62. data/lib/ovto/state.rb +13 -5
  63. data/lib/ovto/version.rb +1 -1
  64. data/lib/ovto/wired_action_set.rb +40 -0
  65. data/lib/ovto/wired_actions.rb +49 -11
  66. data/lib/ovto.rb +26 -0
  67. data/ovto.gemspec +1 -1
  68. metadata +21 -11
  69. data/docs/api/pure_component.md +0 -27
@@ -0,0 +1,498 @@
1
+
2
+ <!DOCTYPE HTML>
3
+ <html lang="" >
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
7
+ <title>Ovto::Middleware · GitBook</title>
8
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
+ <meta name="description" content="">
10
+ <meta name="generator" content="GitBook 3.2.2">
11
+
12
+
13
+
14
+
15
+ <link rel="stylesheet" href="../gitbook/style.css">
16
+
17
+
18
+
19
+
20
+ <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
21
+
22
+
23
+
24
+ <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
25
+
26
+
27
+
28
+ <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+
51
+
52
+ <meta name="HandheldFriendly" content="true"/>
53
+ <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
54
+ <meta name="apple-mobile-web-app-capable" content="yes">
55
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
56
+ <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
57
+ <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
58
+
59
+
60
+ <link rel="next" href="fetch.html" />
61
+
62
+
63
+ <link rel="prev" href="pure_component.html" />
64
+
65
+
66
+ </head>
67
+ <body>
68
+
69
+ <div class="book">
70
+ <div class="book-summary">
71
+
72
+
73
+ <div id="book-search-input" role="search">
74
+ <input type="text" placeholder="Type to search" />
75
+ </div>
76
+
77
+
78
+ <nav role="navigation">
79
+
80
+
81
+
82
+ <ul class="summary">
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+
92
+ <li class="chapter " data-level="1.1" data-path="../">
93
+
94
+ <a href="../">
95
+
96
+
97
+ Introduction
98
+
99
+ </a>
100
+
101
+
102
+
103
+ </li>
104
+
105
+ <li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
106
+
107
+ <a href="../guides/tutorial.html">
108
+
109
+
110
+ Getting Started
111
+
112
+ </a>
113
+
114
+
115
+
116
+ </li>
117
+
118
+ <li class="chapter " data-level="1.3" data-path="../guides/install.html">
119
+
120
+ <a href="../guides/install.html">
121
+
122
+
123
+ Install
124
+
125
+ </a>
126
+
127
+
128
+
129
+ </li>
130
+
131
+ <li class="chapter " data-level="1.4" >
132
+
133
+ <span>
134
+
135
+
136
+ API
137
+
138
+ </span>
139
+
140
+
141
+
142
+ <ul class="articles">
143
+
144
+
145
+ <li class="chapter " data-level="1.4.1" data-path="app.html">
146
+
147
+ <a href="app.html">
148
+
149
+
150
+ Ovto::App
151
+
152
+ </a>
153
+
154
+
155
+
156
+ </li>
157
+
158
+ <li class="chapter " data-level="1.4.2" data-path="state.html">
159
+
160
+ <a href="state.html">
161
+
162
+
163
+ Ovto::State
164
+
165
+ </a>
166
+
167
+
168
+
169
+ </li>
170
+
171
+ <li class="chapter " data-level="1.4.3" data-path="actions.html">
172
+
173
+ <a href="actions.html">
174
+
175
+
176
+ Ovto::Actions
177
+
178
+ </a>
179
+
180
+
181
+
182
+ </li>
183
+
184
+ <li class="chapter " data-level="1.4.4" data-path="component.html">
185
+
186
+ <a href="component.html">
187
+
188
+
189
+ Ovto::Component
190
+
191
+ </a>
192
+
193
+
194
+
195
+ </li>
196
+
197
+ <li class="chapter " data-level="1.4.5" data-path="pure_component.html">
198
+
199
+ <a href="pure_component.html">
200
+
201
+
202
+ Ovto::PureComponent
203
+
204
+ </a>
205
+
206
+
207
+
208
+ </li>
209
+
210
+ <li class="chapter active" data-level="1.4.6" data-path="middleware.html">
211
+
212
+ <a href="middleware.html">
213
+
214
+
215
+ Ovto::Middleware
216
+
217
+ </a>
218
+
219
+
220
+
221
+ </li>
222
+
223
+ <li class="chapter " data-level="1.4.7" data-path="fetch.html">
224
+
225
+ <a href="fetch.html">
226
+
227
+
228
+ Ovto.fetch
229
+
230
+ </a>
231
+
232
+
233
+
234
+ </li>
235
+
236
+
237
+ </ul>
238
+
239
+ </li>
240
+
241
+ <li class="chapter " data-level="1.5" >
242
+
243
+ <span>
244
+
245
+
246
+ Guides
247
+
248
+ </span>
249
+
250
+
251
+
252
+ <ul class="articles">
253
+
254
+
255
+ <li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
256
+
257
+ <a href="../guides/debugging.html">
258
+
259
+
260
+ Debugging
261
+
262
+ </a>
263
+
264
+
265
+
266
+ </li>
267
+
268
+ <li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
269
+
270
+ <a href="../guides/development.html">
271
+
272
+
273
+ Development
274
+
275
+ </a>
276
+
277
+
278
+
279
+ </li>
280
+
281
+
282
+ </ul>
283
+
284
+ </li>
285
+
286
+
287
+
288
+
289
+ <li class="divider"></li>
290
+
291
+ <li>
292
+ <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
293
+ Published with GitBook
294
+ </a>
295
+ </li>
296
+ </ul>
297
+
298
+
299
+ </nav>
300
+
301
+
302
+ </div>
303
+
304
+ <div class="book-body">
305
+
306
+ <div class="body-inner">
307
+
308
+
309
+
310
+ <div class="book-header" role="navigation">
311
+
312
+
313
+ <!-- Title -->
314
+ <h1>
315
+ <i class="fa fa-circle-o-notch fa-spin"></i>
316
+ <a href=".." >Ovto::Middleware</a>
317
+ </h1>
318
+ </div>
319
+
320
+
321
+
322
+
323
+ <div class="page-wrapper" tabindex="-1" role="main">
324
+ <div class="page-inner">
325
+
326
+ <div id="book-search-results">
327
+ <div class="search-noresults">
328
+
329
+ <section class="normal markdown-section">
330
+
331
+ <h1 id="ovtomiddleware">Ovto::Middleware</h1>
332
+ <p>When you are making a big app with Ovto, you may want to extract
333
+ certain parts which are independent from the app. Ovto::Middleware is
334
+ for such cases.</p>
335
+ <ul>
336
+ <li>A middleware has its own namespace of state and actions<ul>
337
+ <li>that is, you don&apos;t need to add prefixes to the names of states and actions of a middleware.</li>
338
+ </ul>
339
+ </li>
340
+ </ul>
341
+ <h2 id="example">Example</h2>
342
+ <pre><code class="lang-rb"><span class="hljs-comment"># 1. Middleware name must be valid as a method name in Ruby</span>
343
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyMiddleware</span> &lt; Ovto::Middleware(&quot;<span class="hljs-title">my_middleware</span>&quot;)</span>
344
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">setup</span></span>
345
+ <span class="hljs-comment"># Called on app startup</span>
346
+ <span class="hljs-keyword">end</span>
347
+
348
+ <span class="hljs-comment"># 2. Make a subclass of MyMiddleware&apos;s State</span>
349
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; MyMiddleware::State</span>
350
+ item <span class="hljs-symbol">:count</span>, <span class="hljs-symbol">default:</span> <span class="hljs-number">0</span>
351
+ <span class="hljs-keyword">end</span>
352
+
353
+ <span class="hljs-comment"># 3. Make a subclass of MyMiddleware&apos;s Actions</span>
354
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; MyMiddleware::Actions</span>
355
+ <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>
356
+ <span class="hljs-keyword">return</span> {<span class="hljs-symbol">count:</span> state.count + by}
357
+ <span class="hljs-keyword">end</span>
358
+ <span class="hljs-keyword">end</span>
359
+
360
+ <span class="hljs-comment"># 4. Make a subclass of MyMiddleware&apos;s Component</span>
361
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SomeComponent</span> &lt; MyMiddleware::Component</span>
362
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
363
+ o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
364
+ o <span class="hljs-string">&apos;span&apos;</span>, state.count
365
+ 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>) }
366
+ <span class="hljs-keyword">end</span>
367
+ <span class="hljs-keyword">end</span>
368
+ <span class="hljs-keyword">end</span>
369
+ <span class="hljs-keyword">end</span>
370
+
371
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
372
+ <span class="hljs-comment"># 5. Declare middlewares to use</span>
373
+ use MyMiddleware
374
+
375
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; Ovto::State;</span> <span class="hljs-keyword">end</span>
376
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions;</span> <span class="hljs-keyword">end</span>
377
+
378
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
379
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
380
+ o <span class="hljs-string">&apos;div.counter&apos;</span> <span class="hljs-keyword">do</span>
381
+ o <span class="hljs-symbol">MyMiddleware:</span><span class="hljs-symbol">:SomeComponent</span>
382
+ <span class="hljs-keyword">end</span>
383
+ <span class="hljs-keyword">end</span>
384
+ <span class="hljs-keyword">end</span>
385
+ <span class="hljs-keyword">end</span>
386
+ </code></pre>
387
+ <h2 id="advanced">Advanced</h2>
388
+ <h3 id="getting-middlware-state-from-app">Getting middlware state from app</h3>
389
+ <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>
390
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">MainComponent</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Component</span></span>
391
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
392
+ o <span class="hljs-string">&apos;span&apos;</span>, state._middlewares.middleware1.some_state
393
+ <span class="hljs-keyword">end</span>
394
+ <span class="hljs-keyword">end</span>
395
+ <span class="hljs-keyword">end</span>
396
+ </code></pre>
397
+ <h3 id="calling-middlware-action-from-app">Calling middlware action from app</h3>
398
+ <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>
399
+ <span class="hljs-comment"># From actions</span>
400
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">Actions</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Actions</span></span>
401
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">some_action</span></span>
402
+ actions.middleware1.some_action()
403
+ <span class="hljs-keyword">end</span>
404
+ <span class="hljs-keyword">end</span>
405
+
406
+ <span class="hljs-comment"># From component</span>
407
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">MainComponent</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Component</span></span>
408
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
409
+ o <span class="hljs-string">&apos;button&apos;</span>, <span class="hljs-symbol">onclick:</span> -&gt;{ actions.middleware1.some_action() }
410
+ <span class="hljs-keyword">end</span>
411
+ <span class="hljs-keyword">end</span>
412
+ <span class="hljs-keyword">end</span>
413
+ </code></pre>
414
+ <h3 id="using-a-middleware-from-another-middleware">Using a middleware from another middleware</h3>
415
+ <pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Middleware1</span> &lt; Ovto::Middleware(&quot;<span class="hljs-title">middleware1</span>&quot;)</span>
416
+ use Middleware2
417
+ <span class="hljs-keyword">end</span>
418
+ </code></pre>
419
+
420
+
421
+ </section>
422
+
423
+ </div>
424
+ <div class="search-results">
425
+ <div class="has-results">
426
+
427
+ <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
428
+ <ul class="search-results-list"></ul>
429
+
430
+ </div>
431
+ <div class="no-results">
432
+
433
+ <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
434
+
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ </div>
440
+ </div>
441
+
442
+ </div>
443
+
444
+
445
+
446
+ <a href="pure_component.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::PureComponent">
447
+ <i class="fa fa-angle-left"></i>
448
+ </a>
449
+
450
+
451
+ <a href="fetch.html" class="navigation navigation-next " aria-label="Next page: Ovto.fetch">
452
+ <i class="fa fa-angle-right"></i>
453
+ </a>
454
+
455
+
456
+
457
+ </div>
458
+
459
+ <script>
460
+ var gitbook = gitbook || [];
461
+ gitbook.push(function() {
462
+ gitbook.page.hasChanged({"page":{"title":"Ovto::Middleware","level":"1.4.6","depth":2,"next":{"title":"Ovto.fetch","level":"1.4.7","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]},"previous":{"title":"Ovto::PureComponent","level":"1.4.5","depth":2,"path":"api/pure_component.md","ref":"api/pure_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/middleware.md","mtime":"2020-12-27T11:10:19.702Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
463
+ });
464
+ </script>
465
+ </div>
466
+
467
+
468
+ <script src="../gitbook/gitbook.js"></script>
469
+ <script src="../gitbook/theme.js"></script>
470
+
471
+
472
+ <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
473
+
474
+
475
+
476
+ <script src="../gitbook/gitbook-plugin-search/search.js"></script>
477
+
478
+
479
+
480
+ <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
481
+
482
+
483
+
484
+ <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
485
+
486
+
487
+
488
+ <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
489
+
490
+
491
+
492
+ <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
493
+
494
+
495
+
496
+ </body>
497
+ </html>
498
+