ovto 0.6.2 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/Gemfile.lock +15 -16
  4. data/Rakefile +2 -9
  5. data/book/SUMMARY.md +15 -11
  6. data/book/book.toml +10 -0
  7. data/docs/.nojekyll +1 -0
  8. data/docs/404.html +189 -0
  9. data/docs/FontAwesome/css/font-awesome.css +4 -0
  10. data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
  11. data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
  12. data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
  13. data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
  14. data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
  15. data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
  16. data/docs/api/Array.html +4 -4
  17. data/docs/api/Hash.html +4 -4
  18. data/docs/api/MightyInspect.html +238 -0
  19. data/docs/api/Ovto/Actions.html +4 -4
  20. data/docs/api/Ovto/App.html +4 -4
  21. data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
  22. data/docs/api/Ovto/Component.html +4 -4
  23. data/docs/api/Ovto/Middleware/Actions.html +4 -4
  24. data/docs/api/Ovto/Middleware/Base.html +5 -5
  25. data/docs/api/Ovto/Middleware/Component.html +5 -5
  26. data/docs/api/Ovto/Middleware.html +8 -8
  27. data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
  28. data/docs/api/Ovto/PureComponent.html +4 -4
  29. data/docs/api/Ovto/Runtime.html +4 -4
  30. data/docs/api/Ovto/State/MissingValue.html +4 -4
  31. data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
  32. data/docs/api/Ovto/State.html +12 -12
  33. data/docs/api/Ovto/WiredActionSet.html +4 -4
  34. data/docs/api/Ovto/WiredActions.html +4 -4
  35. data/docs/api/Ovto.html +8 -8
  36. data/docs/api/_index.html +5 -5
  37. data/docs/api/actions.html +215 -426
  38. data/docs/api/app.html +226 -432
  39. data/docs/api/component.html +268 -480
  40. data/docs/api/fetch.html +188 -393
  41. data/docs/api/file.README.html +4 -4
  42. data/docs/api/frames.html +1 -1
  43. data/docs/api/index.html +4 -4
  44. data/docs/api/middleware.html +249 -460
  45. data/docs/api/pure_component.html +186 -398
  46. data/docs/api/state.html +226 -438
  47. data/docs/api/top-level-namespace.html +4 -4
  48. data/docs/ayu-highlight.css +78 -0
  49. data/docs/book.js +688 -0
  50. data/docs/book.toml +10 -0
  51. data/docs/clipboard.min.js +7 -0
  52. data/docs/css/chrome.css +545 -0
  53. data/docs/css/general.css +203 -0
  54. data/docs/css/print.css +54 -0
  55. data/docs/css/variables.css +255 -0
  56. data/docs/elasticlunr.min.js +10 -0
  57. data/docs/favicon.png +0 -0
  58. data/docs/favicon.svg +22 -0
  59. data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
  60. data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
  61. data/docs/fonts/fonts.css +100 -0
  62. data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
  63. data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
  64. data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
  65. data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
  66. data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
  67. data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
  68. data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
  69. data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
  70. data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
  71. data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
  72. data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
  73. data/docs/guides/debugging.html +184 -390
  74. data/docs/guides/development.html +171 -383
  75. data/docs/guides/install.html +206 -409
  76. data/docs/guides/tutorial.html +309 -525
  77. data/docs/highlight.css +82 -0
  78. data/docs/highlight.js +6 -0
  79. data/docs/index.html +390 -391
  80. data/docs/mark.min.js +7 -0
  81. data/docs/print.html +958 -0
  82. data/docs/searcher.js +483 -0
  83. data/docs/searchindex.js +1 -0
  84. data/docs/searchindex.json +1 -0
  85. data/docs/tomorrow-night.css +102 -0
  86. data/examples/sinatra/Gemfile.lock +25 -25
  87. data/examples/static/Gemfile.lock +8 -8
  88. data/lib/ovto/component.rb +2 -3
  89. data/lib/ovto/version.rb +1 -1
  90. metadata +47 -26
  91. data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
  92. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
  93. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
  94. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
  95. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
  96. data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
  97. data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
  98. data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
  99. data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
  100. data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
  101. data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
  102. data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
  103. data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
  104. data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
  105. data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
  106. data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
  107. data/docs/gitbook/gitbook.js +0 -4
  108. data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
  109. data/docs/gitbook/images/favicon.ico +0 -0
  110. data/docs/gitbook/style.css +0 -9
  111. data/docs/gitbook/theme.js +0 -4
  112. data/docs/search_index.json +0 -1
@@ -1,334 +1,150 @@
1
-
2
1
  <!DOCTYPE HTML>
3
- <html lang="" >
2
+ <html lang="en" class="sidebar-visible no-js light">
4
3
  <head>
4
+ <!-- Book generated using mdBook -->
5
5
  <meta charset="UTF-8">
6
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
7
- <title>Ovto::Actions · 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="component.html" />
61
-
62
-
63
- <link rel="prev" href="state.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
-
6
+ <title>Ovto::Actions - Ovto Reference Manual</title>
81
7
 
82
- <ul class="summary">
83
-
84
-
85
8
 
86
-
87
-
88
-
89
-
9
+ <!-- Custom HTML head -->
90
10
 
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 active" 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 " 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
-
11
+ <meta name="description" content="">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1">
13
+ <meta name="theme-color" content="#ffffff" />
298
14
 
299
- </nav>
300
-
301
-
302
- </div>
15
+ <link rel="icon" href="../favicon.svg">
16
+ <link rel="shortcut icon" href="../favicon.png">
17
+ <link rel="stylesheet" href="../css/variables.css">
18
+ <link rel="stylesheet" href="../css/general.css">
19
+ <link rel="stylesheet" href="../css/chrome.css">
20
+ <link rel="stylesheet" href="../css/print.css" media="print">
303
21
 
304
- <div class="book-body">
305
-
306
- <div class="body-inner">
307
-
308
-
22
+ <!-- Fonts -->
23
+ <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
24
+ <link rel="stylesheet" href="../fonts/fonts.css">
309
25
 
310
- <div class="book-header" role="navigation">
311
-
26
+ <!-- Highlight.js Stylesheets -->
27
+ <link rel="stylesheet" href="../highlight.css">
28
+ <link rel="stylesheet" href="../tomorrow-night.css">
29
+ <link rel="stylesheet" href="../ayu-highlight.css">
312
30
 
313
- <!-- Title -->
314
- <h1>
315
- <i class="fa fa-circle-o-notch fa-spin"></i>
316
- <a href=".." >Ovto::Actions</a>
317
- </h1>
318
- </div>
31
+ <!-- Custom theme stylesheets -->
319
32
 
33
+ </head>
34
+ <body>
35
+ <div id="body-container">
36
+ <!-- Provide site root to javascript -->
37
+ <script>
38
+ var path_to_root = "../";
39
+ var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
40
+ </script>
41
+
42
+ <!-- Work around some values being stored in localStorage wrapped in quotes -->
43
+ <script>
44
+ try {
45
+ var theme = localStorage.getItem('mdbook-theme');
46
+ var sidebar = localStorage.getItem('mdbook-sidebar');
47
+
48
+ if (theme.startsWith('"') && theme.endsWith('"')) {
49
+ localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
50
+ }
51
+
52
+ if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
53
+ localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
54
+ }
55
+ } catch (e) { }
56
+ </script>
57
+
58
+ <!-- Set the theme before any content is loaded, prevents flash -->
59
+ <script>
60
+ var theme;
61
+ try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
62
+ if (theme === null || theme === undefined) { theme = default_theme; }
63
+ var html = document.querySelector('html');
64
+ html.classList.remove('no-js')
65
+ html.classList.remove('light')
66
+ html.classList.add(theme);
67
+ html.classList.add('js');
68
+ </script>
69
+
70
+ <!-- Hide / unhide sidebar before it is displayed -->
71
+ <script>
72
+ var html = document.querySelector('html');
73
+ var sidebar = null;
74
+ if (document.body.clientWidth >= 1080) {
75
+ try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
76
+ sidebar = sidebar || 'visible';
77
+ } else {
78
+ sidebar = 'hidden';
79
+ }
80
+ html.classList.remove('sidebar-visible');
81
+ html.classList.add("sidebar-" + sidebar);
82
+ </script>
83
+
84
+ <nav id="sidebar" class="sidebar" aria-label="Table of contents">
85
+ <div class="sidebar-scrollbox">
86
+ <ol class="chapter"><li class="chapter-item expanded "><a href="../guides/tutorial.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../guides/install.html"><strong aria-hidden="true">2.</strong> Install</a></li><li class="chapter-item expanded affix "><li class="part-title">API</li><li class="chapter-item expanded "><a href="../api/app.html"><strong aria-hidden="true">3.</strong> Ovto::App</a></li><li class="chapter-item expanded "><a href="../api/state.html"><strong aria-hidden="true">4.</strong> Ovto::State</a></li><li class="chapter-item expanded "><a href="../api/actions.html" class="active"><strong aria-hidden="true">5.</strong> Ovto::Actions</a></li><li class="chapter-item expanded "><a href="../api/component.html"><strong aria-hidden="true">6.</strong> Ovto::Component</a></li><li class="chapter-item expanded "><a href="../api/pure_component.html"><strong aria-hidden="true">7.</strong> Ovto::PureComponent</a></li><li class="chapter-item expanded "><a href="../api/middleware.html"><strong aria-hidden="true">8.</strong> Ovto::Middleware</a></li><li class="chapter-item expanded "><a href="../api/fetch.html"><strong aria-hidden="true">9.</strong> Ovto.fetch</a></li><li class="chapter-item expanded affix "><li class="part-title">Guides</li><li class="chapter-item expanded "><a href="../guides/debugging.html"><strong aria-hidden="true">10.</strong> Debugging</a></li><li class="chapter-item expanded "><a href="../guides/development.html"><strong aria-hidden="true">11.</strong> Development</a></li></ol>
87
+ </div>
88
+ <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
89
+ </nav>
90
+
91
+ <div id="page-wrapper" class="page-wrapper">
92
+
93
+ <div class="page">
94
+ <div id="menu-bar-hover-placeholder"></div>
95
+ <div id="menu-bar" class="menu-bar sticky bordered">
96
+ <div class="left-buttons">
97
+ <button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
98
+ <i class="fa fa-bars"></i>
99
+ </button>
100
+ <button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
101
+ <i class="fa fa-paint-brush"></i>
102
+ </button>
103
+ <ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
104
+ <li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
105
+ <li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
106
+ <li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
107
+ <li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
108
+ <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
109
+ </ul>
110
+ <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
111
+ <i class="fa fa-search"></i>
112
+ </button>
113
+ </div>
320
114
 
115
+ <h1 class="menu-title">Ovto Reference Manual</h1>
321
116
 
117
+ <div class="right-buttons">
118
+ <a href="../print.html" title="Print this book" aria-label="Print this book">
119
+ <i id="print-button" class="fa fa-print"></i>
120
+ </a>
322
121
 
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="ovtoactions">Ovto::Actions</h1>
122
+ </div>
123
+ </div>
124
+
125
+ <div id="search-wrapper" class="hidden">
126
+ <form id="searchbar-outer" class="searchbar-outer">
127
+ <input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
128
+ </form>
129
+ <div id="searchresults-outer" class="searchresults-outer hidden">
130
+ <div id="searchresults-header" class="searchresults-header"></div>
131
+ <ul id="searchresults">
132
+ </ul>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
137
+ <script>
138
+ document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
139
+ document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
140
+ Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
141
+ link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
142
+ });
143
+ </script>
144
+
145
+ <div id="content" class="content">
146
+ <main>
147
+ <h1 id="ovtoactions"><a class="header" href="#ovtoactions">Ovto::Actions</a></h1>
332
148
  <p>Actions are the only way to change the state. Actions must be defined as methods of
333
149
  the <code>Actions</code> class. Here is some more conventions:</p>
334
150
  <ul>
@@ -337,136 +153,109 @@ the <code>Actions</code> class. Here is some more conventions:</p>
337
153
  <li>You can get the current state by <code>state</code> method</li>
338
154
  </ul>
339
155
  <p>Example:</p>
340
- <pre><code class="lang-rb"><span class="hljs-keyword">require</span> <span class="hljs-string">&apos;opal&apos;</span>
341
- <span class="hljs-keyword">require</span> <span class="hljs-string">&apos;ovto&apos;</span>
342
-
343
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
344
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; Ovto::State</span>
345
- item <span class="hljs-symbol">:count</span>, <span class="hljs-symbol">default:</span> <span class="hljs-number">0</span>
346
- <span class="hljs-keyword">end</span>
347
-
348
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
349
- <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>
350
- <span class="hljs-keyword">return</span> {<span class="hljs-symbol">count:</span> state.count + by}
351
- <span class="hljs-keyword">end</span>
352
- <span class="hljs-keyword">end</span>
353
-
354
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
355
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
356
- o <span class="hljs-string">&apos;span&apos;</span>, state.count
357
- 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>) }
358
- <span class="hljs-keyword">end</span>
359
- <span class="hljs-keyword">end</span>
360
- <span class="hljs-keyword">end</span>
361
-
362
- MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;ovto&apos;</span>)
156
+ <pre><code class="language-rb">require 'opal'
157
+ require 'ovto'
158
+
159
+ class MyApp &lt; Ovto::App
160
+ class State &lt; Ovto::State
161
+ item :count, default: 0
162
+ end
163
+
164
+ class Actions &lt; Ovto::Actions
165
+ def increment(by:)
166
+ return {count: state.count + by}
167
+ end
168
+ end
169
+
170
+ class MainComponent &lt; Ovto::Component
171
+ def render
172
+ o 'span', state.count
173
+ o 'button', onclick: -&gt;{ actions.increment(by: 1) }
174
+ end
175
+ end
176
+ end
177
+
178
+ MyApp.run(id: 'ovto')
363
179
  </code></pre>
364
- <h2 id="calling-actions">Calling actions</h2>
180
+ <h2 id="calling-actions"><a class="header" href="#calling-actions">Calling actions</a></h2>
365
181
  <p>Actions can be called from components via <code>actions</code> method. This is an instance of
366
182
  <code>Ovto::WiredActions</code> and has methods of the same name as your <code>Actions</code> class.</p>
367
- <pre><code> o &apos;button&apos;, onclick: -&gt;{ actions.increment(by: 1) }
368
- </code></pre><p>Arguments are almost the same as the original but you don&apos;t need to provide <code>state</code>;
183
+ <pre><code> o 'button', onclick: -&gt;{ actions.increment(by: 1) }
184
+ </code></pre>
185
+ <p>Arguments are almost the same as the original but you don't need to provide <code>state</code>;
369
186
  it is automatically passed by <code>Ovto::WiredActions</code> class. It also updates the app
370
187
  state with the return value of the action, and schedules rendering the view.</p>
371
- <h2 id="skipping-state-update">Skipping state update</h2>
188
+ <h2 id="skipping-state-update"><a class="header" href="#skipping-state-update">Skipping state update</a></h2>
372
189
  <p>An action may return <code>nil</code> when no app state changes are needed.</p>
373
190
  <p>Promises are also special values which does not cause state changes (see the next section).</p>
374
- <h2 id="async-actions">Async actions</h2>
191
+ <h2 id="async-actions"><a class="header" href="#async-actions">Async actions</a></h2>
375
192
  <p>When calling server apis, you cannot tell how the app state will change until the server responds.
376
193
  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>
377
194
  <p>Example:</p>
378
- <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>
379
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">fetch_tasks</span></span>
380
- Ovto.fetch(<span class="hljs-string">&apos;/tasks.json&apos;</span>).<span class="hljs-keyword">then</span> {|tasks_json|
381
- actions.receive_tasks(<span class="hljs-symbol">tasks:</span> tasks_json)
195
+ <pre><code class="language-rb"> class Actions &lt; Ovto::Actions
196
+ def fetch_tasks
197
+ Ovto.fetch('/tasks.json').then {|tasks_json|
198
+ actions.receive_tasks(tasks: tasks_json)
382
199
  }.fail {|e|
383
- console.log(<span class="hljs-string">&quot;failed:&quot;</span>, e)
200
+ console.log(&quot;failed:&quot;, e)
384
201
  }
385
- <span class="hljs-keyword">end</span>
202
+ end
386
203
 
387
- <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>
204
+ def receive_tasks(tasks_json:)
388
205
  tasks = tasks_json.map{|item| Task.new(**item)}
389
- <span class="hljs-keyword">return</span> {<span class="hljs-symbol">tasks:</span> tasks}
390
- <span class="hljs-keyword">end</span>
391
- <span class="hljs-keyword">end</span>
206
+ return {tasks: tasks}
207
+ end
208
+ end
392
209
  </code></pre>
393
210
 
394
-
395
- </section>
396
-
397
- </div>
398
- <div class="search-results">
399
- <div class="has-results">
400
-
401
- <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
402
- <ul class="search-results-list"></ul>
403
-
404
- </div>
405
- <div class="no-results">
406
-
407
- <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
408
-
409
- </div>
410
- </div>
411
- </div>
211
+ </main>
412
212
 
413
- </div>
414
- </div>
415
-
213
+ <nav class="nav-wrapper" aria-label="Page navigation">
214
+ <!-- Mobile navigation buttons -->
215
+ <a rel="prev" href="../api/state.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
216
+ <i class="fa fa-angle-left"></i>
217
+ </a>
218
+
219
+ <a rel="next" href="../api/component.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
220
+ <i class="fa fa-angle-right"></i>
221
+ </a>
222
+
223
+ <div style="clear: both"></div>
224
+ </nav>
225
+ </div>
416
226
  </div>
417
227
 
418
-
419
-
420
- <a href="state.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::State">
421
- <i class="fa fa-angle-left"></i>
422
- </a>
423
-
424
-
425
- <a href="component.html" class="navigation navigation-next " aria-label="Next page: Ovto::Component">
426
- <i class="fa fa-angle-right"></i>
427
- </a>
428
-
429
-
430
-
431
- </div>
228
+ <nav class="nav-wide-wrapper" aria-label="Page navigation">
229
+ <a rel="prev" href="../api/state.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
230
+ <i class="fa fa-angle-left"></i>
231
+ </a>
232
+
233
+ <a rel="next" href="../api/component.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
234
+ <i class="fa fa-angle-right"></i>
235
+ </a>
236
+ </nav>
237
+
238
+ </div>
432
239
 
433
- <script>
434
- var gitbook = gitbook || [];
435
- gitbook.push(function() {
436
- 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":"2020-02-29T13:35:46.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
437
- });
438
- </script>
439
- </div>
440
240
 
441
-
442
- <script src="../gitbook/gitbook.js"></script>
443
- <script src="../gitbook/theme.js"></script>
444
-
445
-
446
- <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
447
-
448
-
449
-
450
- <script src="../gitbook/gitbook-plugin-search/search.js"></script>
451
-
452
-
453
-
454
- <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
455
-
456
-
457
-
458
- <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
459
-
460
-
461
-
462
- <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
463
-
464
-
465
-
466
- <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
467
-
468
-
469
241
 
242
+
243
+ <script>
244
+ window.playground_copyable = true;
245
+ </script>
246
+
247
+
248
+ <script src="../elasticlunr.min.js"></script>
249
+ <script src="../mark.min.js"></script>
250
+ <script src="../searcher.js"></script>
251
+
252
+ <script src="../clipboard.min.js"></script>
253
+ <script src="../highlight.js"></script>
254
+ <script src="../book.js"></script>
255
+
256
+ <!-- Custom JS scripts -->
257
+
258
+
259
+ </div>
470
260
  </body>
471
261
  </html>
472
-