Merge pull request #4329 from alphagov/render-template

Add lib functions `renderTemplate()` and `renderPreview()` etc
alphagov · Oct 20, 2023 · c7d8179 · c7d8179
2 parents db8f8e8 + 699dccc
commit c7d8179
Show file tree

Hide file tree

Showing 33 changed files with 447 additions and 361 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -1,26 +1,24 @@
-import { renderComponent } from '@govuk-frontend/lib/components'
+import { render } from '@govuk-frontend/lib/components'
 import beautify from 'js-beautify'
 
 /**
  * Component HTML code (formatted)
  *
  * @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
@@ -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
@@ -38,12 +38,16 @@
       {% set codeExamplesHtml %}
         <h4 class="govuk-heading-s">Markup</h4>
         <pre class="app-code"><code tabindex="0" class="app-code__container hljs language-html">
-          {{- getHTMLCode(componentName, example.options) | highlight("html") | safe -}}
+          {{- getHTMLCode(componentName, {
+            context: example.options
+          }) | highlight("html") | safe -}}
         </code></pre>
 
         <h4 class="govuk-heading-s">Macro</h4>
         <pre class="app-code"><code tabindex="0" class="app-code__container hljs language-js">
-          {{- getNunjucksCode(componentName, example.options) | highlight("js") | safe -}}
+          {{- getNunjucksCode(componentName, {
+            context: example.options
+          }) | highlight("js") | safe -}}
         </code></pre>
       {% endset %}
 

diff --git a/packages/govuk-frontend-review/src/views/tests/boilerplate.njk b/packages/govuk-frontend-review/src/views/tests/boilerplate.njk
diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise,
+  render,
   getAccessibleName
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
@@ -685,7 +685,7 @@ describe('/components/accordion', () => {
           })
 
           it('injects the localised strings as text not HTML', async () => {
-            await renderAndInitialise(page, 'accordion', examples.default, {
+            await render(page, 'accordion', examples.default, {
               config: {
                 i18n: {
                   showAllSections: 'Show <strong>all sections</strong>',
@@ -721,7 +721,7 @@ describe('/components/accordion', () => {
 
           it('throws when GOV.UK Frontend is not supported', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation() {
                   document.body.classList.remove('govuk-frontend-supported')
                 }
@@ -734,7 +734,7 @@ describe('/components/accordion', () => {
 
           it('throws when $module is not set', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   $module.remove()
                 }
@@ -747,7 +747,7 @@ describe('/components/accordion', () => {
 
           it('throws when receiving the wrong type for $module', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
                   $module.outerHTML = `<svg data-module="govuk-accordion"></svg>`

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('/components/button', () => {
@@ -178,7 +175,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -237,16 +234,11 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(
-          page,
-          'button',
-          examples["don't prevent double click"],
-          {
-            config: {
-              preventDoubleClick: true
-            }
+        await render(page, 'button', examples["don't prevent double click"], {
+          config: {
+            preventDoubleClick: true
           }
-        )
+        })
 
         $button = await setButtonTracking(await page.$('button'))
       })
@@ -266,7 +258,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -329,7 +321,7 @@ describe('/components/button', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -342,7 +334,7 @@ describe('/components/button', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -355,7 +347,7 @@ describe('/components/button', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-button"></svg>`

diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs
@@ -1,4 +1,4 @@
-import { getExamples, renderComponent } from '@govuk-frontend/lib/components'
+import { getExamples, render } from '@govuk-frontend/lib/components'
 
 import { CharacterCount } from './character-count.mjs'
 
@@ -7,10 +7,7 @@ describe('CharacterCount', () => {
 
   beforeAll(async () => {
     const examples = await getExamples('character-count')
-    html = renderComponent(
-      'character-count',
-      examples['to configure in JavaScript']
-    )
+    html = render('character-count', examples['to configure in JavaScript'])
   })
 
   beforeEach(async () => {