Merge branch '7.0' into 7.1

* 7.0:
  [Frontend] Some smaller updates

Author: javiereguiluz

frontend/encore/server-data.rst

@@ -1,9 +1,9 @@
-Passing Information from Twig to JavaScript with Webpack Encore
-===============================================================
+Passing Information from Twig to JavaScript
+===========================================
 
 In Symfony applications, you may find that you need to pass some dynamic data
 (e.g. user information) from Twig to your JavaScript code. One great way to pass
-dynamic configuration is by storing information in ``data`` attributes and reading
+dynamic configuration is by storing information in ``data-*`` attributes and reading
 them later in JavaScript. For example:
 
 .. code-block:: html+twig
@@ -20,22 +20,24 @@ Fetch this in JavaScript:
 .. code-block:: javascript
 
     document.addEventListener('DOMContentLoaded', function() {
-        var userRating = document.querySelector('.js-user-rating');
-        var isAuthenticated = userRating.dataset.isAuthenticated;
-        var user = JSON.parse(userRating.dataset.user);
-
-        // or with jQuery
-        //var isAuthenticated = $('.js-user-rating').data('isAuthenticated');
+        const userRating = document.querySelector('.js-user-rating');
+        const isAuthenticated = userRating.getAttribute('data-is-authenticated');
+        const user = JSON.parse(userRating.getAttribute('data-user'));
     });
 
 .. note::
 
-    When `accessing data attributes from JavaScript`_, the attribute names are
-    converted from dash-style to camelCase. For example, ``data-is-authenticated``
-    becomes ``isAuthenticated`` and ``data-number-of-reviews`` becomes
-    ``numberOfReviews``.
+    If you prefer to `access data attributes via JavaScript's dataset property`_,
+    the attribute names are converted from dash-style to camelCase. For example,
+    ``data-number-of-reviews`` becomes ``dataset.numberOfReviews``:
+
+    .. code-block:: javascript
+
+        // ...
+        const isAuthenticated = userRating.dataset.isAuthenticated;
+        const user = JSON.parse(userRating.dataset.user);
 
-There is no size limit for the value of the ``data-`` attributes, so you can
+There is no size limit for the value of the ``data-*`` attributes, so you can
 store any content. In Twig, use the ``html_attr`` escaping strategy to avoid messing
 with HTML attributes. For example, if your ``User`` object has some ``getProfileData()``
 method that returns an array, you could do the following:
@@ -46,4 +48,4 @@ method that returns an array, you could do the following:
         <!-- ... -->
     </div>
 
-.. _`accessing data attributes from JavaScript`: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+.. _`access data attributes via JavaScript's dataset property`: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes