render_async 2.1.7 → 2.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 80f65d684e925ba32249eef7d5dd817b268b72dfebd0ecd9525fbe544d16af57
4
- data.tar.gz: 46b675280ceb449a68953e9a2833332ff74222d773a3aa66ec95036d25587273
3
+ metadata.gz: 25aa48ca09d482b0cdf14569d09e594ef525deaba38b9be8c39bc200b86de28e
4
+ data.tar.gz: 3d52e3a5a9fcba834c502aa78ea429cfa650eea45de4e27654294e560cc9c177
5
5
  SHA512:
6
- metadata.gz: 3bdd39f73528d3b9a8035ab5c8629b9c5261186f1d3eae2d5b82b856942c0ae602d5c670d96e009a240744fe5e7d93a97136298f05ef55c010f7d6f7972b4f40
7
- data.tar.gz: a73351396f72b02895c03a4ff20068f096ae71279adc7345518d31e26111f63ac46b5b76424a24e566a7a0268f1748d1c1c364489e17d030dea12a691cc227eb
6
+ metadata.gz: 0b50f5bd6a991c2af51ba3fc52b64dc0eda858e8827ef29b57dd4b8e1d1fd17134ddec8aeeb0df1e337666c9fb909f7b0664a85a069a3f3974fafa99273e66f9
7
+ data.tar.gz: 06adc494ef7f021ed5211f48f9103cabd5a3ebd42475cbcaedb7ac026df9cc0e62981e465b330ca17e351a17c53322e09bf51d055c2aaa64155457452820aa7f
@@ -205,6 +205,15 @@
205
205
  "contributions": [
206
206
  "code"
207
207
  ]
208
+ },
209
+ {
210
+ "login": "villu164",
211
+ "name": "villu164",
212
+ "avatar_url": "https://avatars0.githubusercontent.com/u/998682?v=4",
213
+ "profile": "https://github.com/villu164",
214
+ "contributions": [
215
+ "doc"
216
+ ]
208
217
  }
209
218
  ],
210
219
  "repoType": "github"
@@ -1,3 +1,11 @@
1
+ ### 2.1.8 (2020/10/24)
2
+
3
+ * [#134](https://github.com/renderedtext/render_async/pull/134): Add config option for setting nonce - [@nikolalsvk](https://github.com/nikolalsvk).
4
+ * [#132](https://github.com/renderedtext/render_async/pull/132): Refresh render_async with an event - [@nikolalsvk](https://github.com/nikolalsvk).
5
+ * [#131](https://github.com/renderedtext/render_async/pull/131): Start to poll on page load with toggle - [@nikolalsvk](https://github.com/nikolalsvk).
6
+ * [#130](https://github.com/renderedtext/render_async/pull/130): Set up control events after document loaded - [@nikolalsvk](https://github.com/nikolalsvk).
7
+ * [#127](https://github.com/renderedtext/render_async/pull/127): Update README.md, to reflect correct turbolinks configuration value - [@villu164](https://github.com/villu164).
8
+
1
9
  ### 2.1.7 (2020/8/1)
2
10
 
3
11
  * [#125](https://github.com/renderedtext/render_async/pull/125): Implement retry after some time feature - [@nikolalsvk](https://github.com/nikolalsvk).
data/README.md CHANGED
@@ -119,6 +119,7 @@ Advanced usage includes information on different options, such as:
119
119
  - [Passing in a placeholder](#passing-in-a-placeholder)
120
120
  - [Passing in an event name](#passing-in-an-event-name)
121
121
  - [Using default events](#using-default-events)
122
+ - [Refreshing the partial](#refreshing-the-partial)
122
123
  - [Retry on failure](#retry-on-failure)
123
124
  - [Retry after some time](#retry-after-some-time)
124
125
  - [Toggle event](#toggle-event)
@@ -130,9 +131,9 @@ Advanced usage includes information on different options, such as:
130
131
  - [Doing non-GET requests](#doing-non-get-requests)
131
132
  - [Using with Turbolinks](#using-with-turbolinks)
132
133
  - [Using with respond_to and JS format](#using-with-respond_to-and-js-format)
133
- - [Nested Async Renders](#nested-async-renders)
134
+ - [Nested async renders](#nested-async-renders)
134
135
  - [Customizing the content_for name](#customizing-the-content_for-name)
135
- - [Configuration](#configuration)
136
+ - [Configuration options](#configuration-options)
136
137
 
137
138
  ### Passing in a container ID
138
139
 
@@ -178,6 +179,7 @@ Rendered code in the view:
178
179
  `javascript_tag`, to drop HTML tags into the `script` element.
179
180
 
180
181
  Example of utilizing `html_options` with a [nonce](https://edgeguides.rubyonrails.org/security.html#content-security-policy):
182
+
181
183
  ```erb
182
184
  <%= render_async users_path, html_options: { nonce: true } %>
183
185
  ```
@@ -196,6 +198,8 @@ Rendered code in the view:
196
198
  </div>
197
199
  ```
198
200
 
201
+ > :bulb: You can enable `nonce` to be set everywhere by using [configuration option](#configuration-option) render_async provides.
202
+
199
203
  ### Passing in an HTML element name
200
204
 
201
205
  `render_async` can take in an HTML element name, allowing you to control
@@ -317,6 +321,36 @@ $(document).on('render_async_error', function(event) {
317
321
  });
318
322
  ```
319
323
 
324
+ ### Refreshing the partial
325
+
326
+ `render_async` lets you refresh (reload) the partial by letting you dispatch
327
+ the 'refresh' event on the `render_async`'s container. An example:
328
+
329
+ ```erb
330
+ <%= render_async comments_path,
331
+ container_id: 'refresh-me',
332
+ replace_container: false %>
333
+
334
+ <button id="refresh-button">Refresh comments</button>
335
+
336
+ <script>
337
+ var button = document.getElementById('refresh-button')
338
+ var container = document.getElementById('refresh-me');
339
+
340
+ button.addEventListener('click', function() {
341
+ var event = new Event('refresh');
342
+
343
+ // Dispatch 'refresh' on the render_async container
344
+ container.dispatchEvent(event)
345
+ })
346
+ </script>
347
+ ```
348
+
349
+ If you follow the example above, when you click "Refresh comments" button,
350
+ `render_async` will trigger again and reload the `comments_path`.
351
+
352
+ > :bulb: Note that you need to pass `replace_container: false` so you can later dispatch an event on that container.
353
+
320
354
  ### Retry on failure
321
355
 
322
356
  `render_async` can retry your requests if they fail for some reason.
@@ -382,7 +416,7 @@ do this by doing the following:
382
416
 
383
417
  This will trigger `render_async` to load the `comments_path` when you click the `#comments-button` element.
384
418
  If you want to remove event once it's triggered, you can pass `once: true` in the toggle options.
385
- The `once` option is false by default.
419
+ The `once` option is false (`nil`) by default.
386
420
 
387
421
  You can also pass in a placeholder before the `render_async` is triggered. That
388
422
  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:
405
439
  <%= render_async comments_path, toggle: { selector: '#comments-button', event: :click }, interval: 2000 %>
406
440
  ```
407
441
 
442
+ If you want `render_async` to render the request on load, you can pass `start:
443
+ true`. Passing the `start` option inside the `toggle` hash will trigger
444
+ `render_async` on page load. You can then toggle off polling by interacting
445
+ with the element you specified. An example:
446
+
447
+ ```erb
448
+ <a href='#' id='comments-button'>Toggle comments loading</a>
449
+ <%= render_async comments_path,
450
+ toggle: { selector: '#comments-button',
451
+ event: :click,
452
+ start: true },
453
+ interval: 2000 %>
454
+ ```
455
+
456
+ In the example above, the comments will load as soon as the page is rendered.
457
+ Then, you can stop polling for comments by clicking the "Toggle comments
458
+ loading" button.
459
+
408
460
  ### Polling
409
461
 
410
462
  You can call `render_async` with interval argument. This will make render_async
@@ -605,7 +657,7 @@ render call:
605
657
  render partial: "comment_stats", content_type: 'text/html'
606
658
  ```
607
659
 
608
- ### Nested Async Renders
660
+ ### Nested async renders
609
661
 
610
662
  It is possible to nest async templates within other async templates. When doing
611
663
  so, another `content_for` is required to ensure the JavaScript needed to load
@@ -645,7 +697,7 @@ For example:
645
697
  <%= content_for :render_async_comment_stats %>
646
698
  ```
647
699
 
648
- ### Configuration
700
+ ### Configuration options
649
701
 
650
702
  `render_async` renders Vanilla JS (regular JavaScript, non-jQuery code)
651
703
  **by default** in order to fetch the request from the server.
@@ -655,10 +707,13 @@ so.
655
707
 
656
708
  You can configure it by doing the following anywhere before you call
657
709
  `render_async`:
710
+
658
711
  ```rb
659
712
  RenderAsync.configure do |config|
660
- config.jquery = true # This will render jQuery code, and skip Vanilla JS code
661
- config.turbolinks = false # Enable this option if you are using Turbolinks 5+
713
+ config.jquery = true # This will render jQuery code, and skip Vanilla JS code. The default value is false.
714
+ config.turbolinks = true # Enable this option if you are using Turbolinks 5+. The default value is false.
715
+ config.replace_container = false # Set to false if you want to keep the placeholder div element from render_async. The default value is true.
716
+ config.nonces = true # Set to true if you want render_async's javascript_tag to always receive nonce: true. The default value is false.
662
717
  end
663
718
  ```
664
719
 
@@ -668,6 +723,13 @@ Also, you can do it like this:
668
723
  RenderAsync.configuration.jquery = true
669
724
  ```
670
725
 
726
+ Aside from configuring whether the gem relies on jQuery or VanillaJS, you can
727
+ configure other options:
728
+
729
+ - `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.
730
+ - `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.
731
+ - `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.
732
+
671
733
  ## :hammer_and_pick: Development
672
734
 
673
735
  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
703
765
  | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
704
766
  | [<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") |
705
767
  | [<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") |
768
+ | [<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") |
706
769
  <!-- ALL-CONTRIBUTORS-LIST:END -->
707
770
 
708
771
  This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
@@ -8,6 +8,7 @@
8
8
  <% content_for content_for_name do %>
9
9
  <%= javascript_tag html_options do %>
10
10
  <% locals = { container_id: container_id,
11
+ replace_container: replace_container,
11
12
  path: path,
12
13
  method: method,
13
14
  data: data,
@@ -24,7 +25,7 @@
24
25
  <% if RenderAsync.configuration.jquery %>
25
26
  <%= render partial: 'render_async/request_jquery',
26
27
  formats: [:js],
27
- locals: locals %>
28
+ locals: locals %>
28
29
  <% else %>
29
30
  <%= render partial: 'render_async/request_vanilla',
30
31
  formats: [:js],
@@ -43,11 +43,11 @@ if (window.jQuery) {
43
43
  headers: headers
44
44
  }).done(function(response) {
45
45
  var container = $("#<%= container_id %>");
46
- <% if interval %>
46
+ <% if !interval && replace_container %>
47
+ container.replaceWith(response);
48
+ <% else %>
47
49
  container.empty();
48
50
  container.append(response);
49
- <% else %>
50
- container.replaceWith(response);
51
51
  <% end %>
52
52
 
53
53
  var loadEvent = createEvent('render_async_load', container);
@@ -122,19 +122,33 @@ if (window.jQuery) {
122
122
  }
123
123
  }
124
124
 
125
- var container = $("#<%= container_id %>");
125
+ function _setUpControlEvents() {
126
+ var container = $("#<%= container_id %>");
127
+
128
+ // Register a stop polling event on the container
129
+ $(container).on('async-stop', _clearRenderAsyncInterval)
126
130
 
127
- // Register a stop polling event on the container
128
- $(container).on('async-stop', _clearRenderAsyncInterval)
131
+ // Register a start polling event on the container
132
+ $(container).on('async-start', _renderAsyncFunction)
133
+ }
129
134
 
130
- // Register a start polling event on the container
131
- $(container).on('async-start', _renderAsyncFunction)
135
+ _runAfterDocumentLoaded(_setUpControlEvents)
132
136
 
133
137
  <% if turbolinks %>
134
138
  $(document).one('turbolinks:visit', _clearRenderAsyncInterval);
135
139
  <% end %>
136
140
  <% end %>
137
141
 
142
+ <% if !replace_container %>
143
+ function _setUpRefreshEvent() {
144
+ var container = $("#<%= container_id %>");
145
+
146
+ $(container).on('refresh', _renderAsyncFunction)
147
+ }
148
+
149
+ _runAfterDocumentLoaded(_setUpRefreshEvent)
150
+ <% end %>
151
+
138
152
  <% if toggle %>
139
153
  function _setUpToggle() {
140
154
  $(document).<%= toggle[:once] ? 'one' : 'on' %>('<%= toggle[:event] || 'click' %>', '<%= toggle[:selector] %>', function(event) {
@@ -145,6 +159,10 @@ if (window.jQuery) {
145
159
  _renderAsyncFunction();
146
160
  }
147
161
  });
162
+
163
+ <% if toggle[:start] %>
164
+ _renderAsyncFunction()
165
+ <% end %>
148
166
  }
149
167
 
150
168
  _runAfterDocumentLoaded(_setUpToggle);
@@ -50,10 +50,10 @@
50
50
  if (request.readyState === 4) {
51
51
  if (request.status >= SUCCESS && request.status < ERROR) {
52
52
  var container = document.getElementById('<%= container_id %>');
53
- <% if interval %>
54
- container.innerHTML = request.response;
55
- <% else %>
53
+ <% if !interval && replace_container %>
56
54
  container.outerHTML = request.response;
55
+ <% else %>
56
+ container.innerHTML = request.response;
57
57
  <% end %>
58
58
 
59
59
  var loadEvent = createEvent('render_async_load', container);
@@ -132,19 +132,33 @@
132
132
  }
133
133
  }
134
134
 
135
- var container = document.getElementById('<%= container_id %>');
135
+ function _setUpControlEvents() {
136
+ var container = document.getElementById('<%= container_id %>');
136
137
 
137
- // Register a polling stop event on the container
138
- container.addEventListener("async-stop", _clearRenderAsyncInterval)
138
+ // Register a polling stop event on the container
139
+ container.addEventListener("async-stop", _clearRenderAsyncInterval)
139
140
 
140
- // Register a start polling event on the container
141
- container.addEventListener("async-start", _renderAsyncFunction)
141
+ // Register a start polling event on the container
142
+ container.addEventListener("async-start", _renderAsyncFunction)
143
+ }
144
+
145
+ _runAfterDocumentLoaded(_setUpControlEvents)
142
146
 
143
147
  <% if turbolinks %>
144
148
  document.addEventListener("turbolinks:visit", _clearRenderAsyncInterval)
145
149
  <% end %>
146
150
  <% end %>
147
151
 
152
+ <% if !replace_container %>
153
+ function _setUpRefreshEvent() {
154
+ var container = document.getElementById('<%= container_id %>');
155
+
156
+ container.addEventListener('refresh', _renderAsyncFunction)
157
+ }
158
+
159
+ _runAfterDocumentLoaded(_setUpRefreshEvent)
160
+ <% end %>
161
+
148
162
  <% if toggle %>
149
163
  function _setUpToggle() {
150
164
  var selectors = document.querySelectorAll('<%= toggle[:selector] %>');
@@ -160,6 +174,10 @@
160
174
  <% end %>
161
175
  };
162
176
 
177
+ <% if toggle[:start] %>
178
+ _renderAsyncFunction()
179
+ <% end %>
180
+
163
181
  for (var i = 0; i < selectors.length; ++i) {
164
182
  selectors[i].addEventListener('<%= toggle[:event] || 'click' %>', handler)
165
183
  }
@@ -1,10 +1,12 @@
1
1
  module RenderAsync
2
2
  class Configuration
3
- attr_accessor :jquery, :turbolinks
3
+ attr_accessor :jquery, :turbolinks, :replace_container, :nonces
4
4
 
5
5
  def initialize
6
6
  @jquery = false
7
7
  @turbolinks = false
8
+ @replace_container = true
9
+ @nonces = false
8
10
  end
9
11
  end
10
12
  end
@@ -1,3 +1,3 @@
1
1
  module RenderAsync
2
- VERSION = "2.1.7".freeze
2
+ VERSION = "2.1.8".freeze
3
3
  end
@@ -2,7 +2,6 @@ require 'securerandom'
2
2
 
3
3
  module RenderAsync
4
4
  module ViewHelper
5
-
6
5
  def render_async_cache_key(path)
7
6
  "render_async_#{path}"
8
7
  end
@@ -20,11 +19,10 @@ module RenderAsync
20
19
  def render_async(path, options = {}, &placeholder)
21
20
  event_name = options.delete(:event_name)
22
21
  placeholder = capture(&placeholder) if block_given?
23
- html_options = options.delete(:html_options) || {}
24
22
 
25
23
  render 'render_async/render_async', **container_element_options(options),
26
24
  path: path,
27
- html_options: html_options,
25
+ html_options: html_options(options),
28
26
  event_name: event_name,
29
27
  placeholder: placeholder,
30
28
  **request_options(options),
@@ -39,7 +37,16 @@ module RenderAsync
39
37
  def container_element_options(options)
40
38
  { html_element_name: options[:html_element_name] || 'div',
41
39
  container_id: options[:container_id] || generate_container_id,
42
- container_class: options[:container_class] }
40
+ container_class: options[:container_class],
41
+ replace_container: replace_container(options) }
42
+ end
43
+
44
+ def html_options(options)
45
+ set_options = options.delete(:html_options) || {}
46
+
47
+ set_options[:nonce] = config.nonces if set_options[:nonce].nil?
48
+
49
+ set_options
43
50
  end
44
51
 
45
52
  def request_options(options)
@@ -71,10 +78,18 @@ module RenderAsync
71
78
  }
72
79
  end
73
80
 
74
- private
75
-
76
81
  def generate_container_id
77
82
  "render_async_#{SecureRandom.hex(5)}#{Time.now.to_i}"
78
83
  end
84
+
85
+ def replace_container(options)
86
+ return options[:replace_container] unless options[:replace_container].nil?
87
+
88
+ config.replace_container
89
+ end
90
+
91
+ def config
92
+ RenderAsync.configuration
93
+ end
79
94
  end
80
95
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: render_async
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.7
4
+ version: 2.1.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kasper Grubbe
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: exe
11
11
  cert_chain: []
12
- date: 2020-08-01 00:00:00.000000000 Z
12
+ date: 2020-10-24 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rake