ovto 0.6.2 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +4 -0
  3. data/Gemfile.lock +15 -16
  4. data/Rakefile +2 -9
  5. data/book/SUMMARY.md +15 -11
  6. data/book/book.toml +10 -0
  7. data/docs/.nojekyll +1 -0
  8. data/docs/404.html +189 -0
  9. data/docs/FontAwesome/css/font-awesome.css +4 -0
  10. data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
  11. data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
  12. data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
  13. data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
  14. data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
  15. data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
  16. data/docs/api/Array.html +4 -4
  17. data/docs/api/Hash.html +4 -4
  18. data/docs/api/MightyInspect.html +238 -0
  19. data/docs/api/Ovto/Actions.html +4 -4
  20. data/docs/api/Ovto/App.html +4 -4
  21. data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
  22. data/docs/api/Ovto/Component.html +4 -4
  23. data/docs/api/Ovto/Middleware/Actions.html +4 -4
  24. data/docs/api/Ovto/Middleware/Base.html +5 -5
  25. data/docs/api/Ovto/Middleware/Component.html +5 -5
  26. data/docs/api/Ovto/Middleware.html +8 -8
  27. data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
  28. data/docs/api/Ovto/PureComponent.html +4 -4
  29. data/docs/api/Ovto/Runtime.html +4 -4
  30. data/docs/api/Ovto/State/MissingValue.html +4 -4
  31. data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
  32. data/docs/api/Ovto/State.html +12 -12
  33. data/docs/api/Ovto/WiredActionSet.html +4 -4
  34. data/docs/api/Ovto/WiredActions.html +4 -4
  35. data/docs/api/Ovto.html +8 -8
  36. data/docs/api/_index.html +5 -5
  37. data/docs/api/actions.html +215 -426
  38. data/docs/api/app.html +226 -432
  39. data/docs/api/component.html +268 -480
  40. data/docs/api/fetch.html +188 -393
  41. data/docs/api/file.README.html +4 -4
  42. data/docs/api/frames.html +1 -1
  43. data/docs/api/index.html +4 -4
  44. data/docs/api/middleware.html +249 -460
  45. data/docs/api/pure_component.html +186 -398
  46. data/docs/api/state.html +226 -438
  47. data/docs/api/top-level-namespace.html +4 -4
  48. data/docs/ayu-highlight.css +78 -0
  49. data/docs/book.js +688 -0
  50. data/docs/book.toml +10 -0
  51. data/docs/clipboard.min.js +7 -0
  52. data/docs/css/chrome.css +545 -0
  53. data/docs/css/general.css +203 -0
  54. data/docs/css/print.css +54 -0
  55. data/docs/css/variables.css +255 -0
  56. data/docs/elasticlunr.min.js +10 -0
  57. data/docs/favicon.png +0 -0
  58. data/docs/favicon.svg +22 -0
  59. data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
  60. data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
  61. data/docs/fonts/fonts.css +100 -0
  62. data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
  63. data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
  64. data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
  65. data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
  66. data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
  67. data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
  68. data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
  69. data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
  70. data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
  71. data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
  72. data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
  73. data/docs/guides/debugging.html +184 -390
  74. data/docs/guides/development.html +171 -383
  75. data/docs/guides/install.html +206 -409
  76. data/docs/guides/tutorial.html +309 -525
  77. data/docs/highlight.css +82 -0
  78. data/docs/highlight.js +6 -0
  79. data/docs/index.html +390 -391
  80. data/docs/mark.min.js +7 -0
  81. data/docs/print.html +958 -0
  82. data/docs/searcher.js +483 -0
  83. data/docs/searchindex.js +1 -0
  84. data/docs/searchindex.json +1 -0
  85. data/docs/tomorrow-night.css +102 -0
  86. data/examples/sinatra/Gemfile.lock +25 -25
  87. data/examples/static/Gemfile.lock +8 -8
  88. data/lib/ovto/component.rb +2 -3
  89. data/lib/ovto/version.rb +1 -1
  90. metadata +47 -26
  91. data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
  92. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
  93. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
  94. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
  95. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
  96. data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
  97. data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
  98. data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
  99. data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
  100. data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
  101. data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
  102. data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
  103. data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
  104. data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
  105. data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
  106. data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
  107. data/docs/gitbook/gitbook.js +0 -4
  108. data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
  109. data/docs/gitbook/images/favicon.ico +0 -0
  110. data/docs/gitbook/style.css +0 -9
  111. data/docs/gitbook/theme.js +0 -4
  112. data/docs/search_index.json +0 -1
@@ -1,498 +1,287 @@
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::Middleware · GitBook</title>
8
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
- <meta name="description" content="">
10
- <meta name="generator" content="GitBook 3.2.2">
11
-
12
-
13
-
14
-
15
- <link rel="stylesheet" href="../gitbook/style.css">
16
-
17
-
18
-
19
-
20
- <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
21
-
22
-
23
-
24
- <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
25
-
26
-
27
-
28
- <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
- <meta name="HandheldFriendly" content="true"/>
53
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
54
- <meta name="apple-mobile-web-app-capable" content="yes">
55
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
56
- <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
57
- <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
58
-
59
-
60
- <link rel="next" href="fetch.html" />
61
-
62
-
63
- <link rel="prev" href="pure_component.html" />
64
-
65
-
66
- </head>
67
- <body>
68
-
69
- <div class="book">
70
- <div class="book-summary">
71
-
72
-
73
- <div id="book-search-input" role="search">
74
- <input type="text" placeholder="Type to search" />
75
- </div>
76
-
77
-
78
- <nav role="navigation">
79
-
80
-
6
+ <title>Ovto::Middleware - 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 " data-level="1.4.3" data-path="actions.html">
172
-
173
- <a href="actions.html">
174
-
175
-
176
- Ovto::Actions
177
-
178
- </a>
179
-
180
-
181
-
182
- </li>
183
-
184
- <li class="chapter " data-level="1.4.4" data-path="component.html">
185
-
186
- <a href="component.html">
187
-
188
-
189
- Ovto::Component
190
-
191
- </a>
192
-
193
-
194
-
195
- </li>
196
-
197
- <li class="chapter " data-level="1.4.5" data-path="pure_component.html">
198
-
199
- <a href="pure_component.html">
200
-
201
-
202
- Ovto::PureComponent
203
-
204
- </a>
205
-
206
-
207
-
208
- </li>
209
-
210
- <li class="chapter active" data-level="1.4.6" data-path="middleware.html">
211
-
212
- <a href="middleware.html">
213
-
214
-
215
- Ovto::Middleware
216
-
217
- </a>
218
-
219
-
220
-
221
- </li>
222
-
223
- <li class="chapter " data-level="1.4.7" data-path="fetch.html">
224
-
225
- <a href="fetch.html">
226
-
227
-
228
- Ovto.fetch
229
-
230
- </a>
231
-
232
-
233
-
234
- </li>
235
-
236
-
237
- </ul>
238
-
239
- </li>
240
-
241
- <li class="chapter " data-level="1.5" >
242
-
243
- <span>
244
-
245
-
246
- Guides
247
-
248
- </span>
249
-
250
-
251
-
252
- <ul class="articles">
253
-
254
-
255
- <li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
256
-
257
- <a href="../guides/debugging.html">
258
-
259
-
260
- Debugging
261
-
262
- </a>
263
-
264
-
265
-
266
- </li>
267
-
268
- <li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
269
-
270
- <a href="../guides/development.html">
271
-
272
-
273
- Development
274
-
275
- </a>
276
-
277
-
278
-
279
- </li>
280
-
281
-
282
- </ul>
283
-
284
- </li>
285
-
286
-
287
-
288
-
289
- <li class="divider"></li>
290
-
291
- <li>
292
- <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
293
- Published with GitBook
294
- </a>
295
- </li>
296
- </ul>
297
-
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::Middleware</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"><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" class="active"><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="ovtomiddleware">Ovto::Middleware</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="ovtomiddleware"><a class="header" href="#ovtomiddleware">Ovto::Middleware</a></h1>
332
148
  <p>When you are making a big app with Ovto, you may want to extract
333
149
  certain parts which are independent from the app. Ovto::Middleware is
334
150
  for such cases.</p>
335
151
  <ul>
336
- <li>A middleware has its own namespace of state and actions<ul>
337
- <li>that is, you don&apos;t need to add prefixes to the names of states and actions of a middleware.</li>
152
+ <li>A middleware has its own namespace of state and actions
153
+ <ul>
154
+ <li>that is, you don't need to add prefixes to the names of states and actions of a middleware.</li>
338
155
  </ul>
339
156
  </li>
340
157
  </ul>
341
- <h2 id="example">Example</h2>
342
- <pre><code class="lang-rb"><span class="hljs-comment"># 1. Middleware name must be valid as a method name in Ruby</span>
343
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyMiddleware</span> &lt; Ovto::Middleware(&quot;<span class="hljs-title">my_middleware</span>&quot;)</span>
344
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">setup</span></span>
345
- <span class="hljs-comment"># Called on app startup</span>
346
- <span class="hljs-keyword">end</span>
347
-
348
- <span class="hljs-comment"># 2. Make a subclass of MyMiddleware&apos;s State</span>
349
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; MyMiddleware::State</span>
350
- item <span class="hljs-symbol">:count</span>, <span class="hljs-symbol">default:</span> <span class="hljs-number">0</span>
351
- <span class="hljs-keyword">end</span>
352
-
353
- <span class="hljs-comment"># 3. Make a subclass of MyMiddleware&apos;s Actions</span>
354
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; MyMiddleware::Actions</span>
355
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">increment</span><span class="hljs-params">(<span class="hljs-symbol">by:</span>)</span></span>
356
- <span class="hljs-keyword">return</span> {<span class="hljs-symbol">count:</span> state.count + by}
357
- <span class="hljs-keyword">end</span>
358
- <span class="hljs-keyword">end</span>
359
-
360
- <span class="hljs-comment"># 4. Make a subclass of MyMiddleware&apos;s Component</span>
361
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SomeComponent</span> &lt; MyMiddleware::Component</span>
362
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
363
- o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
364
- o <span class="hljs-string">&apos;span&apos;</span>, state.count
365
- o <span class="hljs-string">&apos;button&apos;</span>, <span class="hljs-symbol">onclick:</span> -&gt;{ actions.increment(<span class="hljs-symbol">by:</span> <span class="hljs-number">1</span>) }
366
- <span class="hljs-keyword">end</span>
367
- <span class="hljs-keyword">end</span>
368
- <span class="hljs-keyword">end</span>
369
- <span class="hljs-keyword">end</span>
370
-
371
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
372
- <span class="hljs-comment"># 5. Declare middlewares to use</span>
158
+ <h2 id="example"><a class="header" href="#example">Example</a></h2>
159
+ <pre><code class="language-rb"># 1. Middleware name must be valid as a method name in Ruby
160
+ class MyMiddleware &lt; Ovto::Middleware(&quot;my_middleware&quot;)
161
+ def setup
162
+ # Called on app startup
163
+ end
164
+
165
+ # 2. Make a subclass of MyMiddleware's State
166
+ class State &lt; MyMiddleware::State
167
+ item :count, default: 0
168
+ end
169
+
170
+ # 3. Make a subclass of MyMiddleware's Actions
171
+ class Actions &lt; MyMiddleware::Actions
172
+ def increment(by:)
173
+ return {count: state.count + by}
174
+ end
175
+ end
176
+
177
+ # 4. Make a subclass of MyMiddleware's Component
178
+ class SomeComponent &lt; MyMiddleware::Component
179
+ def render
180
+ o 'div' do
181
+ o 'span', state.count
182
+ o 'button', onclick: -&gt;{ actions.increment(by: 1) }
183
+ end
184
+ end
185
+ end
186
+ end
187
+
188
+ class MyApp &lt; Ovto::App
189
+ # 5. Declare middlewares to use
373
190
  use MyMiddleware
374
191
 
375
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; Ovto::State;</span> <span class="hljs-keyword">end</span>
376
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions;</span> <span class="hljs-keyword">end</span>
377
-
378
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
379
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
380
- o <span class="hljs-string">&apos;div.counter&apos;</span> <span class="hljs-keyword">do</span>
381
- o <span class="hljs-symbol">MyMiddleware:</span><span class="hljs-symbol">:SomeComponent</span>
382
- <span class="hljs-keyword">end</span>
383
- <span class="hljs-keyword">end</span>
384
- <span class="hljs-keyword">end</span>
385
- <span class="hljs-keyword">end</span>
192
+ class State &lt; Ovto::State; end
193
+ class Actions &lt; Ovto::Actions; end
194
+
195
+ class MainComponent &lt; Ovto::Component
196
+ def render
197
+ o 'div.counter' do
198
+ o MyMiddleware::SomeComponent
199
+ end
200
+ end
201
+ end
202
+ end
386
203
  </code></pre>
387
- <h2 id="advanced">Advanced</h2>
388
- <h3 id="getting-middlware-state-from-app">Getting middlware state from app</h3>
389
- <pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
390
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">MainComponent</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Component</span></span>
391
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
392
- o <span class="hljs-string">&apos;span&apos;</span>, state._middlewares.middleware1.some_state
393
- <span class="hljs-keyword">end</span>
394
- <span class="hljs-keyword">end</span>
395
- <span class="hljs-keyword">end</span>
204
+ <h2 id="advanced"><a class="header" href="#advanced">Advanced</a></h2>
205
+ <h3 id="getting-middlware-state-from-app"><a class="header" href="#getting-middlware-state-from-app">Getting middlware state from app</a></h3>
206
+ <pre><code class="language-rb">class MyApp &lt; Ovto::App
207
+ def MainComponent &lt; Ovto::Component
208
+ def render
209
+ o 'span', state._middlewares.middleware1.some_state
210
+ end
211
+ end
212
+ end
396
213
  </code></pre>
397
- <h3 id="calling-middlware-action-from-app">Calling middlware action from app</h3>
398
- <pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
399
- <span class="hljs-comment"># From actions</span>
400
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">Actions</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Actions</span></span>
401
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">some_action</span></span>
214
+ <h3 id="calling-middlware-action-from-app"><a class="header" href="#calling-middlware-action-from-app">Calling middlware action from app</a></h3>
215
+ <pre><code class="language-rb">class MyApp &lt; Ovto::App
216
+ # From actions
217
+ def Actions &lt; Ovto::Actions
218
+ def some_action
402
219
  actions.middleware1.some_action()
403
- <span class="hljs-keyword">end</span>
404
- <span class="hljs-keyword">end</span>
405
-
406
- <span class="hljs-comment"># From component</span>
407
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">MainComponent</span> <span class="hljs-title">&lt;</span> <span class="hljs-title">Ovto</span>::<span class="hljs-title">Component</span></span>
408
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
409
- o <span class="hljs-string">&apos;button&apos;</span>, <span class="hljs-symbol">onclick:</span> -&gt;{ actions.middleware1.some_action() }
410
- <span class="hljs-keyword">end</span>
411
- <span class="hljs-keyword">end</span>
412
- <span class="hljs-keyword">end</span>
220
+ end
221
+ end
222
+
223
+ # From component
224
+ def MainComponent &lt; Ovto::Component
225
+ def render
226
+ o 'button', onclick: -&gt;{ actions.middleware1.some_action() }
227
+ end
228
+ end
229
+ end
413
230
  </code></pre>
414
- <h3 id="using-a-middleware-from-another-middleware">Using a middleware from another middleware</h3>
415
- <pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Middleware1</span> &lt; Ovto::Middleware(&quot;<span class="hljs-title">middleware1</span>&quot;)</span>
231
+ <h3 id="using-a-middleware-from-another-middleware"><a class="header" href="#using-a-middleware-from-another-middleware">Using a middleware from another middleware</a></h3>
232
+ <pre><code class="language-rb">class Middleware1 &lt; Ovto::Middleware(&quot;middleware1&quot;)
416
233
  use Middleware2
417
- <span class="hljs-keyword">end</span>
234
+ end
418
235
  </code></pre>
419
236
 
420
-
421
- </section>
422
-
423
- </div>
424
- <div class="search-results">
425
- <div class="has-results">
426
-
427
- <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
428
- <ul class="search-results-list"></ul>
429
-
430
- </div>
431
- <div class="no-results">
432
-
433
- <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
434
-
435
- </div>
436
- </div>
437
- </div>
237
+ </main>
438
238
 
439
- </div>
440
- </div>
441
-
239
+ <nav class="nav-wrapper" aria-label="Page navigation">
240
+ <!-- Mobile navigation buttons -->
241
+ <a rel="prev" href="../api/pure_component.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
242
+ <i class="fa fa-angle-left"></i>
243
+ </a>
244
+
245
+ <a rel="next" href="../api/fetch.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
246
+ <i class="fa fa-angle-right"></i>
247
+ </a>
248
+
249
+ <div style="clear: both"></div>
250
+ </nav>
251
+ </div>
442
252
  </div>
443
253
 
444
-
445
-
446
- <a href="pure_component.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::PureComponent">
447
- <i class="fa fa-angle-left"></i>
448
- </a>
449
-
450
-
451
- <a href="fetch.html" class="navigation navigation-next " aria-label="Next page: Ovto.fetch">
452
- <i class="fa fa-angle-right"></i>
453
- </a>
454
-
455
-
456
-
457
- </div>
254
+ <nav class="nav-wide-wrapper" aria-label="Page navigation">
255
+ <a rel="prev" href="../api/pure_component.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
256
+ <i class="fa fa-angle-left"></i>
257
+ </a>
258
+
259
+ <a rel="next" href="../api/fetch.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
260
+ <i class="fa fa-angle-right"></i>
261
+ </a>
262
+ </nav>
263
+
264
+ </div>
458
265
 
459
- <script>
460
- var gitbook = gitbook || [];
461
- gitbook.push(function() {
462
- gitbook.page.hasChanged({"page":{"title":"Ovto::Middleware","level":"1.4.6","depth":2,"next":{"title":"Ovto.fetch","level":"1.4.7","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]},"previous":{"title":"Ovto::PureComponent","level":"1.4.5","depth":2,"path":"api/pure_component.md","ref":"api/pure_component.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/middleware.md","mtime":"2020-12-27T11:10:19.702Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
463
- });
464
- </script>
465
- </div>
466
266
 
467
-
468
- <script src="../gitbook/gitbook.js"></script>
469
- <script src="../gitbook/theme.js"></script>
470
-
471
-
472
- <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
473
-
474
-
475
-
476
- <script src="../gitbook/gitbook-plugin-search/search.js"></script>
477
-
478
-
479
-
480
- <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
481
-
482
-
483
-
484
- <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
485
-
486
-
487
-
488
- <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
489
-
490
-
491
-
492
- <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
493
-
494
-
495
267
 
268
+
269
+ <script>
270
+ window.playground_copyable = true;
271
+ </script>
272
+
273
+
274
+ <script src="../elasticlunr.min.js"></script>
275
+ <script src="../mark.min.js"></script>
276
+ <script src="../searcher.js"></script>
277
+
278
+ <script src="../clipboard.min.js"></script>
279
+ <script src="../highlight.js"></script>
280
+ <script src="../book.js"></script>
281
+
282
+ <!-- Custom JS scripts -->
283
+
284
+
285
+ </div>
496
286
  </body>
497
287
  </html>
498
-