render_async 2.1.5 β†’ 2.1.10

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5a8461ed53ed7d4d5518985762d2f76dec99936336c4cbfaffb1ff5e3ae91e10
4
- data.tar.gz: e5b013fb3116c1edf08532cff838c54b51042e88c40ef1354b0d2ad211c4793b
3
+ metadata.gz: 4c2458365f2d0d1c95a9356e4076e483b41e58518a6c0496d0b2d20c8a0c1e44
4
+ data.tar.gz: 9fce775541e8e12fe742a0ec03dfb52a92f47ac70c953442d74e612f721d0480
5
5
  SHA512:
6
- metadata.gz: 75f915f3bdb92d38f5b9085377923423fbaa9bd72f39632d819c1114fa283bdd953a1fe3649d3c27f3609b01de951e24e8db008b8c9e5edf1ff2d1a792b809eb
7
- data.tar.gz: d78fa9d2c96ee3676542ec6b4c0db93ad606917c225fd6386ed400c6ec9287ec70a9328eb2ae7e880faa04cb96e59e0ff3fc2ef3f469a3ee01bd720f8fe14849
6
+ metadata.gz: c1a00f85f23df409ba9a505c963359979512c32110096a3b7bf5431942a0a8274711fc2000a909f379d76a921548854bb3bc005e0cc6f6a31b8f46d94692c6f2
7
+ data.tar.gz: 8aab5df90bf0db84a3c4c82adf6eec772de19b553b9bdcd0d08646fdd20f522eb4cc4d41e7ef335aa856557e8f892cd8f3d7f2507938f042d8f0eaf3988bff75
data/.all-contributorsrc CHANGED
@@ -196,6 +196,44 @@
196
196
  "contributions": [
197
197
  "code"
198
198
  ]
199
+ },
200
+ {
201
+ "login": "vanboom",
202
+ "name": "Don",
203
+ "avatar_url": "https://avatars1.githubusercontent.com/u/251706?v=4",
204
+ "profile": "https://github.com/vanboom",
205
+ "contributions": [
206
+ "code"
207
+ ]
208
+ },
209
+ {
210
+ "login": "villu164",
211
+ "name": "villu164",
212
+ "avatar_url": "https://avatars0.githubusercontent.com/u/998682?v=4",
213
+ "profile": "https://github.com/villu164",
214
+ "contributions": [
215
+ "doc"
216
+ ]
217
+ },
218
+ {
219
+ "login": "Mbuckley0",
220
+ "name": "Mitchell Buckley",
221
+ "avatar_url": "https://avatars.githubusercontent.com/u/11203679?v=4",
222
+ "profile": "https://github.com/Mbuckley0",
223
+ "contributions": [
224
+ "code",
225
+ "doc"
226
+ ]
227
+ },
228
+ {
229
+ "login": "yhirano55",
230
+ "name": "yhirano55",
231
+ "avatar_url": "https://avatars.githubusercontent.com/u/15371677?v=4",
232
+ "profile": "https://github.com/yhirano55",
233
+ "contributions": [
234
+ "code",
235
+ "doc"
236
+ ]
199
237
  }
200
238
  ],
201
239
  "repoType": "github"
@@ -0,0 +1,40 @@
1
+ # :pray: Contributing
2
+
3
+ Thank you for considering or deciding to contribute, this is much appreciated!
4
+ Any kind of bug reports and pull requests are encouraged and welcome on GitHub at
5
+ https://github.com/renderedtext/render_async.
6
+
7
+ ## :inbox_tray: Installing dependencies
8
+
9
+ You can install all needed dependencies by running `bin/setup`.
10
+
11
+ ## :runner: Running RSpec tests
12
+
13
+ You can run either `rake spec` or `bundle exec rspec` to run all the RSpec tests
14
+ in the project.
15
+
16
+ ## :running_woman: Running integration tests
17
+
18
+ There is a simple command `bin/integration-tests` which sets up 2 submodules,
19
+ and runs Cucumber features in them.
20
+
21
+ There are 2 submodules for render_async. The submodules are Rails 5 and Rails 6
22
+ projects which are located in:
23
+
24
+ - `spec/fixtures/rails-5-base-app`, and
25
+ - `spec/fixtures/rails-6-base-app`.
26
+
27
+ You can find [Rails 5 base app here](https://github.com/nikolalsvk/rails-5-base-app/tree/render-async),
28
+ and the [Rails 6 base app here](https://github.com/nikolalsvk/rails-6-base-app/tree/render-async).
29
+
30
+ Each of them have different use cases of render_async defined in `app/views/render_asyncs/_use_cases.html.erb` in their repos.
31
+ All the feature tests are inside `features/render_async.feature` and `features/render_async_jquery.feature` files.
32
+
33
+ If you are adding one or more feature tests or use cases, make sure to make a
34
+ PR on those repos as well and include them in the PR on the render_async repo.
35
+
36
+ ## :sos: Need help?
37
+
38
+ Got any issues or difficulties?
39
+ Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
40
+ and ask questions there. We will try to respond to you as quickly as possible.
data/.gitignore CHANGED
@@ -15,3 +15,4 @@ spec/reports
15
15
  test/tmp
16
16
  test/version_tmp
17
17
  tmp
18
+ .DS_Store
data/.gitmodules CHANGED
@@ -2,3 +2,7 @@
2
2
  path = spec/fixtures/rails-5-base-app
3
3
  url = git@github.com:nikolalsvk/rails-5-base-app.git
4
4
  branch = render-async
5
+ [submodule "spec/fixtures/rails-6-base-app"]
6
+ path = spec/fixtures/rails-6-base-app
7
+ url = git@github.com:nikolalsvk/rails-6-base-app.git
8
+ branch = render-async
data/CHANGELOG.md CHANGED
@@ -1,8 +1,64 @@
1
- ### 2.1.1 (2019/8/17)
1
+ ### 2.1.10 (2021/03/21)
2
+
3
+ * [#146](https://github.com/renderedtext/render_async/pull/146): Add comment when we check if container is present - [@nikolalsvk](https://github.com/nikolalsvk).
4
+ * [#145](https://github.com/renderedtext/render_async/pull/145): Wrap html_options for turbolinks - [@yhirano55](https://github.com/yhirano55).
5
+ * [#144](https://github.com/renderedtext/render_async/pull/144): Avoid TypeError if container has already disappear - [@yhirano55](https://github.com/yhirano55).
6
+
7
+ ### 2.1.9 (2021/02/23)
8
+
9
+ * [#142](https://github.com/renderedtext/render_async/pull/142): Update Turbolinks docs - [@nikolalsvk](https://github.com/nikolalsvk).
10
+ * [#141](https://github.com/renderedtext/render_async/pull/141): Add Support for Turbo - [@MBuckley0](https://github.com/Mbuckley0).
11
+ * [#139](https://github.com/renderedtext/render_async/pull/139): Fix readme configuration-options anchor - [@richardvenneman](https://github.com/richardvenneman).
12
+ * [#138](https://github.com/renderedtext/render_async/pull/138): Add Rails 6 base app as a fixture - [@nikolalsvk](https://github.com/nikolalsvk).
13
+ * [#137](https://github.com/renderedtext/render_async/pull/137): Rename config - [@nikolalsvk](https://github.com/nikolalsvk).
14
+
15
+ ### 2.1.8 (2020/10/24)
16
+
17
+ * [#134](https://github.com/renderedtext/render_async/pull/134): Add config option for setting nonce - [@nikolalsvk](https://github.com/nikolalsvk).
18
+ * [#132](https://github.com/renderedtext/render_async/pull/132): Refresh render_async with an event - [@nikolalsvk](https://github.com/nikolalsvk).
19
+ * [#131](https://github.com/renderedtext/render_async/pull/131): Start to poll on page load with toggle - [@nikolalsvk](https://github.com/nikolalsvk).
20
+ * [#130](https://github.com/renderedtext/render_async/pull/130): Set up control events after document loaded - [@nikolalsvk](https://github.com/nikolalsvk).
21
+ * [#127](https://github.com/renderedtext/render_async/pull/127): Update README.md, to reflect correct turbolinks configuration value - [@villu164](https://github.com/villu164).
22
+
23
+ ### 2.1.7 (2020/8/1)
24
+
25
+ * [#125](https://github.com/renderedtext/render_async/pull/125): Implement retry after some time feature - [@nikolalsvk](https://github.com/nikolalsvk).
26
+ * [#124](https://github.com/renderedtext/render_async/pull/124): Add more info on how to control polling - [@nikolalsvk](https://github.com/nikolalsvk).
27
+ * [#123](https://github.com/renderedtext/render_async/pull/123): Simplify calling of start and stop event when interval is defined - [@nikolalsvk](https://github.com/nikolalsvk).
28
+ * [#119](https://github.com/renderedtext/render_async/pull/119): Add polling control start/stop events - [@vanboom](https://github.com/vanboom).
29
+ * [#120](https://github.com/renderedtext/render_async/pull/120): Fine tune custom content_for feature - [@nikolalsvk](https://github.com/nikolalsvk).
30
+ * [#117](https://github.com/renderedtext/render_async/pull/117): Allow a custom content_for name - [@vanboom](https://github.com/vanboom).
31
+
32
+ ### 2.1.6 (2020/5/9)
33
+
34
+ * [#114](https://github.com/renderedtext/render_async/pull/114): Call render_async logic if document state is ready or interactive - [@nikolalsvk](https://github.com/nikolalsvk).
35
+ * [#113](https://github.com/renderedtext/render_async/pull/113): Remove interval after Turbolinks visit event - [@nikolalsvk](https://github.com/nikolalsvk).
36
+ * [#112](https://github.com/renderedtext/render_async/pull/112): Add X-Requested-With header in Vanilla JS - [@nikolalsvk](https://github.com/nikolalsvk).
37
+ * [#110](https://github.com/renderedtext/render_async/pull/110): Remove preventDefault, and load toggle in stream - [@vanboom](https://github.com/vanboom).
38
+
39
+ ### 2.1.5 (2020/3/22)
40
+
41
+ * [#105](https://github.com/renderedtext/render_async/pull/105): Load toggle listeners after page loads - [@nikolalsvk](https://github.com/nikolalsvk).
42
+ * [#104](https://github.com/renderedtext/render_async/pull/104): Attach container to dispatched events - [@nikolalsvk](https://github.com/nikolalsvk).
43
+ * [#103](https://github.com/renderedtext/render_async/pull/103): Add generic "load" and "error" events - [@lipsumar](https://github.com/lipsumar).
44
+ * [#98](https://github.com/renderedtext/render_async/pull/98): Bump nonce pattern in the README to follow Rails CSP standard - [@colinxfleming](https://github.com/colinxfleming).
45
+
46
+ ### 2.1.4 (2019/11/11)
47
+
48
+ * [#96](https://github.com/renderedtext/render_async/pull/96): Add once option to remove event once it's triggered #94 - [@fffx](https://github.com/fffx).
49
+
50
+ ### 2.1.3 (2019/9/24)
51
+
52
+ * [#95](https://github.com/renderedtext/render_async/pull/95): Use double quotes for displaying error message - [@nikolalsvk](https://github.com/nikolalsvk).
53
+ * [#93](https://github.com/renderedtext/render_async/pull/93): Fix: "Uncaught ReferenceError: \_interval" #92 - [@fffx](https://github.com/fffx).
54
+
55
+ ### 2.1.2 (2019/8/17)
56
+
2
57
  * [#89](https://github.com/renderedtext/render_async/pull/89): Bump version to 2.1.2 - [@nikolalsvk](https://github.com/nikolalsvk).
3
58
  * [#82](https://github.com/renderedtext/render_async/pull/88): When toggle true, do not fire `_renderAsyncFunc` on `turbolinks:load` - [@ThanhKhoaIT](https://github.com/ThanhKhoaIT).
4
59
 
5
60
  ### 2.1.1 (2019/8/17)
61
+
6
62
  * [#85](https://github.com/renderedtext/render_async/pull/85): Rename main JS function and support toggle feature with other features - [@nikolalsvk](https://github.com/nikolalsvk).
7
63
  * [#82](https://github.com/renderedtext/render_async/pull/82): Add toggle selector and event to render - [@ThanhKhoaIT](https://github.com/ThanhKhoaIT).
8
64
  * DEPRECATION WARNING - html_options is now a hash that you pass to render_async instead of an argument. If you passed for example a nonce: '21312aas...', you will need to pass
data/README.md CHANGED
@@ -1,32 +1,70 @@
1
- [![Build Status](https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg)](https://semaphoreci.com/renderedtext/render_async)
2
- [![All Contributors](https://img.shields.io/badge/all_contributors-20-orange.svg?style=flat-square)](#contributors)
3
- [![Gem Version](https://badge.fury.io/rb/render_async.svg)](https://badge.fury.io/rb/render_async)
4
- [![Donate](https://img.shields.io/badge/$-support-green.svg)](https://www.paypal.me/nikolalsvk/10)
5
- [![Code Climate](https://codeclimate.com/github/renderedtext/render_async/badges/gpa.svg)](https://codeclimate.com/github/renderedtext/render_async)
6
- [![Test Coverage](https://codeclimate.com/github/renderedtext/render_async/badges/coverage.svg)](https://codeclimate.com/github/renderedtext/render_async/coverage)
7
- [![Help Contribute to Open Source](https://www.codetriage.com/renderedtext/render_async/badges/users.svg)](https://www.codetriage.com/renderedtext/render_async)
8
-
9
- ![render_async](http://s2blog.wpengine.com/wp-content/uploads/assets/images/2017-06-08/speed-up-rendering-rails-pages-with-render-async.png)
10
-
11
- # render_async
12
-
13
- Speed up rendering Rails pages with this gem.
14
-
15
- `render_async` renders partials to your views **asynchronously**. This is done
16
- through adding JavaScript code that does AJAX request to your controller which
17
- then renders your partial into a Rails view.
18
-
19
- Workflow:
20
-
21
- 1. user visits a Rails page
22
- 2. AJAX request on the controller action
1
+ <p align="center">
2
+ <img src='http://s2blog.wpengine.com/wp-content/uploads/assets/images/2017-06-08/speed-up-rendering-rails-pages-with-render-async.png' alt='render_async' />
3
+
4
+ <h1 align="center">πŸ‘‹ Welcome to render_async</h1>
5
+
6
+ <h3 align="center">Let's make your Rails pages fast again :racehorse:</h3>
7
+
8
+ <br />
9
+
10
+ <p align="center">
11
+ <a href="https://www.paypal.me/nikolalsvk/10" target="_blank">
12
+ <img src="https://img.shields.io/badge/$-support-green.svg" alt="Donate" />
13
+ </a>
14
+ <a href="https://rubygems.org/gems/render_async" target="_blank">
15
+ <img src="https://img.shields.io/gem/dt/render_async" alt="Downloads" />
16
+ </a>
17
+ <a href="#contributors" target="_blank">
18
+ <img src="https://img.shields.io/github/all-contributors/renderedtext/render_async" alt="All contributors" />
19
+ </a>
20
+ <a href="https://badge.fury.io/rb/render_async" target="_blank">
21
+ <img src="https://badge.fury.io/rb/render_async.svg" alt="Gem Version" />
22
+ </a>
23
+ <br />
24
+ <a href="https://discord.gg/SPfbeRm" target="_blank">
25
+ <img src="https://img.shields.io/discord/738783603214909521" alt="Discord Server" />
26
+ </a>
27
+ <a href="https://semaphoreci.com/renderedtext/render_async" target="_blank">
28
+ <img src="https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg" alt="Build Status" />
29
+ </a>
30
+ <a href="https://codeclimate.com/github/renderedtext/render_async" target="_blank">
31
+ <img src="https://img.shields.io/codeclimate/maintainability/renderedtext/render_async" alt="Code Climate Maintainablity" />
32
+ </a>
33
+ <a href="https://codeclimate.com/github/renderedtext/render_async/coverage" target="_blank">
34
+ <img src="https://img.shields.io/codeclimate/coverage/renderedtext/render_async" alt="Test Coverage" />
35
+ </a>
36
+ <a href="https://github.com/renderedtext/render_async/blob/master/LICENSE" target="_blank">
37
+ <img src="https://img.shields.io/github/license/renderedtext/render_async" alt="License" />
38
+ </a>
39
+ <a href="https://www.codetriage.com/renderedtext/render_async" target="_blank">
40
+ <img src="https://www.codetriage.com/renderedtext/render_async/badges/users.svg" alt="Help Contribute to Open Source" />
41
+ </a>
42
+ </p>
43
+ </p>
44
+
45
+ ### `render_async` is here to make your pages show faster to users.
46
+
47
+ Pages become faster seamlessly by rendering partials to your views.
48
+
49
+ Partials render **asynchronously** and let users see your page **faster**
50
+ than using regular rendering.
51
+
52
+ It works with Rails and its tools out of the box.
53
+
54
+ :sparkles: A quick overview of how `render_async` does its magic:
55
+
56
+ 1. user visits a page
57
+ 2. `render_async` makes an AJAX request on the controller action
23
58
  3. controller renders a partial
24
- 4. partials renders in the place where you put `render_async` helper
59
+ 4. partial renders in the place where you put `render_async` view helper
25
60
 
26
- JavaScript is injected into `<%= content_for :render_async %>` so you choose
61
+ JavaScript is injected straight into `<%= content_for :render_async %>` so you choose
27
62
  where to put it.
28
63
 
29
- ## Installation
64
+ :mega: P.S. Join our [Discord channel](https://discord.gg/SPfbeRm) for help and discussion, and let's make `render_async` even better!
65
+
66
+ ## :package: Installation
67
+
30
68
  Add this line to your application's Gemfile:
31
69
 
32
70
  ```ruby
@@ -37,14 +75,14 @@ And then execute:
37
75
 
38
76
  $ bundle install
39
77
 
40
- ## Usage
78
+ ## :hammer: Usage
41
79
 
42
80
  1. Include `render_async` view helper somewhere in your views (e.g. `app/views/comments/show.html.erb`):
43
81
  ```erb
44
82
  <%= render_async comment_stats_path %>
45
83
  ```
46
84
 
47
- 2. Then create a route that will `config/routes.rb`:
85
+ 2. Then create a route for it `config/routes.rb`:
48
86
  ```ruby
49
87
  get :comment_stats, controller: :comments
50
88
  ```
@@ -70,7 +108,7 @@ And then execute:
70
108
  <%= content_for :render_async %>
71
109
  ```
72
110
 
73
- ## Advanced usage
111
+ ## :hammer_and_wrench: Advanced usage
74
112
 
75
113
  Advanced usage includes information on different options, such as:
76
114
 
@@ -81,16 +119,22 @@ Advanced usage includes information on different options, such as:
81
119
  - [Passing in a placeholder](#passing-in-a-placeholder)
82
120
  - [Passing in an event name](#passing-in-an-event-name)
83
121
  - [Using default events](#using-default-events)
122
+ - [Refreshing the partial](#refreshing-the-partial)
84
123
  - [Retry on failure](#retry-on-failure)
124
+ - [Retry after some time](#retry-after-some-time)
85
125
  - [Toggle event](#toggle-event)
126
+ - [Control polling with a toggle](#control-polling-with-a-toggle)
86
127
  - [Polling](#polling)
128
+ - [Controlled polling](#controlled-polling)
87
129
  - [Handling errors](#handling-errors)
88
130
  - [Caching](#caching)
89
131
  - [Doing non-GET requests](#doing-non-get-requests)
90
132
  - [Using with Turbolinks](#using-with-turbolinks)
133
+ - [Using with Turbo](#using-with-turbo)
91
134
  - [Using with respond_to and JS format](#using-with-respond_to-and-js-format)
92
- - [Nested Async Renders](#nested-async-renders)
93
- - [Configuration](#configuration)
135
+ - [Nested async renders](#nested-async-renders)
136
+ - [Customizing the content_for name](#customizing-the-content_for-name)
137
+ - [Configuration options](#configuration-options)
94
138
 
95
139
  ### Passing in a container ID
96
140
 
@@ -136,6 +180,7 @@ Rendered code in the view:
136
180
  `javascript_tag`, to drop HTML tags into the `script` element.
137
181
 
138
182
  Example of utilizing `html_options` with a [nonce](https://edgeguides.rubyonrails.org/security.html#content-security-policy):
183
+
139
184
  ```erb
140
185
  <%= render_async users_path, html_options: { nonce: true } %>
141
186
  ```
@@ -154,6 +199,8 @@ Rendered code in the view:
154
199
  </div>
155
200
  ```
156
201
 
202
+ > :bulb: You can enable `nonce` to be set everywhere by using [configuration option](#configuration-options) render_async provides.
203
+
157
204
  ### Passing in an HTML element name
158
205
 
159
206
  `render_async` can take in an HTML element name, allowing you to control
@@ -240,13 +287,12 @@ document.addEventListener("users-loaded", function(event) {
240
287
  });
241
288
  ```
242
289
 
243
- NOTE: Dispatching events is also supported for older browsers that don't
244
- support Event constructor.
290
+ > :bulb: Dispatching events is also supported for older browsers that don't support Event constructor.
245
291
 
246
292
  ### Using default events
247
293
 
248
294
  `render_async` will fire the event `render_async_load` when an async partial
249
- has loaded and rendered on page.
295
+ has loaded and rendered on the page.
250
296
 
251
297
  In case there is an error, the event `render_async_error` will fire instead.
252
298
 
@@ -268,14 +314,44 @@ document.addEventListener('render_async_error', function(event) {
268
314
  });
269
315
 
270
316
  // with jQuery
271
- $(document).on('render_async_load', function(event, container) {
272
- console.log('Async partial loaded in this container:', container);
317
+ $(document).on('render_async_load', function(event) {
318
+ console.log('Async partial loaded in this container:', event.container);
273
319
  });
274
- $(document).on('render_async_error', function(event, container) {
275
- console.log('Async partial could not load in this container:', container);
320
+ $(document).on('render_async_error', function(event) {
321
+ console.log('Async partial could not load in this container:', event.container);
276
322
  });
277
323
  ```
278
324
 
325
+ ### Refreshing the partial
326
+
327
+ `render_async` lets you refresh (reload) the partial by letting you dispatch
328
+ the 'refresh' event on the `render_async`'s container. An example:
329
+
330
+ ```erb
331
+ <%= render_async comments_path,
332
+ container_id: 'refresh-me',
333
+ replace_container: false %>
334
+
335
+ <button id="refresh-button">Refresh comments</button>
336
+
337
+ <script>
338
+ var button = document.getElementById('refresh-button')
339
+ var container = document.getElementById('refresh-me');
340
+
341
+ button.addEventListener('click', function() {
342
+ var event = new Event('refresh');
343
+
344
+ // Dispatch 'refresh' on the render_async container
345
+ container.dispatchEvent(event)
346
+ })
347
+ </script>
348
+ ```
349
+
350
+ If you follow the example above, when you click "Refresh comments" button,
351
+ `render_async` will trigger again and reload the `comments_path`.
352
+
353
+ > :bulb: Note that you need to pass `replace_container: false` so you can later dispatch an event on that container.
354
+
279
355
  ### Retry on failure
280
356
 
281
357
  `render_async` can retry your requests if they fail for some reason.
@@ -293,6 +369,39 @@ it will show an [error message](#handling-errors) which you need to specify.
293
369
  This can show useful when you know your requests often fail, and you don't want
294
370
  to refresh the whole page just to retry them.
295
371
 
372
+ #### Retry after some time
373
+
374
+ If you want to retry requests but with some delay in between the calls, you can
375
+ pass a `retry_delay` option together with `retry_count` like so:
376
+
377
+ ```erb
378
+ <%= render_async users_path,
379
+ retry_count: 5,
380
+ retry_delay: 2000 %>
381
+ ```
382
+
383
+ This will make `render_async` wait for 2 seconds before retrying after each
384
+ failure. In the end, if the request is still failing after 5th time, it will
385
+ dispatch a [default error event](#using-default-events).
386
+
387
+ > :candy: If you are catching an event after an error, you can get `retryCount` from
388
+ the event. `retryCount` will have the number of retries it took before the event was dispatched.
389
+
390
+ Here is an example on how to get `retryCount`:
391
+
392
+ ```erb
393
+ <%= render_async users_path,
394
+ retry_count: 5,
395
+ retry_delay: 2000,
396
+ error_event_name: 'it-failed-badly' %>
397
+
398
+ <script>
399
+ document.addEventListener('it-failed-badly', function(event) {
400
+ console.log("Request failed after " + event.retryCount + " tries!")
401
+ });
402
+ </script>
403
+ ```
404
+
296
405
  ### Toggle event
297
406
 
298
407
  You can trigger `render_async` loading by clicking or doing another event to a
@@ -302,37 +411,57 @@ default event that will trigger `render_async` will be 'click' event. You can
302
411
  do this by doing the following:
303
412
 
304
413
  ```erb
305
- <a href='#' id='detail-button'>Detail</a>
306
- <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } %>
414
+ <a href='#' id='comments-button'>Load comments</a>
415
+ <%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } %>
307
416
  ```
308
417
 
309
- This will trigger `render_async` to load the `comments_path` when you click the `#details-button` element.
310
- If you want to remove event once it's triggered, you can pass `once: true` in the toggle options.
311
- The `once` option is false by default.
418
+ This will trigger `render_async` to load the `comments_path` when you click the `#comments-button` element.
419
+ If you want to remove an event once it's triggered, you can pass `once: true` in the toggle options.
420
+ The `once` option is false (`nil`) by default.
312
421
 
313
422
  You can also pass in a placeholder before the `render_async` is triggered. That
314
423
  way, the element that started `render_async` logic will be removed after the
315
424
  request has been completed. You can achieve this behaviour with something like this:
316
425
 
317
426
  ```erb
318
- <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } do %>
319
- <a href='#' id='detail-button'>Detail</a>
427
+ <%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } do %>
428
+ <a href='#' id='comments-button'>Load comments</a>
320
429
  <% end %>
321
430
  ```
322
431
 
432
+ #### Control polling with a toggle
433
+
323
434
  Also, you can mix interval and toggle features. This way, you can turn polling
324
- on, and off by clicking the "Detail" button. In order to do this, you need to
435
+ on, and off by clicking the "Load comments" button. In order to do this, you need to
325
436
  pass `toggle` and `interval` arguments to `render_async` call like this:
326
437
 
327
438
  ```erb
328
- <a href='#' id='detail-button'>Detail</a>
329
- <%= render_async comments_path, toggle: { selector: '#detail-button', event: :click }, interval: 2000 %>
439
+ <a href='#' id='comments-button'>Load comments</a>
440
+ <%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
330
441
  ```
331
442
 
443
+ If you want `render_async` to render the request on load, you can pass `start:
444
+ true`. Passing the `start` option inside the `toggle` hash will trigger
445
+ `render_async` on page load. You can then toggle off polling by interacting
446
+ with the element you specified. An example:
447
+
448
+ ```erb
449
+ <a href='#' id='comments-button'>Toggle comments loading</a>
450
+ <%= render_async comments_path,
451
+ toggle: { selector: '#comments-button',
452
+ event: :click,
453
+ start: true },
454
+ interval: 2000 %>
455
+ ```
456
+
457
+ In the example above, the comments will load as soon as the page is rendered.
458
+ Then, you can stop polling for comments by clicking the "Toggle comments
459
+ loading" button.
460
+
332
461
  ### Polling
333
462
 
334
463
  You can call `render_async` with interval argument. This will make render_async
335
- call specified path at specified interval.
464
+ call specified path at the specified interval.
336
465
 
337
466
  By doing this:
338
467
  ```erb
@@ -342,15 +471,65 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
342
471
 
343
472
  This can be handy if you want to enable polling for a specific URL.
344
473
 
345
- NOTE: By passing interval to `render_async`, initial container element
346
- will remain in HTML tree, it will not be replaced with request response.
347
- You can handle how that container element is rendered and its style by
348
- [passing in an HTML element name](#passing-in-an-html-element-name) and
349
- [HTML element class](#passing-in-a-container-class-name).
474
+ > :warning: By passing interval to `render_async`, the initial container element
475
+ > will remain in the HTML tree and it will not be replaced with request response.
476
+ > You can handle how that container element is rendered and its style by
477
+ > [passing in an HTML element name](#passing-in-an-html-element-name) and
478
+ > [HTML element class](#passing-in-a-container-class-name).
479
+
480
+ ### Controlled polling
481
+
482
+ You can controller `render_async` [polling](#polling) in 2 manners.
483
+ First one is pretty simple, and it involves using the [toggle](#toggle-event)
484
+ feature. To do this, you can follow instructions in the
485
+ [control polling with a toggle section](#control-polling-with-a-toggle).
486
+
487
+ The second option is more advanced and it involves emitting events to the `render_async`'s
488
+ container element. From your code, you can emit the following events:
489
+ - 'async-stop' - this will stop polling
490
+ - 'async-start' - this will start polling.
491
+
492
+ > :bulb: Please note that events need to be dispatched to a render_async container.
493
+
494
+ An example of how you can do this looks like this:
495
+
496
+ ```erb
497
+ <%= render_async wave_render_async_path,
498
+ container_id: 'controllable-interval', # set container_id so we can get it later easily
499
+ interval: 3000 %>
500
+
501
+ <button id='stop-polling'>Stop polling</button>
502
+ <button id='start-polling'>Start polling</button>
503
+
504
+ <script>
505
+ var container = document.getElementById('controllable-interval')
506
+ var stopPolling = document.getElementById('stop-polling')
507
+ var startPolling = document.getElementById('start-polling')
508
+
509
+ var triggerEventOnContainer = function(eventName) {
510
+ var event = new Event(eventName);
511
+
512
+ container.dispatchEvent(event)
513
+ }
514
+
515
+ stopPolling.addEventListener('click', function() {
516
+ container.innerHTML = '<p>Polling stopped</p>'
517
+ triggerEventOnContainer('async-stop')
518
+ })
519
+ startPolling.addEventListener('click', function() {
520
+ triggerEventOnContainer('async-start')
521
+ })
522
+ </script>
523
+ ```
524
+
525
+ We are rendering two buttons - "Stop polling" and "Start polling". Then, we
526
+ attach an event listener to catch any clicking on the buttons. When the buttons
527
+ are clicked, we either stop the polling or start the polling, depending on which
528
+ button a user clicks.
350
529
 
351
530
  ### Handling errors
352
531
 
353
- `render_async` let's you handle errors by allowing you to pass in `error_message`
532
+ `render_async` lets you handle errors by allowing you to pass in `error_message`
354
533
  and `error_event_name`.
355
534
 
356
535
  - `error_message`
@@ -396,10 +575,10 @@ Then, in the partial (e.g. `app/views/comments/_comment_stats.html.erb`):
396
575
  <% end %>
397
576
  ```
398
577
 
399
- * The first time the page renders, it will make the AJAX call.
400
- * Any other times (until the cache expires), it will render from cache
578
+ - The first time the page renders, it will make the AJAX call.
579
+ - Any other times (until the cache expires), it will render from cache
401
580
  instantly, without making the AJAX call.
402
- * You can expire cache simply by passing `:expires_in` in your view where
581
+ - You can expire cache simply by passing `:expires_in` in your view where
403
582
  you cache the partial
404
583
 
405
584
  ### Doing non-GET requests
@@ -437,19 +616,49 @@ end
437
616
  ```
438
617
 
439
618
  This way, you're not breaking Turbolinks flow of loading or reloading a page.
440
- It makes it more efficient that the next option that is suggested below.
619
+ It is more efficient than the next option below.
441
620
 
442
621
  Another option:
443
622
  If you want, you can tell Turbolinks to reload your `render_async` call as follows:
444
623
 
445
624
  ```erb
446
- <%= render_async events_path, 'data-turbolinks-track': 'reload' %>
625
+ <%= render_async events_path, html_options: { 'data-turbolinks-track': 'reload' } %>
447
626
  ```
448
627
 
449
628
  This will reload the whole page with Turbolinks.
450
629
 
451
- Make sure to put `<%= content_for :render_async %>` in your base view file in
452
- the `<head>` and not the `<body>`.
630
+ > :bulb: If Turbolinks is misbehaving in some way, make sure to put `<%= content_for :render_async %>` in your base view file in
631
+ the `<body>` and not the `<head>`.
632
+
633
+ ### Using with Turbo
634
+
635
+ On Turbo applications, you may experience caching issues when navigating
636
+ away from, and then back to, a page with a `render_async` call on it. This will
637
+ likely show up as an empty div.
638
+
639
+ If you're using Turbo, you can resolve this by setting Turbo
640
+ configuration of `render_async` to true:
641
+
642
+ ```rb
643
+ RenderAsync.configure do |config|
644
+ config.turbo = true # Enable this option if you are using Turbo
645
+ end
646
+ ```
647
+
648
+ This way, you're not breaking Turbos flow of loading or reloading a page.
649
+ It is more efficient than the next option below.
650
+
651
+ Another option:
652
+ If you want, you can tell Turbo to reload your `render_async` call as follows:
653
+
654
+ ```erb
655
+ <%= render_async events_path, html_options: { 'data-turbo-track': 'reload' } %>
656
+ ```
657
+
658
+ This will reload the whole page with Turbo.
659
+
660
+ > :bulb: If Turbo is misbehaving in some way, make sure to put `<%= content_for :render_async %>` in your base view file in
661
+ the `<body>` and not the `<head>`.
453
662
 
454
663
  ### Using with respond_to and JS format
455
664
 
@@ -468,7 +677,7 @@ def comment_stats
468
677
  end
469
678
  ```
470
679
 
471
- When you do this, Rails will sometime set the response's `Content-Type` header
680
+ When you do this, Rails will sometimes set the response's `Content-Type` header
472
681
  to `text/javascript`. This causes the partial not to be rendered in the HTML.
473
682
  This usually happens when there's browser caching.
474
683
 
@@ -479,7 +688,7 @@ render call:
479
688
  render partial: "comment_stats", content_type: 'text/html'
480
689
  ```
481
690
 
482
- ### Nested Async Renders
691
+ ### Nested async renders
483
692
 
484
693
  It is possible to nest async templates within other async templates. When doing
485
694
  so, another `content_for` is required to ensure the JavaScript needed to load
@@ -506,7 +715,20 @@ For example:
506
715
  <%= content_for :render_async %>
507
716
  ```
508
717
 
509
- ### Configuration
718
+ ### Customizing the content_for name
719
+
720
+ The `content_for` name may be customized by passing the `content_for_name`
721
+ option to `render_async`. This option is especially useful when doing [nested async
722
+ renders](#nested-async-renders) to better control the location of the injected JavaScript.
723
+
724
+ For example:
725
+ ```erb
726
+ <%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
727
+
728
+ <%= content_for :render_async_comment_stats %>
729
+ ```
730
+
731
+ ### Configuration options
510
732
 
511
733
  `render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
512
734
  **by default** in order to fetch the request from the server.
@@ -516,10 +738,14 @@ so.
516
738
 
517
739
  You can configure it by doing the following anywhere before you call
518
740
  `render_async`:
741
+
519
742
  ```rb
520
743
  RenderAsync.configure do |config|
521
- config.jquery = true # This will render jQuery code, and skip Vanilla JS code
522
- config.turbolinks = false # Enable this option if you are using Turbolinks 5+
744
+ config.jquery = true # This will render jQuery code, and skip Vanilla JS code. The default value is false.
745
+ config.turbolinks = true # Enable this option if you are using Turbolinks 5+. The default value is false.
746
+ config.turbo = true # Enable this option if you are using Turbo. The default value is false.
747
+ config.replace_container = false # Set to false if you want to keep the placeholder div element from render_async. The default value is true.
748
+ config.nonces = true # Set to true if you want render_async's javascript_tag always to receive nonce: true. The default value is false.
523
749
  end
524
750
  ```
525
751
 
@@ -529,17 +755,34 @@ Also, you can do it like this:
529
755
  RenderAsync.configuration.jquery = true
530
756
  ```
531
757
 
532
- ## Development
758
+ Aside from configuring whether the gem relies on jQuery or VanillaJS, you can
759
+ configure other options:
760
+
761
+ - `turbolinks` option - If you are using Turbolinks 5+, you should enable this option since it supports Turbolinks way of loading data. The default value for this option is false.
762
+ - `turbo` option - If you are using Turbo, you should enable this option since it supports Turbo way of loading data. The default value for this option is false.
763
+ - `replace_container` option - If you want render_async to replace its container with the request response, turn this on. You can turn this on globally for all render_async calls, but if you use this option in a specific render_async call, it will override the global configuration. The default value is true.
764
+ - `nonces` - If you need to pass in `nonce: true` to the `javascript_tag` in your application, it might make sense for you to turn this on globally for all render_async calls. To read more about nonces, check out [Rails' official guide on security](https://edgeguides.rubyonrails.org/security.html). The default value is false.
765
+
766
+ ## :hammer_and_pick: Development
533
767
 
534
768
  After checking out the repo, run `bin/setup` to install dependencies. Then, run
535
769
  `rake spec` to run the tests. You can also run `bin/console` for an interactive
536
- prompt that will allow you to experiment.
770
+ prompt that will allow you to experiment. To run integration tests, use
771
+ `bin/integration-tests`. For more information, check out [CONTRIBUTING](.github/CONTRIBUTING.md) file, please.
772
+
773
+ Got any questions or comments about development (or anything else)?
774
+ Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
775
+ and let's make `render_async` even better!
776
+
777
+ ## :pray: Contributing
537
778
 
538
- ## Contributing
779
+ Check out [CONTRIBUTING](.github/CONTRIBUTING.md) file, please.
539
780
 
540
- Bug reports and pull requests are welcome on GitHub at https://github.com/renderedtext/render_async.
781
+ Got any issues or difficulties?
782
+ Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
783
+ and let's make `render_async` even better!
541
784
 
542
- ## License
785
+ ## :memo: License
543
786
 
544
787
  The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
545
788
 
@@ -552,7 +795,8 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
552
795
  | [<img src="https://avatars2.githubusercontent.com/u/3028124?v=4" width="100px;"/><br /><sub><b>Nikola Đuza</b></sub>](https://nikolalsvk.github.io)<br />[πŸ’¬](#question-nikolalsvk "Answering Questions") [πŸ’»](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Documentation") [πŸ‘€](#review-nikolalsvk "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/3866868?v=4" width="100px;"/><br /><sub><b>Colin</b></sub>](http://www.colinxfleming.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Documentation") [πŸ’‘](#example-colinxfleming "Examples") | [<img src="https://avatars2.githubusercontent.com/u/334273?v=4" width="100px;"/><br /><sub><b>Kasper Grubbe</b></sub>](http://kaspergrubbe.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=kaspergrubbe "Code") | [<img src="https://avatars2.githubusercontent.com/u/163584?v=4" width="100px;"/><br /><sub><b>Sai Ram Kunala</b></sub>](https://sairam.xyz/)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=sairam "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3065882?v=4" width="100px;"/><br /><sub><b>Josh Arnold</b></sub>](https://github.com/nightsurge)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=nightsurge "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=nightsurge "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/107798?v=4" width="100px;"/><br /><sub><b>Elad Shahar</b></sub>](https://eladshahar.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=SaladFork "Code") [πŸ’‘](#example-SaladFork "Examples") | [<img src="https://avatars3.githubusercontent.com/u/232392?v=4" width="100px;"/><br /><sub><b>Sasha</b></sub>](http://www.revzin.co.il)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Documentation") |
553
796
  | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
554
797
  | [<img src="https://avatars3.githubusercontent.com/u/50223?v=4" width="100px;"/><br /><sub><b>Ernest Surudo</b></sub>](http://elsurudo.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=elsurudo "Code") | [<img src="https://avatars1.githubusercontent.com/u/334809?v=4" width="100px;"/><br /><sub><b>Kurtis Rainbolt-Greene</b></sub>](https://kurtis.rainbolt-greene.online)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=krainboltgreene "Code") | [<img src="https://avatars2.githubusercontent.com/u/59744?v=4" width="100px;"/><br /><sub><b>Richard Schneeman</b></sub>](https://www.schneems.com)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=schneems "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/75705?v=4" width="100px;"/><br /><sub><b>Richard Venneman</b></sub>](https://www.cityspotters.com)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=richardvenneman "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/381395?v=4" width="100px;"/><br /><sub><b>Filipe W. Lima</b></sub>](https://github.com/filipewl)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=filipewl "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/3135638?v=4" width="100px;"/><br /><sub><b>JesΓΊs Eduardo Clemens Chong</b></sub>](https://github.com/eclemens)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=eclemens "Code") | [<img src="https://avatars3.githubusercontent.com/u/1935686?v=4" width="100px;"/><br /><sub><b>RenΓ© Klačan</b></sub>](https://github.com/reneklacan)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=reneklacan "Code") |
555
- | [<img src="https://avatars1.githubusercontent.com/u/1313442?v=4" width="100px;"/><br /><sub><b>Gil Gomes</b></sub>](http://gilgomes.com.br)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=gil27 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/6081795?v=4" width="100px;"/><br /><sub><b>Khoa Nguyen</b></sub>](https://github.com/ThanhKhoaIT)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/8645918?v=4" width="100px;"/><br /><sub><b>Preet Sethi</b></sub>](https://www.linkedin.com/in/preetsethila/)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=preetsethi "Code") | [<img src="https://avatars3.githubusercontent.com/u/11586335?v=4" width="100px;"/><br /><sub><b>fangxing</b></sub>](https://github.com/fffx)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=fffx "Code") | [<img src="https://avatars3.githubusercontent.com/u/1191418?v=4" width="100px;"/><br /><sub><b>Emmanuel Pire</b></sub>](http://blog.lipsumarium.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=lipsumar "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=lipsumar "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/615509?v=4" width="100px;"/><br /><sub><b>Maxim Geerinck</b></sub>](https://github.com/maximgeerinck)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=maximgeerinck "Code") |
798
+ | [<img src="https://avatars1.githubusercontent.com/u/1313442?v=4" width="100px;"/><br /><sub><b>Gil Gomes</b></sub>](http://gilgomes.com.br)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=gil27 "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/6081795?v=4" width="100px;"/><br /><sub><b>Khoa Nguyen</b></sub>](https://github.com/ThanhKhoaIT)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=ThanhKhoaIT "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/8645918?v=4" width="100px;"/><br /><sub><b>Preet Sethi</b></sub>](https://www.linkedin.com/in/preetsethila/)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=preetsethi "Code") | [<img src="https://avatars3.githubusercontent.com/u/11586335?v=4" width="100px;"/><br /><sub><b>fangxing</b></sub>](https://github.com/fffx)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=fffx "Code") | [<img src="https://avatars3.githubusercontent.com/u/1191418?v=4" width="100px;"/><br /><sub><b>Emmanuel Pire</b></sub>](http://blog.lipsumarium.com)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=lipsumar "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=lipsumar "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/615509?v=4" width="100px;"/><br /><sub><b>Maxim Geerinck</b></sub>](https://github.com/maximgeerinck)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=maximgeerinck "Code") | [<img src="https://avatars1.githubusercontent.com/u/251706?v=4" width="100px;"/><br /><sub><b>Don</b></sub>](https://github.com/vanboom)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=vanboom "Code") |
799
+ | [<img src="https://avatars0.githubusercontent.com/u/998682?v=4" width="100px;"/><br /><sub><b>villu164</b></sub>](https://github.com/villu164)<br />[πŸ“–](https://github.com/renderedtext/render_async/commits?author=villu164 "Documentation") | [<img src="https://avatars.githubusercontent.com/u/11203679?v=4" width="100px;"/><br /><sub><b>Mitchell Buckley</b></sub>](https://github.com/Mbuckley0)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=Mbuckley0 "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=Mbuckley0 "Documentation") | [<img src="https://avatars.githubusercontent.com/u/15371677?v=4" width="100px;"/><br /><sub><b>yhirano55</b></sub>](https://github.com/yhirano55)<br />[πŸ’»](https://github.com/renderedtext/render_async/commits?author=yhirano55 "Code") [πŸ“–](https://github.com/renderedtext/render_async/commits?author=yhirano55 "Documentation") |
556
800
  <!-- ALL-CONTRIBUTORS-LIST:END -->
557
801
 
558
802
  This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!