render_async 2.1.6 → 2.1.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e4395fdb879d841524916faed69721328699ce7e0a306eb90e1fc8884481b456
-  data.tar.gz: f46076b2751679131e34cfa171f57f669eeea03ff7a54dfa0f72ef7e62a5ae30
+  metadata.gz: 80f65d684e925ba32249eef7d5dd817b268b72dfebd0ecd9525fbe544d16af57
+  data.tar.gz: 46b675280ceb449a68953e9a2833332ff74222d773a3aa66ec95036d25587273
 SHA512:
-  metadata.gz: a489a71c7f80f9de03cb1d5c907b0e254e1dd40417432ff58c8a165f49b4e75a74d4338f20969be147bc5f1919d55f94f29189531f7822cb1803a6fc12ba0300
-  data.tar.gz: c045fe610ddbddde1083c1455c106e6024cb743a32d69f1c9e2720c5cba6bad1b9941af955383ee9c340d7f9d7538f7abbfd9eea58491f84428ee030b62f8ba9
+  metadata.gz: 3bdd39f73528d3b9a8035ab5c8629b9c5261186f1d3eae2d5b82b856942c0ae602d5c670d96e009a240744fe5e7d93a97136298f05ef55c010f7d6f7972b4f40
+  data.tar.gz: a73351396f72b02895c03a4ff20068f096ae71279adc7345518d31e26111f63ac46b5b76424a24e566a7a0268f1748d1c1c364489e17d030dea12a691cc227eb

data/.all-contributorsrc

@@ -196,6 +196,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "vanboom",
+      "name": "Don",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/251706?v=4",
+      "profile": "https://github.com/vanboom",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoType": "github"

data/CHANGELOG.md

@@ -1,3 +1,12 @@
+### 2.1.7 (2020/8/1)
+
+* [#125](https://github.com/renderedtext/render_async/pull/125): Implement retry after some time feature - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#124](https://github.com/renderedtext/render_async/pull/124): Add more info on how to control polling - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#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).
+* [#119](https://github.com/renderedtext/render_async/pull/119): Add polling control start/stop events - [@vanboom](https://github.com/vanboom).
+* [#120](https://github.com/renderedtext/render_async/pull/120): Fine tune custom content_for feature - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#117](https://github.com/renderedtext/render_async/pull/117): Allow a custom content_for name - [@vanboom](https://github.com/vanboom).
+
 ### 2.1.6 (2020/5/9)
 
 * [#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

@@ -1,32 +1,70 @@
-[![Build Status](https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg)](https://semaphoreci.com/renderedtext/render_async)
-[![All Contributors](https://img.shields.io/badge/all_contributors-20-orange.svg?style=flat-square)](#contributors)
-[![Gem Version](https://badge.fury.io/rb/render_async.svg)](https://badge.fury.io/rb/render_async)
-[![Donate](https://img.shields.io/badge/$-support-green.svg)](https://www.paypal.me/nikolalsvk/10)
-[![Code Climate](https://codeclimate.com/github/renderedtext/render_async/badges/gpa.svg)](https://codeclimate.com/github/renderedtext/render_async)
-[![Test Coverage](https://codeclimate.com/github/renderedtext/render_async/badges/coverage.svg)](https://codeclimate.com/github/renderedtext/render_async/coverage)
-[![Help Contribute to Open Source](https://www.codetriage.com/renderedtext/render_async/badges/users.svg)](https://www.codetriage.com/renderedtext/render_async)
-
-![render_async](http://s2blog.wpengine.com/wp-content/uploads/assets/images/2017-06-08/speed-up-rendering-rails-pages-with-render-async.png)
-
-# render_async
-
-Speed up rendering Rails pages with this gem.
-
-`render_async` renders partials to your views **asynchronously**. This is done
-through adding JavaScript code that does AJAX request to your controller which
-then renders your partial into a Rails view.
-
-Workflow:
-
-1. user visits a Rails page
-2. AJAX request on the controller action
+<p align="center">
+  <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' />
+
+  <h1 align="center">👋 Welcome to render_async</h1>
+
+  <h3 align="center">Let's make your Rails pages fast again :racehorse:</h3>
+
+  <br />
+
+  <p align="center">
+    <a href="https://www.paypal.me/nikolalsvk/10" target="_blank">
+     <img src="https://img.shields.io/badge/$-support-green.svg" alt="Donate" />
+    </a>
+    <a href="https://rubygems.org/gems/render_async" target="_blank">
+      <img src="https://img.shields.io/gem/dt/render_async" alt="Downloads" />
+    </a>
+    <a href="#contributors" target="_blank">
+     <img src="https://img.shields.io/github/all-contributors/renderedtext/render_async" alt="All contributors" />
+    </a>
+    <a href="https://badge.fury.io/rb/render_async" target="_blank">
+     <img src="https://badge.fury.io/rb/render_async.svg" alt="Gem Version" />
+    </a>
+    <br />
+    <a href="https://discord.gg/SPfbeRm" target="_blank">
+      <img src="https://img.shields.io/discord/738783603214909521" alt="Discord Server" />
+    </a>
+    <a href="https://semaphoreci.com/renderedtext/render_async" target="_blank">
+     <img src="https://semaphoreci.com/api/v1/renderedtext/render_async/branches/master/shields_badge.svg" alt="Build Status" />
+    </a>
+    <a href="https://codeclimate.com/github/renderedtext/render_async" target="_blank">
+     <img src="https://img.shields.io/codeclimate/maintainability/renderedtext/render_async" alt="Code Climate Maintainablity" />
+    </a>
+    <a href="https://codeclimate.com/github/renderedtext/render_async/coverage" target="_blank">
+     <img src="https://img.shields.io/codeclimate/coverage/renderedtext/render_async" alt="Test Coverage" />
+    </a>
+    <a href="https://github.com/renderedtext/render_async/blob/master/LICENSE" target="_blank">
+      <img src="https://img.shields.io/github/license/renderedtext/render_async" alt="License" />
+    </a>
+    <a href="https://www.codetriage.com/renderedtext/render_async" target="_blank">
+     <img src="https://www.codetriage.com/renderedtext/render_async/badges/users.svg" alt="Help Contribute to Open Source" />
+    </a>
+  </p>
+</p>
+
+### `render_async` is here to make your pages show faster to users.
+
+Pages become faster seamlessly by rendering partials to your views.
+
+Partials render **asynchronously** and let users see your page **faster**
+than using regular rendering.
+
+It works with Rails and its tools out of the box.
+
+:sparkles:  A quick overview of how `render_async` does its magic:
+
+1. user visits a page
+2. `render_async` makes an AJAX request on the controller action
 3. controller renders a partial
-4. partials renders in the place where you put `render_async` helper
+4. partial renders in the place where you put `render_async` view helper
 
-JavaScript is injected into `<%= content_for :render_async %>` so you choose
+JavaScript is injected straight into `<%= content_for :render_async %>` so you choose
 where to put it.
 
-## Installation
+:mega:  P.S. Join our [Discord channel](https://discord.gg/SPfbeRm) for help and discussion, and let's make `render_async` even better!
+
+## :package: Installation
+
 Add this line to your application's Gemfile:
 
 ```ruby
@@ -37,7 +75,7 @@ And then execute:
 
     $ bundle install
 
-## Usage
+## :hammer: Usage
 
 1. Include `render_async` view helper somewhere in your views (e.g. `app/views/comments/show.html.erb`):
     ```erb
@@ -70,7 +108,7 @@ And then execute:
     <%= content_for :render_async %>
     ```
 
-## Advanced usage
+## :hammer_and_wrench: Advanced usage
 
 Advanced usage includes information on different options, such as:
 
@@ -82,14 +120,18 @@ Advanced usage includes information on different options, such as:
   - [Passing in an event name](#passing-in-an-event-name)
   - [Using default events](#using-default-events)
   - [Retry on failure](#retry-on-failure)
+    - [Retry after some time](#retry-after-some-time)
   - [Toggle event](#toggle-event)
+    - [Control polling with a toggle](#control-polling-with-a-toggle)
   - [Polling](#polling)
+  - [Controlled polling](#controlled-polling)
   - [Handling errors](#handling-errors)
   - [Caching](#caching)
   - [Doing non-GET requests](#doing-non-get-requests)
   - [Using with Turbolinks](#using-with-turbolinks)
   - [Using with respond_to and JS format](#using-with-respond_to-and-js-format)
   - [Nested Async Renders](#nested-async-renders)
+  - [Customizing the content_for name](#customizing-the-content_for-name)
   - [Configuration](#configuration)
 
 ### Passing in a container ID
@@ -240,8 +282,7 @@ document.addEventListener("users-loaded", function(event) {
 });
 ```
 
-NOTE: Dispatching events is also supported for older browsers that don't
-support Event constructor.
+> :bulb: Dispatching events is also supported for older browsers that don't support Event constructor.
 
 ### Using default events
 
@@ -293,6 +334,39 @@ it will show an [error message](#handling-errors) which you need to specify.
 This can show useful when you know your requests often fail, and you don't want
 to refresh the whole page just to retry them.
 
+#### Retry after some time
+
+If you want to retry requests but with some delay in between the calls, you can
+pass a `retry_delay` option together with `retry_count` like so:
+
+```erb
+<%= render_async users_path,
+                 retry_count: 5,
+                 retry_delay: 2000 %>
+```
+
+This will make `render_async` wait for 2 seconds before retrying after each
+failure. In the end, if the request is still failing after 5th time, it will
+dispatch a [default error event](#using-default-events).
+
+> :candy:  If you are catching an event after an error, you can get `retryCount` from
+the event. `retryCount` will have number of retries it took before the event was dispatched.
+
+Here is an example on how to get `retryCount`:
+
+```erb
+<%= render_async users_path,
+                 retry_count: 5,
+                 retry_delay: 2000,
+                 error_event_name: 'it-failed-badly' %>
+
+<script>
+  document.addEventListener('it-failed-badly', function(event) {
+    console.log("Request failed after " + event.retryCount + " tries!")
+  });
+</script>
+```
+
 ### Toggle event
 
 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
 do this by doing the following:
 
 ```erb
-<a href='#' id='detail-button'>Detail</a>
-<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } %>
+<a href='#' id='comments-button'>Load comments</a>
+<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } %>
 ```
 
-This will trigger `render_async` to load the `comments_path` when you click the `#details-button` element.
+This will trigger `render_async` to load the `comments_path` when you click the `#comments-button` element.
 If you want to remove event once it's triggered, you can pass `once: true` in the toggle options.
 The `once` option is false by default.
 
@@ -315,18 +389,20 @@ way, the element that started `render_async` logic will be removed after the
 request has been completed. You can achieve this behaviour with something like this:
 
 ```erb
-<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click } do %>
-  <a href='#' id='detail-button'>Detail</a>
+<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click } do %>
+  <a href='#' id='comments-button'>Load comments</a>
 <% end %>
 ```
 
+#### Control polling with a toggle
+
 Also, you can mix interval and toggle features. This way, you can turn polling
-on, and off by clicking the "Detail" button. In order to do this, you need to
+on, and off by clicking the "Load comments" button. In order to do this, you need to
 pass `toggle` and `interval` arguments to `render_async` call like this:
 
 ```erb
-<a href='#' id='detail-button'>Detail</a>
-<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click }, interval: 2000 %>
+<a href='#' id='comments-button'>Load comments</a>
+<%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
 ```
 
 ### Polling
@@ -342,11 +418,61 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
 
 This can be handy if you want to enable polling for a specific URL.
 
-NOTE: By passing interval to `render_async`, initial container element
-will remain in HTML tree, it will not be replaced with request response.
-You can handle how that container element is rendered and its style by
-[passing in an HTML element name](#passing-in-an-html-element-name) and
-[HTML element class](#passing-in-a-container-class-name).
+> :warning:  By passing interval to `render_async`, initial container element
+> will remain in HTML tree, it will not be replaced with request response.
+> You can handle how that container element is rendered and its style by
+> [passing in an HTML element name](#passing-in-an-html-element-name) and
+> [HTML element class](#passing-in-a-container-class-name).
+
+### Controlled polling
+
+You can controller `render_async` [polling](#polling) in 2 manners.
+First one is pretty simple, and it involves using the [toggle](#toggle-event)
+feature. To do this, you can follow instructions in the
+[control polling with a toggle section](#control-polling-with-a-toggle).
+
+Second option is more advanced and it involves emitting events to the `render_async`'s
+container element. From your code, you can emit following events:
+  - 'async-stop' - this will stop polling
+  - 'async-start' - this will start polling.
+
+> :bulb:  Please note that events need to be dispatched to a render_async container.
+
+An example of how you can do this looks like this:
+
+```erb
+<%= render_async wave_render_async_path,
+                 container_id: 'controllable-interval', # set container_id so we can get it later easily
+                 interval: 3000 %>
+
+<button id='stop-polling'>Stop polling</button>
+<button id='start-polling'>Start polling</button>
+
+<script>
+  var container = document.getElementById('controllable-interval')
+  var stopPolling = document.getElementById('stop-polling')
+  var startPolling = document.getElementById('start-polling')
+
+  var triggerEventOnContainer = function(eventName) {
+    var event = new Event(eventName);
+
+    container.dispatchEvent(event)
+  }
+
+  stopPolling.addEventListener('click', function() {
+    container.innerHTML = '<p>Polling stopped</p>'
+    triggerEventOnContainer('async-stop')
+  })
+  startPolling.addEventListener('click', function() {
+    triggerEventOnContainer('async-start')
+  })
+</script>
+```
+
+We are rendering two buttons - "Stop polling" and "Start polling". Then, we
+attach event listener to catch any clicking on the buttons. When the buttons
+are clicked, we either stop the polling, or start the polling, depending which
+button a user clicks.
 
 ### Handling errors
 
@@ -396,10 +522,10 @@ Then, in the partial (e.g. `app/views/comments/_comment_stats.html.erb`):
 <% end %>
 ```
 
-* The first time the page renders, it will make the AJAX call.
-* Any other times (until the cache expires), it will render from cache
+- The first time the page renders, it will make the AJAX call.
+- Any other times (until the cache expires), it will render from cache
   instantly, without making the AJAX call.
-* You can expire cache simply by passing `:expires_in` in your view where
+- You can expire cache simply by passing `:expires_in` in your view where
   you cache the partial
 
 ### Doing non-GET requests
@@ -448,7 +574,7 @@ If you want, you can tell Turbolinks to reload your `render_async` call as follo
 
 This will reload the whole page with Turbolinks.
 
-Make sure to put `<%= content_for :render_async %>` in your base view file in
+> :bulb:  Make sure to put `<%= content_for :render_async %>` in your base view file in
 the `<head>` and not the `<body>`.
 
 ### Using with respond_to and JS format
@@ -506,6 +632,19 @@ For example:
 <%= content_for :render_async %>
 ```
 
+### Customizing the content_for name
+
+The `content_for` name may be customized by passing the `content_for_name`
+option to `render_async`. This option is especially useful when doing [nested async
+renders](#nested-async-renders) to better control the location of the injected JavaScript.
+
+For example:
+```erb
+<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
+
+<%= content_for :render_async_comment_stats %>
+```
+
 ### Configuration
 
 `render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
@@ -529,17 +668,28 @@ Also, you can do it like this:
 RenderAsync.configuration.jquery = true
 ```
 
-## Development
+## :hammer_and_pick: Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run
 `rake spec` to run the tests. You can also run `bin/console` for an interactive
-prompt that will allow you to experiment.
+prompt that will allow you to experiment. To run integration tests, use
+`bin/integration-tests`.
+
+Got any questions or comments about development (or anything else)?
+Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
+and let's make `render_async` even better!
+
+## :pray: Contributing
 
-## Contributing
+Thank you for considering or deciding to contribute, this is much appreciated!
+Any kind of bug reports and pull requests are encouraged and welcome on GitHub at
+https://github.com/renderedtext/render_async.
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/renderedtext/render_async.
+Got any issues or difficulties?
+Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
+and let's make `render_async` even better!
 
-## License
+## :memo: License
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
 
@@ -552,7 +702,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | [<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") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<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") |
-| [<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/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") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

data/app/views/render_async/_render_async.html.erb

@@ -5,38 +5,30 @@
   <%= placeholder %>
 </<%= html_element_name %>>
 
-<% content_for :render_async do %>
+<% content_for content_for_name do %>
   <%= javascript_tag html_options do %>
+    <% locals = { container_id: container_id,
+                  path: path,
+                  method: method,
+                  data: data,
+                  event_name: event_name,
+                  toggle: toggle,
+                  headers: headers,
+                  error_message: error_message,
+                  error_event_name: error_event_name,
+                  retry_count: retry_count,
+                  retry_delay: retry_delay,
+                  interval: interval,
+                  turbolinks: RenderAsync.configuration.turbolinks } %>
+
     <% if RenderAsync.configuration.jquery %>
       <%= render partial: 'render_async/request_jquery',
                  formats: [:js],
-                 locals:  { container_id: container_id,
-                            path: path,
-                            method: method,
-                            data: data,
-                            event_name: event_name,
-                            toggle: toggle,
-                            headers: headers,
-                            error_message: error_message,
-                            error_event_name: error_event_name,
-                            retry_count: retry_count,
-                            interval: interval,
-                            turbolinks: RenderAsync.configuration.turbolinks } %>
+                 locals:  locals  %>
     <% else %>
       <%= render partial: 'render_async/request_vanilla',
                  formats: [:js],
-                 locals:  { container_id: container_id,
-                            path: path,
-                            method: method,
-                            data: data,
-                            event_name: event_name,
-                            toggle: toggle,
-                            headers: headers,
-                            error_message: error_message,
-                            error_event_name: error_event_name,
-                            retry_count: retry_count,
-                            interval: interval,
-                            turbolinks: RenderAsync.configuration.turbolinks } %>
+                 locals:  locals %>
     <% end %>
   <% end %>
 <% end %>

data/app/views/render_async/_request_jquery.js.erb

@@ -68,28 +68,37 @@ if (window.jQuery) {
         var container = $("#<%= container_id %>");
         container.replaceWith("<%= error_message.try(:html_safe) %>");
 
-        var errorEvent = createEvent('render_async_error', container);
-        errorEvent.container = container;
-        document.dispatchEvent(errorEvent);
+        var errorEvent = createEvent(
+          "<%= error_event_name || 'render_async_error' %>",
+          container
+        )
+        errorEvent.retryCount = currentRetryCount
 
-        <% if error_event_name.present? %>
-          var event = createEvent("<%= error_event_name %>", container)
-          document.dispatchEvent(event);
-        <% end %>
+        document.dispatchEvent(errorEvent);
       });
     };
 
     <% if retry_count > 0 %>
+    var _retryMakeRequest = _makeRequest
+
+    <% if retry_delay %>
+    _retryMakeRequest = function(currentRetryCount) {
+      setTimeout(function() {
+        _makeRequest(currentRetryCount)
+      }, <%= retry_delay %>)
+    }
+    <% end %>
+
     function retry(currentRetryCount) {
       if (typeof(currentRetryCount) === 'number') {
         if (currentRetryCount >= <%= retry_count %>)
           return false;
 
-        _makeRequest(currentRetryCount + 1);
+        _retryMakeRequest(currentRetryCount + 1);
         return true;
       }
 
-      _makeRequest(1);
+      _retryMakeRequest(1);
       return true;
     }
     <% end %>
@@ -99,18 +108,30 @@ if (window.jQuery) {
     var _interval;
     <% if interval %>
     var _renderAsyncFunction = function() {
+      // If interval is already set, return
+      if (typeof(_interval) === 'number') return
+
       _makeRequest();
       _interval = setInterval(_makeRequest, <%= interval %>);
     }
 
-    <% if turbolinks %>
-    $(document).one('turbolinks:visit', function() {
-      if (typeof(_interval) === 'number') {
-        console.log('clearing the interval in jQuery part')
+    var _clearRenderAsyncInterval = function() {
+      if (typeof(_interval) === 'number'){
         clearInterval(_interval)
         _interval = undefined;
       }
-    });
+    }
+
+    var container = $("#<%= container_id %>");
+
+    // Register a stop polling event on the container
+    $(container).on('async-stop', _clearRenderAsyncInterval)
+
+    // Register a start polling event on the container
+    $(container).on('async-start', _renderAsyncFunction)
+
+    <% if turbolinks %>
+    $(document).one('turbolinks:visit', _clearRenderAsyncInterval);
     <% end %>
     <% end %>
 

data/app/views/render_async/_request_vanilla.js.erb

@@ -74,13 +74,13 @@
           var container = document.getElementById('<%= container_id %>');
           container.outerHTML = '<%= error_message.try(:html_safe) %>';
 
-          var errorEvent = createEvent('render_async_error', container);
-          document.dispatchEvent(errorEvent);
+          var errorEvent = createEvent(
+            "<%= error_event_name || 'render_async_error' %>",
+            container
+          );
+          errorEvent.retryCount = currentRetryCount
 
-          <% if error_event_name.present? %>
-            var event = createEvent('<%= error_event_name %>', container);
-            document.dispatchEvent(event);
-          <% end %>
+          document.dispatchEvent(errorEvent);
         }
       }
     };
@@ -90,16 +90,25 @@
   };
 
   <% if retry_count > 0 %>
+
+  <% if retry_delay %>
+  _retryMakeRequest = function(currentRetryCount) {
+    setTimeout(function() {
+      _makeRequest(currentRetryCount)
+    }, <%= retry_delay %>)
+  }
+  <% end %>
+
   function retry(currentRetryCount) {
     if (typeof(currentRetryCount) === 'number') {
       if (currentRetryCount >= <%= retry_count %>)
         return false;
 
-      _makeRequest(currentRetryCount + 1);
+      _retryMakeRequest(currentRetryCount + 1);
       return true;
     }
 
-    _makeRequest(1);
+    _retryMakeRequest(1);
     return true;
   }
   <% end %>
@@ -109,18 +118,30 @@
   var _interval;
   <% if interval %>
   var _renderAsyncFunction = function() {
+    // If interval is already set, return
+    if (typeof(_interval) === 'number') return
+
     _makeRequest();
     _interval = setInterval(_makeRequest, <%= interval %>);
   }
 
-  <% if turbolinks %>
-  document.addEventListener("turbolinks:visit", function(e) {
-    if (typeof(_interval) === 'number') {
-      console.log('clearing the interval')
-      clearInterval(_interval);
+  var _clearRenderAsyncInterval = function() {
+    if (typeof(_interval) === 'number'){
+      clearInterval(_interval)
       _interval = undefined;
     }
-  });
+  }
+
+  var container = document.getElementById('<%= container_id %>');
+
+  // Register a polling stop event on the container
+  container.addEventListener("async-stop", _clearRenderAsyncInterval)
+
+  // Register a start polling event on the container
+  container.addEventListener("async-start", _renderAsyncFunction)
+
+  <% if turbolinks %>
+  document.addEventListener("turbolinks:visit", _clearRenderAsyncInterval)
   <% end %>
   <% end %>
 

data/lib/render_async/version.rb

@@ -1,3 +1,3 @@
 module RenderAsync
-  VERSION = "2.1.6".freeze
+  VERSION = "2.1.7".freeze
 end

data/lib/render_async/view_helper.rb

@@ -20,7 +20,6 @@ module RenderAsync
     def render_async(path, options = {}, &placeholder)
       event_name = options.delete(:event_name)
       placeholder = capture(&placeholder) if block_given?
-      retry_count = options.delete(:retry_count) || 0
       html_options = options.delete(:html_options) || {}
 
       render 'render_async/render_async', **container_element_options(options),
@@ -30,8 +29,9 @@ module RenderAsync
                                           placeholder: placeholder,
                                           **request_options(options),
                                           **error_handling_options(options),
-                                          retry_count: retry_count,
-                                          **polling_options(options)
+                                          **retry_options(options),
+                                          **polling_options(options),
+                                          **content_for_options(options)
     end
 
     private
@@ -53,11 +53,24 @@ module RenderAsync
         error_event_name: options[:error_event_name] }
     end
 
+    def retry_options(options)
+      {
+        retry_count: options.delete(:retry_count) || 0,
+        retry_delay: options.delete(:retry_delay)
+      }
+    end
+
     def polling_options(options)
       { interval: options[:interval],
         toggle: options[:toggle] }
     end
 
+    def content_for_options(options)
+      {
+        content_for_name: options[:content_for_name] || :render_async
+      }
+    end
+
     private
 
     def generate_container_id

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: render_async
 version: !ruby/object:Gem::Version
-  version: 2.1.6
+  version: 2.1.7
 platform: ruby
 authors:
 - Kasper Grubbe
 - nikolalsvk
-autorequire: 
+autorequire:
 bindir: exe
 cert_chain: []
-date: 2020-05-09 00:00:00.000000000 Z
+date: 2020-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -86,7 +86,7 @@ homepage: https://github.com/renderedtext/render_async
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -101,8 +101,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
-signing_key: 
+rubygems_version: 3.0.3
+signing_key:
 specification_version: 4
 summary: Render parts of the page asynchronously with AJAX
 test_files: []