Compile GOV.UK Prototype Kit config to package top level

bin/pre-release.sh

@@ -26,6 +26,7 @@ npm run build:package
 if [[ -n $(git status --porcelain) ]]; then
   echo "✍️ Commiting changed package"
   git add packages/govuk-frontend/dist/
+  git add --force packages/govuk-frontend/govuk-prototype-kit.config.json
 
   git commit -m "Release GOV.UK Frontend to '$BRANCH_NAME' for testing"
 

packages/govuk-frontend/.gitignore

@@ -1,2 +1,4 @@
+govuk-prototype-kit.config.json
+
 # Build output (committed)
 !/dist

packages/govuk-frontend/package.json

@@ -6,6 +6,7 @@
   "files": [
     "src",
     "dist",
+    "govuk-prototype-kit.config.json",
     "package.json",
     "README.md"
   ],

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

@@ -1,5 +1,3 @@
-import { join } from 'path'
-
 import { filterPath, getDirectories, getListing } from 'govuk-frontend-lib/files'
 import { componentNameToMacroName, packageNameToPath } from 'govuk-frontend-lib/names'
 import slash from 'slash'
@@ -10,35 +8,35 @@ import slash from 'slash'
  * @returns {Promise<PrototypeKitConfig>} GOV.UK Prototype Kit config
  */
 export default async () => {
-  const componentsFiles = await getListing(packageNameToPath('govuk-frontend', 'src/govuk/components'))
+  const componentMacros = await getListing(packageNameToPath('govuk-frontend', 'src'), '**/components/**/macro.njk')
   const componentNames = await getDirectories(packageNameToPath('govuk-frontend', 'src/govuk/components'))
 
   // Build array of macros
   const nunjucksMacros = componentNames
     .map((componentName) => {
-      const [macroPath] = componentsFiles
+      const [macroPath = ''] = componentMacros
         .filter(filterPath([`**/${componentName}/macro.njk`]))
 
       return {
-        importFrom: slash(join('govuk/components', macroPath)),
+        importFrom: slash(macroPath),
         macroName: componentNameToMacroName(componentName)
       }
     })
 
   return {
     assets: [
-      '/govuk/assets',
-      '/govuk/all.js.map'
+      '/dist/govuk/assets',
+      '/dist/govuk/all.js.map'
     ],
     sass: [
-      '/govuk-prototype-kit/init.scss'
+      '/dist/govuk-prototype-kit/init.scss'
     ],
     scripts: [
-      '/govuk/all.js',
-      '/govuk-prototype-kit/init.js'
+      '/dist/govuk/all.js',
+      '/dist/govuk-prototype-kit/init.js'
     ],
     nunjucksMacros,
-    nunjucksPaths: ['/']
+    nunjucksPaths: ['/dist']
   }
 }
 

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

@@ -10,17 +10,17 @@ describe('GOV.UK Prototype Kit config', () => {
 
   it('includes paths for assets, scripts, sass', () => {
     expect(config.assets).toEqual([
-      '/govuk/assets',
-      '/govuk/all.js.map'
+      '/dist/govuk/assets',
+      '/dist/govuk/all.js.map'
     ])
 
     expect(config.sass).toEqual([
-      '/govuk-prototype-kit/init.scss'
+      '/dist/govuk-prototype-kit/init.scss'
     ])
 
     expect(config.scripts).toEqual([
-      '/govuk/all.js',
-      '/govuk-prototype-kit/init.js'
+      '/dist/govuk/all.js',
+      '/dist/govuk-prototype-kit/init.js'
     ])
   })
 
@@ -159,7 +159,7 @@ describe('GOV.UK Prototype Kit config', () => {
     })
 
     it('includes paths', () => {
-      expect(config.nunjucksPaths).toEqual(['/'])
+      expect(config.nunjucksPaths).toEqual(['/dist'])
     })
   })
 })

packages/govuk-frontend/tasks/build/package.test.mjs

@@ -7,6 +7,7 @@ import { filterPath, getDirectories, getListing, mapPathTo } from 'govuk-fronten
 import { componentNameToClassName, componentPathToModuleName } from 'govuk-frontend-lib/names'
 
 describe('packages/govuk-frontend/dist/', () => {
+  let listingPackage
   let listingSource
   let listingDist
 
@@ -17,6 +18,7 @@ describe('packages/govuk-frontend/dist/', () => {
   let componentNames
 
   beforeAll(async () => {
+    listingPackage = await getListing(paths.package, '*')
     listingSource = await getListing(join(paths.package, 'src'))
     listingDist = await getListing(join(paths.package, 'dist'))
 
@@ -41,10 +43,8 @@ describe('packages/govuk-frontend/dist/', () => {
     const listingExpected = listingSource
       .filter(filterPath(filterPatterns))
 
-      // Replaces GOV.UK Prototype kit config with JSON
-      .flatMap(mapPathTo(['**/govuk-prototype-kit.config.mjs'], ({ dir: requirePath, name }) => [
-        join(requirePath, '../', `${name}.json`)
-      ]))
+      // Removes GOV.UK Prototype kit config (moved to package top level)
+      .flatMap(mapPathTo(['**/govuk-prototype-kit.config.mjs'], () => []))
 
       // Replaces all source '*.mjs' files
       .flatMap(mapPathTo(['**/*.mjs'], ({ dir: requirePath, name }) => {
@@ -89,6 +89,18 @@ describe('packages/govuk-frontend/dist/', () => {
 
     // Compare array of actual output files
     expect(listingDist).toEqual(listingExpected)
+
+    // Check top level package contents
+    expect(listingPackage).toEqual([
+      'README.md',
+      'govuk-prototype-kit.config.json',
+      'gulpfile.mjs',
+      'package.json',
+      'postcss.config.mjs',
+      'postcss.config.unit.test.mjs',
+      'tsconfig.build.json',
+      'tsconfig.json'
+    ])
   })
 
   describe('README.md', () => {

packages/govuk-frontend/tasks/scripts.mjs

@@ -1,4 +1,4 @@
-import { join } from 'path'
+import { join, resolve } from 'path'
 
 import { configs, scripts, task } from 'govuk-frontend-tasks'
 import gulp from 'gulp'
@@ -39,7 +39,7 @@ export const compile = (options) => gulp.series(
   task.name("compile:js 'govuk-prototype-kit'", () =>
     configs.compile('govuk-prototype-kit.config.mjs', {
       srcPath: join(options.srcPath, 'govuk-prototype-kit'),
-      destPath: options.destPath,
+      destPath: resolve(options.destPath, '../'), // Top level (not dist) for compatibility
 
       filePath (file) {
         return join(file.dir, `${file.name}.json`)