render_async 2.1.7 → 2.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 80f65d684e925ba32249eef7d5dd817b268b72dfebd0ecd9525fbe544d16af57
-  data.tar.gz: 46b675280ceb449a68953e9a2833332ff74222d773a3aa66ec95036d25587273
+  metadata.gz: 5eb3554f389bd0bcab8944c56c59238359d1c181c7dbc212d12e0335a9960fa6
+  data.tar.gz: a00cfb7925232e67825579356c33707d97258d369d41d92f676077c6e0b1d17e
 SHA512:
-  metadata.gz: 3bdd39f73528d3b9a8035ab5c8629b9c5261186f1d3eae2d5b82b856942c0ae602d5c670d96e009a240744fe5e7d93a97136298f05ef55c010f7d6f7972b4f40
-  data.tar.gz: a73351396f72b02895c03a4ff20068f096ae71279adc7345518d31e26111f63ac46b5b76424a24e566a7a0268f1748d1c1c364489e17d030dea12a691cc227eb
+  metadata.gz: acd95e67267622528c723d41ba5dfe1114319173f3455004523fd0dab784d8626a21314a389373f473d5147465e29773defb75c40d7ff6cb15053b7eba44e1a2
+  data.tar.gz: ccb2a071554bdca88a02b8b3b178711b01d116067eda7d48f01385056459cd3f59e8561d489ce76380be26ad8979398f40300759915c07962899aef608751e24

data/.all-contributorsrc

@@ -138,7 +138,8 @@
       "avatar_url": "https://avatars3.githubusercontent.com/u/1935686?v=4",
       "profile": "https://github.com/reneklacan",
       "contributions": [
-        "code"
+        "code",
+        "doc"
       ]
     },
     {
@@ -205,6 +206,35 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "villu164",
+      "name": "villu164",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/998682?v=4",
+      "profile": "https://github.com/villu164",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Mbuckley0",
+      "name": "Mitchell Buckley",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11203679?v=4",
+      "profile": "https://github.com/Mbuckley0",
+      "contributions": [
+        "code",
+        "doc"
+      ]
+    },
+    {
+      "login": "yhirano55",
+      "name": "yhirano55",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15371677?v=4",
+      "profile": "https://github.com/yhirano55",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "repoType": "github"

data/.github/CONTRIBUTING.md

@@ -0,0 +1,40 @@
+# :pray: Contributing
+
+Thank you for considering or deciding to contribute, this is much appreciated!
+Any kind of bug reports and pull requests are encouraged and welcome on GitHub at
+https://github.com/renderedtext/render_async.
+
+## :inbox_tray: Installing dependencies
+
+You can install all needed dependencies by running `bin/setup`.
+
+## :runner: Running RSpec tests
+
+You can run either `rake spec` or `bundle exec rspec` to run all the RSpec tests
+in the project.
+
+## :running_woman: Running integration tests
+
+There is a simple command `bin/integration-tests` which sets up 2 submodules,
+and runs Cucumber features in them.
+
+There are 2 submodules for render_async. The submodules are Rails 5 and Rails 6
+projects which are located in:
+
+  - `spec/fixtures/rails-5-base-app`, and
+  - `spec/fixtures/rails-6-base-app`.
+
+You can find [Rails 5 base app here](https://github.com/nikolalsvk/rails-5-base-app/tree/render-async),
+and the [Rails 6 base app here](https://github.com/nikolalsvk/rails-6-base-app/tree/render-async).
+
+Each of them have different use cases of render_async defined in `app/views/render_asyncs/_use_cases.html.erb` in their repos.
+All the feature tests are inside `features/render_async.feature` and `features/render_async_jquery.feature` files.
+
+If you are adding one or more feature tests or use cases, make sure to make a
+PR on those repos as well and include them in the PR on the render_async repo.
+
+## :sos: Need help?
+
+Got any issues or difficulties?
+Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
+and ask questions there. We will try to respond to you as quickly as possible.

data/.gitignore

@@ -15,3 +15,4 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+.DS_Store

data/.gitmodules

@@ -2,3 +2,7 @@
 	path = spec/fixtures/rails-5-base-app
 	url = git@github.com:nikolalsvk/rails-5-base-app.git
 	branch = render-async
+[submodule "spec/fixtures/rails-6-base-app"]
+	path = spec/fixtures/rails-6-base-app
+	url = git@github.com:nikolalsvk/rails-6-base-app.git
+	branch = render-async

data/CHANGELOG.md

@@ -1,3 +1,25 @@
+### 2.1.10 (2021/03/21)
+
+* [#146](https://github.com/renderedtext/render_async/pull/146): Add comment when we check if container is present - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#145](https://github.com/renderedtext/render_async/pull/145): Wrap html_options for turbolinks - [@yhirano55](https://github.com/yhirano55).
+* [#144](https://github.com/renderedtext/render_async/pull/144): Avoid TypeError if container has already disappear - [@yhirano55](https://github.com/yhirano55).
+
+### 2.1.9 (2021/02/23)
+
+* [#142](https://github.com/renderedtext/render_async/pull/142): Update Turbolinks docs - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#141](https://github.com/renderedtext/render_async/pull/141): Add Support for Turbo - [@MBuckley0](https://github.com/Mbuckley0).
+* [#139](https://github.com/renderedtext/render_async/pull/139): Fix readme configuration-options anchor - [@richardvenneman](https://github.com/richardvenneman).
+* [#138](https://github.com/renderedtext/render_async/pull/138): Add Rails 6 base app as a fixture - [@nikolalsvk](https://github.com/nikolalsvk).
+* [#137](https://github.com/renderedtext/render_async/pull/137): Rename config - [@nikolalsvk](https://github.com/nikolalsvk).
+
+### 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

@@ -82,7 +82,7 @@ And then execute:
     <%= render_async comment_stats_path %>
     ```
 
-2. Then create a route that will `config/routes.rb`:
+2. Then create a route for it `config/routes.rb`:
     ```ruby
     get :comment_stats, controller: :comments
     ```
@@ -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)
@@ -129,10 +130,11 @@ Advanced usage includes information on different options, such as:
   - [Caching](#caching)
   - [Doing non-GET requests](#doing-non-get-requests)
   - [Using with Turbolinks](#using-with-turbolinks)
+  - [Using with Turbo](#using-with-turbo)
   - [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 +180,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 +199,8 @@ Rendered code in the view:
 </div>
 ```
 
+> :bulb:  You can enable `nonce` to be set everywhere by using [configuration option](#configuration-options) render_async provides.
+
 ### Passing in an HTML element name
 
 `render_async` can take in an HTML element name, allowing you to control
@@ -287,7 +292,7 @@ document.addEventListener("users-loaded", function(event) {
 ### Using default events
 
 `render_async` will fire the event `render_async_load` when an async partial
-has loaded and rendered on page.
+has loaded and rendered on the page.
 
 In case there is an error, the event `render_async_error` will fire instead.
 
@@ -317,6 +322,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.
@@ -350,7 +385,7 @@ failure. In the end, if the request is still failing after 5th time, it will
 dispatch a [default error event](#using-default-events).
 
 > :candy:  If you are catching an event after an error, you can get `retryCount` from
-the event. `retryCount` will have number of retries it took before the event was dispatched.
+the event. `retryCount` will have the number of retries it took before the event was dispatched.
 
 Here is an example on how to get `retryCount`:
 
@@ -367,6 +402,20 @@ Here is an example on how to get `retryCount`:
 </script>
 ```
 
+If you need to pass retry count to the backend, you can pass `retry_count_header` in `render_async`'s options:
+
+```erb
+<%= 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
+```
+
 ### Toggle event
 
 You can trigger `render_async` loading by clicking or doing another event to a
@@ -381,8 +430,8 @@ 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.
+If you want to remove an event once it's triggered, you can pass `once: true` in the toggle options.
+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,10 +454,28 @@ 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
-call specified path at specified interval.
+call specified path at the specified interval.
 
 By doing this:
 ```erb
@@ -418,8 +485,8 @@ You are telling `render_async` to fetch comments_path every 5 seconds.
 
 This can be handy if you want to enable polling for a specific URL.
 
-> :warning:  By passing interval to `render_async`, initial container element
-> will remain in HTML tree, it will not be replaced with request response.
+> :warning:  By passing interval to `render_async`, the initial container element
+> will remain in the HTML tree and it will not be replaced with request response.
 > You can handle how that container element is rendered and its style by
 > [passing in an HTML element name](#passing-in-an-html-element-name) and
 > [HTML element class](#passing-in-a-container-class-name).
@@ -431,8 +498,8 @@ First one is pretty simple, and it involves using the [toggle](#toggle-event)
 feature. To do this, you can follow instructions in the
 [control polling with a toggle section](#control-polling-with-a-toggle).
 
-Second option is more advanced and it involves emitting events to the `render_async`'s
-container element. From your code, you can emit following events:
+The second option is more advanced and it involves emitting events to the `render_async`'s
+container element. From your code, you can emit the following events:
   - 'async-stop' - this will stop polling
   - 'async-start' - this will start polling.
 
@@ -470,13 +537,13 @@ An example of how you can do this looks like this:
 ```
 
 We are rendering two buttons - "Stop polling" and "Start polling". Then, we
-attach event listener to catch any clicking on the buttons. When the buttons
-are clicked, we either stop the polling, or start the polling, depending which
+attach an event listener to catch any clicking on the buttons. When the buttons
+are clicked, we either stop the polling or start the polling, depending on which
 button a user clicks.
 
 ### Handling errors
 
-`render_async` let's you handle errors by allowing you to pass in `error_message`
+`render_async` lets you handle errors by allowing you to pass in `error_message`
 and `error_event_name`.
 
 - `error_message`
@@ -563,19 +630,49 @@ end
 ```
 
 This way, you're not breaking Turbolinks flow of loading or reloading a page.
-It makes it more efficient that the next option that is suggested below.
+It is more efficient than the next option below.
 
 Another option:
 If you want, you can tell Turbolinks to reload your `render_async` call as follows:
 
 ```erb
-<%= render_async events_path, 'data-turbolinks-track': 'reload' %>
+<%= render_async events_path, html_options: { 'data-turbolinks-track': 'reload' } %>
 ```
 
 This will reload the whole page with Turbolinks.
 
-> :bulb:  Make sure to put `<%= content_for :render_async %>` in your base view file in
-the `<head>` and not the `<body>`.
+> :bulb:  If Turbolinks is misbehaving in some way, make sure to put `<%= content_for :render_async %>` in your base view file in
+the `<body>` and not the `<head>`.
+
+### Using with Turbo
+
+On Turbo applications, you may experience caching issues when navigating
+away from, and then back to, a page with a `render_async` call on it. This will
+likely show up as an empty div.
+
+If you're using Turbo, you can resolve this by setting Turbo
+configuration of `render_async` to true:
+
+```rb
+RenderAsync.configure do |config|
+  config.turbo = true # Enable this option if you are using Turbo
+end
+```
+
+This way, you're not breaking Turbos flow of loading or reloading a page.
+It is more efficient than the next option below.
+
+Another option:
+If you want, you can tell Turbo to reload your `render_async` call as follows:
+
+```erb
+<%= render_async events_path, html_options: { 'data-turbo-track': 'reload' } %>
+```
+
+This will reload the whole page with Turbo.
+
+> :bulb:  If Turbo is misbehaving in some way, make sure to put `<%= content_for :render_async %>` in your base view file in
+the `<body>` and not the `<head>`.
 
 ### Using with respond_to and JS format
 
@@ -594,7 +691,7 @@ def comment_stats
 end
 ```
 
-When you do this, Rails will sometime set the response's `Content-Type` header
+When you do this, Rails will sometimes set the response's `Content-Type` header
 to `text/javascript`. This causes the partial not to be rendered in the HTML.
 This usually happens when there's browser caching.
 
@@ -605,7 +702,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 +742,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 +752,14 @@ 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.turbo = true # Enable this option if you are using Turbo. 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 always to receive nonce: true. The default value is false.
 end
 ```
 
@@ -668,12 +769,20 @@ 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 option is false.
+- `turbo` option - If you are using Turbo, you should enable this option since it supports Turbo way of loading data. The default value for this option is 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
 `rake spec` to run the tests. You can also run `bin/console` for an interactive
 prompt that will allow you to experiment. To run integration tests, use
-`bin/integration-tests`.
+`bin/integration-tests`. For more information, check out [CONTRIBUTING](.github/CONTRIBUTING.md) file, please.
 
 Got any questions or comments about development (or anything else)?
 Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
@@ -681,9 +790,7 @@ and let's make `render_async` even better!
 
 ## :pray: Contributing
 
-Thank you for considering or deciding to contribute, this is much appreciated!
-Any kind of bug reports and pull requests are encouraged and welcome on GitHub at
-https://github.com/renderedtext/render_async.
+Check out [CONTRIBUTING](.github/CONTRIBUTING.md) file, please.
 
 Got any issues or difficulties?
 Join [render_async's Discord channel](https://discord.gg/SPfbeRm)
@@ -701,8 +808,9 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 <!-- prettier-ignore -->
 | [<img src="https://avatars2.githubusercontent.com/u/3028124?v=4" width="100px;"/><br /><sub><b>Nikola Đuza</b></sub>](https://nikolalsvk.github.io)<br />[💬](#question-nikolalsvk "Answering Questions") [💻](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Code") [📖](https://github.com/renderedtext/render_async/commits?author=nikolalsvk "Documentation") [👀](#review-nikolalsvk "Reviewed Pull Requests") | [<img src="https://avatars0.githubusercontent.com/u/3866868?v=4" width="100px;"/><br /><sub><b>Colin</b></sub>](http://www.colinxfleming.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Code") [📖](https://github.com/renderedtext/render_async/commits?author=colinxfleming "Documentation") [💡](#example-colinxfleming "Examples") | [<img src="https://avatars2.githubusercontent.com/u/334273?v=4" width="100px;"/><br /><sub><b>Kasper Grubbe</b></sub>](http://kaspergrubbe.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=kaspergrubbe "Code") | [<img src="https://avatars2.githubusercontent.com/u/163584?v=4" width="100px;"/><br /><sub><b>Sai Ram Kunala</b></sub>](https://sairam.xyz/)<br />[📖](https://github.com/renderedtext/render_async/commits?author=sairam "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3065882?v=4" width="100px;"/><br /><sub><b>Josh Arnold</b></sub>](https://github.com/nightsurge)<br />[💻](https://github.com/renderedtext/render_async/commits?author=nightsurge "Code") [📖](https://github.com/renderedtext/render_async/commits?author=nightsurge "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/107798?v=4" width="100px;"/><br /><sub><b>Elad Shahar</b></sub>](https://eladshahar.com)<br />[💻](https://github.com/renderedtext/render_async/commits?author=SaladFork "Code") [💡](#example-SaladFork "Examples") | [<img src="https://avatars3.githubusercontent.com/u/232392?v=4" width="100px;"/><br /><sub><b>Sasha</b></sub>](http://www.revzin.co.il)<br />[💻](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Code") [📖](https://github.com/renderedtext/render_async/commits?author=sasharevzin "Documentation") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
-| [<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://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") [📖](https://github.com/renderedtext/render_async/commits?author=reneklacan "Documentation") |
 | [<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") | [<img src="https://avatars.githubusercontent.com/u/11203679?v=4" width="100px;"/><br /><sub><b>Mitchell Buckley</b></sub>](https://github.com/Mbuckley0)<br />[💻](https://github.com/renderedtext/render_async/commits?author=Mbuckley0 "Code") [📖](https://github.com/renderedtext/render_async/commits?author=Mbuckley0 "Documentation") | [<img src="https://avatars.githubusercontent.com/u/15371677?v=4" width="100px;"/><br /><sub><b>yhirano55</b></sub>](https://github.com/yhirano55)<br />[💻](https://github.com/renderedtext/render_async/commits?author=yhirano55 "Code") [📖](https://github.com/renderedtext/render_async/commits?author=yhirano55 "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,
@@ -17,14 +18,16 @@
                   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 } %>
+                  turbolinks: RenderAsync.configuration.turbolinks,
+                  turbo: RenderAsync.configuration.turbo} %>
 
     <% 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

@@ -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') {
@@ -24,6 +29,8 @@ if (window.jQuery) {
       } else {
         <% if turbolinks %>
         $(document).one('turbolinks:load', callback);
+        <% elsif turbo %>
+        $(document).one('turbo:load', callback);
         <% else %>
         $(document).ready(callback);
         <% end %>
@@ -32,9 +39,15 @@ if (window.jQuery) {
 
     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 %>',
@@ -43,11 +56,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);
@@ -66,6 +83,8 @@ if (window.jQuery) {
         if (skipErrorMessage) return;
 
         var container = $("#<%= container_id %>");
+        if (!container.length) return;
+
         container.replaceWith("<%= error_message.try(:html_safe) %>");
 
         var errorEvent = createEvent(
@@ -87,6 +106,8 @@ if (window.jQuery) {
         _makeRequest(currentRetryCount)
       }, <%= retry_delay %>)
     }
+    <% else %>
+    _retryMakeRequest = _makeRequest
     <% end %>
 
     function retry(currentRetryCount) {
@@ -122,17 +143,34 @@ 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 %>
+    <% 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 %>
@@ -145,6 +183,10 @@ if (window.jQuery) {
           _renderAsyncFunction();
         }
       });
+
+      <% if toggle[:start] %>
+      _renderAsyncFunction()
+      <% end %>
     }
 
     _runAfterDocumentLoaded(_setUpToggle);

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 %>
@@ -36,9 +46,15 @@
     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]);
@@ -50,10 +66,14 @@
       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);
@@ -72,6 +92,8 @@
           if (skipErrorMessage) return;
 
           var container = document.getElementById('<%= container_id %>');
+          if (!container) return;
+
           container.outerHTML = '<%= error_message.try(:html_safe) %>';
 
           var errorEvent = createEvent(
@@ -92,11 +114,13 @@
   <% if retry_count > 0 %>
 
   <% if retry_delay %>
-  _retryMakeRequest = function(currentRetryCount) {
+  var _retryMakeRequest = function(currentRetryCount) {
     setTimeout(function() {
       _makeRequest(currentRetryCount)
     }, <%= retry_delay %>)
   }
+  <% else %>
+  var _retryMakeRequest = _makeRequest
   <% end %>
 
   function retry(currentRetryCount) {
@@ -132,17 +156,34 @@
     }
   }
 
-  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 %>
+  <% 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 %>
@@ -160,6 +201,10 @@
       <% end %>
     };
 
+    <% 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.7".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
@@ -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] = configuration.nonces if set_options[:nonce].nil?
+
+      set_options
     end
 
     def request_options(options)
@@ -56,6 +63,7 @@ module RenderAsync
     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
@@ -71,10 +79,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?
+
+      configuration.replace_container
+    end
+
+    def configuration
+      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.11
 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: 2021-10-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -61,6 +61,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".all-contributorsrc"
+- ".github/CONTRIBUTING.md"
 - ".github/FUNDING.yml"
 - ".gitignore"
 - ".gitmodules"