Update review app to load govuk-frontend from package

app/package.json

@@ -24,6 +24,7 @@
     "govuk_frontend_toolkit": "^9.0.1",
     "govuk_template_jinja": "^0.26.0",
     "govuk-elements-sass": "3.1.3",
+    "govuk-frontend": "*",
     "gulp": "^4.0.2",
     "gulp-cli": "^2.3.0",
     "highlight.js": "^11.7.0",

app/src/javascripts/main.mjs

@@ -0,0 +1,3 @@
+import { initAll } from 'govuk-frontend'
+
+initAll()

app/src/stylesheets/app-ie8.scss

@@ -1,3 +1,3 @@
-@import "../../../package/src/govuk/all-ie8";
+@import "govuk-frontend/src/govuk/all-ie8";
 @import "partials/app";
 @import "partials/banner";

app/src/stylesheets/app.scss

@@ -1,7 +1,7 @@
 $govuk-show-breakpoints: true;
 $govuk-new-link-styles: true;
 
-@import "../../../package/src/govuk/all";
+@import "govuk-frontend/src/govuk/all";
 @import "partials/app";
 @import "partials/code";
 @import "partials/banner";

app/src/stylesheets/full-page-examples/campaign-page.scss

@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk-frontend/src/govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk-frontend/src/govuk/core/all";
 
 .app-header--campaign {
   padding-bottom: govuk-spacing(2);

app/src/stylesheets/full-page-examples/search.scss

@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk-frontend/src/govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk-frontend/src/govuk/core/all";
 
 .app-document-list > li {
   padding-top: govuk-spacing(4);

app/src/views/layouts/_generic.njk

@@ -42,6 +42,5 @@
     {% include "partials/legacyJavaScript.njk" %}
   {% endif %}
 
-  <script src="/javascripts/all.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script src="/javascripts/main.min.js"></script>
 {% endblock %}

app/src/views/layouts/legacy.njk

@@ -22,6 +22,5 @@
 
 {% block body_end %}
   {% include "partials/legacyJavaScript.njk" %}
-  <script src="/javascripts/all.min.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
+  <script src="/javascripts/main.min.js"></script>
 {% endblock %}

app/tasks/scripts.mjs

@@ -11,8 +11,8 @@ import { npm, scripts, task } from '../../tasks/index.mjs'
  */
 export const compile = gulp.series(
   task.name('compile:js', () =>
-    scripts.compile('all.mjs', {
-      srcPath: join(paths.src, 'govuk'),
+    scripts.compile('main.mjs', {
+      srcPath: join(paths.app, 'src/javascripts'),
       destPath: join(paths.app, 'dist/javascripts'),
 
       filePath (file) {

package.json

@@ -76,6 +76,7 @@
     "postcss-unrgba": "^1.1.1",
     "puppeteer": "^19.8.2",
     "rollup": "0.59.4",
+    "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-replace": "^2.2.0",
     "sass-embedded": "^1.60.0",
     "sassdoc": "^2.7.4",

tasks/scripts.mjs

@@ -2,6 +2,7 @@ import { join, parse } from 'path'
 
 import PluginError from 'plugin-error'
 import { rollup } from 'rollup'
+import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 import { minify } from 'terser'
 
@@ -42,7 +43,9 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
   const moduleDestPath = join(destPath, filePath ? filePath(parse(modulePath)) : modulePath)
 
   // Rollup plugins
-  const plugins = []
+  const plugins = [
+    resolve()
+  ]
 
   if (!isDev) {
     // Add GOV.UK Frontend release version