ovto 0.6.2 → 0.7.0

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