Move devtool view context into separate function

Author: alexluckett

src/server/plugins/engine/configureEnginePlugin.ts

@@ -9,6 +9,7 @@ import {
   type PluginOptions
 } from '~/src/server/plugins/engine/plugin.js'
 import { findPackageRoot } from '~/src/server/plugins/engine/plugin.js'
+import { devtoolContext } from '~/src/server/plugins/nunjucks/context.js'
 import { type RouteConfig } from '~/src/server/types.js'
 
 export const configureEnginePlugin = async ({
@@ -36,9 +37,7 @@ export const configureEnginePlugin = async ({
       nunjucks: {
         paths: [join(findPackageRoot(), 'src/server/devserver')] // custom layout to make it really clear this is not the same as the runner
       },
-      viewContext: () => ({
-        baseLayoutPath: 'dxt-devtool-baselayout.html' // from plugin.options.nunjucks.paths
-      })
+      viewContext: devtoolContext
     }
   }
 }

src/server/plugins/nunjucks/context.js

@@ -22,17 +22,6 @@ let webpackManifest
  * @param {FormRequest | FormRequestPayload | null} request
  */
 export function context(request) {
-  const manifestPath = join(config.get('publicDir'), 'assets-manifest.json')
-
-  if (!webpackManifest) {
-    try {
-      // eslint-disable-next-line -- Allow JSON type 'any'
-      webpackManifest = JSON.parse(readFileSync(manifestPath, 'utf-8'))
-    } catch {
-      logger.error(`Webpack ${basename(manifestPath)} not found`)
-    }
-  }
-
   const { params, path, response } = request ?? {}
 
   const isPreviewMode = path?.startsWith(PREVIEW_PATH_PREFIX)
@@ -54,7 +43,6 @@ export function context(request) {
     // take consumers props first so we can override it
     ...consumerViewContext,
     appVersion: pkg.version,
-    assetPath: '/assets',
     config: {
       cdpEnvironment: config.get('cdpEnvironment'),
       designerUrl: config.get('designerUrl'),
@@ -66,14 +54,34 @@ export function context(request) {
     crumb: safeGenerateCrumb(request),
     currentPath: request ? `${request.path}${request.url.search}` : undefined,
     previewMode: isPreviewMode ? params?.state : undefined,
-    slug: isResponseOK ? params?.slug : undefined,
+    slug: isResponseOK ? params?.slug : undefined
+  }
+
+  return ctx
+}
 
+/**
+ * Returns the context for the devtool. Consumers won't have access to this.
+ */
+export function devtoolContext() {
+  const manifestPath = join(config.get('publicDir'), 'assets-manifest.json')
+
+  if (!webpackManifest) {
+    try {
+      // eslint-disable-next-line -- Allow JSON type 'any'
+      webpackManifest = JSON.parse(readFileSync(manifestPath, 'utf-8'))
+    } catch {
+      logger.error(`Webpack ${basename(manifestPath)} not found`)
+    }
+  }
+
+  return {
+    baseLayoutPath: 'dxt-devtool-baselayout.html', // from plugin.options.nunjucks.paths
+    assetPath: '/assets',
     getDxtAssetPath: (asset = '') => {
       return `/${webpackManifest?.[asset] ?? asset}`
     }
   }
-
-  return ctx
 }
 
 /**

src/server/plugins/nunjucks/context.test.js

@@ -2,21 +2,24 @@ import { tmpdir } from 'node:os'
 
 import { config } from '~/src/config/index.js'
 import { encodeUrl } from '~/src/server/plugins/engine/helpers.js'
-import { context } from '~/src/server/plugins/nunjucks/context.js'
+import {
+  context,
+  devtoolContext
+} from '~/src/server/plugins/nunjucks/context.js'
 
 describe('Nunjucks context', () => {
   beforeEach(() => jest.resetModules())
 
   describe('Asset path', () => {
     it("should include 'assetPath' for GOV.UK Frontend icons", () => {
-      const { assetPath } = context(null)
+      const { assetPath } = devtoolContext()
       expect(assetPath).toBe('/assets')
     })
   })
 
   describe('Asset helper', () => {
     it("should locate 'assets-manifest.json' assets", () => {
-      const { getDxtAssetPath } = context(null)
+      const { getDxtAssetPath } = devtoolContext()
 
       expect(getDxtAssetPath('example.scss')).toBe(
         '/stylesheets/example.xxxxxxx.min.css'
@@ -32,13 +35,13 @@ describe('Nunjucks context', () => {
         const { config } = await import('~/src/config/index.js')
 
         // Import when isolated to avoid cache
-        const { context } = await import(
+        const { devtoolContext } = await import(
           '~/src/server/plugins/nunjucks/context.js'
         )
 
         // Update config for missing manifest
         config.set('publicDir', tmpdir())
-        const { getDxtAssetPath } = context(null)
+        const { getDxtAssetPath } = devtoolContext()
 
         // Uses original paths when missing
         expect(getDxtAssetPath('example.scss')).toBe('/example.scss')
@@ -47,7 +50,7 @@ describe('Nunjucks context', () => {
     })
 
     it('should return path to unknown assets', () => {
-      const { getDxtAssetPath } = context(null)
+      const { getDxtAssetPath } = devtoolContext()
 
       expect(getDxtAssetPath()).toBe('/')
       expect(getDxtAssetPath('example.jpg')).toBe('/example.jpg')

src/server/plugins/nunjucks/types.js

@@ -12,14 +12,12 @@
 /**
  * @typedef {object} ViewContext - Nunjucks view context
  * @property {string} appVersion - Application version
- * @property {string} assetPath - Asset path
  * @property {Partial<Config>} config - Application config properties
  * @property {string} [crumb] - Cross-Site Request Forgery (CSRF) token
  * @property {string} [cspNonce] - Content Security Policy (CSP) nonce
  * @property {string} [currentPath] - Current path
  * @property {string} [previewMode] - Preview mode
  * @property {string} [slug] - Form slug
- * @property {(asset?: string) => string} getDxtAssetPath - Asset path resolver
  * @property {FormContext} [context] - the current form context
  * @property {PluginOptions['viewContext']} [injectedViewContext] - the current form context
  */