Skip to content

Commit

Permalink
Ensure govuk-frontend is loaded from linked package
Browse files Browse the repository at this point in the history
Rather than using directory traversal `../../../src` etc
  • Loading branch information
colinrotherham committed Apr 12, 2023
1 parent abd775c commit 681bdbf
Show file tree
Hide file tree
Showing 16 changed files with 74 additions and 15 deletions.
2 changes: 1 addition & 1 deletion app/nodemon.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"watch": ["./src", "../package/src/govuk/**/*.{json,yaml}"],
"ignore": ["**/*.test.*"],
"ignore": ["./src/javascripts/**", "**/*.test.*"],
"ext": "mjs,json,yaml",
"quiet": true
}
1 change: 1 addition & 0 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 4 additions & 0 deletions app/src/javascripts/all.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import * as GOVUKFrontend from 'govuk-frontend'

// Manually window global for tests
window.GOVUKFrontend = GOVUKFrontend
2 changes: 1 addition & 1 deletion app/src/stylesheets/app-ie8.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@import "../../../package/src/govuk/all-ie8";
@import "govuk/all-ie8";
@import "partials/app";
@import "partials/banner";
2 changes: 1 addition & 1 deletion app/src/stylesheets/app.scss
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
4 changes: 2 additions & 2 deletions app/src/stylesheets/full-page-examples/campaign-page.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
4 changes: 2 additions & 2 deletions app/src/stylesheets/full-page-examples/search.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
2 changes: 1 addition & 1 deletion app/tasks/scripts.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ 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'),
srcPath: join(paths.app, 'src/javascripts'),
destPath: join(paths.app, 'dist/javascripts'),

filePath (file) {
Expand Down
1 change: 1 addition & 0 deletions app/tasks/watch.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/webpack/assets/stylesheets/app.scss
Original file line number Diff line number Diff line change
@@ -1 +1 @@
@import "govuk-frontend/govuk/all";
@import "govuk/all";
5 changes: 3 additions & 2 deletions docs/examples/webpack/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -48,6 +48,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [frontendPath],
quietDeps: true
}
}
Expand Down Expand Up @@ -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'
}
Expand Down
51 changes: 49 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,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",
Expand Down
3 changes: 2 additions & 1 deletion package/src/govuk/components/globals.test.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,15 @@ describe('GOV.UK Frontend', () => {
it('exports Components', async () => {
const components = exported
.filter(method => !['initAll', 'version'].includes(method))
.sort()

// Ensure GOV.UK Frontend exports the expected components
expect(components).toEqual([
'Accordion',
'Button',
'Details',
'CharacterCount',
'Checkboxes',
'Details',
'ErrorSummary',
'Header',
'NotificationBanner',
Expand Down
4 changes: 3 additions & 1 deletion tasks/scripts.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions tasks/styles.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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/src'),
join(paths.root, 'node_modules')
],

Expand Down

0 comments on commit 681bdbf

Please sign in to comment.