Finish upgrade to frontend 5

We've replaced Uglifier with Terser.
Components that contain code from GOV.UK Frontend have been moved to a separate file, es6-components.js.
This approach is used to prevent Grade X Browsers evaluating JavaScript that isn't supported by adding
the type=”module” attribute to the script tag.

Gemfile

@@ -26,7 +26,7 @@ gem "sanitize"
 gem "sentry-sidekiq"
 gem "sidekiq-scheduler"
 gem "sprockets-rails"
-gem "uglifier"
+gem "terser"
 gem "with_advisory_lock"
 
 group :development do

Gemfile.lock

@@ -131,7 +131,7 @@ GEM
     erubi (1.13.0)
     et-orbi (1.2.11)
       tzinfo
-    execjs (2.8.1)
+    execjs (2.9.1)
     factory_bot (6.4.5)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.3)
@@ -742,14 +742,14 @@ GEM
       sprockets (>= 3.0.0)
     statsd-ruby (1.5.0)
     stringio (3.1.1)
+    terser (1.2.3)
+      execjs (>= 0.3.0, < 3)
     thor (1.3.2)
     tilt (2.4.0)
     timeout (0.4.1)
     ttfunk (1.7.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    uglifier (4.2.0)
-      execjs (>= 0.3.0, < 3)
     unicode-display_width (2.6.0)
     uri (0.13.0)
     version_gem (1.1.4)
@@ -817,7 +817,7 @@ DEPENDENCIES
   sidekiq-scheduler
   simplecov
   sprockets-rails
-  uglifier
+  terser
   webmock
   with_advisory_lock
 

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
 //= link_tree ../builds
 //= link application.js
+//= link es6-components.js

app/assets/javascripts/application.js

@@ -1,5 +1,10 @@
 //= require govuk_publishing_components/dependencies
-//= require govuk_publishing_components/all_components
+//= require govuk_publishing_components/components/contextual-guidance
+//= require govuk_publishing_components/components/copy-to-clipboard
+//= require govuk_publishing_components/components/govspeak
+//= require govuk_publishing_components/components/metadata
+//= require govuk_publishing_components/components/modal-dialogue
+//= require govuk_publishing_components/components/reorderable-list
 
 // support ES5
 //= require es5-polyfill/dist/polyfill.js

app/assets/javascripts/es6-components.js

@@ -0,0 +1,16 @@
+// These modules from govuk_publishing_components
+// depend on govuk-frontend modules. govuk-frontend
+// now targets browsers that support `type="module"`.
+//
+// To gracefully prevent execution of these scripts
+// on browsers that don't support ES6, this script
+// should be included in a `type="module"` script tag
+// which will ensure they are never loaded.
+
+//= require govuk_publishing_components/components/button
+//= require govuk_publishing_components/components/checkboxes
+//= require govuk_publishing_components/components/error-summary
+//= require govuk_publishing_components/components/layout-header
+//= require govuk_publishing_components/components/radio
+//= require govuk_publishing_components/components/skip-link
+//= require govuk_publishing_components/components/tabs

app/views/layouts/application.html.erb

@@ -14,6 +14,8 @@
   </script>
 
   <meta name="app-environment" content="<%= Rails.env %>">
+
+  <%= javascript_include_tag 'es6-components', type: "module" %>
 <% end %>
 <% render "layouts/google_tag_manager" %>