Restrict ESM syntax to *.mjs files only

__tests__/cookie-functions.test.js → __tests__/cookie-functions.test.mjs

@@ -2,8 +2,9 @@
  * @jest-environment jsdom
  */
 
-import * as CookieHelpers from '../src/javascripts/components/cookie-functions'
-import * as Analytics from '../src/javascripts/components/analytics'
+import * as CookieHelpers from '../src/javascripts/components/cookie-functions.mjs'
+import * as Analytics from '../src/javascripts/components/analytics.mjs'
+
 jest.mock('../src/javascripts/components/analytics')
 
 describe('Cookie settings', () => {

lib/metalsmith.js

@@ -168,10 +168,10 @@ module.exports = metalsmith(path.resolve(__dirname, '../'))
   .use(hashAssets({
     pattern: [
       '**/*.css?(.map)',
-      'javascripts/application?(-ie8).js?(.map)',
-      'javascripts/example.js?(.map)',
-      'javascripts/govuk-frontend.js?(.map)',
-      'javascripts/head-ie8.js?(.map)',
+      'javascripts/application?(-ie8).mjs?(.map)',
+      'javascripts/example.mjs?(.map)',
+      'javascripts/govuk-frontend.mjs?(.map)',
+      'javascripts/head-ie8.mjs?(.map)',
       'javascripts/vendor/*'
     ]
   }))

lib/rollup/fixtures/src/javascripts/entry.js → lib/rollup/fixtures/src/javascripts/entry.mjs

@@ -1,4 +1,4 @@
-import example from './example.js'
+import example from './example.mjs'
 
 export default () => {
   return example

lib/rollup/index.test.js

@@ -19,7 +19,7 @@ describe('Rollup plugin', () => {
       .destination(destination)
 
       // Rollup example
-      .use(rollup('javascripts/entry.js', 'entry'))
+      .use(rollup('javascripts/entry.mjs', 'entry'))
 
       // Build
       .build((err, files) => {
@@ -33,18 +33,18 @@ describe('Rollup plugin', () => {
   })
 
   it('compiles JavaScript to Metalsmith files', () => {
-    expect(output[normalize('javascripts/entry.js')])
+    expect(output[normalize('javascripts/entry.mjs')])
       .toMatchObject({ contents: expect.any(Buffer) })
 
-    expect(output[normalize('javascripts/example.js')])
+    expect(output[normalize('javascripts/example.mjs')])
       .toMatchObject({ contents: expect.any(Buffer) })
   })
 
   it('bundles ESM modules to single IIFE file (minified)', () => {
-    expect(output[normalize('javascripts/entry.js')].contents.toString())
+    expect(output[normalize('javascripts/entry.mjs')].contents.toString())
       .toEqual(outdent`
         var entry=function(){"use strict";return()=>"example"}();
-        //# sourceMappingURL=entry.js.map
+        //# sourceMappingURL=entry.mjs.map
       `)
   })
 })

src/javascripts/application-ie8.js → src/javascripts/application-ie8.mjs

@@ -1,7 +1,7 @@
-import { nodeListForEach } from './components/helpers.js'
-import Example from './components/example.js'
-import AppTabs from './components/tabs.js'
-import OptionsTable from './components/options-table.js'
+import { nodeListForEach } from './components/helpers.mjs'
+import Example from './components/example.mjs'
+import AppTabs from './components/tabs.mjs'
+import OptionsTable from './components/options-table.mjs'
 
 // Initialise example frames
 var $examples = document.querySelectorAll('[data-module="app-example-frame"]')

src/javascripts/application.js → src/javascripts/application.mjs

@@ -1,15 +1,15 @@
-import CookieBanner from './components/cookie-banner.js'
-import BackToTop from './components/back-to-top.js'
-import { nodeListForEach } from './components/helpers.js'
-import Example from './components/example.js'
-import AppTabs from './components/tabs.js'
-import Copy from './components/copy.js'
-import Navigation from './components/navigation.js'
-import Search from './components/search.js'
-import OptionsTable from './components/options-table.js'
-import { getConsentCookie, isValidConsentCookie } from './components/cookie-functions.js'
-import Analytics from './components/analytics.js'
-import CookiesPage from './components/cookies-page.js'
+import CookieBanner from './components/cookie-banner.mjs'
+import BackToTop from './components/back-to-top.mjs'
+import { nodeListForEach } from './components/helpers.mjs'
+import Example from './components/example.mjs'
+import AppTabs from './components/tabs.mjs'
+import Copy from './components/copy.mjs'
+import Navigation from './components/navigation.mjs'
+import Search from './components/search.mjs'
+import OptionsTable from './components/options-table.mjs'
+import { getConsentCookie, isValidConsentCookie } from './components/cookie-functions.mjs'
+import Analytics from './components/analytics.mjs'
+import CookiesPage from './components/cookies-page.mjs'
 
 // Initialise cookie banner
 var $cookieBanner = document.querySelector('[data-module="govuk-cookie-banner"]')

src/javascripts/components/cookie-banner.js → src/javascripts/components/cookie-banner.mjs

@@ -1,7 +1,7 @@
-import * as CookieFunctions from './cookie-functions.js'
+import * as CookieFunctions from './cookie-functions.mjs'
 import 'govuk-frontend/govuk/vendor/polyfills/Function/prototype/bind'
 import 'govuk-frontend/govuk/vendor/polyfills/Event'
-import { nodeListForEach } from './helpers.js'
+import { nodeListForEach } from './helpers.mjs'
 
 var cookieBannerAcceptSelector = '.js-cookie-banner-accept'
 var cookieBannerRejectSelector = '.js-cookie-banner-reject'

src/javascripts/components/cookie-functions.js → src/javascripts/components/cookie-functions.mjs

@@ -12,7 +12,7 @@
  * The consent cookie version is defined in cookie-banner.njk
  */
 
-import Analytics from './analytics.js'
+import Analytics from './analytics.mjs'
 
 /* Name of the cookie to save users cookie preferences to. */
 var CONSENT_COOKIE_NAME = 'design_system_cookies_policy'

src/javascripts/components/cookies-page.js → src/javascripts/components/cookies-page.mjs

@@ -1,5 +1,5 @@
-import { getConsentCookie, setConsentCookie } from './cookie-functions.js'
-import { nodeListForEach } from './helpers.js'
+import { getConsentCookie, setConsentCookie } from './cookie-functions.mjs'
+import { nodeListForEach } from './helpers.mjs'
 
 function CookiesPage ($module) {
   this.$module = $module

src/javascripts/components/helpers.js → src/javascripts/components/helpers.mjs

@@ -2,15 +2,11 @@
  * This seems to fail in IE8, requires more investigation.
  * See: https://github.com/imagitama/nodelist-foreach-polyfill
  */
-function nodeListForEach (nodes, callback) {
+export function nodeListForEach (nodes, callback) {
   if (window.NodeList.prototype.forEach) {
     return nodes.forEach(callback)
   }
   for (var i = 0; i < nodes.length; i++) {
     callback.call(window, nodes[i], i, nodes)
   }
 }
-
-export {
-  nodeListForEach
-}

src/javascripts/components/navigation.js → src/javascripts/components/navigation.mjs

@@ -1,5 +1,5 @@
 import 'govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList'
-import { nodeListForEach } from './helpers.js'
+import { nodeListForEach } from './helpers.mjs'
 
 var navActiveClass = 'app-navigation--active'
 var navMenuButtonActiveClass = 'govuk-header__menu-button--open'

src/javascripts/components/search.js → src/javascripts/components/search.mjs

@@ -2,7 +2,7 @@
 import accessibleAutocomplete from 'accessible-autocomplete'
 import lunr from 'lunr'
 
-import { trackSearchResults, trackConfirm } from './search.tracking.js'
+import { trackSearchResults, trackConfirm } from './search.tracking.mjs'
 
 // CONSTANTS
 var TIMEOUT = 10 // Time to wait before giving up fetching the search index

src/javascripts/components/search.tracking.js → src/javascripts/components/search.tracking.mjs

@@ -14,7 +14,7 @@ function stripPossiblePII (string) {
   return string
 }
 
-function trackConfirm (searchQuery, searchResults, result) {
+export function trackConfirm (searchQuery, searchResults, result) {
   if (window.DO_NOT_TRACK_ENABLED) {
     return
   }
@@ -51,7 +51,7 @@ function trackConfirm (searchQuery, searchResults, result) {
   })
 }
 
-function trackSearchResults (searchQuery, searchResults) {
+export function trackSearchResults (searchQuery, searchResults) {
   if (window.DO_NOT_TRACK_ENABLED) {
     return
   }
@@ -81,5 +81,3 @@ function trackSearchResults (searchQuery, searchResults) {
     }
   })
 }
-
-export { trackConfirm, trackSearchResults }

src/javascripts/components/tabs.js → src/javascripts/components/tabs.mjs

@@ -1,7 +1,7 @@
 import 'govuk-frontend/govuk/vendor/polyfills/Function/prototype/bind'
 import 'govuk-frontend/govuk/vendor/polyfills/Element/prototype/classList'
 import 'govuk-frontend/govuk/vendor/polyfills/Event'
-import { nodeListForEach } from './helpers.js'
+import { nodeListForEach } from './helpers.mjs'
 
 /**
  * The naming of things is a little complicated in here.

src/javascripts/govuk-frontend.js → src/javascripts/govuk-frontend.mjs

@@ -1,4 +1,5 @@
 import { initAll } from 'govuk-frontend'
+
 initAll({
   // auto focusing the error summary and notification banner is not useful
   // when used in examples, and causes the viewport to scroll

src/styles/page-template/block-areas/index.njk

@@ -17,7 +17,7 @@ stylesheets:
   <!--<![endif]-->
   <!--[if lt IE 9]>
     <link href="{{ getFingerprint('stylesheets/main-ie8.css') }}" rel="stylesheet" media="all">
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
   {% for stylesheet in stylesheets %}
@@ -88,7 +88,7 @@ stylesheets:
     <span class="app-annotate-block__label">block: bodyEnd</span>
     {{ super() }}
     {# Since we’re not extending the Design System layout we need to add this manually #}
-    <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
 
     <!--[if lt IE 9]>
       <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

src/styles/page-template/custom/index.njk

@@ -39,7 +39,7 @@ ignore_in_sitemap: true
   <!--<![endif]-->
   <!--[if lt IE 9]>
     <link href="{{ getFingerprint('stylesheets/main-ie8.css') }}" rel="stylesheet" media="all">
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
 {% endblock %}
@@ -156,7 +156,7 @@ ignore_in_sitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

src/styles/page-template/default/index.njk

@@ -11,7 +11,7 @@ layout: false
   <!--<![endif]-->
   <!--[if lt IE 9]>
     <link href="{{ getFingerprint('stylesheets/main-ie8.css') }}" rel="stylesheet" media="all">
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
 {% endblock %}
@@ -21,7 +21,7 @@ layout: false
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

views/layouts/_generic.njk

@@ -15,7 +15,7 @@
   <link rel="canonical" href="{{ canonical }}">
   <!--[if lt IE 9]>
     <link href="{{ getFingerprint('stylesheets/main-ie8.css') }}" rel="stylesheet" media="all">
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <!--[if !IE 8]><!-->
     <link href="{{ getFingerprint('stylesheets/main.css') }}" rel="stylesheet" media="all">
@@ -46,12 +46,12 @@
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
   <!--[if !IE 8]><!-->
-    <script src="{{ getFingerprint('javascripts/application.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/application.mjs') }}"></script>
   <!--<![endif]-->
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>
-    <script src="{{ getFingerprint('javascripts/application-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/application-ie8.mjs') }}"></script>
   <![endif]-->
 {% endblock %}

views/layouts/layout-example-full-page-govuk.njk

@@ -11,7 +11,7 @@
   <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
   {%- endfor %}
   <!--[if lt IE 9]>
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
 {% endblock %}
@@ -26,8 +26,8 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/example.mjs') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

views/layouts/layout-example-full-page.njk

@@ -11,7 +11,7 @@
   <link href="{{ getFingerprint(stylesheet) }}" rel="stylesheet" media="all">
   {%- endfor %}
   <!--[if lt IE 9]>
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
 {% endblock %}
@@ -28,8 +28,8 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/example.mjs') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

views/layouts/layout-example.njk

@@ -19,7 +19,7 @@
   {%- endfor %}
 
   <!--[if lt IE 9]>
-    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.mjs') }}"></script>
   <![endif]-->
   <script src="{{ getFingerprint('javascripts/vendor/modernizr.js') }}"></script>
 {% endblock %}
@@ -40,8 +40,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/example.mjs') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>