Merge pull request #4202 from alphagov/fix-preview-code

Fix Review app code examples using `example.options`

Author: colinrotherham

package-lock.json

@@ -25,7 +25,6 @@
     "@govuk-frontend/lib": "*",
     "@govuk-frontend/stats": "*",
     "@prettier/sync": "^0.3.0",
-    "chokidar": "^3.5.3",
     "cookie-parser": "^1.4.6",
     "express": "^4.18.2",
     "express-validator": "^7.0.1",

packages/govuk-frontend-review/package.json

@@ -46,9 +46,10 @@ export default async () => {
   ])
 
   // Feature flags
-  const flags = {
-    isDeployedToHeroku: !!process.env.HEROKU_APP
-  }
+  const flags = /** @type {FeatureFlags} */ ({
+    isDeployedToHeroku: !!process.env.HEROKU_APP,
+    isDevelopment: !['test', 'production'].includes(process.env.NODE_ENV)
+  })
 
   // Set up Express.js
   app.set('flags', flags)
@@ -207,3 +208,9 @@ export default async () => {
 /**
  * @typedef {import('@govuk-frontend/lib/components').ComponentFixtures} ComponentFixtures
  */
+
+/**
+ * @typedef {object} FeatureFlags
+ * @property {boolean} isDeployedToHeroku - Review app using `HEROKU_APP`
+ * @property {boolean} isDevelopment - Review app not using `NODE_ENV` production or test
+ */

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

@@ -16,7 +16,8 @@ router.get('/', (req, res) => {
  * Sass docs latest release (when deployed)
  */
 router.use('/sass', ({ app }, res, next) => {
-  const { isDeployedToHeroku } = app.get('flags')
+  const { isDeployedToHeroku } =
+    /** @type {import('../../app.mjs').FeatureFlags} */ (app.get('flags'))
 
   if (isDeployedToHeroku) {
     return res.redirect(

packages/govuk-frontend-review/src/common/middleware/docs.mjs

@@ -13,12 +13,17 @@ import * as globals from './globals/index.mjs'
  * @returns {import('nunjucks').Environment} Nunjucks Environment
  */
 export function renderer(app) {
+  const flags = /** @type {import('../../app.mjs').FeatureFlags} */ (
+    app.get('flags')
+  )
+
   const env = nunjucksEnv(
     [join(paths.app, 'src/views')],
     {
+      dev: true, // log stack traces
       express: app, // the Express.js review app that nunjucks should install to
-      noCache: true, // never use a cache and recompile templates each time
-      watch: true // reload templates when they are changed. needs chokidar dependency to be installed
+      noCache: !flags.isDeployedToHeroku, // use cache when deployed only
+      watch: flags.isDevelopment // reload templates in development only
     },
     {
       moduleRoot: paths.app
@@ -29,7 +34,7 @@ export function renderer(app) {
   app.set('view engine', 'njk')
 
   // Share feature flags with middleware
-  env.addGlobal('flags', app.get('flags'))
+  env.addGlobal('flags', flags)
 
   // Custom filters
   for (const key in filters) {

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

@@ -35,8 +35,22 @@
     </div>
 
     <div class="govuk-width-container">
-      {% set detailsHtml %}{% include "partials/code.njk" %}{% endset %}
-      {{- govukDetails({ summaryText: "Code", html: detailsHtml }) -}}
+      {% 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 -}}
+        </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 -}}
+        </code></pre>
+      {% endset %}
+
+      {{ govukDetails({
+        summaryText: "Code",
+        html: codeExamplesHtml
+      }) }}
     </div>
 
   </section>