render_async 2.1.4 β 2.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/.all-contributorsrc +47 -0
- data/.github/CONTRIBUTING.md +40 -0
- data/.github/FUNDING.yml +3 -0
- data/.gitignore +1 -0
- data/.gitmodules +4 -0
- data/CHANGELOG.md +43 -1
- data/README.md +360 -76
- data/app/views/render_async/_render_async.html.erb +19 -25
- data/app/views/render_async/_request_jquery.js.erb +119 -40
- data/app/views/render_async/_request_vanilla.js.erb +125 -49
- data/bin/integration-tests +7 -0
- data/lib/render_async/configuration.rb +4 -1
- data/lib/render_async/version.rb +1 -1
- data/lib/render_async/view_helper.rb +36 -8
- metadata +8 -7
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6efd10ad97f50cae5b58a0ff6042df5c0b9f5ed0b27ca1a498f4cdb84172ab79
|
|
4
|
+
data.tar.gz: 8daab586cb6b11d66bc873e12929ee2bb1162a6b5578e343ddeb6f03c1094c71
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: aaa98a754f9cbce70521702793d6307fbb976b064a9b981a7a5c43db5dd12527cfa81f5a07269476958f12ae0f0f2a79a4038236146cda6a2bfc2e23b3c36fbf
|
|
7
|
+
data.tar.gz: db95a549cd0d1f3ee086ad35634cf53f94e615de679dd201a543432337e99de43cf9b080d9c10296a0e1e2391e48bedf16717fd868fe7ec7ecae3c35ce7bb384
|
data/.all-contributorsrc
CHANGED
|
@@ -177,6 +177,53 @@
|
|
|
177
177
|
"contributions": [
|
|
178
178
|
"code"
|
|
179
179
|
]
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"login": "lipsumar",
|
|
183
|
+
"name": "Emmanuel Pire",
|
|
184
|
+
"avatar_url": "https://avatars3.githubusercontent.com/u/1191418?v=4",
|
|
185
|
+
"profile": "http://blog.lipsumarium.com",
|
|
186
|
+
"contributions": [
|
|
187
|
+
"code",
|
|
188
|
+
"doc"
|
|
189
|
+
]
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"login": "maximgeerinck",
|
|
193
|
+
"name": "Maxim Geerinck",
|
|
194
|
+
"avatar_url": "https://avatars1.githubusercontent.com/u/615509?v=4",
|
|
195
|
+
"profile": "https://github.com/maximgeerinck",
|
|
196
|
+
"contributions": [
|
|
197
|
+
"code"
|
|
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
|
+
]
|
|
180
227
|
}
|
|
181
228
|
],
|
|
182
229
|
"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/.github/FUNDING.yml
ADDED
data/.gitignore
CHANGED
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,50 @@
|
|
|
1
|
-
### 2.1.
|
|
1
|
+
### 2.1.8 (2020/10/24)
|
|
2
|
+
|
|
3
|
+
* [#134](https://github.com/renderedtext/render_async/pull/134): Add config option for setting nonce - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
4
|
+
* [#132](https://github.com/renderedtext/render_async/pull/132): Refresh render_async with an event - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
5
|
+
* [#131](https://github.com/renderedtext/render_async/pull/131): Start to poll on page load with toggle - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
6
|
+
* [#130](https://github.com/renderedtext/render_async/pull/130): Set up control events after document loaded - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
7
|
+
* [#127](https://github.com/renderedtext/render_async/pull/127): Update README.md, to reflect correct turbolinks configuration value - [@villu164](https://github.com/villu164).
|
|
8
|
+
|
|
9
|
+
### 2.1.7 (2020/8/1)
|
|
10
|
+
|
|
11
|
+
* [#125](https://github.com/renderedtext/render_async/pull/125): Implement retry after some time feature - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
12
|
+
* [#124](https://github.com/renderedtext/render_async/pull/124): Add more info on how to control polling - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
13
|
+
* [#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).
|
|
14
|
+
* [#119](https://github.com/renderedtext/render_async/pull/119): Add polling control start/stop events - [@vanboom](https://github.com/vanboom).
|
|
15
|
+
* [#120](https://github.com/renderedtext/render_async/pull/120): Fine tune custom content_for feature - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
16
|
+
* [#117](https://github.com/renderedtext/render_async/pull/117): Allow a custom content_for name - [@vanboom](https://github.com/vanboom).
|
|
17
|
+
|
|
18
|
+
### 2.1.6 (2020/5/9)
|
|
19
|
+
|
|
20
|
+
* [#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).
|
|
21
|
+
* [#113](https://github.com/renderedtext/render_async/pull/113): Remove interval after Turbolinks visit event - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
22
|
+
* [#112](https://github.com/renderedtext/render_async/pull/112): Add X-Requested-With header in Vanilla JS - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
23
|
+
* [#110](https://github.com/renderedtext/render_async/pull/110): Remove preventDefault, and load toggle in stream - [@vanboom](https://github.com/vanboom).
|
|
24
|
+
|
|
25
|
+
### 2.1.5 (2020/3/22)
|
|
26
|
+
|
|
27
|
+
* [#105](https://github.com/renderedtext/render_async/pull/105): Load toggle listeners after page loads - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
28
|
+
* [#104](https://github.com/renderedtext/render_async/pull/104): Attach container to dispatched events - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
29
|
+
* [#103](https://github.com/renderedtext/render_async/pull/103): Add generic "load" and "error" events - [@lipsumar](https://github.com/lipsumar).
|
|
30
|
+
* [#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).
|
|
31
|
+
|
|
32
|
+
### 2.1.4 (2019/11/11)
|
|
33
|
+
|
|
34
|
+
* [#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).
|
|
35
|
+
|
|
36
|
+
### 2.1.3 (2019/9/24)
|
|
37
|
+
|
|
38
|
+
* [#95](https://github.com/renderedtext/render_async/pull/95): Use double quotes for displaying error message - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
39
|
+
* [#93](https://github.com/renderedtext/render_async/pull/93): Fix: "Uncaught ReferenceError: \_interval" #92 - [@fffx](https://github.com/fffx).
|
|
40
|
+
|
|
41
|
+
### 2.1.2 (2019/8/17)
|
|
42
|
+
|
|
2
43
|
* [#89](https://github.com/renderedtext/render_async/pull/89): Bump version to 2.1.2 - [@nikolalsvk](https://github.com/nikolalsvk).
|
|
3
44
|
* [#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
45
|
|
|
5
46
|
### 2.1.1 (2019/8/17)
|
|
47
|
+
|
|
6
48
|
* [#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
49
|
* [#82](https://github.com/renderedtext/render_async/pull/82): Add toggle selector and event to render - [@ThanhKhoaIT](https://github.com/ThanhKhoaIT).
|
|
8
50
|
* 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,31 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
|
22
58
|
3. controller renders a partial
|
|
23
|
-
4.
|
|
59
|
+
4. partial renders in the place where you put `render_async` view helper
|
|
24
60
|
|
|
25
|
-
JavaScript is injected into `<%= content_for :render_async %>` so you choose
|
|
61
|
+
JavaScript is injected straight into `<%= content_for :render_async %>` so you choose
|
|
26
62
|
where to put it.
|
|
27
63
|
|
|
28
|
-
|
|
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
|
+
|
|
29
68
|
Add this line to your application's Gemfile:
|
|
30
69
|
|
|
31
70
|
```ruby
|
|
@@ -36,14 +75,14 @@ And then execute:
|
|
|
36
75
|
|
|
37
76
|
$ bundle install
|
|
38
77
|
|
|
39
|
-
## Usage
|
|
78
|
+
## :hammer: Usage
|
|
40
79
|
|
|
41
80
|
1. Include `render_async` view helper somewhere in your views (e.g. `app/views/comments/show.html.erb`):
|
|
42
81
|
```erb
|
|
43
82
|
<%= render_async comment_stats_path %>
|
|
44
83
|
```
|
|
45
84
|
|
|
46
|
-
2. Then create a route
|
|
85
|
+
2. Then create a route for it `config/routes.rb`:
|
|
47
86
|
```ruby
|
|
48
87
|
get :comment_stats, controller: :comments
|
|
49
88
|
```
|
|
@@ -69,7 +108,7 @@ And then execute:
|
|
|
69
108
|
<%= content_for :render_async %>
|
|
70
109
|
```
|
|
71
110
|
|
|
72
|
-
## Advanced usage
|
|
111
|
+
## :hammer_and_wrench: Advanced usage
|
|
73
112
|
|
|
74
113
|
Advanced usage includes information on different options, such as:
|
|
75
114
|
|
|
@@ -79,16 +118,23 @@ Advanced usage includes information on different options, such as:
|
|
|
79
118
|
- [Passing in an HTML element name](#passing-in-an-html-element-name)
|
|
80
119
|
- [Passing in a placeholder](#passing-in-a-placeholder)
|
|
81
120
|
- [Passing in an event name](#passing-in-an-event-name)
|
|
121
|
+
- [Using default events](#using-default-events)
|
|
122
|
+
- [Refreshing the partial](#refreshing-the-partial)
|
|
82
123
|
- [Retry on failure](#retry-on-failure)
|
|
124
|
+
- [Retry after some time](#retry-after-some-time)
|
|
83
125
|
- [Toggle event](#toggle-event)
|
|
126
|
+
- [Control polling with a toggle](#control-polling-with-a-toggle)
|
|
84
127
|
- [Polling](#polling)
|
|
128
|
+
- [Controlled polling](#controlled-polling)
|
|
85
129
|
- [Handling errors](#handling-errors)
|
|
86
130
|
- [Caching](#caching)
|
|
87
131
|
- [Doing non-GET requests](#doing-non-get-requests)
|
|
88
132
|
- [Using with Turbolinks](#using-with-turbolinks)
|
|
133
|
+
- [Using with Turbo](#using-with-turbo)
|
|
89
134
|
- [Using with respond_to and JS format](#using-with-respond_to-and-js-format)
|
|
90
|
-
- [Nested
|
|
91
|
-
- [
|
|
135
|
+
- [Nested async renders](#nested-async-renders)
|
|
136
|
+
- [Customizing the content_for name](#customizing-the-content_for-name)
|
|
137
|
+
- [Configuration options](#configuration-options)
|
|
92
138
|
|
|
93
139
|
### Passing in a container ID
|
|
94
140
|
|
|
@@ -133,23 +179,28 @@ Rendered code in the view:
|
|
|
133
179
|
`html_options` is an optional hash that gets passed to a Rails'
|
|
134
180
|
`javascript_tag`, to drop HTML tags into the `script` element.
|
|
135
181
|
|
|
136
|
-
Example of utilizing `html_options` with a
|
|
182
|
+
Example of utilizing `html_options` with a [nonce](https://edgeguides.rubyonrails.org/security.html#content-security-policy):
|
|
183
|
+
|
|
137
184
|
```erb
|
|
138
|
-
<%= render_async users_path, html_options: { nonce:
|
|
185
|
+
<%= render_async users_path, html_options: { nonce: true } %>
|
|
139
186
|
```
|
|
140
187
|
|
|
141
188
|
Rendered code in the view:
|
|
142
189
|
```html
|
|
143
|
-
<
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<script nonce="lWaaV6eYicpt+oyOfcShYINsz0b70iR+Q1mohZqNaag=">
|
|
190
|
+
<script nonce="2x012CYGxKgM8qAApxRHxA==">
|
|
147
191
|
//<![CDATA[
|
|
148
192
|
...
|
|
149
193
|
//]]>
|
|
150
194
|
</script>
|
|
195
|
+
|
|
196
|
+
...
|
|
197
|
+
|
|
198
|
+
<div id="render_async_18b8a6cd161499117471" class="">
|
|
199
|
+
</div>
|
|
151
200
|
```
|
|
152
201
|
|
|
202
|
+
> :bulb: You can enable `nonce` to be set everywhere by using [configuration option](#configuration-options) render_async provides.
|
|
203
|
+
|
|
153
204
|
### Passing in an HTML element name
|
|
154
205
|
|
|
155
206
|
`render_async` can take in an HTML element name, allowing you to control
|
|
@@ -207,6 +258,9 @@ event after it's done with fetching and rendering request content to HTML.
|
|
|
207
258
|
This can be useful to have if you want to add some JavaScript functionality
|
|
208
259
|
after your partial is loaded through `render_async`.
|
|
209
260
|
|
|
261
|
+
You can also access the associated container (DOM node) in the event object
|
|
262
|
+
that gets emitted.
|
|
263
|
+
|
|
210
264
|
Example of passing it to `render_async`:
|
|
211
265
|
```erb
|
|
212
266
|
<%= render_async users_path, event_name: "users-loaded" %>
|
|
@@ -226,15 +280,77 @@ Rendered code in view:
|
|
|
226
280
|
</script>
|
|
227
281
|
```
|
|
228
282
|
|
|
229
|
-
Then, in your
|
|
283
|
+
Then, in your JavaScript code, you could do something like this:
|
|
230
284
|
```javascript
|
|
231
|
-
document.addEventListener("users-loaded", function() {
|
|
232
|
-
console.log("Users have loaded!");
|
|
285
|
+
document.addEventListener("users-loaded", function(event) {
|
|
286
|
+
console.log("Users have loaded!", event.container); // Access the container which loaded the users
|
|
233
287
|
});
|
|
234
288
|
```
|
|
235
289
|
|
|
236
|
-
|
|
237
|
-
|
|
290
|
+
> :bulb: Dispatching events is also supported for older browsers that don't support Event constructor.
|
|
291
|
+
|
|
292
|
+
### Using default events
|
|
293
|
+
|
|
294
|
+
`render_async` will fire the event `render_async_load` when an async partial
|
|
295
|
+
has loaded and rendered on the page.
|
|
296
|
+
|
|
297
|
+
In case there is an error, the event `render_async_error` will fire instead.
|
|
298
|
+
|
|
299
|
+
This event will fire for all `render_async` partials on the page. For every
|
|
300
|
+
event, the associated container (DOM node) will be passed along.
|
|
301
|
+
|
|
302
|
+
This can be useful to apply JavaScript to content loaded after the page is
|
|
303
|
+
ready.
|
|
304
|
+
|
|
305
|
+
Example of using events:
|
|
306
|
+
|
|
307
|
+
```js
|
|
308
|
+
// Vanilla javascript
|
|
309
|
+
document.addEventListener('render_async_load', function(event) {
|
|
310
|
+
console.log('Async partial loaded in this container:', event.container);
|
|
311
|
+
});
|
|
312
|
+
document.addEventListener('render_async_error', function(event) {
|
|
313
|
+
console.log('Async partial could not load in this container:', event.container);
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
// with jQuery
|
|
317
|
+
$(document).on('render_async_load', function(event) {
|
|
318
|
+
console.log('Async partial loaded in this container:', event.container);
|
|
319
|
+
});
|
|
320
|
+
$(document).on('render_async_error', function(event) {
|
|
321
|
+
console.log('Async partial could not load in this container:', event.container);
|
|
322
|
+
});
|
|
323
|
+
```
|
|
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.
|
|
238
354
|
|
|
239
355
|
### Retry on failure
|
|
240
356
|
|
|
@@ -246,13 +362,46 @@ this:
|
|
|
246
362
|
<%= render_async users_path, retry_count: 5, error_message: "Couldn't fetch it" %>
|
|
247
363
|
```
|
|
248
364
|
|
|
249
|
-
Now render_async will retry `users_path` for 5 times. If it
|
|
365
|
+
Now render_async will retry `users_path` for 5 times. If it succeeds in
|
|
250
366
|
between, it will stop with dispatching requests. If it fails after 5 times,
|
|
251
367
|
it will show an [error message](#handling-errors) which you need to specify.
|
|
252
368
|
|
|
253
369
|
This can show useful when you know your requests often fail, and you don't want
|
|
254
370
|
to refresh the whole page just to retry them.
|
|
255
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
|
+
|
|
256
405
|
### Toggle event
|
|
257
406
|
|
|
258
407
|
You can trigger `render_async` loading by clicking or doing another event to a
|
|
@@ -262,37 +411,57 @@ default event that will trigger `render_async` will be 'click' event. You can
|
|
|
262
411
|
do this by doing the following:
|
|
263
412
|
|
|
264
413
|
```erb
|
|
265
|
-
<a href='#' id='
|
|
266
|
-
<%= render_async comments_path, toggle: { selector: '#
|
|
414
|
+
<a href='#' id='comments-button'>Load comments</a>
|
|
415
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } %>
|
|
267
416
|
```
|
|
268
417
|
|
|
269
|
-
This will trigger `render_async` to load the `comments_path` when you click the `#
|
|
270
|
-
If you
|
|
271
|
-
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.
|
|
272
421
|
|
|
273
422
|
You can also pass in a placeholder before the `render_async` is triggered. That
|
|
274
423
|
way, the element that started `render_async` logic will be removed after the
|
|
275
424
|
request has been completed. You can achieve this behaviour with something like this:
|
|
276
425
|
|
|
277
426
|
```erb
|
|
278
|
-
<%= render_async comments_path, toggle: { selector: '#
|
|
279
|
-
<a href='#' id='
|
|
427
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } do %>
|
|
428
|
+
<a href='#' id='comments-button'>Load comments</a>
|
|
280
429
|
<% end %>
|
|
281
430
|
```
|
|
282
431
|
|
|
432
|
+
#### Control polling with a toggle
|
|
433
|
+
|
|
283
434
|
Also, you can mix interval and toggle features. This way, you can turn polling
|
|
284
|
-
on, and off by clicking the "
|
|
435
|
+
on, and off by clicking the "Load comments" button. In order to do this, you need to
|
|
285
436
|
pass `toggle` and `interval` arguments to `render_async` call like this:
|
|
286
437
|
|
|
287
438
|
```erb
|
|
288
|
-
<a href='#' id='
|
|
289
|
-
<%= render_async comments_path, toggle: { selector: '#
|
|
439
|
+
<a href='#' id='comments-button'>Load comments</a>
|
|
440
|
+
<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
|
|
441
|
+
```
|
|
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 %>
|
|
290
455
|
```
|
|
291
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
|
+
|
|
292
461
|
### Polling
|
|
293
462
|
|
|
294
463
|
You can call `render_async` with interval argument. This will make render_async
|
|
295
|
-
call specified path at specified interval.
|
|
464
|
+
call specified path at the specified interval.
|
|
296
465
|
|
|
297
466
|
By doing this:
|
|
298
467
|
```erb
|
|
@@ -302,15 +471,65 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
|
|
|
302
471
|
|
|
303
472
|
This can be handy if you want to enable polling for a specific URL.
|
|
304
473
|
|
|
305
|
-
|
|
306
|
-
will remain in HTML tree
|
|
307
|
-
You can handle how that container element is rendered and its style by
|
|
308
|
-
[passing in an HTML element name](#passing-in-an-html-element-name) and
|
|
309
|
-
[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.
|
|
310
529
|
|
|
311
530
|
### Handling errors
|
|
312
531
|
|
|
313
|
-
`render_async`
|
|
532
|
+
`render_async` lets you handle errors by allowing you to pass in `error_message`
|
|
314
533
|
and `error_event_name`.
|
|
315
534
|
|
|
316
535
|
- `error_message`
|
|
@@ -356,10 +575,10 @@ Then, in the partial (e.g. `app/views/comments/_comment_stats.html.erb`):
|
|
|
356
575
|
<% end %>
|
|
357
576
|
```
|
|
358
577
|
|
|
359
|
-
|
|
360
|
-
|
|
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
|
|
361
580
|
instantly, without making the AJAX call.
|
|
362
|
-
|
|
581
|
+
- You can expire cache simply by passing `:expires_in` in your view where
|
|
363
582
|
you cache the partial
|
|
364
583
|
|
|
365
584
|
### Doing non-GET requests
|
|
@@ -388,7 +607,7 @@ away from, and then back to, a page with a `render_async` call on it. This will
|
|
|
388
607
|
likely show up as an empty div.
|
|
389
608
|
|
|
390
609
|
If you're using Turbolinks 5 or higher, you can resolve this by setting Turbolinks
|
|
391
|
-
|
|
610
|
+
configuration of `render_async` to true:
|
|
392
611
|
|
|
393
612
|
```rb
|
|
394
613
|
RenderAsync.configure do |config|
|
|
@@ -397,7 +616,7 @@ end
|
|
|
397
616
|
```
|
|
398
617
|
|
|
399
618
|
This way, you're not breaking Turbolinks flow of loading or reloading a page.
|
|
400
|
-
It
|
|
619
|
+
It is more efficient than the next option below.
|
|
401
620
|
|
|
402
621
|
Another option:
|
|
403
622
|
If you want, you can tell Turbolinks to reload your `render_async` call as follows:
|
|
@@ -408,8 +627,38 @@ If you want, you can tell Turbolinks to reload your `render_async` call as follo
|
|
|
408
627
|
|
|
409
628
|
This will reload the whole page with Turbolinks.
|
|
410
629
|
|
|
411
|
-
|
|
412
|
-
the `<
|
|
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, '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>`.
|
|
413
662
|
|
|
414
663
|
### Using with respond_to and JS format
|
|
415
664
|
|
|
@@ -428,7 +677,7 @@ def comment_stats
|
|
|
428
677
|
end
|
|
429
678
|
```
|
|
430
679
|
|
|
431
|
-
When you do this, Rails will
|
|
680
|
+
When you do this, Rails will sometimes set the response's `Content-Type` header
|
|
432
681
|
to `text/javascript`. This causes the partial not to be rendered in the HTML.
|
|
433
682
|
This usually happens when there's browser caching.
|
|
434
683
|
|
|
@@ -439,7 +688,7 @@ render call:
|
|
|
439
688
|
render partial: "comment_stats", content_type: 'text/html'
|
|
440
689
|
```
|
|
441
690
|
|
|
442
|
-
### Nested
|
|
691
|
+
### Nested async renders
|
|
443
692
|
|
|
444
693
|
It is possible to nest async templates within other async templates. When doing
|
|
445
694
|
so, another `content_for` is required to ensure the JavaScript needed to load
|
|
@@ -466,7 +715,20 @@ For example:
|
|
|
466
715
|
<%= content_for :render_async %>
|
|
467
716
|
```
|
|
468
717
|
|
|
469
|
-
###
|
|
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
|
|
470
732
|
|
|
471
733
|
`render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
|
|
472
734
|
**by default** in order to fetch the request from the server.
|
|
@@ -476,10 +738,14 @@ so.
|
|
|
476
738
|
|
|
477
739
|
You can configure it by doing the following anywhere before you call
|
|
478
740
|
`render_async`:
|
|
741
|
+
|
|
479
742
|
```rb
|
|
480
743
|
RenderAsync.configure do |config|
|
|
481
|
-
config.jquery = true # This will render jQuery code, and skip Vanilla JS code
|
|
482
|
-
config.turbolinks =
|
|
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.
|
|
483
749
|
end
|
|
484
750
|
```
|
|
485
751
|
|
|
@@ -489,17 +755,34 @@ Also, you can do it like this:
|
|
|
489
755
|
RenderAsync.configuration.jquery = true
|
|
490
756
|
```
|
|
491
757
|
|
|
492
|
-
|
|
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
|
|
493
767
|
|
|
494
768
|
After checking out the repo, run `bin/setup` to install dependencies. Then, run
|
|
495
769
|
`rake spec` to run the tests. You can also run `bin/console` for an interactive
|
|
496
|
-
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
|
|
497
778
|
|
|
498
|
-
|
|
779
|
+
Check out [CONTRIBUTING](.github/CONTRIBUTING.md) file, please.
|
|
499
780
|
|
|
500
|
-
|
|
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!
|
|
501
784
|
|
|
502
|
-
## License
|
|
785
|
+
## :memo: License
|
|
503
786
|
|
|
504
787
|
The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
|
|
505
788
|
|
|
@@ -512,7 +795,8 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
|
|
|
512
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") |
|
|
513
796
|
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
|
|
514
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") |
|
|
515
|
-
| [<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") |
|
|
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") |
|
|
516
800
|
<!-- ALL-CONTRIBUTORS-LIST:END -->
|
|
517
801
|
|
|
518
802
|
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
|