Ensure govuk-frontend is loaded from linked package

Rather than using directory traversal `../../../src` etc
alphagov · Apr 11, 2023 · ee3a09a · ee3a09a
1 parent 1e9a8aa
commit ee3a09a
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 20 deletions.
diff --git a/.github/workflows/actions/build/action.yml b/.github/workflows/actions/build/action.yml
@@ -11,7 +11,9 @@ runs:
       with:
         # Restore build cache (unless commit SHA changes)
         key: build-cache-${{ runner.os }}-${{ github.sha }}
-        path: app/dist
+        path: |
+          app/dist
+          package/dist
 
     - name: Install dependencies
       uses: ./.github/workflows/actions/install-node
@@ -26,4 +28,6 @@ runs:
       if: steps.build-cache.outputs.cache-hit != 'true'
       shell: bash
 
-      run: npm run build:app
+      run: |
+        npm run build:package
+        npm run build:app
diff --git a/app/nodemon.json b/app/nodemon.json
@@ -1,6 +1,6 @@
 {
   "watch": ["./src", "../package/src/govuk/**/*.{json,yaml}"],
-  "ignore": ["**/*.test.*"],
+  "ignore": ["./src/javascripts/**", "**/*.test.*"],
   "ext": "mjs,json,yaml",
   "quiet": true
 }
diff --git a/app/package.json b/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",

diff --git a/app/src/javascripts/main.mjs b/app/src/javascripts/main.mjs
@@ -0,0 +1,6 @@
+import * as GOVUKFrontend from 'govuk-frontend'
+
+// Manually window global for tests
+window.GOVUKFrontend = GOVUKFrontend
+
+GOVUKFrontend.initAll()
diff --git a/app/src/stylesheets/app-ie8.scss b/app/src/stylesheets/app-ie8.scss
@@ -1,3 +1,3 @@
-@import "../../../package/src/govuk/all-ie8";
+@import "govuk/all-ie8";
 @import "partials/app";
 @import "partials/banner";
diff --git a/app/src/stylesheets/app.scss b/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/all";
 @import "partials/app";
 @import "partials/code";
 @import "partials/banner";

diff --git a/app/src/stylesheets/full-page-examples/campaign-page.scss b/app/src/stylesheets/full-page-examples/campaign-page.scss
@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk/core/all";
 
 .app-header--campaign {
   padding-bottom: govuk-spacing(2);

diff --git a/app/src/stylesheets/full-page-examples/search.scss b/app/src/stylesheets/full-page-examples/search.scss
@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk/core/all";
 
 .app-document-list > li {
   padding-top: govuk-spacing(4);

diff --git a/app/src/views/layouts/_generic.njk b/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 %}
diff --git a/app/src/views/layouts/legacy.njk b/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 %}
diff --git a/app/src/views/tests/boilerplate.njk b/app/src/views/tests/boilerplate.njk
@@ -12,6 +12,6 @@
       Used during testing to inject rendered components and test specific configurations
     </p>
     <div id="slot"></div>
-    <script src="/javascripts/all.min.js"></script>
+    <script src="/javascripts/main.min.js"></script>
   </body>
 </html>
diff --git a/app/tasks/scripts.mjs b/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) {

diff --git a/app/tasks/watch.mjs b/app/tasks/watch.mjs
@@ -28,6 +28,7 @@ export function watch () {
 
     gulp.watch([
       `${slash(paths.root)}/jsdoc.config.js`,
+      `${slash(paths.app)}/src/javascripts/**/*.mjs`,
       `${slash(paths.src)}/govuk/**/*.mjs`
     ], gulp.parallel(
       npm.script('lint:js'),

diff --git a/docs/examples/webpack/assets/stylesheets/app.scss b/docs/examples/webpack/assets/stylesheets/app.scss
@@ -1 +1 @@
-@import "govuk-frontend/govuk/all";
+@import "govuk/all";
diff --git a/docs/examples/webpack/webpack.config.js b/docs/examples/webpack/webpack.config.js
@@ -4,7 +4,7 @@ const CopyPlugin = require('copy-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
 // Module resolution
-const frontendPath = dirname(require.resolve('govuk-frontend'))
+const frontendPath = resolve(dirname(require.resolve('govuk-frontend')), '../')
 
 module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
   devServer: {
@@ -48,6 +48,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
             loader: 'sass-loader',
             options: {
               sassOptions: {
+                includePaths: [frontendPath],
                 quietDeps: true
               }
             }
@@ -84,7 +85,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
       patterns: [
         resolve(__dirname, 'index.html'),
         {
-          context: resolve(frontendPath, './assets'),
+          context: resolve(frontendPath, './govuk/assets'),
           from: '{fonts,images}/**',
           to: './assets'
         }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/package/src/govuk/components/globals.test.mjs b/package/src/govuk/components/globals.test.mjs
@@ -25,6 +25,7 @@ describe('GOV.UK Frontend', () => {
 
       const components = Object.keys(GOVUKFrontendGlobal)
         .filter(method => !['initAll', 'version'].includes(method))
+        .sort()
 
       // Ensure GOV.UK Frontend exports the expected components
       expect(components).toEqual([

diff --git a/tasks/scripts.mjs b/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,8 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
   const moduleDestPath = join(destPath, filePath ? filePath(parse(modulePath)) : modulePath)
 
   // Rollup plugins
-  const plugins = []
+  // @ts-expect-error "This expression is not callable" due to incorrect types
+  const plugins = [resolve()]
 
   if (!isDev) {
     // Add GOV.UK Frontend release version

diff --git a/tasks/styles.mjs b/tasks/styles.mjs
@@ -65,6 +65,7 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath, fileP
       // Resolve @imports via
       loadPaths: [
         join(paths.root, 'node_modules/govuk_frontend_toolkit/stylesheets'),
+        join(paths.root, 'node_modules/govuk-frontend/dist'),
         join(paths.root, 'node_modules')
       ],