Update review app to use pre-built govuk-frontend modules

Rollup build is not necessary when `govuk-frontend-{{ version }}.min.js` is already built

I’ve had to use `require()` inside ES modules to avoid experimental warnings using:

```
import pkg from 'govuk-frontend/package.json' assert { type: 'json' }
```

docs/contributing/tasks.md

@@ -91,8 +91,6 @@ This task will:
 
 This task will:
 
-- check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
-- compile JavaScript to Immediately Invoked Function Expression (IIFE) into `./packages/govuk-frontend-review/dist/javascripts`
 - compile JavaScript documentation into `./packages/govuk-frontend-review/dist/docs/jsdoc`
 
 ## Review app only

packages/govuk-frontend-review/browsersync.config.js

@@ -1,5 +1,6 @@
 const { join } = require('path')
 
+const pkg = require('govuk-frontend/package.json')
 const { paths, ports } = require('govuk-frontend-config')
 const { packageTypeToPath } = require('govuk-frontend-lib/names')
 
@@ -22,9 +23,14 @@ module.exports = {
 
   // Files to watch for auto reload
   files: [
-    join(paths.app, 'dist/javascripts/**/*.mjs'),
     join(paths.app, 'dist/stylesheets/**/*.css'),
     join(paths.app, 'src/views/**/*.njk'),
+
+    packageTypeToPath('govuk-frontend', {
+      modulePath: `govuk-frontend-${pkg.version}.min.js`,
+      moduleRoot: paths.app
+    }),
+
     packageTypeToPath('govuk-frontend', {
       modulePath: '**/*.njk',
       moduleRoot: paths.app
@@ -36,7 +42,10 @@ module.exports = {
   serveStatic: [
     {
       route: '/javascripts',
-      dir: join(paths.app, 'dist/javascripts')
+      dir: packageTypeToPath('govuk-frontend', {
+        modulePath: '/',
+        moduleRoot: paths.app
+      })
     },
     {
       route: '/stylesheets',

packages/govuk-frontend-review/nodemon.json

@@ -6,7 +6,7 @@
     "../../shared/lib",
     "../../shared/stats"
   ],
-  "ignore": ["./src/javascripts/**", "**/*.test.*"],
+  "ignore": ["**/*.test.*"],
   "events": {
     "restart": "browser-sync reload --config browsersync.config.js"
   },

packages/govuk-frontend-review/src/app.mjs

@@ -1,3 +1,5 @@
+import { createRequire } from 'module'
+
 import express from 'express'
 import { getComponentsData, getComponentNames, filterPath } from 'govuk-frontend-lib/files'
 import { componentNameToMacroName } from 'govuk-frontend-lib/names'
@@ -9,6 +11,9 @@ import * as middleware from './common/middleware/index.mjs'
 import * as nunjucks from './common/nunjucks/index.mjs'
 import * as routes from './routes/index.mjs'
 
+const require = createRequire(import.meta.url)
+const { version } = require('govuk-frontend/package.json')
+
 export default async () => {
   const app = express()
 
@@ -44,6 +49,7 @@ export default async () => {
   app.use(middleware.robots)
 
   // Add build stats
+  app.locals.version = version
   app.locals.stats = Object.fromEntries(await Promise.all(modulePaths
     .map(async (modulePath) => [modulePath, await getStats(modulePath)])))
 

packages/govuk-frontend-review/src/common/middleware/assets.mjs

@@ -11,7 +11,7 @@ const router = express.Router()
  */
 
 router.use('/assets', express.static(packageTypeToPath('govuk-frontend', { modulePath: 'assets', moduleRoot: paths.app })))
-router.use('/javascripts', express.static(join(paths.app, 'dist/javascripts')))
+router.use('/javascripts', express.static(packageTypeToPath('govuk-frontend', { modulePath: '/', moduleRoot: paths.app })))
 router.use('/stylesheets', express.static(join(paths.app, 'dist/stylesheets')))
 
 export default router

packages/govuk-frontend-review/src/views/examples/scoped-initialisation/index.njk

@@ -45,9 +45,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend-{{ version }}.min.js'
     const $scope = document.getElementById('scoped')
     initAll({ scope: $scope })
   </script>

packages/govuk-frontend-review/src/views/examples/template-custom/index.njk

@@ -121,9 +121,9 @@
 
 {% block bodyEnd %}
   <!-- block:bodyEnd -->
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend-{{ version }}.min.js'
     initAll()
   </script>
   <!-- endblock:bodyEnd -->

packages/govuk-frontend-review/src/views/examples/template-default/index.njk

@@ -12,9 +12,9 @@
 
 {% block bodyEnd %}
   <!-- block:bodyEnd -->
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend-{{ version }}.min.js'
     initAll()
   </script>
   <!-- endblock:bodyEnd -->

packages/govuk-frontend-review/src/views/examples/translated/index.njk

@@ -937,9 +937,9 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend-{{ version }}.min.js'
     initAll({
       accordion: {
         i18n: {

packages/govuk-frontend-review/src/views/layouts/_generic.njk

@@ -15,9 +15,9 @@
 {% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
   <script type="module">
-    import { initAll } from '/javascripts/all.bundle.min.mjs'
+    import { initAll } from '/javascripts/govuk-frontend-{{ version }}.min.js'
     initAll()
   </script>
 {% endblock %}

packages/govuk-frontend-review/src/views/tests/boilerplate.njk

@@ -6,7 +6,7 @@
 {% block head %}
   {{ super() }}
   <script type="importmap">
-    { "imports": { "govuk-frontend": "/javascripts/all.bundle.min.mjs" } }
+    { "imports": { "govuk-frontend": "/javascripts/govuk-frontend-{{ version }}.min.js" } }
   </script>
 {% endblock %}
 
@@ -21,5 +21,5 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="/javascripts/all.bundle.min.mjs"></script>
+  <script type="module" src="/javascripts/govuk-frontend-{{ version }}.min.js"></script>
 {% endblock %}

packages/govuk-frontend-review/tasks/scripts.mjs

@@ -1,25 +1,12 @@
-import { join } from 'path'
-
-import { npm, scripts, task } from 'govuk-frontend-tasks'
+import { npm } from 'govuk-frontend-tasks'
 import gulp from 'gulp'
 
 /**
  * JavaScripts task (for watch)
- * Compilation, documentation
+ * Documentation
  *
  * @type {import('govuk-frontend-tasks').TaskFunction}
  */
 export const compile = (options) => gulp.series(
-  task.name('compile:js', () =>
-    scripts.compile('all.mjs', {
-      ...options,
-
-      srcPath: join(options.srcPath, 'javascripts'),
-      destPath: join(options.destPath, 'javascripts'),
-      configPath: join(options.basePath, 'rollup.config.mjs')
-    })
-  ),
-
-  // Build JSDoc for /docs/javascript
   npm.script('build:jsdoc', [], options)
 )

packages/govuk-frontend-review/tasks/watch.mjs

@@ -36,22 +36,12 @@ export const watch = (options) => gulp.parallel(
     ], styles(options))
   ),
 
-  /**
-   * JavaScripts lint watcher
-   */
-  task.name('lint:js watch', () =>
-    gulp.watch([
-      `${slash(paths.app)}/src/javascripts/**/*.mjs`
-    ], npm.script('lint:js:cli', [slash(join(options.workspace, '**/*.{cjs,js,md,mjs}'))]))
-  ),
-
   /**
    * JavaScripts build watcher
    */
   task.name('compile:js watch', () =>
     gulp.watch([
       `${slash(paths.root)}/typedoc.config.js`,
-      `${slash(paths.app)}/src/javascripts/**/*.mjs`,
       `${slash(paths.package)}/dist/govuk/**/*.mjs`
     ], scripts(options))
   )