diff --git a/package-lock.json b/package-lock.json
index 02fe21df93..f57d896759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30519,6 +30519,7 @@
"js-yaml": "^4.1.0",
"minimatch": "^9.0.3",
"nunjucks": "^3.2.4",
+ "outdent": "^0.8.0",
"slash": "^3.0.0"
},
"engines": {
diff --git a/packages/govuk-frontend-review/src/app.mjs b/packages/govuk-frontend-review/src/app.mjs
index 4d33813a5d..937b07b6de 100644
--- a/packages/govuk-frontend-review/src/app.mjs
+++ b/packages/govuk-frontend-review/src/app.mjs
@@ -5,7 +5,8 @@ import {
getComponentsFixtures,
getComponentNames,
getComponentNamesFiltered,
- renderComponent
+ render,
+ renderPreview
} from '@govuk-frontend/lib/components'
import { filterPath, hasPath } from '@govuk-frontend/lib/files'
import { getStats, modulePaths } from '@govuk-frontend/stats'
@@ -158,11 +159,10 @@ export default async () => {
}
// Construct and evaluate the component with the data for this example
- res.locals.componentView = renderComponent(
- componentName,
- fixture.options,
- { env }
- )
+ res.locals.componentView = render(componentName, {
+ context: fixture.options,
+ env
+ })
let bodyClasses = 'app-template__body'
@@ -201,9 +201,11 @@ export default async () => {
// Test view for injecting rendered components
// and testing specific JavaScript configurations
- // Example view
app.get('/tests/boilerplate', function (req, res) {
- res.render('tests/boilerplate')
+ const componentName = undefined
+
+ // Render blank component preview
+ res.send(renderPreview(componentName, { env }))
})
// Full page example views
diff --git a/packages/govuk-frontend-review/src/common/middleware/assets.mjs b/packages/govuk-frontend-review/src/common/middleware/assets.mjs
index 762f18f902..c12ca15ff2 100644
--- a/packages/govuk-frontend-review/src/common/middleware/assets.mjs
+++ b/packages/govuk-frontend-review/src/common/middleware/assets.mjs
@@ -19,6 +19,9 @@ const frontendPath = packageTypeToPath('govuk-frontend', {
router.use('/assets', express.static(join(frontendPath, 'assets')))
router.use('/javascripts', express.static(frontendPath))
-router.use('/stylesheets', express.static(join(paths.app, 'dist/stylesheets')))
+router.use('/stylesheets', [
+ express.static(frontendPath),
+ express.static(join(paths.app, 'dist/stylesheets'))
+])
export default router
diff --git a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
index a0e4ca2849..1357727838 100644
--- a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
+++ b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
@@ -1,4 +1,4 @@
-import { renderComponent } from '@govuk-frontend/lib/components'
+import { render } from '@govuk-frontend/lib/components'
import beautify from 'js-beautify'
/**
@@ -6,21 +6,19 @@ import beautify from 'js-beautify'
*
* @this {{ env: import('nunjucks').Environment }}
* @param {string} componentName - Component name
- * @param {MacroOptions} [params] - Nunjucks macro options (or params)
+ * @param {MacroRenderOptions} [options] - Nunjucks macro render options
* @returns {string} HTML rendered by the component
*/
-export function getHTMLCode(componentName, params) {
- const html = renderComponent(componentName, params, {
- env: this.env
- })
+export function getHTMLCode(componentName, options) {
+ const html = render(componentName, { ...options, env: this.env })
// Default beautify options
- const options = beautify.html.defaultOptions()
+ const beautifyOptions = beautify.html.defaultOptions()
return beautify.html(html, {
indent_size: 2,
// Ensure nested labels in headings are indented properly
- inline: options.inline.filter((tag) => !['label'].includes(tag)),
+ inline: beautifyOptions.inline.filter((tag) => !['label'].includes(tag)),
// Remove blank lines
max_preserve_newlines: 0,
// Ensure attribute wrapping in header SVG is preserved
@@ -29,5 +27,5 @@ export function getHTMLCode(componentName, params) {
}
/**
- * @typedef {import('@govuk-frontend/lib/components').MacroOptions} MacroOptions
+ * @typedef {import('@govuk-frontend/lib/components').MacroRenderOptions} MacroRenderOptions
*/
diff --git a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-nunjucks-code.mjs b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-nunjucks-code.mjs
index 1c2c40155f..95fc9f3a15 100644
--- a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-nunjucks-code.mjs
+++ b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-nunjucks-code.mjs
@@ -9,14 +9,14 @@ import { componentNameToMacroName } from '../filters/index.mjs'
* Component Nunjucks code (formatted)
*
* @param {string} componentName - Component name
- * @param {MacroOptions} [params] - Nunjucks macro options (or params)
+ * @param {MacroRenderOptions} [options] - Nunjucks macro render options
* @returns {string} Nunjucks code for the component
*/
-export function getNunjucksCode(componentName, params) {
+export function getNunjucksCode(componentName, options) {
const macroName = componentNameToMacroName(componentName)
// Allow nested HTML strings to wrap at `\n`
- const paramsFormatted = inspect(params, {
+ const paramsFormatted = inspect(options.context, {
compact: false,
depth: Infinity,
maxArrayLength: Infinity,
@@ -39,5 +39,5 @@ export function getNunjucksCode(componentName, params) {
}
/**
- * @typedef {import('@govuk-frontend/lib/components').MacroOptions} MacroOptions
+ * @typedef {import('@govuk-frontend/lib/components').MacroRenderOptions} MacroRenderOptions
*/
diff --git a/packages/govuk-frontend-review/src/views/macros/showExamples.njk b/packages/govuk-frontend-review/src/views/macros/showExamples.njk
index 4ad7ad4202..b778cb8581 100644
--- a/packages/govuk-frontend-review/src/views/macros/showExamples.njk
+++ b/packages/govuk-frontend-review/src/views/macros/showExamples.njk
@@ -38,12 +38,16 @@
{% set codeExamplesHtml %}
Markup
- {{- getHTMLCode(componentName, example.options) | highlight("html") | safe -}}
+ {{- getHTMLCode(componentName, {
+ context: example.options
+ }) | highlight("html") | safe -}}
Macro
- {{- getNunjucksCode(componentName, example.options) | highlight("js") | safe -}}
+ {{- getNunjucksCode(componentName, {
+ context: example.options
+ }) | highlight("js") | safe -}}
{% endset %}
diff --git a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk b/packages/govuk-frontend-review/src/views/tests/boilerplate.njk
deleted file mode 100644
index c7b91a372f..0000000000
--- a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk
+++ /dev/null
@@ -1,25 +0,0 @@
-{% extends "component-preview.njk" %}
-
-{% set pageTitle = "Test boilerplate" %}
-{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
-
-{% block head %}
- {{ super() }}
-
-{% endblock %}
-
-{% block content %}
-
-
Test boilerplate
-
- Used during testing to inject rendered components and test specific configurations
-
-
-