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/component.html
CHANGED
|
@@ -1,532 +1,320 @@
|
|
|
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::Component · 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::Component - 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="pure_component.html" />
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
<link rel="prev" href="actions.html" />
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</head>
|
|
67
|
-
<body>
|
|
9
|
+
<!-- Custom HTML head -->
|
|
68
10
|
|
|
69
|
-
<
|
|
70
|
-
|
|
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
|
-
|
|
11
|
+
<meta name="description" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
13
|
+
<meta name="theme-color" content="#ffffff" />
|
|
80
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">
|
|
81
21
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
22
|
+
<!-- Fonts -->
|
|
23
|
+
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
|
24
|
+
<link rel="stylesheet" href="../fonts/fonts.css">
|
|
85
25
|
|
|
86
|
-
|
|
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">
|
|
87
30
|
|
|
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 active" 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
|
-
|
|
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::Component</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"><strong aria-hidden="true">5.</strong> Ovto::Actions</a></li><li class="chapter-item expanded "><a href="../api/component.html" class="active"><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
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
<div id="
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
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="ovtocomponent"><a class="header" href="#ovtocomponent">Ovto::Component</a></h1>
|
|
332
148
|
<p>An Ovto app must have <code>MainComponent</code> class, a subclass of <code>Ovto::Component</code>.</p>
|
|
333
|
-
<h2 id="render-method"
|
|
149
|
+
<h2 id="render-method"><a class="header" href="#render-method">'render' method</a></h2>
|
|
334
150
|
<p><code>render</code> is the only method you need to define in the <code>MainComponent</code> class.
|
|
335
151
|
You can get the global app state by calling <code>state</code> method.</p>
|
|
336
|
-
<pre><code class="
|
|
337
|
-
|
|
338
|
-
o
|
|
339
|
-
o
|
|
340
|
-
o
|
|
341
|
-
state.todos.each
|
|
342
|
-
o
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
152
|
+
<pre><code class="language-rb"> class MainComponent < Ovto::Component
|
|
153
|
+
def render
|
|
154
|
+
o 'div' do
|
|
155
|
+
o 'h1', 'Your todos'
|
|
156
|
+
o 'ul' do
|
|
157
|
+
state.todos.each do |todo|
|
|
158
|
+
o 'li', todo.title
|
|
159
|
+
end
|
|
160
|
+
end
|
|
161
|
+
end
|
|
162
|
+
end
|
|
163
|
+
end
|
|
348
164
|
</code></pre>
|
|
349
|
-
<h3 id="morethanonenode-error">MoreThanOneNode error</h3>
|
|
350
|
-
<p>If you missed the surrounding
|
|
351
|
-
<pre><code class="
|
|
352
|
-
o
|
|
353
|
-
o
|
|
354
|
-
state.todos.each
|
|
355
|
-
o
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
165
|
+
<h3 id="morethanonenode-error"><a class="header" href="#morethanonenode-error">MoreThanOneNode error</a></h3>
|
|
166
|
+
<p>If you missed the surrounding 'div' tag, Ovto raises an <code>MoreThanOneNode</code> error. <code>render</code> must create a single DOM node.</p>
|
|
167
|
+
<pre><code class="language-rb"> def render
|
|
168
|
+
o 'h1', 'Your todos'
|
|
169
|
+
o 'ul' do
|
|
170
|
+
state.todos.each do |todo|
|
|
171
|
+
o 'li', todo.title
|
|
172
|
+
end
|
|
173
|
+
end
|
|
174
|
+
end
|
|
175
|
+
|
|
176
|
+
#=> $MoreThanOneNode {name: "MoreThanOneNode", ...}
|
|
361
177
|
</code></pre>
|
|
362
|
-
<h2 id="the-o-method">The
|
|
363
|
-
<
|
|
364
|
-
<p><code>Ovto::Component#o</code> describes your app
|
|
365
|
-
<pre><code class="
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
o
|
|
369
|
-
|
|
178
|
+
<h2 id="the-o-method"><a class="header" href="#the-o-method">The 'o' method</a></h2>
|
|
179
|
+
<a name='the-o-method' />
|
|
180
|
+
<p><code>Ovto::Component#o</code> describes your app's view. For example:</p>
|
|
181
|
+
<pre><code class="language-rb">o 'div'
|
|
182
|
+
#=> <div></div>
|
|
183
|
+
|
|
184
|
+
o 'div', 'Hello.'
|
|
185
|
+
#=> <div>Hello.</div>
|
|
370
186
|
</code></pre>
|
|
371
187
|
<p>You can pass attributes with a Hash.</p>
|
|
372
|
-
<pre><code class="
|
|
373
|
-
|
|
188
|
+
<pre><code class="language-rb">o 'div', class: 'main', 'Hello.'
|
|
189
|
+
#=> <div class='main'>Hello.</div>
|
|
374
190
|
</code></pre>
|
|
375
191
|
<p>There are shorthand notations for classes and ids.</p>
|
|
376
|
-
<pre><code class="
|
|
377
|
-
|
|
192
|
+
<pre><code class="language-rb">o 'div.main'
|
|
193
|
+
#=> <div class='main'>Hello.</div>
|
|
378
194
|
|
|
379
|
-
o
|
|
380
|
-
|
|
195
|
+
o 'div#main'
|
|
196
|
+
#=> <div id='main'>Hello.</div>
|
|
381
197
|
</code></pre>
|
|
382
198
|
<p>You can also give a block to specify its content.</p>
|
|
383
|
-
<pre><code class="
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
o
|
|
389
|
-
o
|
|
390
|
-
|
|
391
|
-
|
|
199
|
+
<pre><code class="language-rb">o 'div' do
|
|
200
|
+
'Hello.'
|
|
201
|
+
end
|
|
202
|
+
#=> <div>Hello.</div>
|
|
203
|
+
|
|
204
|
+
o 'div' do
|
|
205
|
+
o 'h1', 'Hello.'
|
|
206
|
+
end
|
|
207
|
+
#=> <div><h1>Hello.</h1></div>
|
|
392
208
|
</code></pre>
|
|
393
|
-
<h3 id="special-attribute-style">Special attribute: <code>style</code></h3>
|
|
394
|
-
<
|
|
209
|
+
<h3 id="special-attribute-style"><a class="header" href="#special-attribute-style">Special attribute: <code>style</code></a></h3>
|
|
210
|
+
<a name='special-attributes' />
|
|
395
211
|
<p>There are some special keys for the attributes Hash. <code>style:</code> key takes a hash as
|
|
396
212
|
its value and specifies styles of the tag.</p>
|
|
397
|
-
<pre><code class="
|
|
398
|
-
|
|
213
|
+
<pre><code class="language-rb">o 'div', style: {color: 'red'}, 'Hello.'
|
|
214
|
+
#=> <div style='color: red;'>Hello.</div>
|
|
399
215
|
</code></pre>
|
|
400
|
-
<h3 id="special-attribute-onxx">Special attribute: <code>onxx</code></h3>
|
|
216
|
+
<h3 id="special-attribute-onxx"><a class="header" href="#special-attribute-onxx">Special attribute: <code>onxx</code></a></h3>
|
|
401
217
|
<p>An attribute starts with <code>"on"</code> specifies an event handler.</p>
|
|
402
218
|
<p>For example:</p>
|
|
403
|
-
<pre><code class="
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
219
|
+
<pre><code class="language-rb">o 'input', {
|
|
220
|
+
type: 'button',
|
|
221
|
+
onclick: ->(e){ p e.target.value },
|
|
222
|
+
value: 'Hello.'
|
|
407
223
|
}
|
|
408
224
|
</code></pre>
|
|
409
225
|
<p>The argument <code>e</code> is an instance of Opal::Native and wraps the JavaScript event object.
|
|
410
226
|
You can get the input value with <code>e.target.value</code> here.</p>
|
|
411
|
-
<h4 id="lifecycle-events">Lifecycle events</h4>
|
|
227
|
+
<h4 id="lifecycle-events"><a class="header" href="#lifecycle-events">Lifecycle events</a></h4>
|
|
412
228
|
<p>There are special events <code>oncreate</code>, <code>onupdate</code>, <code>onremove</code>, <code>ondestroy</code>.</p>
|
|
413
|
-
<p
|
|
414
|
-
<h3 id="special-attribute-key">Special attribute: <code>key</code></h3>
|
|
415
|
-
<p
|
|
416
|
-
<h2 id="sub-components">Sub components</h2>
|
|
229
|
+
<p>https://github.com/hyperapp/hyperapp#lifecycle-events</p>
|
|
230
|
+
<h3 id="special-attribute-key"><a class="header" href="#special-attribute-key">Special attribute: <code>key</code></a></h3>
|
|
231
|
+
<p>https://github.com/hyperapp/hyperapp#keys</p>
|
|
232
|
+
<h2 id="sub-components"><a class="header" href="#sub-components">Sub components</a></h2>
|
|
417
233
|
<p><code>o</code> can take another component class to render.</p>
|
|
418
|
-
<pre><code class="
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
o
|
|
422
|
-
todos.each
|
|
423
|
-
o
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
o
|
|
433
|
-
o
|
|
434
|
-
o TodoList,
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
234
|
+
<pre><code class="language-rb"> # Sub component
|
|
235
|
+
class TodoList < Ovto::Component
|
|
236
|
+
def render(todos:)
|
|
237
|
+
o 'ul' do
|
|
238
|
+
todos.each do |todo|
|
|
239
|
+
o 'li', todo.title
|
|
240
|
+
end
|
|
241
|
+
end
|
|
242
|
+
end
|
|
243
|
+
end
|
|
244
|
+
|
|
245
|
+
# Main component
|
|
246
|
+
class MainComponent < Ovto::Component
|
|
247
|
+
def render
|
|
248
|
+
o 'div' do
|
|
249
|
+
o 'h1', 'Your todos'
|
|
250
|
+
o TodoList, todos: state.todos
|
|
251
|
+
end
|
|
252
|
+
end
|
|
253
|
+
end
|
|
438
254
|
</code></pre>
|
|
439
|
-
<h2 id="text-node">Text node</h2>
|
|
255
|
+
<h2 id="text-node"><a class="header" href="#text-node">Text node</a></h2>
|
|
440
256
|
<p>Sometimes you may want to create a text node.</p>
|
|
441
|
-
<pre><code class="
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
257
|
+
<pre><code class="language-rb">#=> <div>Age: <span class='age'>12</a></div>
|
|
258
|
+
# ~~~~~
|
|
259
|
+
# |
|
|
260
|
+
# +--Raw text (not enclosed by an inner tag)
|
|
445
261
|
</code></pre>
|
|
446
|
-
<p><code>o</code> generates a text node when <code
|
|
262
|
+
<p><code>o</code> generates a text node when <code>'text'</code> is specified as tag name. The above
|
|
447
263
|
HTML could be described like this.</p>
|
|
448
|
-
<pre><code class="
|
|
449
|
-
o
|
|
450
|
-
o
|
|
451
|
-
|
|
264
|
+
<pre><code class="language-rb">o 'div' do
|
|
265
|
+
o 'text', 'Age:'
|
|
266
|
+
o 'span', '12'
|
|
267
|
+
end
|
|
452
268
|
</code></pre>
|
|
453
269
|
|
|
454
|
-
|
|
455
|
-
</section>
|
|
456
|
-
|
|
457
|
-
</div>
|
|
458
|
-
<div class="search-results">
|
|
459
|
-
<div class="has-results">
|
|
460
|
-
|
|
461
|
-
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
462
|
-
<ul class="search-results-list"></ul>
|
|
463
|
-
|
|
464
|
-
</div>
|
|
465
|
-
<div class="no-results">
|
|
466
|
-
|
|
467
|
-
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
468
|
-
|
|
469
|
-
</div>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
270
|
+
</main>
|
|
472
271
|
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
272
|
+
<nav class="nav-wrapper" aria-label="Page navigation">
|
|
273
|
+
<!-- Mobile navigation buttons -->
|
|
274
|
+
<a rel="prev" href="../api/actions.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
275
|
+
<i class="fa fa-angle-left"></i>
|
|
276
|
+
</a>
|
|
277
|
+
|
|
278
|
+
<a rel="next" href="../api/pure_component.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
279
|
+
<i class="fa fa-angle-right"></i>
|
|
280
|
+
</a>
|
|
281
|
+
|
|
282
|
+
<div style="clear: both"></div>
|
|
283
|
+
</nav>
|
|
284
|
+
</div>
|
|
476
285
|
</div>
|
|
477
286
|
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
</div>
|
|
287
|
+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
|
288
|
+
<a rel="prev" href="../api/actions.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
|
289
|
+
<i class="fa fa-angle-left"></i>
|
|
290
|
+
</a>
|
|
291
|
+
|
|
292
|
+
<a rel="next" href="../api/pure_component.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
|
293
|
+
<i class="fa fa-angle-right"></i>
|
|
294
|
+
</a>
|
|
295
|
+
</nav>
|
|
296
|
+
|
|
297
|
+
</div>
|
|
298
|
+
|
|
492
299
|
|
|
493
|
-
<script>
|
|
494
|
-
var gitbook = gitbook || [];
|
|
495
|
-
gitbook.push(function() {
|
|
496
|
-
gitbook.page.hasChanged({"page":{"title":"Ovto::Component","level":"1.4.4","depth":2,"next":{"title":"Ovto::PureComponent","level":"1.4.5","depth":2,"path":"api/pure_component.md","ref":"api/pure_component.md","articles":[]},"previous":{"title":"Ovto::Actions","level":"1.4.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/component.md","mtime":"2019-04-18T08:50:59.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
|
|
497
|
-
});
|
|
498
|
-
</script>
|
|
499
|
-
</div>
|
|
500
300
|
|
|
501
|
-
|
|
502
|
-
<script src="../gitbook/gitbook.js"></script>
|
|
503
|
-
<script src="../gitbook/theme.js"></script>
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
527
|
-
|
|
528
|
-
|
|
529
301
|
|
|
302
|
+
<script>
|
|
303
|
+
window.playground_copyable = true;
|
|
304
|
+
</script>
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
<script src="../elasticlunr.min.js"></script>
|
|
308
|
+
<script src="../mark.min.js"></script>
|
|
309
|
+
<script src="../searcher.js"></script>
|
|
310
|
+
|
|
311
|
+
<script src="../clipboard.min.js"></script>
|
|
312
|
+
<script src="../highlight.js"></script>
|
|
313
|
+
<script src="../book.js"></script>
|
|
314
|
+
|
|
315
|
+
<!-- Custom JS scripts -->
|
|
316
|
+
|
|
317
|
+
|
|
318
|
+
</div>
|
|
530
319
|
</body>
|
|
531
320
|
</html>
|
|
532
|
-
|