render_async 2.1.7 → 2.1.8

Sign up to get free protection for your applications and to get access to all the features.
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