render_async 2.1.0 → 2.1.11

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

@@ -5,36 +5,33 @@
   <%= 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_count_header: retry_count_header,
+                  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,
-                            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,
-                            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,12 +5,49 @@ 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') {
+        event = new Event(name);
+      } else {
+        event = document.createEvent('Event');
+        event.initEvent(name, true, true);
+      }
+      event.container = container
+      return event;
+    }
 
-    var _listener = function(currentRetryCount) {
+    function _runAfterDocumentLoaded(callback) {
+      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) {
       var headers = <%= headers.to_json.html_safe %>;
-      var csrfTokenElement = document.querySelector('meta[name="csrf-token"]')
+      var csrfTokenElement = document.querySelector('meta[name="csrf-token"]');
       if (csrfTokenElement)
-        headers['X-CSRF-Token'] = csrfTokenElement.content
+        headers['X-CSRF-Token'] = csrfTokenElement.content;
+
+      <% if retry_count_header %>
+      if (typeof(currentRetryCount) === 'number') {
+        headers['<%= retry_count_header.html_safe %>'] = currentRetryCount;
+      }
+      <% end %>
 
       $.ajax({
         url: '<%= path.html_safe %>',
@@ -18,21 +55,23 @@ if (window.jQuery) {
         data: "<%= escape_javascript(data.to_s.html_safe) %>",
         headers: headers
       }).done(function(response) {
-        <% if interval %>
-          $("#<%= container_id %>").empty();
-          $("#<%= container_id %>").append(response);
+        var container = $("#<%= container_id %>");
+
+        // If user navigated away before the request completed
+        if (!container.length) return;
+
+        <% if !interval && replace_container %>
+          container.replaceWith(response);
         <% else %>
-          $("#<%= container_id %>").replaceWith(response);
+          container.empty();
+          container.append(response);
         <% end %>
 
+        var loadEvent = createEvent('render_async_load', container);
+        document.dispatchEvent(loadEvent);
+
         <% if event_name.present? %>
-          var event = undefined;
-          if (typeof(Event) === 'function') {
-            event = new Event("<%= event_name %>");
-          } else {
-            event = document.createEvent('Event');
-            event.initEvent('<%= event_name %>', true, true);
-          }
+          var event = createEvent("<%= event_name %>", container)
           document.dispatchEvent(event);
         <% end %>
       }).fail(function(response) {
@@ -43,48 +82,118 @@ if (window.jQuery) {
 
         if (skipErrorMessage) return;
 
-        $("#<%= container_id %>").replaceWith('<%= error_message.try(:html_safe) %>');
+        var container = $("#<%= container_id %>");
+        if (!container.length) return;
 
-        <% if error_event_name.present? %>
-          var event = undefined;
-          if (typeof(Event) === 'function') {
-            event = new Event("<%= error_event_name %>");
-          } else {
-            event = document.createEvent('Event');
-            event.initEvent('<%= error_event_name %>', true, true);
-          }
-          document.dispatchEvent(event);
-        <% end %>
+        container.replaceWith("<%= error_message.try(:html_safe) %>");
+
+        var errorEvent = createEvent(
+          "<%= error_event_name || 'render_async_error' %>",
+          container
+        )
+        errorEvent.retryCount = currentRetryCount
+
+        document.dispatchEvent(errorEvent);
       });
     };
 
     <% if retry_count > 0 %>
-    var retry = function(currentRetryCount) {
+    var _retryMakeRequest = _makeRequest
+
+    <% if retry_delay %>
+    _retryMakeRequest = function(currentRetryCount) {
+      setTimeout(function() {
+        _makeRequest(currentRetryCount)
+      }, <%= retry_delay %>)
+    }
+    <% else %>
+    _retryMakeRequest = _makeRequest
+    <% end %>
+
+    function retry(currentRetryCount) {
       if (typeof(currentRetryCount) === 'number') {
         if (currentRetryCount >= <%= retry_count %>)
           return false;
 
-        _listener(currentRetryCount + 1);
+        _retryMakeRequest(currentRetryCount + 1);
         return true;
       }
 
-      _listener(1);
+      _retryMakeRequest(1);
       return true;
     }
     <% end %>
 
+    var _renderAsyncFunction = _makeRequest;
+
+    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:load', _listener);
-    <% elsif interval %>
-    var _intervalFunction = function() {
-      _listener();
-      setInterval(_listener, <%= interval %>);
+    $(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)
     }
-    $(document).ready(_intervalFunction);
-    <% else %>
-    $(document).ready(_listener);
+
+    _runAfterDocumentLoaded(_setUpRefreshEvent)
+    <% end %>
+
+    <% if toggle %>
+    function _setUpToggle() {
+      $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
+        if (typeof(_interval) === 'number') {
+          clearInterval(_interval);
+          _interval = undefined;
+        } else {
+          _renderAsyncFunction();
+        }
+      });
+
+      <% if toggle[:start] %>
+      _renderAsyncFunction()
+      <% end %>
+    }
+
+    _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,8 +4,40 @@
     return;
   }
   <% end %>
-  
-  var _listener = function(currentRetryCount) {
+  <% if turbo %>
+  if (document.documentElement.hasAttribute("data-turbo-preview")) {
+    return;
+  }
+  <% end %>
+  function createEvent(name, container) {
+    var event = undefined;
+    if (typeof(Event) === 'function') {
+      event = new Event(name);
+    } else {
+      event = document.createEvent('Event');
+      event.initEvent(name, true, true);
+    }
+    event.container = container
+    return event;
+  }
+
+  function _runAfterDocumentLoaded(callback) {
+    <% if turbolinks %>
+    document.addEventListener("turbolinks:load", function(e) {
+      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 %>
+  }
+
+  function _makeRequest(currentRetryCount) {
     var request = new XMLHttpRequest();
     var asyncRequest = true;
     var SUCCESS = 200;
@@ -14,32 +46,41 @@
     request.open('<%= method %>', '<%= path.html_safe %>', asyncRequest);
 
     var headers = <%= headers.to_json.html_safe %>;
-    var csrfTokenElement = document.querySelector('meta[name="csrf-token"]')
+    var csrfTokenElement = document.querySelector('meta[name="csrf-token"]');
     if (csrfTokenElement)
-      headers['X-CSRF-Token'] = csrfTokenElement.content
+      headers['X-CSRF-Token'] = csrfTokenElement.content;
+
+    <% if retry_count_header %>
+    if (typeof(currentRetryCount) === 'number') {
+      headers['<%= retry_count_header.html_safe %>'] = currentRetryCount;
+    }
+    <% end %>
 
     Object.keys(headers).map(function(key) {
       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);
+          document.dispatchEvent(loadEvent);
+
           <% if event_name.present? %>
-            var event = undefined;
-            if (typeof(Event) === 'function') {
-              event = new Event("<%= event_name %>");
-            } else {
-              event = document.createEvent('Event');
-              event.initEvent('<%= event_name %>', true, true);
-            }
+            var event = createEvent('<%= event_name %>', container);
             document.dispatchEvent(event);
           <% end %>
         } else {
@@ -51,18 +92,17 @@
           if (skipErrorMessage) return;
 
           var container = document.getElementById('<%= container_id %>');
+          if (!container) return;
+
           container.outerHTML = '<%= error_message.try(:html_safe) %>';
 
-          <% if error_event_name.present? %>
-            var event = undefined;
-            if (typeof(Event) === 'function') {
-              event = new Event("<%= error_event_name %>");
-            } else {
-              event = document.createEvent('Event');
-              event.initEvent('<%= error_event_name %>', true, true);
-            }
-            document.dispatchEvent(event);
-          <% end %>
+          var errorEvent = createEvent(
+            "<%= error_event_name || 'render_async_error' %>",
+            container
+          );
+          errorEvent.retryCount = currentRetryCount
+
+          document.dispatchEvent(errorEvent);
         }
       }
     };
@@ -72,32 +112,106 @@
   };
 
   <% if retry_count > 0 %>
-  var retry = function(currentRetryCount) {
+
+  <% if retry_delay %>
+  var _retryMakeRequest = function(currentRetryCount) {
+    setTimeout(function() {
+      _makeRequest(currentRetryCount)
+    }, <%= retry_delay %>)
+  }
+  <% else %>
+  var _retryMakeRequest = _makeRequest
+  <% end %>
+
+  function retry(currentRetryCount) {
     if (typeof(currentRetryCount) === 'number') {
       if (currentRetryCount >= <%= retry_count %>)
         return false;
 
-      _listener(currentRetryCount + 1);
+      _retryMakeRequest(currentRetryCount + 1);
       return true;
     }
 
-    _listener(1);
+    _retryMakeRequest(1);
     return true;
   }
   <% end %>
 
+  var _renderAsyncFunction = _makeRequest;
+
+  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:load", function (e) {
-    e.target.removeEventListener(e.type, arguments.callee);
-    _listener.call(this);
-  });
-  <% elsif interval %>
-  var _intervalFunction = function() {
-    _listener();
-    setInterval(_listener, <%= interval %>);
+  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)
   }
-  document.addEventListener("DOMContentLoaded", _intervalFunction);
-  <% else %>
-  document.addEventListener("DOMContentLoaded", _listener);
+
+  _runAfterDocumentLoaded(_setUpRefreshEvent)
+  <% end %>
+
+  <% if toggle %>
+  function _setUpToggle() {
+    var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
+    var handler = function(event) {
+      if (typeof(_interval) === 'number') {
+        clearInterval(_interval);
+        _interval = undefined;
+      } else {
+        _renderAsyncFunction();
+      }
+      <% if toggle[:once] %>
+      this.removeEventListener(event.type, handler);
+      <% end %>
+    };
+
+    <% if toggle[:start] %>
+    _renderAsyncFunction()
+    <% end %>
+
+    for (var i = 0; i < selectors.length; ++i) {
+      selectors[i].addEventListener('<%= toggle[:event] || 'click' %>', handler)
+    }
+  }
+
+  _runAfterDocumentLoaded(_setUpToggle);
+  <% elsif !toggle %>
+  _runAfterDocumentLoaded(_renderAsyncFunction);
   <% end %>
 })();

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.0".freeze
+  VERSION = "2.1.11".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
@@ -18,39 +17,80 @@ module RenderAsync
     end
 
     def render_async(path, options = {}, &placeholder)
-      html_element_name = options.delete(:html_element_name) || 'div'
-      container_id = options.delete(:container_id) || generate_container_id
-      container_class = options.delete(:container_class)
       event_name = options.delete(:event_name)
       placeholder = capture(&placeholder) if block_given?
-      method = options.delete(:method) || 'GET'
-      data = options.delete(:data)
-      headers = options.delete(:headers) || {}
-      error_message = options.delete(:error_message)
-      error_event_name = options.delete(:error_event_name)
-      retry_count = options.delete(:retry_count) || 0
-      interval = options.delete(:interval)
-
-      render 'render_async/render_async', html_element_name: html_element_name,
-                                          container_id: container_id,
-                                          container_class: container_class,
+
+      render 'render_async/render_async', **container_element_options(options),
                                           path: path,
-                                          html_options: options,
+                                          html_options: html_options(options),
                                           event_name: event_name,
                                           placeholder: placeholder,
-                                          method: method,
-                                          data: data,
-                                          headers: headers,
-                                          error_message: error_message,
-                                          error_event_name: error_event_name,
-                                          retry_count: retry_count,
-                                          interval: interval
+                                          **request_options(options),
+                                          **error_handling_options(options),
+                                          **retry_options(options),
+                                          **polling_options(options),
+                                          **content_for_options(options)
     end
 
     private
 
+    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],
+        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)
+      { method: options[:method] || 'GET',
+        data: options[:data],
+        headers: options[:headers] || {} }
+    end
+
+    def error_handling_options(options)
+      { error_message: options[:error_message],
+        error_event_name: options[:error_event_name] }
+    end
+
+    def retry_options(options)
+      {
+        retry_count: options.delete(:retry_count) || 0,
+        retry_count_header: options.delete(:retry_count_header),
+        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
+
     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