Skip to content

Commit

Permalink
Move ES6 components to their own file
Browse files Browse the repository at this point in the history
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
  • Loading branch information
callumknights authored and mike21573 committed Jul 22, 2024
1 parent d2f4d70 commit 7820bee
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 2 deletions.
1 change: 1 addition & 0 deletions app/assets/config/manifest.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 1 addition & 2 deletions app/assets/javascripts/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
15 changes: 15 additions & 0 deletions app/assets/javascripts/es6-components.js
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
Expand Down

0 comments on commit 7820bee

Please sign in to comment.