Add wrapper govuk-frontend package for workspace

Locally links `govuk-frontend` to ./package/src but npm publish can continue from ./package/dist until build directories are deleted in future

app/nodemon.json

@@ -1,6 +1,6 @@
 {
   "watch": ["./src", "../package/src/govuk/**/*.{json,yaml}"],
-  "ignore": ["**/*.test.*"],
+  "ignore": ["./src/javascripts/**", "**/*.test.*"],
   "ext": "mjs,json,yaml",
   "quiet": true
 }

app/package.json

@@ -22,6 +22,7 @@
     "govuk_frontend_toolkit": "^9.0.1",
     "govuk_template_jinja": "^0.26.0",
     "govuk-elements-sass": "3.1.3",
+    "govuk-frontend": "*",
     "govuk-frontend-config": "*",
     "govuk-frontend-lib": "*",
     "highlight.js": "^11.7.0",

app/src/javascripts/all.mjs

@@ -0,0 +1,4 @@
+import * as GOVUKFrontend from 'govuk-frontend'
+
+// @ts-expect-error Manually add globals to window for tests
+window.GOVUKFrontend = GOVUKFrontend

app/src/stylesheets/app-ie8.scss

@@ -1,3 +1,3 @@
-@import "../../../package/src/govuk/all-ie8";
+@import "govuk/all-ie8";
 @import "partials/app";
 @import "partials/banner";

app/src/stylesheets/app.scss

@@ -1,7 +1,7 @@
 $govuk-show-breakpoints: true;
 $govuk-new-link-styles: true;
 
-@import "../../../package/src/govuk/all";
+@import "govuk/all";
 @import "partials/app";
 @import "partials/code";
 @import "partials/banner";

app/src/stylesheets/full-page-examples/campaign-page.scss

@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk/core/all";
 
 .app-header--campaign {
   padding-bottom: govuk-spacing(2);

app/src/stylesheets/full-page-examples/search.scss

@@ -1,6 +1,6 @@
-@import "../../../../package/src/govuk/base";
+@import "govuk/base";
 $govuk-new-link-styles: true;
-@import "../../../../package/src/govuk/core/all";
+@import "govuk/core/all";
 
 .app-document-list > li {
   padding-top: govuk-spacing(4);

app/tasks/scripts.mjs

@@ -11,7 +11,7 @@ import gulp from 'gulp'
 export const compile = gulp.series(
   task.name('compile:js', () =>
     scripts.compile('all.mjs', {
-      srcPath: join(paths.package, 'src/govuk'),
+      srcPath: join(paths.app, 'src/javascripts'),
       destPath: join(paths.app, 'dist/javascripts'),
 
       filePath (file) {

app/tasks/watch.mjs

@@ -27,6 +27,7 @@ export function watch () {
 
     gulp.watch([
       `${slash(paths.root)}/jsdoc.config.js`,
+      `${slash(paths.app)}/src/javascripts/**/*.mjs`,
       `${slash(paths.package)}/src/govuk/**/*.mjs`
     ], gulp.parallel(
       npm.script('lint:js'),

app/tsconfig.json

@@ -3,6 +3,7 @@
   "include": [
     "**/*.js",
     "**/*.mjs",
+    "../package",
     "../shared/config",
     "../shared/lib",
     "../shared/tasks"

docs/examples/webpack/src/assets/stylesheets/app.scss

@@ -1 +1 @@
-@import "govuk-frontend/govuk/all";
+@import "govuk/all";

docs/examples/webpack/webpack.config.js

@@ -1,10 +1,10 @@
-const { dirname, join } = require('path')
+const { dirname, join, resolve } = require('path')
 
 const CopyPlugin = require('copy-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 
 // Module resolution
-const frontendPath = dirname(require.resolve('govuk-frontend'))
+const frontendPath = resolve(dirname(require.resolve('govuk-frontend')), '../')
 
 // Build paths
 const srcPath = join(__dirname, 'src')
@@ -58,6 +58,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
             loader: 'sass-loader',
             options: {
               sassOptions: {
+                includePaths: [frontendPath],
                 quietDeps: true
               }
             }
@@ -94,7 +95,7 @@ module.exports = ({ WEBPACK_SERVE }, { mode }) => ({
       patterns: [
         join(srcPath, 'index.html'),
         {
-          context: join(frontendPath, 'assets'),
+          context: join(frontendPath, './govuk/assets'),
           from: '{fonts,images}/**',
           to: 'assets'
         }

package.json

@@ -10,7 +10,7 @@
   "workspaces": [
     "app",
     "docs/examples/*",
-    "package/dist",
+    "package",
     "shared/*"
   ],
   "scripts": {

package/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "name": "govuk-frontend",
+  "description": "Used only for the development of GOV.UK Frontend, see `package/dist/package.json` for the published `package.json`",
+  "main": "src/govuk/all.mjs",
+  "exports": {
+    ".": {
+      "sass": "./src/govuk/all.scss",
+      "import": "./src/govuk/all.mjs",
+      "default": "./src/govuk/all.mjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./dist/package.json",
+    "./*": "./src/*"
+  },
+  "sass": "src/govuk/all.scss",
+  "engines": {
+    "node": "^18.12.0",
+    "npm": "^8.1.0 || ^9.1.0"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "cheerio": "^1.0.0-rc.12",
+    "govuk-frontend-config": "*",
+    "govuk-frontend-helpers": "*",
+    "govuk-frontend-lib": "*",
+    "nunjucks": "^3.2.3",
+    "outdent": "^0.8.0",
+    "sass-embedded": "^1.60.0",
+    "sassdoc": "^2.7.4",
+    "slash": "^5.0.0",
+    "html-validate": "7.15.1",
+    "puppeteer": "^19.9.0"
+  }
+}

package/src/govuk/components/globals.test.mjs

@@ -31,14 +31,15 @@ describe('GOV.UK Frontend', () => {
     it('exports Components', async () => {
       const components = exported
         .filter(method => !['initAll', 'version'].includes(method))
+        .sort()
 
       // Ensure GOV.UK Frontend exports the expected components
       expect(components).toEqual([
         'Accordion',
         'Button',
-        'Details',
         'CharacterCount',
         'Checkboxes',
+        'Details',
         'ErrorSummary',
         'Header',
         'NotificationBanner',

shared/config/index.js

@@ -1,4 +1,4 @@
-const pkg = require('govuk-frontend/package.json')
+const pkg = require('govuk-frontend/dist/package.json')
 
 /**
  * Config

shared/config/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["**/*.js", "**/*.mjs"]
+  "include": ["**/*.js", "**/*.mjs", "../../package"]
 }

shared/tasks/package.json

@@ -28,6 +28,7 @@
     "postcss-load-config": "^4.0.1",
     "puppeteer": "^19.9.0",
     "rollup": "0.59.4",
+    "rollup-plugin-node-resolve": "^4.2.4",
     "rollup-plugin-replace": "^2.2.0",
     "sass-embedded": "^1.60.0",
     "slash": "^5.0.0",

shared/tasks/scripts.mjs

@@ -5,6 +5,7 @@ import { getListing } from 'govuk-frontend-lib/files'
 import { componentPathToModuleName } from 'govuk-frontend-lib/names'
 import PluginError from 'plugin-error'
 import { rollup } from 'rollup'
+import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 import { minify } from 'terser'
 
@@ -41,7 +42,7 @@ export async function compileJavaScript ([modulePath, { srcPath, destPath, fileP
   const moduleDestPath = join(destPath, filePath ? filePath(parse(modulePath)) : modulePath)
 
   // Rollup plugins
-  const plugins = []
+  const plugins = [resolve()]
 
   if (!isDev) {
     // Add GOV.UK Frontend release version

shared/tasks/styles.mjs

@@ -64,6 +64,7 @@ export async function compileStylesheet ([modulePath, { srcPath, destPath, fileP
       // Resolve @imports via
       loadPaths: [
         join(paths.root, 'node_modules/govuk_frontend_toolkit/stylesheets'),
+        join(paths.root, 'node_modules/govuk-frontend/src'),
         join(paths.root, 'node_modules')
       ],