render_async 2.1.5 → 2.1.10

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

@@ -5,38 +5,32 @@
   <%= 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,
+                  replace_container: replace_container,
+                  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,
+                  turbo: RenderAsync.configuration.turbo} %>
+
     <% 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

@@ -5,6 +5,11 @@ if (window.jQuery) {
       return;
     }
     <% end %>
+    <% if turbo %>
+    if (document.documentElement.hasAttribute("data-turbo-preview")) {
+      return;
+    }
+    <% end %>
     function createEvent(name, container) {
       var event = undefined;
       if (typeof(Event) === 'function') {
@@ -18,11 +23,18 @@ if (window.jQuery) {
     }
 
     function _runAfterDocumentLoaded(callback) {
-      <% if turbolinks %>
-      $(document).one('turbolinks:load', callback);
-      <% else %>
-      $(document).ready(callback);
-      <% end %>
+      if (document.readyState === 'complete' || document.readyState === 'interactive') {
+        // Handle a case where nested partials get loaded after the document loads
+        callback();
+      } else {
+        <% if turbolinks %>
+        $(document).one('turbolinks:load', callback);
+        <% elsif turbo %>
+        $(document).one('turbo:load', callback);
+        <% else %>
+        $(document).ready(callback);
+        <% end %>
+      }
     }
 
     function _makeRequest(currentRetryCount) {
@@ -38,11 +50,15 @@ if (window.jQuery) {
         headers: headers
       }).done(function(response) {
         var container = $("#<%= container_id %>");
-        <% if interval %>
+
+        // If user navigated away before the request completed
+        if (!container.length) return;
+
+        <% if !interval && replace_container %>
+          container.replaceWith(response);
+        <% else %>
           container.empty();
           container.append(response);
-        <% else %>
-          container.replaceWith(response);
         <% end %>
 
         var loadEvent = createEvent('render_async_load', container);
@@ -61,48 +77,97 @@ if (window.jQuery) {
         if (skipErrorMessage) return;
 
         var container = $("#<%= container_id %>");
+        if (!container.length) return;
+
         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 %>
 
     var _renderAsyncFunction = _makeRequest;
 
-    <% if interval %>
     var _interval;
+    <% if interval %>
     var _renderAsyncFunction = function() {
+      // If interval is already set, return
+      if (typeof(_interval) === 'number') return
+
       _makeRequest();
       _interval = setInterval(_makeRequest, <%= interval %>);
     }
+
+    var _clearRenderAsyncInterval = function() {
+      if (typeof(_interval) === 'number'){
+        clearInterval(_interval)
+        _interval = undefined;
+      }
+    }
+
+    function _setUpControlEvents() {
+      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)
+    }
+
+    _runAfterDocumentLoaded(_setUpControlEvents)
+
+    <% if turbolinks %>
+    $(document).one('turbolinks:visit', _clearRenderAsyncInterval);
+    <% end %>
+    <% if turbo %>
+    $(document).one('turbo:visit', _clearRenderAsyncInterval);
+    <% end %>
+    <% end %>
+
+    <% if !replace_container %>
+    function _setUpRefreshEvent() {
+      var container = $("#<%= container_id %>");
+
+      $(container).on('refresh', _renderAsyncFunction)
+    }
+
+    _runAfterDocumentLoaded(_setUpRefreshEvent)
     <% end %>
 
     <% if toggle %>
     function _setUpToggle() {
       $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
-        event.preventDefault();
         if (typeof(_interval) === 'number') {
           clearInterval(_interval);
           _interval = undefined;
@@ -110,13 +175,17 @@ if (window.jQuery) {
           _renderAsyncFunction();
         }
       });
+
+      <% if toggle[:start] %>
+      _renderAsyncFunction()
+      <% end %>
     }
 
-    _runAfterDocumentLoaded(_setUpToggle)
+    _runAfterDocumentLoaded(_setUpToggle);
     <% elsif !toggle %>
     _runAfterDocumentLoaded(_renderAsyncFunction)
     <% end %>
   }(jQuery));
 } else {
-  console.warn("Looks like you've enabled jQuery for render_async, but jQuery is not defined");
+  console.warn("Looks like you've enabled jQuery for render_async, but jQuery is not defined on the window object");
 };

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

@@ -4,6 +4,11 @@
     return;
   }
   <% end %>
+  <% if turbo %>
+  if (document.documentElement.hasAttribute("data-turbo-preview")) {
+    return;
+  }
+  <% end %>
   function createEvent(name, container) {
     var event = undefined;
     if (typeof(Event) === 'function') {
@@ -22,6 +27,11 @@
       e.target.removeEventListener(e.type, arguments.callee);
       callback();
     });
+    <% elsif turbo %>
+    document.addEventListener("turbo:load", function(e) {
+      e.target.removeEventListener(e.type, arguments.callee);
+      callback();
+    });
     <% else %>
     document.addEventListener("DOMContentLoaded", callback);
     <% end %>
@@ -44,14 +54,20 @@
       request.setRequestHeader(key, headers[key]);
     });
 
+    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
     request.onreadystatechange = function() {
       if (request.readyState === 4) {
         if (request.status >= SUCCESS && request.status < ERROR) {
           var container = document.getElementById('<%= container_id %>');
-          <% if interval %>
-          container.innerHTML = request.response;
-          <% else %>
+
+          // If user navigated away before the request completed
+          if (!container) return;
+
+          <% if !interval && replace_container %>
           container.outerHTML = request.response;
+          <% else %>
+          container.innerHTML = request.response;
           <% end %>
 
           var loadEvent = createEvent('render_async_load', container);
@@ -70,16 +86,17 @@
           if (skipErrorMessage) return;
 
           var container = document.getElementById('<%= container_id %>');
+          if (!container) return;
+
           container.outerHTML = '<%= error_message.try(:html_safe) %>';
 
-          console.log(container)
-          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);
         }
       }
     };
@@ -89,35 +106,82 @@
   };
 
   <% 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 %>
 
   var _renderAsyncFunction = _makeRequest;
 
-  <% if interval %>
   var _interval;
+  <% if interval %>
   var _renderAsyncFunction = function() {
+    // If interval is already set, return
+    if (typeof(_interval) === 'number') return
+
     _makeRequest();
     _interval = setInterval(_makeRequest, <%= interval %>);
   }
+
+  var _clearRenderAsyncInterval = function() {
+    if (typeof(_interval) === 'number'){
+      clearInterval(_interval)
+      _interval = undefined;
+    }
+  }
+
+  function _setUpControlEvents() {
+    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)
+  }
+
+  _runAfterDocumentLoaded(_setUpControlEvents)
+
+  <% if turbolinks %>
+  document.addEventListener("turbolinks:visit", _clearRenderAsyncInterval)
+  <% end %>
+  <% if turbo %>
+  document.addEventListener("turbo:visit", _clearRenderAsyncInterval)
+  <% end %>
+  <% end %>
+
+  <% if !replace_container %>
+  function _setUpRefreshEvent() {
+    var container = document.getElementById('<%= container_id %>');
+
+    container.addEventListener('refresh', _renderAsyncFunction)
+  }
+
+  _runAfterDocumentLoaded(_setUpRefreshEvent)
   <% end %>
 
   <% if toggle %>
   function _setUpToggle() {
-    var selectors = document.querySelectorAll('<%= toggle[:selector] %>'), i;
+    var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
     var handler = function(event) {
-      event.preventDefault();
       if (typeof(_interval) === 'number') {
         clearInterval(_interval);
         _interval = undefined;
@@ -129,7 +193,11 @@
       <% end %>
     };
 
-    for (i = 0; i < selectors.length; ++i) {
+    <% if toggle[:start] %>
+    _renderAsyncFunction()
+    <% end %>
+
+    for (var i = 0; i < selectors.length; ++i) {
       selectors[i].addEventListener('<%= toggle[:event] || 'click' %>', handler)
     }
   }

data/bin/integration-tests

@@ -11,3 +11,10 @@ cd spec/fixtures/rails-5-base-app
 ls
 bundle install
 bundle exec cucumber
+
+cd ../../../spec/fixtures/rails-6-base-app
+ls
+bundle install
+yarn install
+RAILS_ENV=test bundle exec rails webpacker:compile
+bundle exec cucumber

data/lib/render_async/configuration.rb

@@ -1,10 +1,13 @@
 module RenderAsync
   class Configuration
-    attr_accessor :jquery, :turbolinks
+    attr_accessor :jquery, :turbolinks, :turbo, :replace_container, :nonces
 
     def initialize
       @jquery = false
       @turbolinks = false
+      @turbo = false
+      @replace_container = true
+      @nonces = false
     end
   end
 end

data/lib/render_async/version.rb

@@ -1,3 +1,3 @@
 module RenderAsync
-  VERSION = "2.1.5".freeze
+  VERSION = "2.1.10".freeze
 end

data/lib/render_async/view_helper.rb

@@ -2,7 +2,6 @@ require 'securerandom'
 
 module RenderAsync
   module ViewHelper
-
     def render_async_cache_key(path)
       "render_async_#{path}"
     end
@@ -20,18 +19,17 @@ 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),
                                           path: path,
-                                          html_options: html_options,
+                                          html_options: html_options(options),
                                           event_name: event_name,
                                           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
@@ -39,7 +37,16 @@ module RenderAsync
     def container_element_options(options)
       { html_element_name: options[:html_element_name] || 'div',
         container_id: options[:container_id] || generate_container_id,
-        container_class: options[:container_class] }
+        container_class: options[:container_class],
+        replace_container: replace_container(options) }
+    end
+
+    def html_options(options)
+      set_options = options.delete(:html_options) || {}
+
+      set_options[:nonce] = configuration.nonces if set_options[:nonce].nil?
+
+      set_options
     end
 
     def request_options(options)
@@ -53,15 +60,36 @@ 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
 
-    private
+    def content_for_options(options)
+      {
+        content_for_name: options[:content_for_name] || :render_async
+      }
+    end
 
     def generate_container_id
       "render_async_#{SecureRandom.hex(5)}#{Time.now.to_i}"
     end
+
+    def replace_container(options)
+      return options[:replace_container] unless options[:replace_container].nil?
+
+      configuration.replace_container
+    end
+
+    def configuration
+      RenderAsync.configuration
+    end
   end
 end