Make all JavaScript files .mjs by default, and transform to .js using…

… rollup

Allows us to add file extensions to the end of our JavaScript imports, which means
our ESM code has "fully specified" import paths as required:

A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified.
https://nodejs.org/api/esm.html#mandatory-file-extensions

config/paths.json

@@ -13,6 +13,7 @@
   "sassdoc": "sassdoc/",
   "src": "src/govuk/",
     "components": "src/govuk/components/",
+    "vendor": "src/govuk/vendor",
   "ports": {
     "app": 3000,
     "test": 8888

package.json

@@ -109,7 +109,7 @@
       "/dist/**/*.js",
       "/package/**/*.js",
       "/package/**/*.mjs",
-      "/src/govuk/vendor/polyfills/**/*.js"
+      "/src/govuk/vendor/polyfills/**/*.mjs"
     ]
   },
   "jest": {

src/govuk/all.js → src/govuk/all.mjs

@@ -1,15 +1,15 @@
-import { nodeListForEach } from './common'
-import Accordion from './components/accordion/accordion'
-import Button from './components/button/button'
-import Details from './components/details/details'
-import CharacterCount from './components/character-count/character-count'
-import Checkboxes from './components/checkboxes/checkboxes'
-import ErrorSummary from './components/error-summary/error-summary'
-import NotificationBanner from './components/notification-banner/notification-banner'
-import Header from './components/header/header'
-import Radios from './components/radios/radios'
-import SkipLink from './components/skip-link/skip-link'
-import Tabs from './components/tabs/tabs'
+import { nodeListForEach } from './common.mjs'
+import Accordion from './components/accordion/accordion.mjs'
+import Button from './components/button/button.mjs'
+import Details from './components/details/details.mjs'
+import CharacterCount from './components/character-count/character-count.mjs'
+import Checkboxes from './components/checkboxes/checkboxes.mjs'
+import ErrorSummary from './components/error-summary/error-summary.mjs'
+import NotificationBanner from './components/notification-banner/notification-banner.mjs'
+import Header from './components/header/header.mjs'
+import Radios from './components/radios/radios.mjs'
+import SkipLink from './components/skip-link/skip-link.mjs'
+import Tabs from './components/tabs/tabs.mjs'
 
 function initAll (options) {
   // Set the options to an empty object by default if no options are passed.

src/govuk/components/accordion/accordion.js → src/govuk/components/accordion/accordion.mjs

@@ -15,9 +15,9 @@
 
 */
 
-import { nodeListForEach } from '../../common'
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Element/prototype/classList'
+import { nodeListForEach } from '../../common.mjs'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
 
 function Accordion ($module) {
   this.$module = $module

src/govuk/components/button/button.js → src/govuk/components/button/button.mjs

@@ -1,5 +1,5 @@
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
-import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 var KEY_SPACE = 32
 var DEBOUNCE_TIMEOUT_IN_SECONDS = 1

src/govuk/components/character-count/character-count.js → src/govuk/components/character-count/character-count.mjs

@@ -1,6 +1,6 @@
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
-import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
 
 function CharacterCount ($module) {
   this.$module = $module

src/govuk/components/checkboxes/checkboxes.js → src/govuk/components/checkboxes/checkboxes.mjs

@@ -1,8 +1,8 @@
-import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Event'
-import '../../vendor/polyfills/Element/prototype/classList'
-import { nodeListForEach } from '../../common'
+import '../../vendor/polyfills/Event.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import { nodeListForEach } from '../../common.mjs'
 
 function Checkboxes ($module) {
   this.$module = $module

src/govuk/components/details/details.js → src/govuk/components/details/details.mjs

@@ -4,9 +4,9 @@
  *
  * http://caniuse.com/#feat=details
  */
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
-import { generateUniqueID } from '../../common'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
+import { generateUniqueID } from '../../common.mjs'
 
 var KEY_ENTER = 13
 var KEY_SPACE = 32

src/govuk/components/error-summary/error-summary.js → src/govuk/components/error-summary/error-summary.mjs

@@ -1,6 +1,6 @@
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Event' // addEventListener
-import '../../vendor/polyfills/Element/prototype/closest'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener
+import '../../vendor/polyfills/Element/prototype/closest.mjs'
 
 function ErrorSummary ($module) {
   this.$module = $module

src/govuk/components/header/header.js → src/govuk/components/header/header.mjs

@@ -1,6 +1,6 @@
-import '../../vendor/polyfills/Event'
-import '../../vendor/polyfills/Element/prototype/classList'
-import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Event.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 
 function Header ($module) {
   this.$module = $module

src/govuk/components/notification-banner/notification-banner.js → src/govuk/components/notification-banner/notification-banner.mjs

@@ -1,4 +1,4 @@
-import '../../vendor/polyfills/Event' // addEventListener
+import '../../vendor/polyfills/Event.mjs' // addEventListener
 
 function NotificationBanner ($module) {
   this.$module = $module

src/govuk/components/radios/radios.js → src/govuk/components/radios/radios.mjs

@@ -1,8 +1,8 @@
-import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
 // addEventListener, event.target normalization and DOMContentLoaded
-import '../../vendor/polyfills/Event'
-import '../../vendor/polyfills/Element/prototype/classList'
-import { nodeListForEach } from '../../common'
+import '../../vendor/polyfills/Event.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import { nodeListForEach } from '../../common.mjs'
 
 function Radios ($module) {
   this.$module = $module

src/govuk/components/skip-link/skip-link.js → src/govuk/components/skip-link/skip-link.mjs

@@ -1,6 +1,6 @@
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Element/prototype/classList'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normalization
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normalization
 
 function SkipLink ($module) {
   this.$module = $module

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

@@ -1,9 +1,9 @@
-import '../../vendor/polyfills/Function/prototype/bind'
-import '../../vendor/polyfills/Element/prototype/classList'
-import '../../vendor/polyfills/Element/prototype/nextElementSibling'
-import '../../vendor/polyfills/Element/prototype/previousElementSibling'
-import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
-import { nodeListForEach } from '../../common'
+import '../../vendor/polyfills/Function/prototype/bind.mjs'
+import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Element/prototype/nextElementSibling.mjs'
+import '../../vendor/polyfills/Element/prototype/previousElementSibling.mjs'
+import '../../vendor/polyfills/Event.mjs' // addEventListener and event.target normaliziation
+import { nodeListForEach } from '../../common.mjs'
 
 function Tabs ($module) {
   this.$module = $module

src/govuk/vendor/polyfills/Element.js → src/govuk/vendor/polyfills/Element.mjs

@@ -1,4 +1,4 @@
-import './Document'
+import './Document.mjs'
 
 (function(undefined) {
 

src/govuk/vendor/polyfills/Element/prototype/classList.js → src/govuk/vendor/polyfills/Element/prototype/classList.mjs

@@ -1,6 +1,6 @@
-import '../../Object/defineProperty'
-import '../../DOMTokenList'
-import '../../Element'
+import '../../Object/defineProperty.mjs'
+import '../../DOMTokenList.mjs'
+import '../../Element.mjs'
 
 (function(undefined) {
 
@@ -90,4 +90,4 @@ import '../../Element'
       addProp(global.HTMLAreaElement, "relList", "rel");
     }(this));
 
-}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});
+}).call('object' === typeof window && window || 'object' === typeof self && self || 'object' === typeof global && global || {});

src/govuk/vendor/polyfills/Element/prototype/closest.js → src/govuk/vendor/polyfills/Element/prototype/closest.mjs

@@ -1,4 +1,4 @@
-import './matches'
+import './matches.mjs'
 
 (function(undefined) {
 

src/govuk/vendor/polyfills/Element/prototype/nextElementSibling.js → src/govuk/vendor/polyfills/Element/prototype/nextElementSibling.mjs

@@ -1,5 +1,5 @@
-import '../../Object/defineProperty'
-import '../../Element'
+import '../../Object/defineProperty.mjs'
+import '../../Element.mjs'
 
 (function(undefined) {
 

src/govuk/vendor/polyfills/Element/prototype/previousElementSibling.js → src/govuk/vendor/polyfills/Element/prototype/previousElementSibling.mjs

@@ -1,5 +1,5 @@
-import '../../Object/defineProperty'
-import '../../Element'
+import '../../Object/defineProperty.mjs'
+import '../../Element.mjs'
 
 (function(undefined) {
 

src/govuk/vendor/polyfills/Event.js → src/govuk/vendor/polyfills/Event.mjs

@@ -1,6 +1,6 @@
-import './Window'
-import './Element'
-import './Object/defineProperty'
+import './Window.mjs'
+import './Element.mjs'
+import './Object/defineProperty.mjs'
 
 (function(undefined) {
 

src/govuk/vendor/polyfills/Function/prototype/bind.js → src/govuk/vendor/polyfills/Function/prototype/bind.mjs

@@ -1,4 +1,4 @@
-import '../../Object/defineProperty'
+import '../../Object/defineProperty.mjs'
 
 (function(undefined) {
   // Detection from https://github.com/Financial-Times/polyfill-service/blob/master/packages/polyfill-library/polyfills/Function/prototype/bind/detect.js

tasks/gulp/__tests__/after-build-package.test.js

@@ -66,14 +66,11 @@ describe('package/', () => {
               var fileWithoutSrc = file.replace(/^src\//, '')
 
               // Account for govuk-esm folder
-              if (fileWithoutSrc.split('.').pop() === 'js') {
+              if (fileWithoutSrc.split('.').pop() === 'mjs') {
                 var esmFile = fileWithoutSrc.replace('govuk/', 'govuk-esm/')
+                var umdFile = fileWithoutSrc.replace('.mjs', '.js')
 
-                if (!esmFile.includes('vendor/')) {
-                  esmFile = esmFile.replace('.js', '.mjs')
-                }
-
-                return [fileWithoutSrc, esmFile]
+                return [umdFile, esmFile]
               } else {
                 return fileWithoutSrc
               }

tasks/gulp/compile-assets.js

@@ -190,7 +190,7 @@ gulp.task('scss:compile', function (done) {
 // --------------------------------------
 gulp.task('js:compile', (done) => {
   // For dist/ folder we only want compiled 'all.js'
-  const fileLookup = isDist ? configPaths.src + 'all.js' : configPaths.src + '**/!(*.test).js'
+  const fileLookup = isDist ? configPaths.src + 'all.mjs' : configPaths.src + '**/!(*.test).mjs'
 
   // Perform a synchronous search and return an array of matching file names
   const srcFiles = glob.sync(fileLookup)
@@ -225,6 +225,9 @@ gulp.task('js:compile', (done) => {
           extname: '.min.js'
         })
       ))
+      .pipe(rename({
+        extname: '.js'
+      }))
       .pipe(eol())
       .pipe(gulp.dest(destinationPath() + newDirectoryPath))
   })

tasks/gulp/copy-to-destination.js

@@ -20,7 +20,8 @@ gulp.task('copy-files', () => {
   return gulp.src([
     configPaths.src + '**/*',
     '!**/.DS_Store',
-    '!**/*.test.js',
+    '!**/*.mjs',
+    '!**/*.test.*',
     '!' + configPaths.src + 'README.md', // Don't override the existing README in /package
     '!' + configPaths.components + '**/__snapshots__/**',
     '!' + configPaths.components + '**/__snapshots__/'
@@ -86,12 +87,7 @@ function generateFixtures (file) {
 }
 
 gulp.task('js:copy-esm', () => {
-  return gulp.src([configPaths.src + '**/*.js', '!' + configPaths.src + '/**/*.test.js'])
-    .pipe(rename(function (path) {
-      if (!path.dirname.includes('vendor')) {
-        path.extname = '.mjs'
-      }
-    }))
+  return gulp.src([configPaths.src + '**/*.mjs', configPaths.src + '**/*.js', '!' + configPaths.src + '/**/*.test.js'])
     .pipe(gulp.dest(taskArguments.destination + '/govuk-esm/'))
 })