render_async 2.1.6 → 2.1.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.all-contributorsrc +9 -0
- data/CHANGELOG.md +9 -0
- data/README.md +202 -52
- data/app/views/render_async/_render_async.html.erb +17 -25
- data/app/views/render_async/_request_jquery.js.erb +35 -14
- data/app/views/render_async/_request_vanilla.js.erb +35 -14
- data/lib/render_async/version.rb +1 -1
- data/lib/render_async/view_helper.rb +16 -3
- metadata +6 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 80f65d684e925ba32249eef7d5dd817b268b72dfebd0ecd9525fbe544d16af57
|
4
|
+
data.tar.gz: 46b675280ceb449a68953e9a2833332ff74222d773a3aa66ec95036d25587273
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3bdd39f73528d3b9a8035ab5c8629b9c5261186f1d3eae2d5b82b856942c0ae602d5c670d96e009a240744fe5e7d93a97136298f05ef55c010f7d6f7972b4f40
|
7
|
+
data.tar.gz: a73351396f72b02895c03a4ff20068f096ae71279adc7345518d31e26111f63ac46b5b76424a24e566a7a0268f1748d1c1c364489e17d030dea12a691cc227eb
|
data/.all-contributorsrc
CHANGED
@@ -196,6 +196,15 @@
|
|
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
|
+
]
|
199
208
|
}
|
200
209
|
],
|
201
210
|
"repoType": "github"
|
data/CHANGELOG.md
CHANGED
@@ -1,3 +1,12 @@
|
|
1
|
+
### 2.1.7 (2020/8/1)
|
2
|
+
|
3
|
+
* [#125](https://github.com/renderedtext/render_async/pull/125): Implement retry after some time feature - [@nikolalsvk](https://github.com/nikolalsvk).
|
4
|
+
* [#124](https://github.com/renderedtext/render_async/pull/124): Add more info on how to control polling - [@nikolalsvk](https://github.com/nikolalsvk).
|
5
|
+
* [#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).
|
6
|
+
* [#119](https://github.com/renderedtext/render_async/pull/119): Add polling control start/stop events - [@vanboom](https://github.com/vanboom).
|
7
|
+
* [#120](https://github.com/renderedtext/render_async/pull/120): Fine tune custom content_for feature - [@nikolalsvk](https://github.com/nikolalsvk).
|
8
|
+
* [#117](https://github.com/renderedtext/render_async/pull/117): Allow a custom content_for name - [@vanboom](https://github.com/vanboom).
|
9
|
+
|
1
10
|
### 2.1.6 (2020/5/9)
|
2
11
|
|
3
12
|
* [#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).
|
data/README.md
CHANGED
@@ -1,32 +1,70 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
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.
|
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
|
-
|
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,7 +75,7 @@ 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
|
@@ -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
|
|
@@ -82,14 +120,18 @@ Advanced usage includes information on different options, such as:
|
|
82
120
|
- [Passing in an event name](#passing-in-an-event-name)
|
83
121
|
- [Using default events](#using-default-events)
|
84
122
|
- [Retry on failure](#retry-on-failure)
|
123
|
+
- [Retry after some time](#retry-after-some-time)
|
85
124
|
- [Toggle event](#toggle-event)
|
125
|
+
- [Control polling with a toggle](#control-polling-with-a-toggle)
|
86
126
|
- [Polling](#polling)
|
127
|
+
- [Controlled polling](#controlled-polling)
|
87
128
|
- [Handling errors](#handling-errors)
|
88
129
|
- [Caching](#caching)
|
89
130
|
- [Doing non-GET requests](#doing-non-get-requests)
|
90
131
|
- [Using with Turbolinks](#using-with-turbolinks)
|
91
132
|
- [Using with respond_to and JS format](#using-with-respond_to-and-js-format)
|
92
133
|
- [Nested Async Renders](#nested-async-renders)
|
134
|
+
- [Customizing the content_for name](#customizing-the-content_for-name)
|
93
135
|
- [Configuration](#configuration)
|
94
136
|
|
95
137
|
### Passing in a container ID
|
@@ -240,8 +282,7 @@ document.addEventListener("users-loaded", function(event) {
|
|
240
282
|
});
|
241
283
|
```
|
242
284
|
|
243
|
-
|
244
|
-
support Event constructor.
|
285
|
+
> :bulb: Dispatching events is also supported for older browsers that don't support Event constructor.
|
245
286
|
|
246
287
|
### Using default events
|
247
288
|
|
@@ -293,6 +334,39 @@ it will show an [error message](#handling-errors) which you need to specify.
|
|
293
334
|
This can show useful when you know your requests often fail, and you don't want
|
294
335
|
to refresh the whole page just to retry them.
|
295
336
|
|
337
|
+
#### Retry after some time
|
338
|
+
|
339
|
+
If you want to retry requests but with some delay in between the calls, you can
|
340
|
+
pass a `retry_delay` option together with `retry_count` like so:
|
341
|
+
|
342
|
+
```erb
|
343
|
+
<%= render_async users_path,
|
344
|
+
retry_count: 5,
|
345
|
+
retry_delay: 2000 %>
|
346
|
+
```
|
347
|
+
|
348
|
+
This will make `render_async` wait for 2 seconds before retrying after each
|
349
|
+
failure. In the end, if the request is still failing after 5th time, it will
|
350
|
+
dispatch a [default error event](#using-default-events).
|
351
|
+
|
352
|
+
> :candy: If you are catching an event after an error, you can get `retryCount` from
|
353
|
+
the event. `retryCount` will have number of retries it took before the event was dispatched.
|
354
|
+
|
355
|
+
Here is an example on how to get `retryCount`:
|
356
|
+
|
357
|
+
```erb
|
358
|
+
<%= render_async users_path,
|
359
|
+
retry_count: 5,
|
360
|
+
retry_delay: 2000,
|
361
|
+
error_event_name: 'it-failed-badly' %>
|
362
|
+
|
363
|
+
<script>
|
364
|
+
document.addEventListener('it-failed-badly', function(event) {
|
365
|
+
console.log("Request failed after " + event.retryCount + " tries!")
|
366
|
+
});
|
367
|
+
</script>
|
368
|
+
```
|
369
|
+
|
296
370
|
### Toggle event
|
297
371
|
|
298
372
|
You can trigger `render_async` loading by clicking or doing another event to a
|
@@ -302,11 +376,11 @@ default event that will trigger `render_async` will be 'click' event. You can
|
|
302
376
|
do this by doing the following:
|
303
377
|
|
304
378
|
```erb
|
305
|
-
<a href='#' id='
|
306
|
-
<%= render_async comments_path, toggle: { selector: '#
|
379
|
+
<a href='#' id='comments-button'>Load comments</a>
|
380
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } %>
|
307
381
|
```
|
308
382
|
|
309
|
-
This will trigger `render_async` to load the `comments_path` when you click the `#
|
383
|
+
This will trigger `render_async` to load the `comments_path` when you click the `#comments-button` element.
|
310
384
|
If you want to remove event once it's triggered, you can pass `once: true` in the toggle options.
|
311
385
|
The `once` option is false by default.
|
312
386
|
|
@@ -315,18 +389,20 @@ way, the element that started `render_async` logic will be removed after the
|
|
315
389
|
request has been completed. You can achieve this behaviour with something like this:
|
316
390
|
|
317
391
|
```erb
|
318
|
-
<%= render_async comments_path, toggle: { selector: '#
|
319
|
-
<a href='#' id='
|
392
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } do %>
|
393
|
+
<a href='#' id='comments-button'>Load comments</a>
|
320
394
|
<% end %>
|
321
395
|
```
|
322
396
|
|
397
|
+
#### Control polling with a toggle
|
398
|
+
|
323
399
|
Also, you can mix interval and toggle features. This way, you can turn polling
|
324
|
-
on, and off by clicking the "
|
400
|
+
on, and off by clicking the "Load comments" button. In order to do this, you need to
|
325
401
|
pass `toggle` and `interval` arguments to `render_async` call like this:
|
326
402
|
|
327
403
|
```erb
|
328
|
-
<a href='#' id='
|
329
|
-
<%= render_async comments_path, toggle: { selector: '#
|
404
|
+
<a href='#' id='comments-button'>Load comments</a>
|
405
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
|
330
406
|
```
|
331
407
|
|
332
408
|
### Polling
|
@@ -342,11 +418,61 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
|
|
342
418
|
|
343
419
|
This can be handy if you want to enable polling for a specific URL.
|
344
420
|
|
345
|
-
|
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).
|
421
|
+
> :warning: By passing interval to `render_async`, initial container element
|
422
|
+
> will remain in HTML tree, it will not be replaced with request response.
|
423
|
+
> You can handle how that container element is rendered and its style by
|
424
|
+
> [passing in an HTML element name](#passing-in-an-html-element-name) and
|
425
|
+
> [HTML element class](#passing-in-a-container-class-name).
|
426
|
+
|
427
|
+
### Controlled polling
|
428
|
+
|
429
|
+
You can controller `render_async` [polling](#polling) in 2 manners.
|
430
|
+
First one is pretty simple, and it involves using the [toggle](#toggle-event)
|
431
|
+
feature. To do this, you can follow instructions in the
|
432
|
+
[control polling with a toggle section](#control-polling-with-a-toggle).
|
433
|
+
|
434
|
+
Second option is more advanced and it involves emitting events to the `render_async`'s
|
435
|
+
container element. From your code, you can emit following events:
|
436
|
+
- 'async-stop' - this will stop polling
|
437
|
+
- 'async-start' - this will start polling.
|
438
|
+
|
439
|
+
> :bulb: Please note that events need to be dispatched to a render_async container.
|
440
|
+
|
441
|
+
An example of how you can do this looks like this:
|
442
|
+
|
443
|
+
```erb
|
444
|
+
<%= render_async wave_render_async_path,
|
445
|
+
container_id: 'controllable-interval', # set container_id so we can get it later easily
|
446
|
+
interval: 3000 %>
|
447
|
+
|
448
|
+
<button id='stop-polling'>Stop polling</button>
|
449
|
+
<button id='start-polling'>Start polling</button>
|
450
|
+
|
451
|
+
<script>
|
452
|
+
var container = document.getElementById('controllable-interval')
|
453
|
+
var stopPolling = document.getElementById('stop-polling')
|
454
|
+
var startPolling = document.getElementById('start-polling')
|
455
|
+
|
456
|
+
var triggerEventOnContainer = function(eventName) {
|
457
|
+
var event = new Event(eventName);
|
458
|
+
|
459
|
+
container.dispatchEvent(event)
|
460
|
+
}
|
461
|
+
|
462
|
+
stopPolling.addEventListener('click', function() {
|
463
|
+
container.innerHTML = '<p>Polling stopped</p>'
|
464
|
+
triggerEventOnContainer('async-stop')
|
465
|
+
})
|
466
|
+
startPolling.addEventListener('click', function() {
|
467
|
+
triggerEventOnContainer('async-start')
|
468
|
+
})
|
469
|
+
</script>
|
470
|
+
```
|
471
|
+
|
472
|
+
We are rendering two buttons - "Stop polling" and "Start polling". Then, we
|
473
|
+
attach event listener to catch any clicking on the buttons. When the buttons
|
474
|
+
are clicked, we either stop the polling, or start the polling, depending which
|
475
|
+
button a user clicks.
|
350
476
|
|
351
477
|
### Handling errors
|
352
478
|
|
@@ -396,10 +522,10 @@ Then, in the partial (e.g. `app/views/comments/_comment_stats.html.erb`):
|
|
396
522
|
<% end %>
|
397
523
|
```
|
398
524
|
|
399
|
-
|
400
|
-
|
525
|
+
- The first time the page renders, it will make the AJAX call.
|
526
|
+
- Any other times (until the cache expires), it will render from cache
|
401
527
|
instantly, without making the AJAX call.
|
402
|
-
|
528
|
+
- You can expire cache simply by passing `:expires_in` in your view where
|
403
529
|
you cache the partial
|
404
530
|
|
405
531
|
### Doing non-GET requests
|
@@ -448,7 +574,7 @@ If you want, you can tell Turbolinks to reload your `render_async` call as follo
|
|
448
574
|
|
449
575
|
This will reload the whole page with Turbolinks.
|
450
576
|
|
451
|
-
Make sure to put `<%= content_for :render_async %>` in your base view file in
|
577
|
+
> :bulb: Make sure to put `<%= content_for :render_async %>` in your base view file in
|
452
578
|
the `<head>` and not the `<body>`.
|
453
579
|
|
454
580
|
### Using with respond_to and JS format
|
@@ -506,6 +632,19 @@ For example:
|
|
506
632
|
<%= content_for :render_async %>
|
507
633
|
```
|
508
634
|
|
635
|
+
### Customizing the content_for name
|
636
|
+
|
637
|
+
The `content_for` name may be customized by passing the `content_for_name`
|
638
|
+
option to `render_async`. This option is especially useful when doing [nested async
|
639
|
+
renders](#nested-async-renders) to better control the location of the injected JavaScript.
|
640
|
+
|
641
|
+
For example:
|
642
|
+
```erb
|
643
|
+
<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
|
644
|
+
|
645
|
+
<%= content_for :render_async_comment_stats %>
|
646
|
+
```
|
647
|
+
|
509
648
|
### Configuration
|
510
649
|
|
511
650
|
`render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
|
@@ -529,17 +668,28 @@ Also, you can do it like this:
|
|
529
668
|
RenderAsync.configuration.jquery = true
|
530
669
|
```
|
531
670
|
|
532
|
-
## Development
|
671
|
+
## :hammer_and_pick: Development
|
533
672
|
|
534
673
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
535
674
|
`rake spec` to run the tests. You can also run `bin/console` for an interactive
|
536
|
-
prompt that will allow you to experiment.
|
675
|
+
prompt that will allow you to experiment. To run integration tests, use
|
676
|
+
`bin/integration-tests`.
|
677
|
+
|
678
|
+
Got any questions or comments about development (or anything else)?
|
679
|
+
Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
|
680
|
+
and let's make `render_async` even better!
|
681
|
+
|
682
|
+
## :pray: Contributing
|
537
683
|
|
538
|
-
|
684
|
+
Thank you for considering or deciding to contribute, this is much appreciated!
|
685
|
+
Any kind of bug reports and pull requests are encouraged and welcome on GitHub at
|
686
|
+
https://github.com/renderedtext/render_async.
|
539
687
|
|
540
|
-
|
688
|
+
Got any issues or difficulties?
|
689
|
+
Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
|
690
|
+
and let's make `render_async` even better!
|
541
691
|
|
542
|
-
## License
|
692
|
+
## :memo: License
|
543
693
|
|
544
694
|
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
545
695
|
|
@@ -552,7 +702,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
|
|
552
702
|
| [<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
703
|
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
|
554
704
|
| [<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") |
|
705
|
+
| [<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") |
|
556
706
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
557
707
|
|
558
708
|
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
|
@@ -5,38 +5,30 @@
|
|
5
5
|
<%= placeholder %>
|
6
6
|
</<%= html_element_name %>>
|
7
7
|
|
8
|
-
<% content_for
|
8
|
+
<% content_for content_for_name do %>
|
9
9
|
<%= javascript_tag html_options do %>
|
10
|
+
<% locals = { container_id: container_id,
|
11
|
+
path: path,
|
12
|
+
method: method,
|
13
|
+
data: data,
|
14
|
+
event_name: event_name,
|
15
|
+
toggle: toggle,
|
16
|
+
headers: headers,
|
17
|
+
error_message: error_message,
|
18
|
+
error_event_name: error_event_name,
|
19
|
+
retry_count: retry_count,
|
20
|
+
retry_delay: retry_delay,
|
21
|
+
interval: interval,
|
22
|
+
turbolinks: RenderAsync.configuration.turbolinks } %>
|
23
|
+
|
10
24
|
<% if RenderAsync.configuration.jquery %>
|
11
25
|
<%= render partial: 'render_async/request_jquery',
|
12
26
|
formats: [:js],
|
13
|
-
locals:
|
14
|
-
path: path,
|
15
|
-
method: method,
|
16
|
-
data: data,
|
17
|
-
event_name: event_name,
|
18
|
-
toggle: toggle,
|
19
|
-
headers: headers,
|
20
|
-
error_message: error_message,
|
21
|
-
error_event_name: error_event_name,
|
22
|
-
retry_count: retry_count,
|
23
|
-
interval: interval,
|
24
|
-
turbolinks: RenderAsync.configuration.turbolinks } %>
|
27
|
+
locals: locals %>
|
25
28
|
<% else %>
|
26
29
|
<%= render partial: 'render_async/request_vanilla',
|
27
30
|
formats: [:js],
|
28
|
-
locals:
|
29
|
-
path: path,
|
30
|
-
method: method,
|
31
|
-
data: data,
|
32
|
-
event_name: event_name,
|
33
|
-
toggle: toggle,
|
34
|
-
headers: headers,
|
35
|
-
error_message: error_message,
|
36
|
-
error_event_name: error_event_name,
|
37
|
-
retry_count: retry_count,
|
38
|
-
interval: interval,
|
39
|
-
turbolinks: RenderAsync.configuration.turbolinks } %>
|
31
|
+
locals: locals %>
|
40
32
|
<% end %>
|
41
33
|
<% end %>
|
42
34
|
<% end %>
|
@@ -68,28 +68,37 @@ if (window.jQuery) {
|
|
68
68
|
var container = $("#<%= container_id %>");
|
69
69
|
container.replaceWith("<%= error_message.try(:html_safe) %>");
|
70
70
|
|
71
|
-
var errorEvent = createEvent(
|
72
|
-
|
73
|
-
|
71
|
+
var errorEvent = createEvent(
|
72
|
+
"<%= error_event_name || 'render_async_error' %>",
|
73
|
+
container
|
74
|
+
)
|
75
|
+
errorEvent.retryCount = currentRetryCount
|
74
76
|
|
75
|
-
|
76
|
-
var event = createEvent("<%= error_event_name %>", container)
|
77
|
-
document.dispatchEvent(event);
|
78
|
-
<% end %>
|
77
|
+
document.dispatchEvent(errorEvent);
|
79
78
|
});
|
80
79
|
};
|
81
80
|
|
82
81
|
<% if retry_count > 0 %>
|
82
|
+
var _retryMakeRequest = _makeRequest
|
83
|
+
|
84
|
+
<% if retry_delay %>
|
85
|
+
_retryMakeRequest = function(currentRetryCount) {
|
86
|
+
setTimeout(function() {
|
87
|
+
_makeRequest(currentRetryCount)
|
88
|
+
}, <%= retry_delay %>)
|
89
|
+
}
|
90
|
+
<% end %>
|
91
|
+
|
83
92
|
function retry(currentRetryCount) {
|
84
93
|
if (typeof(currentRetryCount) === 'number') {
|
85
94
|
if (currentRetryCount >= <%= retry_count %>)
|
86
95
|
return false;
|
87
96
|
|
88
|
-
|
97
|
+
_retryMakeRequest(currentRetryCount + 1);
|
89
98
|
return true;
|
90
99
|
}
|
91
100
|
|
92
|
-
|
101
|
+
_retryMakeRequest(1);
|
93
102
|
return true;
|
94
103
|
}
|
95
104
|
<% end %>
|
@@ -99,18 +108,30 @@ if (window.jQuery) {
|
|
99
108
|
var _interval;
|
100
109
|
<% if interval %>
|
101
110
|
var _renderAsyncFunction = function() {
|
111
|
+
// If interval is already set, return
|
112
|
+
if (typeof(_interval) === 'number') return
|
113
|
+
|
102
114
|
_makeRequest();
|
103
115
|
_interval = setInterval(_makeRequest, <%= interval %>);
|
104
116
|
}
|
105
117
|
|
106
|
-
|
107
|
-
|
108
|
-
if (typeof(_interval) === 'number') {
|
109
|
-
console.log('clearing the interval in jQuery part')
|
118
|
+
var _clearRenderAsyncInterval = function() {
|
119
|
+
if (typeof(_interval) === 'number'){
|
110
120
|
clearInterval(_interval)
|
111
121
|
_interval = undefined;
|
112
122
|
}
|
113
|
-
}
|
123
|
+
}
|
124
|
+
|
125
|
+
var container = $("#<%= container_id %>");
|
126
|
+
|
127
|
+
// Register a stop polling event on the container
|
128
|
+
$(container).on('async-stop', _clearRenderAsyncInterval)
|
129
|
+
|
130
|
+
// Register a start polling event on the container
|
131
|
+
$(container).on('async-start', _renderAsyncFunction)
|
132
|
+
|
133
|
+
<% if turbolinks %>
|
134
|
+
$(document).one('turbolinks:visit', _clearRenderAsyncInterval);
|
114
135
|
<% end %>
|
115
136
|
<% end %>
|
116
137
|
|
@@ -74,13 +74,13 @@
|
|
74
74
|
var container = document.getElementById('<%= container_id %>');
|
75
75
|
container.outerHTML = '<%= error_message.try(:html_safe) %>';
|
76
76
|
|
77
|
-
var errorEvent = createEvent(
|
78
|
-
|
77
|
+
var errorEvent = createEvent(
|
78
|
+
"<%= error_event_name || 'render_async_error' %>",
|
79
|
+
container
|
80
|
+
);
|
81
|
+
errorEvent.retryCount = currentRetryCount
|
79
82
|
|
80
|
-
|
81
|
-
var event = createEvent('<%= error_event_name %>', container);
|
82
|
-
document.dispatchEvent(event);
|
83
|
-
<% end %>
|
83
|
+
document.dispatchEvent(errorEvent);
|
84
84
|
}
|
85
85
|
}
|
86
86
|
};
|
@@ -90,16 +90,25 @@
|
|
90
90
|
};
|
91
91
|
|
92
92
|
<% if retry_count > 0 %>
|
93
|
+
|
94
|
+
<% if retry_delay %>
|
95
|
+
_retryMakeRequest = function(currentRetryCount) {
|
96
|
+
setTimeout(function() {
|
97
|
+
_makeRequest(currentRetryCount)
|
98
|
+
}, <%= retry_delay %>)
|
99
|
+
}
|
100
|
+
<% end %>
|
101
|
+
|
93
102
|
function retry(currentRetryCount) {
|
94
103
|
if (typeof(currentRetryCount) === 'number') {
|
95
104
|
if (currentRetryCount >= <%= retry_count %>)
|
96
105
|
return false;
|
97
106
|
|
98
|
-
|
107
|
+
_retryMakeRequest(currentRetryCount + 1);
|
99
108
|
return true;
|
100
109
|
}
|
101
110
|
|
102
|
-
|
111
|
+
_retryMakeRequest(1);
|
103
112
|
return true;
|
104
113
|
}
|
105
114
|
<% end %>
|
@@ -109,18 +118,30 @@
|
|
109
118
|
var _interval;
|
110
119
|
<% if interval %>
|
111
120
|
var _renderAsyncFunction = function() {
|
121
|
+
// If interval is already set, return
|
122
|
+
if (typeof(_interval) === 'number') return
|
123
|
+
|
112
124
|
_makeRequest();
|
113
125
|
_interval = setInterval(_makeRequest, <%= interval %>);
|
114
126
|
}
|
115
127
|
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
console.log('clearing the interval')
|
120
|
-
clearInterval(_interval);
|
128
|
+
var _clearRenderAsyncInterval = function() {
|
129
|
+
if (typeof(_interval) === 'number'){
|
130
|
+
clearInterval(_interval)
|
121
131
|
_interval = undefined;
|
122
132
|
}
|
123
|
-
}
|
133
|
+
}
|
134
|
+
|
135
|
+
var container = document.getElementById('<%= container_id %>');
|
136
|
+
|
137
|
+
// Register a polling stop event on the container
|
138
|
+
container.addEventListener("async-stop", _clearRenderAsyncInterval)
|
139
|
+
|
140
|
+
// Register a start polling event on the container
|
141
|
+
container.addEventListener("async-start", _renderAsyncFunction)
|
142
|
+
|
143
|
+
<% if turbolinks %>
|
144
|
+
document.addEventListener("turbolinks:visit", _clearRenderAsyncInterval)
|
124
145
|
<% end %>
|
125
146
|
<% end %>
|
126
147
|
|
data/lib/render_async/version.rb
CHANGED
@@ -20,7 +20,6 @@ module RenderAsync
|
|
20
20
|
def render_async(path, options = {}, &placeholder)
|
21
21
|
event_name = options.delete(:event_name)
|
22
22
|
placeholder = capture(&placeholder) if block_given?
|
23
|
-
retry_count = options.delete(:retry_count) || 0
|
24
23
|
html_options = options.delete(:html_options) || {}
|
25
24
|
|
26
25
|
render 'render_async/render_async', **container_element_options(options),
|
@@ -30,8 +29,9 @@ module RenderAsync
|
|
30
29
|
placeholder: placeholder,
|
31
30
|
**request_options(options),
|
32
31
|
**error_handling_options(options),
|
33
|
-
|
34
|
-
**polling_options(options)
|
32
|
+
**retry_options(options),
|
33
|
+
**polling_options(options),
|
34
|
+
**content_for_options(options)
|
35
35
|
end
|
36
36
|
|
37
37
|
private
|
@@ -53,11 +53,24 @@ module RenderAsync
|
|
53
53
|
error_event_name: options[:error_event_name] }
|
54
54
|
end
|
55
55
|
|
56
|
+
def retry_options(options)
|
57
|
+
{
|
58
|
+
retry_count: options.delete(:retry_count) || 0,
|
59
|
+
retry_delay: options.delete(:retry_delay)
|
60
|
+
}
|
61
|
+
end
|
62
|
+
|
56
63
|
def polling_options(options)
|
57
64
|
{ interval: options[:interval],
|
58
65
|
toggle: options[:toggle] }
|
59
66
|
end
|
60
67
|
|
68
|
+
def content_for_options(options)
|
69
|
+
{
|
70
|
+
content_for_name: options[:content_for_name] || :render_async
|
71
|
+
}
|
72
|
+
end
|
73
|
+
|
61
74
|
private
|
62
75
|
|
63
76
|
def generate_container_id
|
metadata
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: render_async
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.1.
|
4
|
+
version: 2.1.7
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Kasper Grubbe
|
8
8
|
- nikolalsvk
|
9
|
-
autorequire:
|
9
|
+
autorequire:
|
10
10
|
bindir: exe
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-
|
12
|
+
date: 2020-08-01 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rake
|
@@ -86,7 +86,7 @@ homepage: https://github.com/renderedtext/render_async
|
|
86
86
|
licenses:
|
87
87
|
- MIT
|
88
88
|
metadata: {}
|
89
|
-
post_install_message:
|
89
|
+
post_install_message:
|
90
90
|
rdoc_options: []
|
91
91
|
require_paths:
|
92
92
|
- lib
|
@@ -101,8 +101,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
101
101
|
- !ruby/object:Gem::Version
|
102
102
|
version: '0'
|
103
103
|
requirements: []
|
104
|
-
rubygems_version: 3.
|
105
|
-
signing_key:
|
104
|
+
rubygems_version: 3.0.3
|
105
|
+
signing_key:
|
106
106
|
specification_version: 4
|
107
107
|
summary: Render parts of the page asynchronously with AJAX
|
108
108
|
test_files: []
|