Ensure ESM *.mjs files are bundled to *.js

This extension can be changed back to `*.mjs` once native ES modules are shipped
alphagov · Mar 3, 2023 · d473882 · d473882
1 parent 9e5ea37
commit d473882
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 25 deletions.
diff --git a/lib/rollup/index.js b/lib/rollup/index.js
@@ -16,7 +16,7 @@ const plugin = (modulePath, moduleName) => async (files, metalsmith, done) => {
   modulePath = normalize(modulePath)
 
   // Metalsmith file paths
-  const file = modulePath
+  const file = modulePath.replace(/\.mjs$/, '.js')
   const map = `${file}.map`
 
   try {
@@ -31,6 +31,7 @@ const plugin = (modulePath, moduleName) => async (files, metalsmith, done) => {
 
     // Compile Rollup bundle
     const result = await bundle.generate({
+      file: modulePath,
       sourcemapFile: file,
       sourcemap: true,
 
@@ -72,6 +73,12 @@ const plugin = (modulePath, moduleName) => async (files, metalsmith, done) => {
       contents: Buffer.from(minified.map)
     }
 
+    // Remove source module from output when
+    // file path changes (e.g. `.mjs` to `.js`)
+    if (modulePath !== file) {
+      delete files[modulePath]
+    }
+
     done()
   } catch (error) {
     done(error)

diff --git a/lib/rollup/index.test.js b/lib/rollup/index.test.js
@@ -33,18 +33,18 @@ describe('Rollup plugin', () => {
   })
 
   it('compiles JavaScript to Metalsmith files', () => {
-    expect(output[normalize('javascripts/entry.mjs')])
+    expect(output[normalize('javascripts/entry.js')])
       .toMatchObject({ contents: expect.any(Buffer) })
 
-    expect(output[normalize('javascripts/example.mjs')])
-      .toMatchObject({ contents: expect.any(Buffer) })
+    // Source `*.mjs` entry removed
+    expect(output['javascripts/entry.mjs']).toBeUndefined()
   })
 
   it('bundles ESM modules to single IIFE file (minified)', () => {
-    expect(output[normalize('javascripts/entry.mjs')].contents.toString())
+    expect(output[normalize('javascripts/entry.js')].contents.toString())
       .toEqual(outdent`
         var entry=function(){"use strict";return()=>"example"}();
-        //# sourceMappingURL=entry.mjs.map
+        //# sourceMappingURL=entry.js.map
       `)
   })
 })
diff --git a/src/styles/page-template/block-areas/index.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
 
     <!--[if lt IE 9]>
       <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

diff --git a/src/styles/page-template/custom/index.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

diff --git a/src/styles/page-template/default/index.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

diff --git a/views/layouts/_generic.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
   <!--[if !IE 8]><!-->
-    <script src="{{ getFingerprint('javascripts/application.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/application.js') }}"></script>
   <!--<![endif]-->
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>
-    <script src="{{ getFingerprint('javascripts/application-ie8.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/application-ie8.js') }}"></script>
   <![endif]-->
 {% endblock %}
diff --git a/views/layouts/layout-example-full-page-govuk.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

diff --git a/views/layouts/layout-example-full-page.njk b/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.mjs') }}"></script>
+    <script src="{{ getFingerprint('javascripts/head-ie8.js') }}"></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.mjs') }}"></script>
-  <script src="{{ getFingerprint('javascripts/example.mjs') }}"></script>
+  <script src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script src="{{ getFingerprint('javascripts/example.js') }}"></script>
 
   <!--[if lt IE 9]>
     <script src="{{ getFingerprint('javascripts/vendor/ie8.polyfils.min.js') }}"></script>

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