From d2f4d705974df78ed814930a71756d9d0775b692 Mon Sep 17 00:00:00 2001 From: Callum Knights Date: Fri, 12 Jul 2024 15:39:24 +0100 Subject: [PATCH 1/3] Switch to Terser for Javascript compression This replaces Uglifier, as Terser supports ES6 --- Gemfile | 2 +- Gemfile.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Gemfile b/Gemfile index a75f4098d..0209bb5dd 100644 --- a/Gemfile +++ b/Gemfile @@ -30,7 +30,7 @@ gem "whenever" gem "sass" gem "sass-rails" gem "sprockets" -gem "uglifier" +gem "terser" group :development do gem "web-console" diff --git a/Gemfile.lock b/Gemfile.lock index 24b5e5c1d..6d98b5d23 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -807,6 +807,8 @@ GEM strscan (3.1.0) sys-uname (1.2.3) ffi (~> 1.1) + terser (1.2.3) + execjs (>= 0.3.0, < 3) thor (1.3.1) tilt (2.3.0) timecop (0.9.10) @@ -815,8 +817,6 @@ GEM tzinfo (2.0.6) concurrent-ruby (~> 1.0) uber (0.1.0) - uglifier (4.2.0) - execjs (>= 0.3.0, < 3) unicode-display_width (2.5.0) uri (0.13.0) version_gem (1.1.4) @@ -890,8 +890,8 @@ DEPENDENCIES shoulda-matchers simplecov sprockets + terser timecop - uglifier web-console webmock whenever From 7820bee3dbc776cbe2781af380c33923d55407a5 Mon Sep 17 00:00:00 2001 From: Callum Knights Date: Fri, 12 Jul 2024 16:33:11 +0100 Subject: [PATCH 2/3] Move ES6 components to their own file This change is part of the process for upgrading apps to a new version of govuk_publishing_components that uses GOV.UK frontend V5.1 This is one of the steps detailed in the [Upgrading to GOV.UK Frontend v5 document](https://docs.google.com/document/d/1uwip7pzQwM7t5ghn9_8KrsWXLePSRUltFPZ5fYw6Ab8/edit). The purpose of this is to prevent browsers that don't support ES6 attempting to load ES6 Javascript from our components. We know browser that don't support ES6 as grade X browsers, and these browsers also don't support the `type = "module"` attribute in script tags. So we use this to prevent such code being loaded by ES6 Browsers. The 'all_components' require as been removed to avoid grade X browsers calling ES6 javascript --- app/assets/config/manifest.js | 1 + app/assets/javascripts/application.js | 3 +-- app/assets/javascripts/es6-components.js | 15 +++++++++++++++ app/views/layouts/application.html.erb | 1 + 4 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/es6-components.js diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 70c37d942..4f5f7613a 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -2,5 +2,6 @@ //= link application.css //= link legacy_layout.css //= link application.js +//= link es6-components.js //= link legacy_layout.js //= link html5.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index c53ef1099..2647b6d81 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -10,5 +10,4 @@ // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD // GO AFTER THE REQUIRES BELOW. // -//= require govuk_publishing_components/dependencies -//= require govuk_publishing_components/all_components +//= require govuk_publishing_components/dependencies \ No newline at end of file diff --git a/app/assets/javascripts/es6-components.js b/app/assets/javascripts/es6-components.js new file mode 100644 index 000000000..755634ff2 --- /dev/null +++ b/app/assets/javascripts/es6-components.js @@ -0,0 +1,15 @@ +// 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 \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d20114b05..d74498fa2 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,6 +1,7 @@ <% content_for :head do %> <%= stylesheet_link_tag "legacy_layout", :media => "all" %> <%= javascript_include_tag "legacy_layout" %> + <%= javascript_include_tag "es6-components", type: "module" %> <%= csrf_meta_tag %> <%= render "layouts/google_tag_manager" %> <%= yield :extra_headers %> From c154b45e2834d9b0d3a8c1c8e80cc21e2f528318 Mon Sep 17 00:00:00 2001 From: Callum Knights Date: Mon, 15 Jul 2024 14:41:42 +0100 Subject: [PATCH 3/3] Update publishing-components --- Gemfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Gemfile.lock b/Gemfile.lock index 6d98b5d23..35c1f1d3b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -270,7 +270,7 @@ GEM govuk_personalisation (0.16.0) plek (>= 1.9.0) rails (>= 6, < 8) - govuk_publishing_components (39.2.4) + govuk_publishing_components (40.0.0) govuk_app_config govuk_personalisation (>= 0.7.0) kramdown