render_async v2.1.8 Release Notes

Release Date: 2020-10-24 // 12 months ago
  • ๐Ÿฑ 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 containercontainer.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 = trueend
    

    ๐Ÿท 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!


Previous changes from v2.1.7

  • ๐Ÿฑ ๐ŸŽ‰ 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 %\>
    

    0๏ธโƒฃ 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!