Use locally installed govuk-frontend for component names, files, data

packages/govuk-frontend-review/package.json

@@ -33,7 +33,6 @@
     "iframe-resizer": "^4.3.6",
     "js-beautify": "^1.14.9",
     "marked": "^7.0.0",
-    "nunjucks": "^3.2.4",
     "outdent": "^0.8.0",
     "shuffle-seed": "^1.1.6",
     "slug": "^8.2.3"
@@ -57,5 +56,8 @@
     "slash": "^5.1.0",
     "supertest": "^6.3.3",
     "typedoc": "^0.24.8"
+  },
+  "optionalDependencies": {
+    "nunjucks": "^3.2.4"
   }
 }

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

@@ -1,12 +1,13 @@
 import express from 'express'
+import { paths } from 'govuk-frontend-config'
 import {
   getComponentsFixtures,
   getComponentNames,
-  filterPath
-} from 'govuk-frontend-lib/files'
-import { componentNameToMacroName } from 'govuk-frontend-lib/names'
+  getComponentNamesFiltered,
+  renderComponent
+} from 'govuk-frontend-lib/components'
+import { filterPath } from 'govuk-frontend-lib/files'
 import { getStats, modulePaths } from 'govuk-frontend-stats'
-import { outdent } from 'outdent'
 
 import { getExampleNames, getFullPageExamples } from './common/lib/files.mjs'
 import * as middleware from './common/middleware/index.mjs'
@@ -16,6 +17,10 @@ import * as routes from './routes/index.mjs'
 export default async () => {
   const app = express()
 
+  // Resolve GOV.UK Frontend from review app `node_modules`
+  // to allow previous versions to be installed locally
+  const packageOptions = { moduleRoot: paths.app }
+
   // Cache mapped components and examples
   const [
     componentsFixtures,
@@ -24,14 +29,16 @@ export default async () => {
     exampleNames,
     fullPageExamples
   ] = await Promise.all([
-    getComponentsFixtures(),
+    getComponentsFixtures(packageOptions),
 
     // Components list
-    getComponentNames(),
+    getComponentNames(packageOptions),
 
     // Components list (with JavaScript only)
-    getComponentNames((componentName, componentFiles) =>
-      componentFiles.some(filterPath([`**/${componentName}.mjs`]))
+    getComponentNamesFiltered(
+      (componentName, componentFiles) =>
+        componentFiles.some(filterPath([`**/${componentName}.mjs`])),
+      packageOptions
     ),
 
     getExampleNames(),
@@ -148,15 +155,10 @@ export default async () => {
       }
 
       // Construct and evaluate the component with the data for this example
-      const macroName = componentNameToMacroName(componentName)
-      const macroParameters = JSON.stringify(fixture.options, null, '\t')
-
-      res.locals.componentView = env.renderString(
-        outdent`
-      {% from "govuk/components/${componentName}/macro.njk" import ${macroName} %}
-      {{ ${macroName}(${macroParameters}) }}
-    `,
-        {}
+      res.locals.componentView = renderComponent(
+        componentName,
+        fixture.options,
+        { env }
       )
 
       let bodyClasses = 'app-template__body'
@@ -208,5 +210,5 @@ export default async () => {
 }
 
 /**
- * @typedef {import('govuk-frontend-lib/files').ComponentFixtures} ComponentFixtures
+ * @typedef {import('govuk-frontend-lib/components').ComponentFixtures} ComponentFixtures
  */

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

@@ -1,7 +1,7 @@
 import { load } from 'cheerio'
 import { ports } from 'govuk-frontend-config'
 import { fetchPath } from 'govuk-frontend-helpers/tests'
-import { getComponentNames } from 'govuk-frontend-lib/files'
+import { getComponentNames } from 'govuk-frontend-lib/components'
 
 const expectedPages = [
   '/',

packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs

@@ -1,24 +1,19 @@
-import { paths } from 'govuk-frontend-config'
-import { packageTypeToPath } from 'govuk-frontend-lib/names'
+import { renderComponent } 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 {unknown} params - Component macro params
- * @returns {string} Nunjucks code
+ * @param {MacroOptions} [params] - Nunjucks macro options (or params)
+ * @returns {string} HTML rendered by the component
  */
 export function getHTMLCode(componentName, params) {
-  const templatePath = packageTypeToPath('govuk-frontend', {
-    modulePath: `components/${componentName}/template.njk`,
-    moduleRoot: paths.app
+  const html = renderComponent(componentName, params, {
+    env: this.env
   })
 
-  // Render to HTML
-  const html = this.env.render(templatePath, { params }).trim()
-
   // Default beautify options
   const options = beautify.html.defaultOptions()
 
@@ -32,3 +27,7 @@ export function getHTMLCode(componentName, params) {
     wrap_attributes: 'preserve'
   })
 }
+
+/**
+ * @typedef {import('govuk-frontend-lib/components').MacroOptions} MacroOptions
+ */

packages/govuk-frontend-review/src/common/nunjucks/globals/get-nunjucks-code.mjs

@@ -9,8 +9,8 @@ import { componentNameToMacroName } from '../filters/index.mjs'
  * Component Nunjucks code (formatted)
  *
  * @param {string} componentName - Component name
- * @param {unknown} params - Component macro params
- * @returns {string} Nunjucks code
+ * @param {MacroOptions} [params] - Nunjucks macro options (or params)
+ * @returns {string} Nunjucks code for the component
  */
 export function getNunjucksCode(componentName, params) {
   const macroName = componentNameToMacroName(componentName)
@@ -37,3 +37,7 @@ export function getNunjucksCode(componentName, params) {
     {{ ${macroFormatted.trim()} }}
   `
 }
+
+/**
+ * @typedef {import('govuk-frontend-lib/components').MacroOptions} MacroOptions
+ */

packages/govuk-frontend-review/src/common/nunjucks/index.mjs

@@ -1,8 +1,7 @@
 import { join } from 'path'
 
 import { paths } from 'govuk-frontend-config'
-import { packageResolveToPath } from 'govuk-frontend-lib/names'
-import nunjucks from 'nunjucks'
+import { nunjucksEnv } from 'govuk-frontend-lib/components'
 
 import * as filters from './filters/index.mjs'
 import * as globals from './globals/index.mjs'
@@ -14,23 +13,15 @@ import * as globals from './globals/index.mjs'
  * @returns {import('nunjucks').Environment} Nunjucks Environment
  */
 export function renderer(app) {
-  const env = nunjucks.configure(
-    [
-      join(paths.app, 'src/views'),
-
-      // Remove `govuk/` suffix using `modulePath`
-      packageResolveToPath('govuk-frontend', {
-        modulePath: '../',
-        moduleRoot: paths.app
-      })
-    ],
+  const env = nunjucksEnv(
+    [join(paths.app, 'src/views')],
     {
-      autoescape: true, // output with dangerous characters are escaped automatically
       express: app, // the Express.js review app that nunjucks should install to
       noCache: true, // never use a cache and recompile templates each time
-      trimBlocks: true, // automatically remove trailing newlines from a block/tag
-      lstripBlocks: true, // automatically remove leading whitespace from a block/tag
       watch: true // reload templates when they are changed. needs chokidar dependency to be installed
+    },
+    {
+      moduleRoot: paths.app
     }
   )
 

packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.mjs

@@ -1,10 +1,7 @@
 import { join } from 'path'
 
-import {
-  filterPath,
-  getComponentNames,
-  getListing
-} from 'govuk-frontend-lib/files'
+import { getComponentNames } from 'govuk-frontend-lib/components'
+import { filterPath, getListing } from 'govuk-frontend-lib/files'
 import {
   componentNameToMacroName,
   packageNameToPath

packages/govuk-frontend/src/govuk/all.mjs

@@ -19,7 +19,7 @@ import { Tabs } from './components/tabs/tabs.mjs'
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config} [config] - Config for all components
+ * @param {Config & { scope?: Element }} [config] - Config for all components (with optional scope)
  */
 function initAll(config) {
   config = typeof config !== 'undefined' ? config : {}
@@ -124,7 +124,6 @@ export {
  * Config for all components via `initAll()`
  *
  * @typedef {object} Config
- * @property {Element} [scope=document] - Scope to query for components
  * @property {AccordionConfig} [accordion] - Accordion config
  * @property {ButtonConfig} [button] - Button config
  * @property {CharacterCountConfig} [characterCount] - Character Count config

packages/govuk-frontend/src/govuk/components/accordion/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/accordion', () => {
   let axeRules

packages/govuk-frontend/src/govuk/components/accordion/accordion.test.js

@@ -4,7 +4,7 @@ const {
   renderAndInitialise,
   getAccessibleName
 } = require('govuk-frontend-helpers/puppeteer')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('/components/accordion', () => {
   describe('/components/accordion/preview', () => {

packages/govuk-frontend/src/govuk/components/accordion/template.test.js

@@ -1,5 +1,5 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('Accordion', () => {
   let examples

packages/govuk-frontend/src/govuk/components/back-link/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/back-link', () => {
   describe('component examples', () => {

packages/govuk-frontend/src/govuk/components/back-link/template.test.js

@@ -1,5 +1,5 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('back-link component', () => {
   let examples

packages/govuk-frontend/src/govuk/components/breadcrumbs/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/breadcrumbs', () => {
   describe('component examples', () => {

packages/govuk-frontend/src/govuk/components/breadcrumbs/template.test.js

@@ -1,5 +1,5 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('Breadcrumbs', () => {
   let examples

packages/govuk-frontend/src/govuk/components/button/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/button', () => {
   let axeRules

packages/govuk-frontend/src/govuk/components/button/button.test.js

@@ -3,7 +3,7 @@ const {
   goToComponent,
   renderAndInitialise
 } = require('govuk-frontend-helpers/puppeteer')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('/components/button', () => {
   let examples
@@ -92,9 +92,9 @@ describe('/components/button', () => {
                 counts.debounce++
                 el.dataset.debounceCount = `${counts.debounce}`
               }
-            },
 
-            // Add listener during capture phase to spy on event
+              // Add listener during capture phase to spy on event
+            },
             { capture: true }
           ),
         counts

packages/govuk-frontend/src/govuk/components/button/template.test.js

@@ -1,5 +1,5 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('Button', () => {
   let examples

packages/govuk-frontend/src/govuk/components/character-count/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/character-count', () => {
   describe('component examples', () => {

packages/govuk-frontend/src/govuk/components/character-count/character-count.test.js

@@ -2,7 +2,7 @@ const {
   goToComponent,
   renderAndInitialise
 } = require('govuk-frontend-helpers/puppeteer')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('Character count', () => {
   let examples

packages/govuk-frontend/src/govuk/components/character-count/template.test.js

@@ -1,6 +1,6 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
 const { htmlWithClassName } = require('govuk-frontend-helpers/tests')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 const WORD_BOUNDARY = '\\b'
 

packages/govuk-frontend/src/govuk/components/checkboxes/accessibility.test.mjs

@@ -1,5 +1,5 @@
 import { axe, goToComponent } from 'govuk-frontend-helpers/puppeteer'
-import { getExamples } from 'govuk-frontend-lib/files'
+import { getExamples } from 'govuk-frontend-lib/components'
 
 describe('/components/checkboxes', () => {
   let axeRules

packages/govuk-frontend/src/govuk/components/checkboxes/checkboxes.test.js

@@ -6,7 +6,7 @@ const {
   isVisible,
   renderAndInitialise
 } = require('govuk-frontend-helpers/puppeteer')
-const { getExamples } = require('govuk-frontend-lib/files.js')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 describe('Checkboxes with conditional reveals', () => {
   describe('when JavaScript is unavailable or fails', () => {

packages/govuk-frontend/src/govuk/components/checkboxes/template.test.js

@@ -1,6 +1,6 @@
 const { render } = require('govuk-frontend-helpers/nunjucks')
 const { htmlWithClassName } = require('govuk-frontend-helpers/tests')
-const { getExamples } = require('govuk-frontend-lib/files')
+const { getExamples } = require('govuk-frontend-lib/components')
 
 const WORD_BOUNDARY = '\\b'
 const WHITESPACE = '\\s'