Add standalone lib renderPreview() for Nunjucks boilerplate preview

This will be used to bypass the Review app in future

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

@@ -5,7 +5,8 @@ import {
   getComponentsFixtures,
   getComponentNames,
   getComponentNamesFiltered,
-  renderComponent
+  renderComponent,
+  renderPreview
 } from '@govuk-frontend/lib/components'
 import { filterPath, hasPath } from '@govuk-frontend/lib/files'
 import { getStats, modulePaths } from '@govuk-frontend/stats'
@@ -200,9 +201,8 @@ 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')
+  app.get('/tests/boilerplate', async function (req, res) {
+    res.send(renderPreview(undefined, { env }))
   })
 
   // Full page example views

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

shared/lib/components.js

@@ -169,6 +169,59 @@ function renderMacro(macroName, macroPath, options) {
   return renderString(macroString, options)
 }
 
+/**
+ * Render component preview on boilerplate page
+ *
+ * @param {string} [componentName] - Component name
+ * @param {MacroRenderOptions} [options] - Nunjucks render options
+ * @returns {string} HTML rendered from the Nunjucks template
+ */
+function renderPreview(componentName, options) {
+  const stylesPath = '/stylesheets/govuk-frontend.min.css'
+  const scriptsPath = '/javascripts/govuk-frontend.min.js'
+
+  // Render component (optional)
+  const componentHtml = componentName
+    ? renderComponent(componentName, options)
+    : ''
+
+  // Render page template
+  return renderTemplate('govuk/template.njk', {
+    blocks: {
+      pageTitle: 'Test boilerplate - GOV.UK',
+      head: outdent`
+        <link rel="stylesheet" href="${stylesPath}">
+
+        <script type="importmap">
+          { "imports": { "govuk-frontend": "${scriptsPath}" } }
+        </script>
+      `,
+
+      // Remove default template blocks
+      skipLink: '',
+      bodyStart: '',
+      header: '',
+      footer: '',
+
+      content: outdent`
+        <h1 class="govuk-heading-l">Test boilerplate</h1>
+        <p class="govuk-body">Used during testing to inject rendered components and test specific configurations</p>
+
+        <div id="slot" class="govuk-!-margin-top-6">
+          ${componentHtml}
+        </div>
+      `,
+
+      bodyEnd: outdent`
+        <script type="module" src="${scriptsPath}"></script>
+      `
+    },
+    context: {
+      mainClasses: 'govuk-main-wrapper--auto-spacing'
+    }
+  })
+}
+
 /**
  * Render string
  *
@@ -212,6 +265,7 @@ module.exports = {
   nunjucksEnv,
   renderComponent,
   renderMacro,
+  renderPreview,
   renderString,
   renderTemplate
 }