Update package helpers to support govuk-frontend@4

shared/lib/names.js

@@ -78,6 +78,43 @@ function packageResolveToPath (packageEntry, { modulePath } = {}) {
   return modulePath !== undefined ? join(dirname(packagePath), modulePath) : packagePath
 }
 
+/**
+ * Return path to package entry from any npm workspace, by type
+ *
+ * Wraps {@link packageResolveToPath} to allow the appended `modulePath` to
+ * include unresolvable paths, globs or files that are not yet built
+ *
+ * {@link https://github.com/alphagov/govuk-frontend/issues/3755}
+ *
+ * @example
+ * Resolving components relative to a default package entry
+ *
+ * - GOV.UK Frontend v4 './govuk/components/accordion/accordion.mjs'
+ * - GOV.UK Frontend v5 './dist/govuk/components/accordion/accordion.mjs'
+ *
+ * ```mjs
+ * const templatePath = packageResolveToPath('govuk-frontend', {
+ *   modulePath: `components/accordion/accordion.mjs`
+ * })
+ * ```
+ * @param {string} packageName - Installed npm package name
+ * @param {PackageOptions} [options] - Package resolution options
+ * @returns {string} Path to installed npm package field
+ */
+function packageTypeToPath (packageName, { modulePath, type = 'commonjs' } = {}) {
+  const packageEntry = `${packageName}/package.json`
+  const packageField = type === 'module' ? 'module' : 'main'
+
+  // Package field as child path
+  const entryPath = require(packageResolveToPath(packageEntry))[packageField]
+  const childPath = modulePath !== undefined ? join(dirname(entryPath), modulePath) : entryPath
+
+  // Append optional module path
+  return packageResolveToPath(packageEntry, {
+    modulePath: childPath
+  })
+}
+
 /**
  * Resolve path to package from any npm workspace
  *
@@ -98,11 +135,12 @@ module.exports = {
   componentNameToMacroName,
   componentPathToModuleName,
   packageResolveToPath,
+  packageTypeToPath,
   packageNameToPath
 }
 
 /**
  * @typedef {object} PackageOptions
- * @property {string} [field] - Package field name from package.json, for example `module`
+ * @property {string} [type=commonjs] - Package type from package.json, for example `module`
  * @property {string} [modulePath] - Module path (optional, relative to package entry), for example `i18n.mjs`
  */

shared/lib/names.unit.test.mjs

@@ -7,6 +7,7 @@ import {
   componentNameToMacroName,
   componentPathToModuleName,
   packageResolveToPath,
+  packageTypeToPath,
   packageNameToPath
 } from './names.js'
 
@@ -154,6 +155,35 @@ describe('packageResolveToPath', () => {
   })
 })
 
+describe('packageTypeToPath', () => {
+  const packages = [
+    {
+      packageName: 'govuk-frontend',
+      resolvedPath: join(paths.package, 'dist/govuk/all.js')
+    },
+    {
+      packageName: 'govuk-frontend',
+      options: { modulePath: 'i18n.js' },
+      resolvedPath: join(paths.package, 'dist/govuk/i18n.js')
+    },
+    {
+      packageName: 'govuk-frontend',
+      options: { type: 'module' },
+      resolvedPath: join(paths.package, 'dist/govuk-esm/all.mjs')
+    },
+    {
+      packageName: 'govuk-frontend',
+      options: { modulePath: 'i18n.mjs', type: 'module' },
+      resolvedPath: join(paths.package, 'dist/govuk-esm/i18n.mjs')
+    }
+  ]
+
+  it.each(packages)("locates path for npm package '$packageName' field '$packageField'", ({ packageName, options, resolvedPath }) => {
+    expect(packageTypeToPath(packageName, options))
+      .toBe(resolvedPath)
+  })
+})
+
 describe('packageNameToPath', () => {
   const packages = [
     {