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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/Gemfile.lock +15 -16
- data/Rakefile +2 -9
- data/book/SUMMARY.md +15 -11
- data/book/book.toml +10 -0
- data/docs/.nojekyll +1 -0
- data/docs/404.html +189 -0
- data/docs/FontAwesome/css/font-awesome.css +4 -0
- data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
- data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/docs/api/Array.html +4 -4
- data/docs/api/Hash.html +4 -4
- data/docs/api/MightyInspect.html +238 -0
- data/docs/api/Ovto/Actions.html +4 -4
- data/docs/api/Ovto/App.html +4 -4
- data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
- data/docs/api/Ovto/Component.html +4 -4
- data/docs/api/Ovto/Middleware/Actions.html +4 -4
- data/docs/api/Ovto/Middleware/Base.html +5 -5
- data/docs/api/Ovto/Middleware/Component.html +5 -5
- data/docs/api/Ovto/Middleware.html +8 -8
- data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
- data/docs/api/Ovto/PureComponent.html +4 -4
- data/docs/api/Ovto/Runtime.html +4 -4
- data/docs/api/Ovto/State/MissingValue.html +4 -4
- data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
- data/docs/api/Ovto/State.html +12 -12
- data/docs/api/Ovto/WiredActionSet.html +4 -4
- data/docs/api/Ovto/WiredActions.html +4 -4
- data/docs/api/Ovto.html +8 -8
- data/docs/api/_index.html +5 -5
- data/docs/api/actions.html +215 -426
- data/docs/api/app.html +226 -432
- data/docs/api/component.html +268 -480
- data/docs/api/fetch.html +188 -393
- data/docs/api/file.README.html +4 -4
- data/docs/api/frames.html +1 -1
- data/docs/api/index.html +4 -4
- data/docs/api/middleware.html +249 -460
- data/docs/api/pure_component.html +186 -398
- data/docs/api/state.html +226 -438
- data/docs/api/top-level-namespace.html +4 -4
- data/docs/ayu-highlight.css +78 -0
- data/docs/book.js +688 -0
- data/docs/book.toml +10 -0
- data/docs/clipboard.min.js +7 -0
- data/docs/css/chrome.css +545 -0
- data/docs/css/general.css +203 -0
- data/docs/css/print.css +54 -0
- data/docs/css/variables.css +255 -0
- data/docs/elasticlunr.min.js +10 -0
- data/docs/favicon.png +0 -0
- data/docs/favicon.svg +22 -0
- data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
- data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
- data/docs/fonts/fonts.css +100 -0
- data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
- data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
- data/docs/guides/debugging.html +184 -390
- data/docs/guides/development.html +171 -383
- data/docs/guides/install.html +206 -409
- data/docs/guides/tutorial.html +309 -525
- data/docs/highlight.css +82 -0
- data/docs/highlight.js +6 -0
- data/docs/index.html +390 -391
- data/docs/mark.min.js +7 -0
- data/docs/print.html +958 -0
- data/docs/searcher.js +483 -0
- data/docs/searchindex.js +1 -0
- data/docs/searchindex.json +1 -0
- data/docs/tomorrow-night.css +102 -0
- data/examples/sinatra/Gemfile.lock +25 -25
- data/examples/static/Gemfile.lock +8 -8
- data/lib/ovto/component.rb +2 -3
- data/lib/ovto/version.rb +1 -1
- metadata +47 -26
- data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
- data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
- data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
- data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
- data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
- data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
- data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
- data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
- data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
- data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
- data/docs/gitbook/gitbook.js +0 -4
- data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
- data/docs/gitbook/images/favicon.ico +0 -0
- data/docs/gitbook/style.css +0 -9
- data/docs/gitbook/theme.js +0 -4
- data/docs/search_index.json +0 -1
data/docs/api/app.html
CHANGED
|
@@ -1,476 +1,270 @@
|
|
|
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
|
-
<
|
|
7
|
-
<title>Ovto::App · 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
|
-
|
|
6
|
+
<title>Ovto::App - Ovto Reference Manual</title>
|
|
32
7
|
|
|
33
|
-
|
|
34
8
|
|
|
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="state.html" />
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</head>
|
|
65
|
-
<body>
|
|
9
|
+
<!-- Custom HTML head -->
|
|
66
10
|
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<div id="book-search-input" role="search">
|
|
72
|
-
<input type="text" placeholder="Type to search" />
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<nav role="navigation">
|
|
77
|
-
|
|
11
|
+
<meta name="description" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
13
|
+
<meta name="theme-color" content="#ffffff" />
|
|
78
14
|
|
|
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">
|
|
79
21
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
22
|
+
<!-- Fonts -->
|
|
23
|
+
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
24
|
+
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
83
25
|
|
|
84
|
-
|
|
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">
|
|
85
30
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<li class="chapter " data-level="1.1" data-path="../">
|
|
91
|
-
|
|
92
|
-
<a href="../">
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
Introduction
|
|
96
|
-
|
|
97
|
-
</a>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
</li>
|
|
102
|
-
|
|
103
|
-
<li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
|
|
104
|
-
|
|
105
|
-
<a href="../guides/tutorial.html">
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
Getting Started
|
|
109
|
-
|
|
110
|
-
</a>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
</li>
|
|
115
|
-
|
|
116
|
-
<li class="chapter " data-level="1.3" data-path="../guides/install.html">
|
|
117
|
-
|
|
118
|
-
<a href="../guides/install.html">
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
Install
|
|
122
|
-
|
|
123
|
-
</a>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
</li>
|
|
128
|
-
|
|
129
|
-
<li class="chapter " data-level="1.4" >
|
|
130
|
-
|
|
131
|
-
<span>
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
API
|
|
135
|
-
|
|
136
|
-
</span>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<ul class="articles">
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<li class="chapter active" data-level="1.4.1" data-path="app.html">
|
|
144
|
-
|
|
145
|
-
<a href="app.html">
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
Ovto::App
|
|
149
|
-
|
|
150
|
-
</a>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</li>
|
|
155
|
-
|
|
156
|
-
<li class="chapter " data-level="1.4.2" data-path="state.html">
|
|
157
|
-
|
|
158
|
-
<a href="state.html">
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
Ovto::State
|
|
162
|
-
|
|
163
|
-
</a>
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
</li>
|
|
168
|
-
|
|
169
|
-
<li class="chapter " data-level="1.4.3" data-path="actions.html">
|
|
170
|
-
|
|
171
|
-
<a href="actions.html">
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
Ovto::Actions
|
|
175
|
-
|
|
176
|
-
</a>
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
</li>
|
|
181
|
-
|
|
182
|
-
<li class="chapter " data-level="1.4.4" data-path="component.html">
|
|
183
|
-
|
|
184
|
-
<a href="component.html">
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
Ovto::Component
|
|
188
|
-
|
|
189
|
-
</a>
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
</li>
|
|
194
|
-
|
|
195
|
-
<li class="chapter " data-level="1.4.5" data-path="pure_component.html">
|
|
196
|
-
|
|
197
|
-
<a href="pure_component.html">
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
Ovto::PureComponent
|
|
201
|
-
|
|
202
|
-
</a>
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
</li>
|
|
207
|
-
|
|
208
|
-
<li class="chapter " data-level="1.4.6" data-path="middleware.html">
|
|
209
|
-
|
|
210
|
-
<a href="middleware.html">
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
Ovto::Middleware
|
|
214
|
-
|
|
215
|
-
</a>
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
</li>
|
|
220
|
-
|
|
221
|
-
<li class="chapter " data-level="1.4.7" data-path="fetch.html">
|
|
222
|
-
|
|
223
|
-
<a href="fetch.html">
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
Ovto.fetch
|
|
227
|
-
|
|
228
|
-
</a>
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
</li>
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
</ul>
|
|
236
|
-
|
|
237
|
-
</li>
|
|
238
|
-
|
|
239
|
-
<li class="chapter " data-level="1.5" >
|
|
240
|
-
|
|
241
|
-
<span>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
Guides
|
|
245
|
-
|
|
246
|
-
</span>
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<ul class="articles">
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
<li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
|
|
254
|
-
|
|
255
|
-
<a href="../guides/debugging.html">
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
Debugging
|
|
259
|
-
|
|
260
|
-
</a>
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
</li>
|
|
265
|
-
|
|
266
|
-
<li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
|
|
267
|
-
|
|
268
|
-
<a href="../guides/development.html">
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
Development
|
|
272
|
-
|
|
273
|
-
</a>
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
</li>
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
</ul>
|
|
281
|
-
|
|
282
|
-
</li>
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
<li class="divider"></li>
|
|
288
|
-
|
|
289
|
-
<li>
|
|
290
|
-
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
291
|
-
Published with GitBook
|
|
292
|
-
</a>
|
|
293
|
-
</li>
|
|
294
|
-
</ul>
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
</nav>
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
</div>
|
|
301
|
-
|
|
302
|
-
<div class="book-body">
|
|
303
|
-
|
|
304
|
-
<div class="body-inner">
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
<div class="book-header" role="navigation">
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
<!-- Title -->
|
|
312
|
-
<h1>
|
|
313
|
-
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
314
|
-
<a href=".." >Ovto::App</a>
|
|
315
|
-
</h1>
|
|
316
|
-
</div>
|
|
31
|
+
<!-- Custom theme stylesheets -->
|
|
317
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" class="active"><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"><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>
|
|
318
114
|
|
|
115
|
+
<h1 class="menu-title">Ovto Reference Manual</h1>
|
|
319
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>
|
|
320
121
|
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
<div id="
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
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="ovtoapp"><a class="header" href="#ovtoapp">Ovto::App</a></h1>
|
|
330
148
|
<p>First of all, you need to define a subclass of <code>Ovto::App</code> and define <code>class State</code>,
|
|
331
149
|
<code>class Actions</code> and <code>class MainComponent</code> in it.</p>
|
|
332
|
-
<h2 id="example">Example</h2>
|
|
150
|
+
<h2 id="example"><a class="header" href="#example">Example</a></h2>
|
|
333
151
|
<p>This is a smallest Ovto app.</p>
|
|
334
|
-
<pre><code class="
|
|
335
|
-
|
|
152
|
+
<pre><code class="language-rb">require 'opal'
|
|
153
|
+
require 'ovto'
|
|
336
154
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
155
|
+
class MyApp < Ovto::App
|
|
156
|
+
class State < Ovto::State
|
|
157
|
+
end
|
|
340
158
|
|
|
341
|
-
|
|
342
|
-
|
|
159
|
+
class Actions < Ovto::Actions
|
|
160
|
+
end
|
|
343
161
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
o
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
162
|
+
class MainComponent < Ovto::Component
|
|
163
|
+
def render
|
|
164
|
+
o 'input', type: 'button', value: 'Hello'
|
|
165
|
+
end
|
|
166
|
+
end
|
|
167
|
+
end
|
|
350
168
|
|
|
351
|
-
MyApp.run(
|
|
169
|
+
MyApp.run(id: 'ovto')
|
|
352
170
|
</code></pre>
|
|
353
|
-
<p>It renders a button and does nothing else. Let
|
|
354
|
-
<pre><code class="
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
COLORS = [
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
item
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
new_idx = (state.color_idx +
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
o
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
171
|
+
<p>It renders a button and does nothing else. Let's have some fun:</p>
|
|
172
|
+
<pre><code class="language-rb">require 'opal'
|
|
173
|
+
require 'ovto'
|
|
174
|
+
|
|
175
|
+
class MyApp < Ovto::App
|
|
176
|
+
COLORS = ["red", "blue", "green"]
|
|
177
|
+
|
|
178
|
+
class State < Ovto::State
|
|
179
|
+
item :color_idx, default: 0
|
|
180
|
+
end
|
|
181
|
+
|
|
182
|
+
class Actions < Ovto::Actions
|
|
183
|
+
def update_color
|
|
184
|
+
new_idx = (state.color_idx + 1) % COLORS.length
|
|
185
|
+
return {color_idx: new_idx}
|
|
186
|
+
end
|
|
187
|
+
end
|
|
188
|
+
|
|
189
|
+
class MainComponent < Ovto::Component
|
|
190
|
+
def render
|
|
191
|
+
o 'input', {
|
|
192
|
+
type: 'button',
|
|
193
|
+
value: 'Hello',
|
|
194
|
+
style: {background: COLORS[state.color_idx]},
|
|
195
|
+
onclick: ->{ actions.update_color },
|
|
378
196
|
}
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
197
|
+
end
|
|
198
|
+
end
|
|
199
|
+
end
|
|
382
200
|
|
|
383
|
-
MyApp.run(
|
|
201
|
+
MyApp.run(id: 'ovto')
|
|
384
202
|
</code></pre>
|
|
385
203
|
<p>Here we added <code>color_idx</code> to app state and <code>update_color</code> action to change it.
|
|
386
204
|
The button is updated to have the color indicated by <code>color_idx</code> and
|
|
387
205
|
now has <code>onclick</code> event handler which executes the action.</p>
|
|
388
|
-
<h2 id="calling-actions-on-startup">Calling actions on startup</h2>
|
|
206
|
+
<h2 id="calling-actions-on-startup"><a class="header" href="#calling-actions-on-startup">Calling actions on startup</a></h2>
|
|
389
207
|
<p>To invoke certain actions on app startup, define <code>MyApp#setup</code> and use <code>MyApp#actions</code>.</p>
|
|
390
208
|
<p>Example:</p>
|
|
391
|
-
<pre><code class="
|
|
392
|
-
|
|
209
|
+
<pre><code class="language-rb">class MyApp < Ovto::App
|
|
210
|
+
def setup
|
|
393
211
|
actions.fetch_data()
|
|
394
|
-
|
|
212
|
+
end
|
|
395
213
|
|
|
396
214
|
...
|
|
397
|
-
|
|
215
|
+
end
|
|
398
216
|
|
|
399
|
-
MyApp.run(
|
|
217
|
+
MyApp.run(id: 'ovto')
|
|
400
218
|
</code></pre>
|
|
401
219
|
|
|
402
|
-
|
|
403
|
-
</section>
|
|
404
|
-
|
|
405
|
-
</div>
|
|
406
|
-
<div class="search-results">
|
|
407
|
-
<div class="has-results">
|
|
408
|
-
|
|
409
|
-
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
410
|
-
<ul class="search-results-list"></ul>
|
|
411
|
-
|
|
412
|
-
</div>
|
|
413
|
-
<div class="no-results">
|
|
414
|
-
|
|
415
|
-
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
416
|
-
|
|
417
|
-
</div>
|
|
418
|
-
</div>
|
|
419
|
-
</div>
|
|
220
|
+
</main>
|
|
420
221
|
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
222
|
+
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
223
|
+
<!-- Mobile navigation buttons -->
|
|
224
|
+
<a rel="prev" href="../guides/install.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
225
|
+
<i class="fa fa-angle-left"></i>
|
|
226
|
+
</a>
|
|
227
|
+
|
|
228
|
+
<a rel="next" href="../api/state.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
229
|
+
<i class="fa fa-angle-right"></i>
|
|
230
|
+
</a>
|
|
231
|
+
|
|
232
|
+
<div style="clear: both"></div>
|
|
233
|
+
</nav>
|
|
234
|
+
</div>
|
|
424
235
|
</div>
|
|
425
236
|
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
237
|
+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
238
|
+
<a rel="prev" href="../guides/install.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
239
|
+
<i class="fa fa-angle-left"></i>
|
|
240
|
+
</a>
|
|
241
|
+
|
|
242
|
+
<a rel="next" href="../api/state.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
243
|
+
<i class="fa fa-angle-right"></i>
|
|
244
|
+
</a>
|
|
245
|
+
</nav>
|
|
246
|
+
|
|
247
|
+
</div>
|
|
248
|
+
|
|
436
249
|
|
|
437
|
-
<script>
|
|
438
|
-
var gitbook = gitbook || [];
|
|
439
|
-
gitbook.push(function() {
|
|
440
|
-
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::PureComponent","level":"1.4.5","depth":2,"path":"api/pure_component.md","ref":"api/pure_component.md","articles":[]},{"title":"Ovto::Middleware","level":"1.4.6","depth":2,"path":"api/middleware.md","ref":"api/middleware.md","articles":[]},{"title":"Ovto.fetch","level":"1.4.7","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.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
|
|
441
|
-
});
|
|
442
|
-
</script>
|
|
443
|
-
</div>
|
|
444
250
|
|
|
445
|
-
|
|
446
|
-
<script src="../gitbook/gitbook.js"></script>
|
|
447
|
-
<script src="../gitbook/theme.js"></script>
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
471
|
-
|
|
472
|
-
|
|
473
251
|
|
|
252
|
+
<script>
|
|
253
|
+
window.playground_copyable = true;
|
|
254
|
+
</script>
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
<script src="../elasticlunr.min.js"></script>
|
|
258
|
+
<script src="../mark.min.js"></script>
|
|
259
|
+
<script src="../searcher.js"></script>
|
|
260
|
+
|
|
261
|
+
<script src="../clipboard.min.js"></script>
|
|
262
|
+
<script src="../highlight.js"></script>
|
|
263
|
+
<script src="../book.js"></script>
|
|
264
|
+
|
|
265
|
+
<!-- Custom JS scripts -->
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
</div>
|
|
474
269
|
</body>
|
|
475
270
|
</html>
|
|
476
|
-
|