take nunjucks paths and view context from consumer

Author: alexluckett

src/server/plugins/engine/configureEnginePlugin.ts

@@ -31,8 +31,11 @@ export const configureEnginePlugin = async ({
       model,
       services,
       controllers,
+      nunjucks: {
+        paths: [] // TODO
+      }
       viewContext: {
-        baseLayoutPath: 'layout.html'
+        baseLayoutPath: 'layout.html' // govuk-frontend
       }
     }
   }

src/server/plugins/engine/plugin.ts

@@ -1,3 +1,7 @@
+import { existsSync } from 'fs'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+
 import { hasFormComponents, slugSchema } from '@defra/forms-model'
 import Boom from '@hapi/boom'
 import {
@@ -11,6 +15,9 @@ import vision from '@hapi/vision'
 import { isEqual } from 'date-fns'
 import Joi from 'joi'
 import nunjucks, { type Environment } from 'nunjucks'
+import resolvePkg from 'resolve'
+
+import { paths } from '../nunjucks/environment.js'
 
 import { PREVIEW_PATH_PREFIX } from '~/src/server/constants.js'
 import {
@@ -65,6 +72,20 @@ import * as httpService from '~/src/server/services/httpService.js'
 import { CacheService } from '~/src/server/services/index.js'
 import { type Services } from '~/src/server/types.js'
 
+function findPackageRoot() {
+  const currentFileName = fileURLToPath(import.meta.url)
+  const currentDirectoryName = dirname(currentFileName)
+
+  let dir = currentDirectoryName
+  while (dir !== '/') {
+    if (existsSync(join(dir, 'package.json'))) {
+      return dir
+    }
+    dir = dirname(dir)
+  }
+
+  throw new Error('package.json not found in parent directories')
+}
 export interface PluginOptions {
   model?: FormModel
   services?: Services
@@ -73,6 +94,9 @@ export interface PluginOptions {
   viewPaths?: string[]
   filters?: Record<string, FilterFunction>
   pluginPath?: string
+  nunjucks: {
+    paths: string[]
+  }
   viewContext: {
     baseLayoutPath: string
   }
@@ -88,24 +112,25 @@ export const plugin = {
       services = defaultServices,
       controllers,
       cacheName,
-      viewPaths,
       filters,
-      pluginPath = PLUGIN_PATH,
+      nunjucks: nunjucksOptions,
       viewContext
     } = options
     const { formsService } = services
     const cacheService = new CacheService(server, cacheName)
 
-    // Paths array to tell `vision` and `nunjucks` where template files are stored.
-    // We need to include `VIEW_PATH` in addition the runtime path (node_modules)
-    // to keep the local tests working
-    const path = [`${pluginPath}/${VIEW_PATH}`, VIEW_PATH]
+    const packageRoot = findPackageRoot()
+    const govukFrontendPath = dirname(
+      resolvePkg.sync('govuk-frontend/package.json')
+    )
 
-    // Include any additional user provided view paths so our internal views engine
-    // can find any files they provide from the consumer side if using custom `page.view`s
-    if (Array.isArray(viewPaths) && viewPaths.length) {
-      path.push(...viewPaths)
-    }
+    const viewPathResolved = join(packageRoot, VIEW_PATH)
+
+    const paths = [
+      ...nunjucksOptions.paths,
+      viewPathResolved,
+      join(govukFrontendPath, 'dist')
+    ]
 
     await server.register({
       plugin: vision,
@@ -131,10 +156,7 @@ export const plugin = {
             ) => {
               // Nunjucks also needs an additional path configuration
               // to use the templates and macros from `govuk-frontend`
-              const environment = nunjucks.configure([
-                ...path,
-                'node_modules/govuk-frontend/dist'
-              ])
+              const environment = nunjucks.configure(paths)
 
               // Applies custom filters and globals for nunjucks
               // that are required by the `forms-engine-plugin`
@@ -146,7 +168,7 @@ export const plugin = {
             }
           }
         },
-        path,
+        path: paths,
         // Provides global context used with all templates
         context
       }

src/server/plugins/engine/views/file-upload.html

@@ -35,7 +35,7 @@
 {% block bodyEnd %}
   {{ super() }}
   <script type="module" nonce="{{ cspNonce }}">
-    import { initFileUpload } from '{{ getAssetPath("file-upload.js") }}';
+    import { initFileUpload } from '{{ getDxtAssetPath("file-upload.js") }}';
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initFileUpload);
     } else {

src/server/plugins/engine/views/layout.html

@@ -44,9 +44,13 @@ export function context(request) {
   const isResponseOK =
     !Boom.isBoom(response) && response?.statusCode === StatusCodes.OK
 
+  const consumerViewContext =
+    request?.server.plugins['forms-engine-plugin'].viewContext(request)
+
   /** @type {ViewContext} */
   const ctx = {
-    ...request?.server.plugins['forms-engine-plugin'].viewContext, // take consumers props first so we can override it
+    // take consumers props first so we can override it
+    ...consumerViewContext,
     appVersion: pkg.version,
     assetPath: '/assets',
     config: {
@@ -64,7 +68,7 @@ export function context(request) {
     previewMode: isPreviewMode ? params?.state : undefined,
     slug: isResponseOK ? params?.slug : undefined,
 
-    getAssetPath: (asset = '') => {
+    getDxtAssetPath: (asset = '') => {
       return `/${webpackManifest?.[asset] ?? asset}`
     }
   }

src/server/plugins/nunjucks/context.js

@@ -16,13 +16,13 @@ describe('Nunjucks context', () => {
 
   describe('Asset helper', () => {
     it("should locate 'assets-manifest.json' assets", () => {
-      const { getAssetPath } = context(null)
+      const { getDxtAssetPath } = context(null)
 
-      expect(getAssetPath('example.scss')).toBe(
+      expect(getDxtAssetPath('example.scss')).toBe(
         '/stylesheets/example.xxxxxxx.min.css'
       )
 
-      expect(getAssetPath('example.mjs')).toBe(
+      expect(getDxtAssetPath('example.mjs')).toBe(
         '/javascripts/example.xxxxxxx.min.js'
       )
     })
@@ -38,20 +38,20 @@ describe('Nunjucks context', () => {
 
         // Update config for missing manifest
         config.set('publicDir', tmpdir())
-        const { getAssetPath } = context(null)
+        const { getDxtAssetPath } = context(null)
 
         // Uses original paths when missing
-        expect(getAssetPath('example.scss')).toBe('/example.scss')
-        expect(getAssetPath('example.mjs')).toBe('/example.mjs')
+        expect(getDxtAssetPath('example.scss')).toBe('/example.scss')
+        expect(getDxtAssetPath('example.mjs')).toBe('/example.mjs')
       })
     })
 
     it('should return path to unknown assets', () => {
-      const { getAssetPath } = context(null)
+      const { getDxtAssetPath } = context(null)
 
-      expect(getAssetPath()).toBe('/')
-      expect(getAssetPath('example.jpg')).toBe('/example.jpg')
-      expect(getAssetPath('example.gif')).toBe('/example.gif')
+      expect(getDxtAssetPath()).toBe('/')
+      expect(getDxtAssetPath('example.jpg')).toBe('/example.jpg')
+      expect(getDxtAssetPath('example.gif')).toBe('/example.gif')
     })
   })
 

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

@@ -20,7 +20,7 @@
  * @property {string} [currentPath] - Current path
  * @property {string} [previewMode] - Preview mode
  * @property {string} [slug] - Form slug
- * @property {(asset?: string) => string} getAssetPath - Asset path resolver
+ * @property {(asset?: string) => string} getDxtAssetPath - Asset path resolver
  * @property {FormContext} [context] - the current form context
  * @property {PluginOptions['viewContext']} [injectedViewContext] - the current form context
  */

src/server/plugins/nunjucks/types.js

@@ -5,6 +5,7 @@ import { type ServerYar, type Yar } from '@hapi/yar'
 import { type Logger } from 'pino'
 
 import { type FormModel } from '~/src/server/plugins/engine/models/index.js'
+import { type context } from '~/src/server/plugins/engine/nunjucks.js'
 import { type ViewContext } from '~/src/server/plugins/nunjucks/types.js'
 import {
   type FormRequest,
@@ -21,7 +22,7 @@ declare module '@hapi/hapi' {
     }
     'forms-engine-plugin': {
       cacheService: CacheService
-      viewContext: ViewContext
+      viewContext: context
     }
   }