render_async 2.1.7 → 2.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 80f65d684e925ba32249eef7d5dd817b268b72dfebd0ecd9525fbe544d16af57
-  data.tar.gz: 46b675280ceb449a68953e9a2833332ff74222d773a3aa66ec95036d25587273
+  metadata.gz: 25aa48ca09d482b0cdf14569d09e594ef525deaba38b9be8c39bc200b86de28e
+  data.tar.gz: 3d52e3a5a9fcba834c502aa78ea429cfa650eea45de4e27654294e560cc9c177
 SHA512:
-  metadata.gz: 3bdd39f73528d3b9a8035ab5c8629b9c5261186f1d3eae2d5b82b856942c0ae602d5c670d96e009a240744fe5e7d93a97136298f05ef55c010f7d6f7972b4f40
-  data.tar.gz: a73351396f72b02895c03a4ff20068f096ae71279adc7345518d31e26111f63ac46b5b76424a24e566a7a0268f1748d1c1c364489e17d030dea12a691cc227eb
+  metadata.gz: 0b50f5bd6a991c2af51ba3fc52b64dc0eda858e8827ef29b57dd4b8e1d1fd17134ddec8aeeb0df1e337666c9fb909f7b0664a85a069a3f3974fafa99273e66f9
+  data.tar.gz: 06adc494ef7f021ed5211f48f9103cabd5a3ebd42475cbcaedb7ac026df9cc0e62981e465b330ca17e351a17c53322e09bf51d055c2aaa64155457452820aa7f

data/.all-contributorsrc

@@ -205,6 +205,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "villu164",
+      "name": "villu164",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/998682?v=4",
+      "profile": "https://github.com/villu164",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

data/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 2.1.8 (2020/10/24)
+
+* [#134](https://github.com/renderedtext/render_async/pull/134): Add config option for setting nonce - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#132](https://github.com/renderedtext/render_async/pull/132): Refresh render_async with an event - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#131](https://github.com/renderedtext/render_async/pull/131): Start to poll on page load with toggle - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#130](https://github.com/renderedtext/render_async/pull/130): Set up control events after document loaded - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#127](https://github.com/renderedtext/render_async/pull/127): Update README.md, to reflect correct turbolinks configuration value - [@villu164](https://github.com/villu164).
+
 ### 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).

data/README.md

@@ -119,6 +119,7 @@ Advanced usage includes information on different options, such as:
   - [Passing in a placeholder](#passing-in-a-placeholder)
   - [Passing in an event name](#passing-in-an-event-name)
   - [Using default events](#using-default-events)
+  - [Refreshing the partial](#refreshing-the-partial)
   - [Retry on failure](#retry-on-failure)
     - [Retry after some time](#retry-after-some-time)
   - [Toggle event](#toggle-event)
@@ -130,9 +131,9 @@ Advanced usage includes information on different options, such as:
   - [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)
+  - [Nested async renders](#nested-async-renders)
   - [Customizing the content_for name](#customizing-the-content_for-name)
-  - [Configuration](#configuration)
+  - [Configuration options](#configuration-options)
 
 ### Passing in a container ID
 
@@ -178,6 +179,7 @@ Rendered code in the view:
 `javascript_tag`, to drop HTML tags into the `script` element.
 
 Example of utilizing `html_options` with a [nonce](https://edgeguides.rubyonrails.org/security.html#content-security-policy):
+
 ```erb
 <%= render_async users_path, html_options: { nonce: true } %>
 ```
@@ -196,6 +198,8 @@ Rendered code in the view:
 </div>
 ```
 
+> :bulb:  You can enable `nonce` to be set everywhere by using [configuration option](#configuration-option) render_async provides.
+
 ### Passing in an HTML element name
 
 `render_async` can take in an HTML element name, allowing you to control
@@ -317,6 +321,36 @@ $(document).on('render_async_error', function(event) {
 });
 ```
 
+### Refreshing the partial
+
+`render_async` lets you refresh (reload) the partial by letting you dispatch
+the 'refresh' event on the `render_async`'s container. An example:
+
+```erb
+<%= 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>
+```
+
+If you follow the example above, when you click "Refresh comments" button,
+`render_async` will trigger again and reload the `comments_path`.
+
+> :bulb:  Note that you need to pass `replace_container: false` so you can later dispatch an event on that container.
+
 ### Retry on failure
 
 `render_async` can retry your requests if they fail for some reason.
@@ -382,7 +416,7 @@ do this by doing the following:
 
 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.
+The `once` option is false (`nil`) by default.
 
 You can also pass in a placeholder before the `render_async` is triggered. That
 way, the element that started `render_async` logic will be removed after the
@@ -405,6 +439,24 @@ pass `toggle` and `interval` arguments to `render_async` call like this:
 <%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
 ```
 
+If you want `render_async` to render the request on load, you can pass `start:
+true`. Passing the `start` option inside the `toggle` hash will trigger
+`render_async` on page load. You can then toggle off polling by interacting
+with the element you specified. An example:
+
+```erb
+<a href='#' id='comments-button'>Toggle comments loading</a>
+<%= render_async comments_path,
+                 toggle: { selector: '#comments-button',
+                           event: :click,
+                           start: true },
+                 interval: 2000 %>
+```
+
+In the example above, the comments will load as soon as the page is rendered.
+Then, you can stop polling for comments by clicking the "Toggle comments
+loading" button.
+
 ### Polling
 
 You can call `render_async` with interval argument. This will make render_async
@@ -605,7 +657,7 @@ render call:
 render partial: "comment_stats", content_type: 'text/html'
 ```
 
-### Nested Async Renders
+### Nested async renders
 
 It is possible to nest async templates within other async templates. When doing
 so, another `content_for` is required to ensure the JavaScript needed to load
@@ -645,7 +697,7 @@ For example:
 <%= content_for :render_async_comment_stats %>
 ```
 
-### Configuration
+### Configuration options
 
 `render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
 **by default** in order to fetch the request from the server.
@@ -655,10 +707,13 @@ so.
 
 You can configure it by doing the following anywhere before you call
 `render_async`:
+
 ```rb
 RenderAsync.configure do |config|
-  config.jquery = true # This will render jQuery code, and skip Vanilla JS code
-  config.turbolinks = false # Enable this option if you are using Turbolinks 5+
+  config.jquery = true # This will render jQuery code, and skip Vanilla JS code. The default value is false.
+  config.turbolinks = true # Enable this option if you are using Turbolinks 5+. The default value is false.
+  config.replace_container = false # Set to false if you want to keep the placeholder div element from render_async. The default value is true.
+  config.nonces = true # Set to true if you want render_async's javascript_tag to always receive nonce: true. The default value is false.
 end
 ```
 
@@ -668,6 +723,13 @@ Also, you can do it like this:
 RenderAsync.configuration.jquery = true
 ```
 
+Aside from configuring whether the gem relies on jQuery or VanillaJS, you can
+configure other options:
+
+- `turbolinks` option - If you are using Turbolinks 5+, you should enable this option since it supports Turbolinks way of loading data. The default value for this options if false.
+- `replace_container` option - If you want render_async to replace its container with the request response, turn this on. You can turn this on globally for all render_async calls, but if you use this option in a specific render_async call, it will override the global configuration. The default value is true.
+- `nonces` - If you need to pass in `nonce: true` to the `javascript_tag` in your application, it might make sense for you to turn this on globally for all render_async calls. To read more about nonces, check out [Rails' official guide on security](https://edgeguides.rubyonrails.org/security.html). The default value is false.
+
 ## :hammer_and_pick: Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run
@@ -703,6 +765,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<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/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") |
+| [<img src="https://avatars0.githubusercontent.com/u/998682?v=4" width="100px;"/><br /><sub><b>villu164</b></sub>](https://github.com/villu164)<br />[📖](https://github.com/renderedtext/render_async/commits?author=villu164 "Documentation") |
 <!-- 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

@@ -8,6 +8,7 @@
 <% 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,
@@ -24,7 +25,7 @@
     <% if RenderAsync.configuration.jquery %>
       <%= render partial: 'render_async/request_jquery',
                  formats: [:js],
-                 locals:  locals  %>
+                 locals:  locals %>
     <% else %>
       <%= render partial: 'render_async/request_vanilla',
                  formats: [:js],

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

@@ -43,11 +43,11 @@ if (window.jQuery) {
         headers: headers
       }).done(function(response) {
         var container = $("#<%= container_id %>");
-        <% if interval %>
+        <% 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);
@@ -122,19 +122,33 @@ if (window.jQuery) {
       }
     }
 
-    var container = $("#<%= container_id %>");
+    function _setUpControlEvents() {
+      var container = $("#<%= container_id %>");
+
+      // Register a stop polling event on the container
+      $(container).on('async-stop', _clearRenderAsyncInterval)
 
-    // 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)
+    }
 
-    // Register a start polling event on the container
-    $(container).on('async-start', _renderAsyncFunction)
+    _runAfterDocumentLoaded(_setUpControlEvents)
 
     <% if turbolinks %>
     $(document).one('turbolinks: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) {
@@ -145,6 +159,10 @@ if (window.jQuery) {
           _renderAsyncFunction();
         }
       });
+
+      <% if toggle[:start] %>
+      _renderAsyncFunction()
+      <% end %>
     }
 
     _runAfterDocumentLoaded(_setUpToggle);

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

@@ -50,10 +50,10 @@
       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 !interval && replace_container %>
           container.outerHTML = request.response;
+          <% else %>
+          container.innerHTML = request.response;
           <% end %>
 
           var loadEvent = createEvent('render_async_load', container);
@@ -132,19 +132,33 @@
     }
   }
 
-  var container = document.getElementById('<%= container_id %>');
+  function _setUpControlEvents() {
+    var container = document.getElementById('<%= container_id %>');
 
-  // Register a polling stop event on the container
-  container.addEventListener("async-stop", _clearRenderAsyncInterval)
+    // 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)
+    // Register a start polling event on the container
+    container.addEventListener("async-start", _renderAsyncFunction)
+  }
+
+  _runAfterDocumentLoaded(_setUpControlEvents)
 
   <% if turbolinks %>
   document.addEventListener("turbolinks: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] %>');
@@ -160,6 +174,10 @@
       <% end %>
     };
 
+    <% if toggle[:start] %>
+    _renderAsyncFunction()
+    <% end %>
+
     for (var i = 0; i < selectors.length; ++i) {
       selectors[i].addEventListener('<%= toggle[:event] || 'click' %>', handler)
     }

data/lib/render_async/configuration.rb

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

data/lib/render_async/version.rb

@@ -1,3 +1,3 @@
 module RenderAsync
-  VERSION = "2.1.7".freeze
+  VERSION = "2.1.8".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,11 +19,10 @@ module RenderAsync
     def render_async(path, options = {}, &placeholder)
       event_name = options.delete(:event_name)
       placeholder = capture(&placeholder) if block_given?
-      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),
@@ -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] = config.nonces if set_options[:nonce].nil?
+
+      set_options
     end
 
     def request_options(options)
@@ -71,10 +78,18 @@ module RenderAsync
       }
     end
 
-    private
-
     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?
+
+      config.replace_container
+    end
+
+    def config
+      RenderAsync.configuration
+    end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: render_async
 version: !ruby/object:Gem::Version
-  version: 2.1.7
+  version: 2.1.8
 platform: ruby
 authors:
 - Kasper Grubbe
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2020-08-01 00:00:00.000000000 Z
+date: 2020-10-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake