Defer + Async Recaptcha JS (#4)

* Defer + Async Recaptcha JS

Non-blocking content JS loading

* PR fixes

* require at least twig 2.9 to support apply

Author: poveu

Resources/views/Form/karser_recaptcha3_widget.html.twig

@@ -1,17 +1,18 @@
 {% block karser_recaptcha3_widget %}
-    {% filter spaceless %}
+    {% apply spaceless %}
         {%- set type = type|default('hidden') -%}
         {{ block('form_widget_simple') }}
 
         {% if form.vars.enabled -%}
-            <script src="https://www.google.com/recaptcha/api.js?render={{ form.vars.site_key }}"></script>
             <script>
-                grecaptcha.ready(function() {
+                var recaptchaCallback_{{ id }} = function() {
                     grecaptcha.execute('{{ form.vars.site_key }}', {action: '{{ form.vars.action_name }}'}).then(function(token) {
                         document.getElementById('{{ id }}').value = token;
                     });
-                });
+                };
             </script>
+            <script src="https://www.google.com/recaptcha/api.js?render={{ form.vars.site_key }}&onload=recaptchaCallback_{{ id }}" async defer></script>
+
         {%- endif %}
-    {% endfilter %}
+    {% endapply %}
 {% endblock %}

Tests/FunctionalTest.php

@@ -38,7 +38,7 @@ public function testFormJavascriptPresent_ifEnabled()
 
         //THEN
         self::assertContains('<input type="hidden" id="form_captcha" name="form[captcha]" />', $view);
-        self::assertContains('<script src="https://www.google.com/recaptcha/api.js?render=key"></script>', $view);
+        self::assertContains('<script src="https://www.google.com/recaptcha/api.js?render=key&onload=recaptchaCallback_form_captcha" async defer></script>', $view);
         self::assertContains("document.getElementById('form_captcha').value = token;", $view);
     }
 

composer.json

@@ -21,7 +21,8 @@
     "symfony/templating": "~2.7|~3.0|~4.0",
     "symfony/yaml": "~2.7|~3.0|~4.0",
     "symfony/validator": "~2.7|~3.0|~4.0",
-    "symfony/twig-bundle": "~2.7|~3.0|~4.0"
+    "symfony/twig-bundle": "~2.7|~3.0|~4.0",
+    "twig/twig": "^2.9"
   },
   "require-dev": {
     "phpunit/phpunit": "~7.4"