Add retry count header

💇 Custom retry count header support

We added support to pass the retry count to the backend. If you need to pass retry count to the backend, you can pass retry_count_header in render_async's options:

<%= render_async users_path,
                 retry_count: 5,
                 retry_count_header: 'Retry-Count-Current' %>

And then in controller, you can read the value from request headers.

request.headers['Retry-Count-Current']&.to_i

This was added by @reneklacan in #147, many thanks 🙇

Fix TypeError when navigating with Turbolinks

🔧 Small fixes

We fixed the issue with TypeError when user navigates away from a page before the request is finished. Thanks to @yhirano55, the issue was resolved in #144 🎉

Also, @yhirano55 fixed one entry in the documentation in #145, thanks a lot for that.

That's it for now, thanks for reading 📖

Add support for Turbo

⚡️ Turbo support

The new version brings support for the new Turbo https://github.com/hotwired/turbo-rails from the Rails folks.

You can now specify:

RenderAsync.configure do |config|
  config.turbo = true # Enable this option if you are using Turbo
end

To have the Turbo library work properly in your Rails applications. Big thanks to @Mbuckley0 for bringing this to life in #141

🔧 Other changes

A bug fix with the configuration was solved by renaming the configuration in the code here #137

Also, some fixes to documentation were made in #139 and #142

Other than that, we added Rails 6 integration tests in #138 and the CONTRIBUTING.md file got updated there as well.

That's it for now, thanks for tuning in 📺

Reload partials on demand & start polling on page load

The new version of render_async is out! 🎉

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

The new version brings:

• Reloading partials on demand
• Start polling on page load when toggle is used
• Configure nonce globally
• Assign start and stop events after the page loaded

♻️ Refresh (reload) render_async partials

This feature was requested in at least 3 issues opened on the repo recently. Finally, it is here!
You can now provide a button for your users to easily refresh a partial that is render by render_async. Take a look at the example below:

<%= render_async comments_path,
                 container_id: 'refresh-me',
                 replace_container: false %>

<button id="refresh-button">Refresh comments</button>

<script>
  var button = document.getElementById('refresh-button')
  var container = document.getElementById('refresh-me');
  button.addEventListener('click', function() {
    var event = new Event('refresh');
    // Dispatch 'refresh' on the render_async container
    container.dispatchEvent(event)
  })
</script>

Now, every time a "Refresh comments" button is clicked, render_async will reload the comments partial. Hope you like the new feature.
The issues closed with this feature: #121, #126, #129. More info in the docs here.

🐎 Start polling on page load when toggle is used

We closed #118 with this feature. You can now specify start: true inside the toggle hash like this:

<a href='#' id='comments-button'>Toggle comments loading</a>
<%= render_async comments_path,
                 toggle: { selector: '#comments-button',
                           event: :click,
                           start: true },
                 interval: 2000 %>

This will make render_async to start polling on page load. Later, you can toggle polling with the "Toggle comments loading" button. There is more info in the docs here.

🔧 Configure nonce globally

You can specify nonces: true globally and never deal with it in specific render_async calls. Just add the following to your render_async configuration:

RenderAsync.configure do |config|
  config.nonces = true
end

After that, all javascript_tag elements will have nonce: true set. More info in the docs here.

⏯️ Assign start and stop events after the page loaded

This is a bug fix mentioned in #128. We moved the event set up after the page loaded.
If you had content_for inside the head tag, using async-start and async-stop will start working for you again.

That's all folks, catch you in the next one!

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

Retry with delay and control polling

🎉 New version of render_async is out! In the new version, there are a couple of new features:

• Retry render_async after some time
• Control polling by dispatching events
• Customize content_for name

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

♻️ Retry render_async 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:

<%= 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 the 5th time, it will dispatch a default error event.

You can read more about this feature in the README here

⏯️ Control polling by dispatching events

You can now control polling with by dispatching these 2 events:

• 'async-stop' - this will stop polling
• 'async-start' - this will start polling.

💡 Please note that events need to be dispatched to a render_async container.

An example of how you can do this looks like this:

<%= 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>

You can read more about it in the Controlled polling section of the README.

Customize 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 to better control the location of the injected JavaScript.

For example:

<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>

<%= content_for :render_async_comment_stats %>

This explanation is also available in the README

That's all folks, catch you in the next one!

👾 P.S. There is a render_async Discord server, please join and let's make render_async even better!

Stop polling with Turbolinks navigation change & other fixes

Release 2.1.6 solves a couple of minor bugs:

• Cannot stop polling after navigation changes (issue: #100, PR: #113)
• Default headers don't get removed now (issue: #72, PR: #112) (this was an old one, glad we got it out of the way, finally)
• Removed event.preventDefault() in toggle logic (issue: #109, PR: #110)
• Fixed loading of nested partials with Turbolinks based on this comment #70 (comment), PR: #114

Please test them out and post some findings if something is broken ❤️

Emit events by default on load and error

🔥 Firing events on success and fail by default

In this version, render_async will emit emits by default. If your request is finished successfully, a render_async_load event will fire. If it goes badly, the render_async_error will fire.

You can then catch these events in your code with something like this:

document.addEventListener('render_async_load', function(event) {
  console.log('Async partial loaded in this container:', event.container);
});
document.addEventListener('render_async_error', function(event) {
  console.log('Async partial could not load in this container:', event.container);
});

👁 Making DOM element available in events

As you've seen in the previous example, you can now access event.container which will give you the associated DOM element. DOM element will be the one it just got replaced after the request has finished.

🔨 Fix of #90

Toggle event listeners are not added after the page has loaded.

Note

If you're using jQuery to trigger an event like so

$(document).ready(function(){
  $("#render-async-trigger").trigger('click');
});

Make sure you're using render_async with jQuery configuration set to true!

OR

If you're using it with Vanilla JS (as is, as installed), make sure to register these events after the DOMContentLoaded is fired!

Unbind event after partial is fetched

This release solves #94 and allows you to unbind an event when using toggle functionality of the gem.

You can unbind an event by passing once: true argument to render_async toggle option:

<%= render_async comments_path, toggle: { selector: '#detail-button', event: :click, once: true } do %>
  <a href='#' id='detail-button'>Detail</a>
<% end %>

Fix toggle feature and error message

This release fixed a bug mentioned here #92

There was also an issue when you pass in an error message with double quotes, it would cause syntax error in JavaScript in the browser when request fails.

Fix bug when using Turbolinks and toggle feature

In 2.1.2 release, a bug that led to triggering render_async function immediately when using Turbolinks is fixed. This is the issue that got fixed #87