ovto 0.6.1 → 0.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (115) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +8 -0
  3. data/Gemfile.lock +16 -17
  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 +6 -10
  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 -6
  25. data/docs/api/Ovto/Middleware/Component.html +5 -6
  26. data/docs/api/Ovto/Middleware.html +8 -10
  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 +26 -30
  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/css/style.css +1 -0
  41. data/docs/api/fetch.html +188 -393
  42. data/docs/api/file.README.html +9 -15
  43. data/docs/api/frames.html +1 -1
  44. data/docs/api/index.html +9 -15
  45. data/docs/api/method_list.html +4 -4
  46. data/docs/api/middleware.html +249 -460
  47. data/docs/api/pure_component.html +186 -398
  48. data/docs/api/state.html +226 -438
  49. data/docs/api/top-level-namespace.html +6 -6
  50. data/docs/ayu-highlight.css +78 -0
  51. data/docs/book.js +688 -0
  52. data/docs/book.toml +10 -0
  53. data/docs/clipboard.min.js +7 -0
  54. data/docs/css/chrome.css +545 -0
  55. data/docs/css/general.css +203 -0
  56. data/docs/css/print.css +54 -0
  57. data/docs/css/variables.css +255 -0
  58. data/docs/elasticlunr.min.js +10 -0
  59. data/docs/favicon.png +0 -0
  60. data/docs/favicon.svg +22 -0
  61. data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
  62. data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
  63. data/docs/fonts/fonts.css +100 -0
  64. data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
  65. data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
  66. data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
  67. data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
  68. data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
  69. data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
  70. data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
  71. data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
  72. data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
  73. data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
  74. data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
  75. data/docs/guides/debugging.html +184 -390
  76. data/docs/guides/development.html +171 -383
  77. data/docs/guides/install.html +206 -409
  78. data/docs/guides/tutorial.html +309 -525
  79. data/docs/highlight.css +82 -0
  80. data/docs/highlight.js +6 -0
  81. data/docs/index.html +390 -391
  82. data/docs/mark.min.js +7 -0
  83. data/docs/print.html +958 -0
  84. data/docs/searcher.js +483 -0
  85. data/docs/searchindex.js +1 -0
  86. data/docs/searchindex.json +1 -0
  87. data/docs/tomorrow-night.css +102 -0
  88. data/examples/sinatra/Gemfile.lock +25 -25
  89. data/examples/static/Gemfile.lock +8 -8
  90. data/lib/ovto/component.rb +2 -3
  91. data/lib/ovto/version.rb +1 -1
  92. data/ovto.gemspec +1 -1
  93. metadata +49 -28
  94. data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
  95. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
  96. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
  97. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
  98. data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
  99. data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
  100. data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
  101. data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
  102. data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
  103. data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
  104. data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
  105. data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
  106. data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
  107. data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
  108. data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
  109. data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
  110. data/docs/gitbook/gitbook.js +0 -4
  111. data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
  112. data/docs/gitbook/images/favicon.ico +0 -0
  113. data/docs/gitbook/style.css +0 -9
  114. data/docs/gitbook/theme.js +0 -4
  115. data/docs/search_index.json +0 -1
@@ -1,428 +1,216 @@
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::PureComponent · 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::PureComponent - Ovto Reference Manual</title>
32
7
 
33
-
34
8
 
35
-
36
-
37
-
38
-
39
-
9
+ <!-- Custom HTML head -->
40
10
 
41
-
42
-
43
-
44
-
45
-
46
-
47
-
11
+ <meta name="description" content="">
12
+ <meta name="viewport" content="width=device-width, initial-scale=1">
13
+ <meta name="theme-color" content="#ffffff" />
48
14
 
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="middleware.html" />
61
-
62
-
63
- <link rel="prev" href="component.html" />
64
-
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">
21
+
22
+ <!-- Fonts -->
23
+ <link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
24
+ <link rel="stylesheet" href="../fonts/fonts.css">
25
+
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">
30
+
31
+ <!-- Custom theme stylesheets -->
65
32
 
66
33
  </head>
67
34
  <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>
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" class="active"><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>
76
114
 
77
-
78
- <nav role="navigation">
79
-
115
+ <h1 class="menu-title">Ovto Reference Manual</h1>
80
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>
81
121
 
82
- <ul class="summary">
83
-
84
-
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="ovtopurecomponent"><a class="header" href="#ovtopurecomponent">Ovto::PureComponent</a></h1>
148
+ <p>It almost the same as <code>Ovto::Component</code>, but it caches the <code>render</code> method calling with arguments of the method.</p>
149
+ <h2 id="when-to-use-purecomponent"><a class="header" href="#when-to-use-purecomponent">When to use PureComponent?</a></h2>
150
+ <p>Use it when your app is slow and need more speed.</p>
151
+ <h2 id="cache-strategy"><a class="header" href="#cache-strategy">Cache strategy</a></h2>
152
+ <p>It compares <code>render</code> method arguments and the previous arguments.</p>
153
+ <pre><code class="language-rb">def render
154
+ o 'div' do
155
+ o Pure, foo: state.foo
156
+ o NotPure bar: state.bar
157
+ end
158
+ end
159
+ </code></pre>
160
+ <p>In this case, <code>NotPure</code> component's render method is called even if <code>state.foo</code> is changed.
161
+ Whereas <code>Pure</code> component's render method is called only if <code>state.foo</code> is changed.</p>
162
+ <h2 id="state"><a class="header" href="#state">State</a></h2>
163
+ <p><code>state</code> method is not available in <code>PureComponent</code>, because <code>PureComponent</code> does not treat state as the cache key.
164
+ If you'd like to use state in <code>PureComponent</code>, pass the state from the parent component.</p>
85
165
 
86
-
166
+ </main>
87
167
 
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 " 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 active" 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>
168
+ <nav class="nav-wrapper" aria-label="Page navigation">
169
+ <!-- Mobile navigation buttons -->
170
+ <a rel="prev" href="../api/component.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
171
+ <i class="fa fa-angle-left"></i>
172
+ </a>
303
173
 
304
- <div class="book-body">
305
-
306
- <div class="body-inner">
307
-
308
-
174
+ <a rel="next" href="../api/middleware.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
175
+ <i class="fa fa-angle-right"></i>
176
+ </a>
309
177
 
310
- <div class="book-header" role="navigation">
311
-
178
+ <div style="clear: both"></div>
179
+ </nav>
180
+ </div>
181
+ </div>
312
182
 
313
- <!-- Title -->
314
- <h1>
315
- <i class="fa fa-circle-o-notch fa-spin"></i>
316
- <a href=".." >Ovto::PureComponent</a>
317
- </h1>
318
- </div>
183
+ <nav class="nav-wide-wrapper" aria-label="Page navigation">
184
+ <a rel="prev" href="../api/component.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
185
+ <i class="fa fa-angle-left"></i>
186
+ </a>
319
187
 
188
+ <a rel="next" href="../api/middleware.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
189
+ <i class="fa fa-angle-right"></i>
190
+ </a>
191
+ </nav>
320
192
 
193
+ </div>
321
194
 
322
195
 
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="ovtopurecomponent">Ovto::PureComponent</h1>
332
- <p>It almost the same as <code>Ovto::Component</code>, but it caches the <code>render</code> method calling with arguments of the method.</p>
333
- <h2 id="when-to-use-purecomponent">When to use PureComponent?</h2>
334
- <p>Use it when your app is slow and need more speed.</p>
335
- <h2 id="cache-strategy">Cache strategy</h2>
336
- <p>It compares <code>render</code> method arguments and the previous arguments.</p>
337
- <pre><code class="lang-rb"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span></span>
338
- o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
339
- o Pure, <span class="hljs-symbol">foo:</span> state.foo
340
- o NotPure <span class="hljs-symbol">bar:</span> state.bar
341
- <span class="hljs-keyword">end</span>
342
- <span class="hljs-keyword">end</span>
343
- </code></pre>
344
- <p>In this case, <code>NotPure</code> component&apos;s render method is called even if <code>state.foo</code> is changed.
345
- Whereas <code>Pure</code> component&apos;s render method is called only if <code>state.foo</code> is changed.</p>
346
- <h2 id="state">State</h2>
347
- <p><code>state</code> method is not available in <code>PureComponent</code>, because <code>PureComponent</code> does not treat state as the cache key.
348
- If you&apos;d like to use state in <code>PureComponent</code>, pass the state from the parent component.</p>
349
196
 
350
-
351
- </section>
352
-
353
- </div>
354
- <div class="search-results">
355
- <div class="has-results">
356
-
357
- <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
358
- <ul class="search-results-list"></ul>
359
-
360
- </div>
361
- <div class="no-results">
362
-
363
- <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
364
-
365
- </div>
366
- </div>
367
- </div>
368
197
 
369
- </div>
370
- </div>
371
-
372
- </div>
198
+ <script>
199
+ window.playground_copyable = true;
200
+ </script>
373
201
 
374
-
375
-
376
- <a href="component.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::Component">
377
- <i class="fa fa-angle-left"></i>
378
- </a>
379
-
380
-
381
- <a href="middleware.html" class="navigation navigation-next " aria-label="Next page: Ovto::Middleware">
382
- <i class="fa fa-angle-right"></i>
383
- </a>
384
-
385
-
386
-
387
- </div>
388
202
 
389
- <script>
390
- var gitbook = gitbook || [];
391
- gitbook.push(function() {
392
- gitbook.page.hasChanged({"page":{"title":"Ovto::PureComponent","level":"1.4.5","depth":2,"next":{"title":"Ovto::Middleware","level":"1.4.6","depth":2,"path":"api/middleware.md","ref":"api/middleware.md","articles":[]},"previous":{"title":"Ovto::Component","level":"1.4.4","depth":2,"path":"api/component.md","ref":"api/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/pure_component.md","mtime":"2020-02-10T04:33:15.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2020-02-29T14:26:27.632Z"},"basePath":"..","book":{"language":""}});
393
- });
394
- </script>
395
- </div>
203
+ <script src="../elasticlunr.min.js"></script>
204
+ <script src="../mark.min.js"></script>
205
+ <script src="../searcher.js"></script>
396
206
 
397
-
398
- <script src="../gitbook/gitbook.js"></script>
399
- <script src="../gitbook/theme.js"></script>
400
-
401
-
402
- <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
403
-
404
-
405
-
406
- <script src="../gitbook/gitbook-plugin-search/search.js"></script>
407
-
408
-
409
-
410
- <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
411
-
412
-
413
-
414
- <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
415
-
416
-
417
-
418
- <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
419
-
420
-
421
-
422
- <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
423
-
424
-
207
+ <script src="../clipboard.min.js"></script>
208
+ <script src="../highlight.js"></script>
209
+ <script src="../book.js"></script>
425
210
 
211
+ <!-- Custom JS scripts -->
212
+
213
+
214
+ </div>
426
215
  </body>
427
216
  </html>
428
-