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,452 +1,249 @@
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>Install · 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
-
6
+ <title>Install - Ovto Reference Manual</title>
48
7
 
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
-
61
- <link rel="prev" href="tutorial.html" />
62
-
63
8
 
64
- </head>
65
- <body>
66
-
67
- <div class="book">
68
- <div class="book-summary">
9
+ <!-- Custom HTML head -->
69
10
 
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
-
78
-
79
-
80
- <ul class="summary">
81
-
82
-
83
-
84
-
11
+ <meta name="description" content="">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1">
13
+ <meta name="theme-color" content="#ffffff" />
85
14
 
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="tutorial.html">
104
-
105
- <a href="tutorial.html">
106
-
107
-
108
- Getting Started
109
-
110
- </a>
111
-
112
-
113
-
114
- </li>
115
-
116
- <li class="chapter active" data-level="1.3" data-path="install.html">
117
-
118
- <a href="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 " data-level="1.4.1" data-path="../api/app.html">
144
-
145
- <a href="../api/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="../api/state.html">
157
-
158
- <a href="../api/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="../api/actions.html">
170
-
171
- <a href="../api/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="../api/component.html">
183
-
184
- <a href="../api/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="../api/pure_component.html">
196
-
197
- <a href="../api/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="../api/middleware.html">
209
-
210
- <a href="../api/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="../api/fetch.html">
222
-
223
- <a href="../api/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="debugging.html">
254
-
255
- <a href="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="development.html">
267
-
268
- <a href="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>
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">
301
21
 
302
- <div class="book-body">
303
-
304
- <div class="body-inner">
305
-
306
-
22
+ <!-- Fonts -->
23
+ <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
24
+ <link rel="stylesheet" href="../fonts/fonts.css">
307
25
 
308
- <div class="book-header" role="navigation">
309
-
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">
310
30
 
311
- <!-- Title -->
312
- <h1>
313
- <i class="fa fa-circle-o-notch fa-spin"></i>
314
- <a href=".." >Install</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" class="active"><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"><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
- <div class="page-wrapper" tabindex="-1" role="main">
322
- <div class="page-inner">
323
-
324
- <div id="book-search-results">
325
- <div class="search-noresults">
326
-
327
- <section class="normal markdown-section">
328
-
329
- <h1 id="install">Install</h1>
330
- <h2 id="use-ovto-with-static-files">Use Ovto with static files</h2>
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="install"><a class="header" href="#install">Install</a></h1>
148
+ <h2 id="use-ovto-with-static-files"><a class="header" href="#use-ovto-with-static-files">Use Ovto with static files</a></h2>
331
149
  <pre><code>$ gem i ovto
332
150
  $ ovto new myapp --static
333
- </code></pre><h2 id="use-ovto-with-sinatra">Use Ovto with Sinatra</h2>
151
+ </code></pre>
152
+ <h2 id="use-ovto-with-sinatra"><a class="header" href="#use-ovto-with-sinatra">Use Ovto with Sinatra</a></h2>
334
153
  <pre><code>$ gem i ovto
335
154
  $ ovto new myapp --sinatra
336
- </code></pre><h2 id="install-ovto-into-rails-apps">Install Ovto into Rails apps</h2>
155
+ </code></pre>
156
+ <h2 id="install-ovto-into-rails-apps"><a class="header" href="#install-ovto-into-rails-apps">Install Ovto into Rails apps</a></h2>
337
157
  <p>Edit <code>Gemfile</code></p>
338
- <pre><code class="lang-rb">gem <span class="hljs-string">&apos;opal-rails&apos;</span>
339
- gem <span class="hljs-string">&apos;ovto&apos;</span>
158
+ <pre><code class="language-rb">gem 'opal-rails'
159
+ gem 'ovto'
340
160
  </code></pre>
341
161
  <p>Run <code>bundle install</code></p>
342
162
  <p>Remove <code>app/assets/javascripts/application.js</code></p>
343
163
  <p>Create <code>app/assets/javascripts/application.js.rb</code></p>
344
- <pre><code class="lang-rb"><span class="hljs-keyword">require</span> <span class="hljs-string">&apos;opal&apos;</span>
345
- <span class="hljs-keyword">require</span> <span class="hljs-string">&apos;rails-ujs&apos;</span>
346
- <span class="hljs-keyword">require</span> <span class="hljs-string">&apos;activestorage&apos;</span>
347
- <span class="hljs-keyword">require</span> <span class="hljs-string">&apos;turbolinks&apos;</span>
348
- require_tree <span class="hljs-string">&apos;.&apos;</span>
164
+ <pre><code class="language-rb">require 'opal'
165
+ require 'rails-ujs'
166
+ require 'activestorage'
167
+ require 'turbolinks'
168
+ require_tree '.'
349
169
  </code></pre>
350
170
  <p>Create <code>app/assets/javascripts/foo.js.rb</code> (file name is arbitrary)</p>
351
- <pre><code class="lang-rb"><span class="hljs-keyword">require</span> <span class="hljs-string">&apos;ovto&apos;</span>
171
+ <pre><code class="language-rb">require 'ovto'
352
172
 
353
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span> &lt; Ovto::App</span>
354
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> &lt; Ovto::State</span>
355
- <span class="hljs-keyword">end</span>
173
+ class Foo &lt; Ovto::App
174
+ class State &lt; Ovto::State
175
+ end
356
176
 
357
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
358
- <span class="hljs-keyword">end</span>
177
+ class Actions &lt; Ovto::Actions
178
+ end
359
179
 
360
- <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MainComponent</span> &lt; Ovto::Component</span>
361
- <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
362
- o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&quot;HELLO&quot;</span>
363
- <span class="hljs-keyword">end</span>
364
- <span class="hljs-keyword">end</span>
365
- <span class="hljs-keyword">end</span>
180
+ class MainComponent &lt; Ovto::Component
181
+ def render(state:)
182
+ o 'h1', &quot;HELLO&quot;
183
+ end
184
+ end
185
+ end
366
186
  </code></pre>
367
187
  <p>Edit <code>app/views/&lt;some controller/&lt;some view&gt;.html.erb</code></p>
368
- <pre><code>&lt;div id=&apos;foo-app&apos;&gt;&lt;/div&gt;
188
+ <pre><code>&lt;div id='foo-app'&gt;&lt;/div&gt;
369
189
  &lt;%= opal_tag do %&gt;
370
- Foo.run(id: &apos;foo-app&apos;)
190
+ Foo.run(id: 'foo-app')
371
191
  &lt;% end %&gt;
372
- </code></pre><p>This should render <code>HELLO</code> in the browser.</p>
192
+ </code></pre>
193
+ <p>This should render <code>HELLO</code> in the browser.</p>
373
194
  <p>You also need to edit config/environments/production.rb like this before deploy it to production.</p>
374
- <pre><code class="lang-rb"> <span class="hljs-comment">#config.assets.js_compressor = :uglifier</span>
375
- config.assets.js_compressor = Uglifier.new(<span class="hljs-symbol">harmony:</span> <span class="hljs-keyword">true</span>)
195
+ <pre><code class="language-rb"> #config.assets.js_compressor = :uglifier
196
+ config.assets.js_compressor = Uglifier.new(harmony: true)
376
197
  </code></pre>
377
198
 
378
-
379
- </section>
380
-
381
- </div>
382
- <div class="search-results">
383
- <div class="has-results">
384
-
385
- <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
386
- <ul class="search-results-list"></ul>
387
-
388
- </div>
389
- <div class="no-results">
390
-
391
- <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
392
-
393
- </div>
394
- </div>
395
- </div>
199
+ </main>
396
200
 
397
- </div>
398
- </div>
399
-
201
+ <nav class="nav-wrapper" aria-label="Page navigation">
202
+ <!-- Mobile navigation buttons -->
203
+ <a rel="prev" href="../guides/tutorial.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
204
+ <i class="fa fa-angle-left"></i>
205
+ </a>
206
+
207
+ <a rel="next" href="../api/app.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
208
+ <i class="fa fa-angle-right"></i>
209
+ </a>
210
+
211
+ <div style="clear: both"></div>
212
+ </nav>
213
+ </div>
400
214
  </div>
401
215
 
402
-
403
-
404
- <a href="tutorial.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Getting Started">
405
- <i class="fa fa-angle-left"></i>
406
- </a>
407
-
408
-
409
-
410
-
411
- </div>
216
+ <nav class="nav-wide-wrapper" aria-label="Page navigation">
217
+ <a rel="prev" href="../guides/tutorial.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
218
+ <i class="fa fa-angle-left"></i>
219
+ </a>
220
+
221
+ <a rel="next" href="../api/app.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
222
+ <i class="fa fa-angle-right"></i>
223
+ </a>
224
+ </nav>
225
+
226
+ </div>
227
+
412
228
 
413
- <script>
414
- var gitbook = gitbook || [];
415
- gitbook.push(function() {
416
- gitbook.page.hasChanged({"page":{"title":"Install","level":"1.3","depth":1,"next":{"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":[]}]},"previous":{"title":"Getting Started","level":"1.2","depth":1,"path":"guides/tutorial.md","ref":"guides/tutorial.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":"guides/install.md","mtime":"2019-04-20T11:57:47.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
417
- });
418
- </script>
419
- </div>
420
229
 
421
-
422
- <script src="../gitbook/gitbook.js"></script>
423
- <script src="../gitbook/theme.js"></script>
424
-
425
-
426
- <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
427
-
428
-
429
-
430
- <script src="../gitbook/gitbook-plugin-search/search.js"></script>
431
-
432
-
433
-
434
- <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
435
-
436
-
437
-
438
- <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
439
-
440
-
441
-
442
- <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
443
-
444
-
445
-
446
- <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
447
-
448
-
449
230
 
231
+ <script>
232
+ window.playground_copyable = true;
233
+ </script>
234
+
235
+
236
+ <script src="../elasticlunr.min.js"></script>
237
+ <script src="../mark.min.js"></script>
238
+ <script src="../searcher.js"></script>
239
+
240
+ <script src="../clipboard.min.js"></script>
241
+ <script src="../highlight.js"></script>
242
+ <script src="../book.js"></script>
243
+
244
+ <!-- Custom JS scripts -->
245
+
246
+
247
+ </div>
450
248
  </body>
451
249
  </html>
452
-