Build tasks: Clearly show subdirectory paths

app/src/app.mjs

@@ -1,6 +1,8 @@
+import { join } from 'path'
+
 import express from 'express'
 
-import configPaths from '../../config/paths.js'
+import { paths } from '../../config/index.js'
 import { getDirectories, getComponentsData, getFullPageExamples } from '../../lib/file-helper.js'
 import { componentNameToMacroName } from '../../lib/helper-functions.js'
 
@@ -14,8 +16,8 @@ export default async () => {
   // Cache mapped components and examples
   const [componentsData, componentNames, exampleNames, fullPageExamples] = await Promise.all([
     getComponentsData(),
-    getDirectories(configPaths.components),
-    getDirectories(configPaths.examples),
+    getDirectories(join(paths.src, 'govuk/components')),
+    getDirectories(join(paths.app, 'src/views/examples')),
     getFullPageExamples()
   ])
 

app/src/app.test.mjs

@@ -1,3 +1,5 @@
+import { join } from 'path'
+
 import { load } from 'cheerio'
 
 import { paths, ports } from '../../config/index.js'
@@ -45,7 +47,7 @@ describe(`http://localhost:${ports.app}`, () => {
       const response = await fetchPath('/')
       const $ = load(await response.text())
 
-      const componentNames = await getDirectories(paths.components)
+      const componentNames = await getDirectories(join(paths.src, 'govuk/components'))
       const componentsList = $('li a[href^="/components/"]').get()
 
       // Since we have an 'all' component link that renders the default example of all

app/src/common/middleware/assets.mjs

@@ -2,15 +2,15 @@ import { join } from 'path'
 
 import express from 'express'
 
-import configPaths from '../../../../config/paths.js'
+import { paths } from '../../../../config/index.js'
 
 const router = express.Router()
 
 /**
  * Add middleware to serve static assets
  */
-router.use('/assets', express.static(join(configPaths.public, 'assets')))
-router.use('/javascripts', express.static(join(configPaths.public, 'javascripts')))
-router.use('/stylesheets', express.static(join(configPaths.public, 'stylesheets')))
+router.use('/assets', express.static(join(paths.public, 'assets')))
+router.use('/javascripts', express.static(join(paths.public, 'javascripts')))
+router.use('/stylesheets', express.static(join(paths.public, 'stylesheets')))
 
 export default router

app/src/common/middleware/docs.mjs

@@ -1,6 +1,6 @@
 import express from 'express'
 
-import configPaths from '../../../../config/paths.js'
+import { paths } from '../../../../config/index.js'
 
 const router = express.Router()
 
@@ -27,7 +27,7 @@ router.use('/sass', ({ app }, res, next) => {
 /**
  * Add middleware
  */
-router.use('/sass', express.static(configPaths.sassdoc))
-router.use('/javascript', express.static(configPaths.jsdoc))
+router.use('/sass', express.static(paths.sassdoc))
+router.use('/javascript', express.static(paths.jsdoc))
 
 export default router

app/src/common/nunjucks/globals/get-html-code.mjs

@@ -12,7 +12,7 @@ import { paths } from '../../../../../config/index.js'
  * @returns {string} Nunjucks code
  */
 export function getHTMLCode (componentName, params) {
-  const templatePath = join(paths.components, componentName, 'template.njk')
+  const templatePath = join(paths.src, 'govuk/components', componentName, 'template.njk')
 
   // Render to HTML
   const html = this.env.render(templatePath, { params }).trim()

app/src/common/nunjucks/index.mjs

@@ -10,11 +10,11 @@ import * as globals from './globals/index.mjs'
 
 export function renderer (app) {
   const appViews = [
-    paths.layouts,
-    paths.views,
-    paths.components,
+    join(paths.app, 'src/views/layouts'),
+    join(paths.app, 'src/views'),
+    join(paths.src, 'govuk/components'),
     join(paths.src, 'govuk'),
-    join(paths.node_modules, 'govuk_template_jinja')
+    join(paths.root, 'node_modules/govuk_template_jinja')
   ]
 
   // Initialise nunjucks environment

config/jest/globals.mjs

@@ -1,5 +1,7 @@
+import { join } from 'path'
+
 import { getDirectories, getComponentsData } from '../../lib/file-helper.js'
-import configPaths from '../paths.js'
+import { paths } from '../index.js'
 
 /**
  * Cache store
@@ -9,10 +11,10 @@ const store = new Map()
 /**
  * Cache frequently used paths
  */
-const paths = [
-  configPaths.components,
-  configPaths.examples,
-  configPaths.fullPageExamples
+const cachePaths = [
+  join(paths.src, 'govuk/components'),
+  join(paths.app, 'src/views/examples'),
+  join(paths.app, 'src/views/full-page-examples')
 ]
 
 /**
@@ -23,7 +25,7 @@ export async function globals () {
     const componentsData = await getComponentsData()
 
     // Run directory lookups
-    const directoryEntries = await Promise.all(paths.map(
+    const directoryEntries = await Promise.all(cachePaths.map(
       async (path) => [path, await getDirectories(path)]
     ))
 

config/paths.js

@@ -4,13 +4,11 @@ const { dirname, join } = require('path')
 const rootPath = dirname(__dirname)
 
 /**
- * Config root paths
+ * Config paths
  */
-const configPaths = {
+module.exports = {
   root: rootPath,
   src: join(rootPath, 'src'),
-  config: join(rootPath, 'config'),
-  node_modules: join(rootPath, 'node_modules'),
 
   // Build: Release distribution
   dist: join(rootPath, 'dist'),
@@ -26,17 +24,3 @@ const configPaths = {
   jsdoc: join(rootPath, 'jsdoc'),
   sassdoc: join(rootPath, 'sassdoc')
 }
-
-module.exports = {
-  ...configPaths,
-
-  // Source paths
-  assets: join(configPaths.src, 'govuk/assets'),
-  components: join(configPaths.src, 'govuk/components'),
-
-  // Review application views
-  views: join(configPaths.app, 'src/views'),
-  examples: join(configPaths.app, 'src/views/examples'),
-  fullPageExamples: join(configPaths.app, 'src/views/full-page-examples'),
-  layouts: join(configPaths.app, 'src/views/layouts')
-}

lib/file-helper.js

@@ -6,7 +6,7 @@ const { glob } = require('glob')
 const yaml = require('js-yaml')
 const { minimatch } = require('minimatch')
 
-const configPaths = require('../config/paths')
+const { paths } = require('../config')
 
 /**
  * Test environment globals
@@ -110,7 +110,7 @@ const getComponentData = async (componentName) => {
   }
 
   // Read from disk
-  const yamlPath = join(configPaths.components, componentName, `${componentName}.yaml`)
+  const yamlPath = join(paths.src, 'govuk/components', componentName, `${componentName}.yaml`)
   const yamlData = yaml.load(await readFile(yamlPath, 'utf8'), { json: true })
 
   return {
@@ -130,7 +130,7 @@ const getComponentsData = async () => {
   }
 
   // Read from disk
-  const componentNames = await getDirectories(configPaths.components)
+  const componentNames = await getDirectories(join(paths.src, 'govuk/components'))
   return Promise.all(componentNames.map(getComponentData))
 }
 
@@ -140,11 +140,11 @@ const getComponentsData = async () => {
  * @returns {Promise<FullPageExample[]>} Full page examples
  */
 const getFullPageExamples = async () => {
-  const directories = await getDirectories(configPaths.fullPageExamples)
+  const directories = await getDirectories(join(paths.app, 'src/views/full-page-examples'))
 
   // Add metadata (front matter) to each example
   const examples = await Promise.all(directories.map(async (exampleName) => {
-    const templatePath = join(configPaths.fullPageExamples, exampleName, 'index.njk')
+    const templatePath = join(paths.app, 'src/views/full-page-examples', exampleName, 'index.njk')
 
     // @ts-expect-error "This expression is not callable" due to incorrect types
     const { attributes } = fm(await readFile(templatePath, 'utf8'))

lib/helper-functions.unit.test.mjs

@@ -1,6 +1,6 @@
 import { join, relative } from 'path'
 
-import config from '../config/index.js'
+import { paths } from '../config/index.js'
 
 import {
   componentNameToClassName,
@@ -89,11 +89,11 @@ describe('componentPathToModuleName', () => {
   ]
 
   it.each(components)("transforms '$path' to '$moduleName'", ({ path, moduleName }) => {
-    const srcPath = join(config.paths.src, 'govuk')
+    const srcPath = join(paths.src, 'govuk')
 
     // Path variations
     const pathAbsolute = join(srcPath, path)
-    const pathRelativeToRoot = relative(config.paths.root, pathAbsolute)
+    const pathRelativeToRoot = relative(paths.root, pathAbsolute)
     const pathRelativeToSource = relative(srcPath, pathAbsolute)
 
     // Absolute path
@@ -113,11 +113,11 @@ describe('componentPathToModuleName', () => {
   })
 
   it.each(others)("transforms unknown components to 'GOVUKFrontend'", (path) => {
-    const srcPath = join(config.paths.src, 'govuk')
+    const srcPath = join(paths.src, 'govuk')
 
     // Path variations
     const pathAbsolute = join(srcPath, path)
-    const pathRelativeToRoot = relative(config.paths.root, pathAbsolute)
+    const pathRelativeToRoot = relative(paths.root, pathAbsolute)
     const pathRelativeToSource = relative(srcPath, pathAbsolute)
 
     // Unknown components always named 'GOVUKFrontend'
@@ -131,19 +131,19 @@ describe('packageNameToPath', () => {
   const packages = [
     {
       name: 'html5shiv',
-      path: join(config.paths.node_modules, 'html5shiv')
+      path: join(paths.root, 'node_modules/html5shiv')
     },
     {
       name: 'govuk_template_jinja',
-      path: join(config.paths.node_modules, 'govuk_template_jinja')
+      path: join(paths.root, 'node_modules/govuk_template_jinja')
     },
     {
       name: 'govuk_frontend_toolkit',
-      path: join(config.paths.node_modules, 'govuk_frontend_toolkit')
+      path: join(paths.root, 'node_modules/govuk_frontend_toolkit')
     },
     {
       name: 'jquery',
-      path: join(config.paths.node_modules, 'jquery')
+      path: join(paths.root, 'node_modules/jquery')
     }
   ]
 

lib/jest-helpers.js

@@ -13,12 +13,12 @@ const { componentNameToMacroName } = require('./helper-functions')
 
 const sassPaths = [
   join(paths.src, 'govuk'),
-  paths.node_modules
+  join(paths.root, 'node_modules')
 ]
 
 const nunjucksPaths = [
   join(paths.src, 'govuk'),
-  paths.components
+  join(paths.src, 'govuk/components')
 ]
 
 const nunjucksEnv = nunjucks.configure(nunjucksPaths, {

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

@@ -1,17 +1,17 @@
-import { join, relative } from 'path'
+import { join } from 'path'
 
 import slash from 'slash'
 
-import configPaths from '../../config/paths.js'
+import { paths } from '../../config/index.js'
 import { filterPath, getDirectories, getListing } from '../../lib/file-helper.js'
 import { componentNameToMacroName } from '../../lib/helper-functions.js'
 
 /**
  * GOV.UK Prototype Kit config builder
  */
 export default async () => {
-  const componentsFiles = await getListing(configPaths.components)
-  const componentNames = await getDirectories(configPaths.components)
+  const componentsFiles = await getListing(join(paths.src, 'govuk/components'))
+  const componentNames = await getDirectories(join(paths.src, 'govuk/components'))
 
   // Build array of macros
   const nunjucksMacros = componentNames
@@ -20,7 +20,7 @@ export default async () => {
         .filter(filterPath([`${componentName}/macro.njk`]))
 
       return {
-        importFrom: slash(relative(configPaths.src, join(configPaths.components, macroPath))),
+        importFrom: slash(join('govuk/components', macroPath)),
         macroName: componentNameToMacroName(componentName)
       }
     })

src/govuk/all.test.mjs

@@ -1,7 +1,7 @@
 import sassdoc from 'sassdoc'
 import slash from 'slash'
 
-import configPaths from '../../config/paths.js'
+import { paths } from '../../config/index.js'
 import { compileSassString } from '../../lib/jest-helpers.js'
 
 describe('GOV.UK Frontend', () => {
@@ -80,8 +80,8 @@ describe('GOV.UK Frontend', () => {
   describe('Sass documentation', () => {
     it('associates everything with a group', async () => {
       return sassdoc.parse([
-        `${slash(configPaths.src)}/govuk/**/*.scss`,
-        `!${slash(configPaths.src)}/govuk/vendor/*.scss`
+        `${slash(paths.src)}/govuk/**/*.scss`,
+        `!${slash(paths.src)}/govuk/vendor/*.scss`
       ])
         .then(docs => docs.forEach(doc => {
           return expect(doc).toMatchObject({

src/govuk/components/components.template.test.js

@@ -5,7 +5,7 @@ const { HtmlValidate } = require('html-validate')
 // over the nunjucks environment.
 const nunjucks = require('nunjucks')
 
-const configPaths = require('../../../config/paths')
+const { paths } = require('../../../config')
 const { getDirectories, getComponentsData } = require('../../../lib/file-helper')
 const { nunjucksEnv, renderHtml } = require('../../../lib/jest-helpers')
 
@@ -18,11 +18,11 @@ describe('Components', () => {
   beforeAll(async () => {
     // Create a new Nunjucks environment that uses the src directory as its
     // base path, rather than the components folder itself
-    nunjucksEnvCustom = nunjucks.configure(join(configPaths.src, 'govuk'))
+    nunjucksEnvCustom = nunjucks.configure(join(paths.src, 'govuk'))
     nunjucksEnvDefault = nunjucksEnv
 
     // Components list
-    componentNames = await getDirectories(configPaths.components)
+    componentNames = await getDirectories(join(paths.src, 'govuk/components'))
   })
 
   describe('Nunjucks environment', () => {

src/govuk/components/components.test.js

@@ -1,14 +1,14 @@
 const { join } = require('path')
 
-const configPaths = require('../../../config/paths')
+const { paths } = require('../../../config')
 const { getListing } = require('../../../lib/file-helper')
 const { compileSassFile } = require('../../../lib/jest-helpers')
 
 describe('Components', () => {
   let sassFiles
 
   beforeAll(async () => {
-    sassFiles = await getListing(configPaths.components, '**/*.scss', {
+    sassFiles = await getListing(join(paths.src, 'govuk/components'), '**/*.scss', {
       ignore: [
         '**/_all.scss',
         '**/_index.scss'
@@ -18,7 +18,7 @@ describe('Components', () => {
 
   describe('Sass render', () => {
     it('renders CSS for all components', () => {
-      const file = join(configPaths.components, '_all.scss')
+      const file = join(paths.src, 'govuk/components/_all.scss')
 
       return expect(compileSassFile(file)).resolves.toMatchObject({
         css: expect.any(String),
@@ -28,7 +28,7 @@ describe('Components', () => {
 
     it('renders CSS for each component', () => {
       const sassTasks = sassFiles.map((sassFilePath) => {
-        const file = join(configPaths.components, sassFilePath)
+        const file = join(paths.src, 'govuk/components', sassFilePath)
 
         return expect(compileSassFile(file)).resolves.toMatchObject({
           css: expect.any(String),