Amend bundle tests to also test against initAll importing

This ensures that any changes we make to our importing process don't negatively impact users who're importing via `initAll`

.github/workflows/bundler-integrations.yml

@@ -38,4 +38,5 @@ jobs:
       - name: Check output
         working-directory: ./.github/workflows/bundler-integrations
         run: |
-          ! grep "Accordion" dist/${{matrix.bundler}}/*.js
+          ! grep "Accordion" dist/${{matrix.bundler}}/default.js
+          grep "Accordion" dist/${{matrix.bundler}}/initAll.js

.github/workflows/bundler-integrations/package.json

@@ -3,8 +3,11 @@
   "description": "Boilerplate to verify that GOV.UK Frontend works OK with main bundlers",
   "private": true,
   "scripts": {
-    "rollup": "rollup -c rollup.config.mjs src/index.mjs -o dist/rollup/main.js",
-    "webpack": "webpack ./src/index.mjs --mode production -o dist/webpack",
+    "rollup": "npm run rollup:default && npm run rollup:initAll",
+    "rollup:default": "npm run rollup:cli -- -o dist/rollup/default.js ./src/default.mjs",
+    "rollup:initAll": "npm run rollup:cli -- -o dist/rollup/initAll.js ./src/initAll.mjs",
+    "rollup:cli": "rollup -c rollup.config.mjs",
+    "webpack": "webpack --mode production -o dist/webpack",
     "vite": "vite build",
     "clean": "del-cli dist",
     "build:all": "concurrently \"npm run rollup\" \"npm run webpack\" \"npm run vite\" --names \"rollup,webpack,vite\" --prefix-colors \"red.dim,blue.dim,yellow.dim\""

.github/workflows/bundler-integrations/src/initAll.mjs

@@ -0,0 +1,3 @@
+import { initAll } from 'govuk-frontend'
+
+initAll()

.github/workflows/bundler-integrations/vite.config.mjs

@@ -1,10 +1,18 @@
 /** @type {import('vite').UserConfig} */
+// the default vite config used by the different test case configs
+
 export default {
   build: {
     // Align output with other bundlers to facilitate testing
     outDir: 'dist/vite',
     assetsDir: '.',
     // Prevent minification so we can see actual class/function names
-    minify: false
+    minify: false,
+    rollupOptions: {
+      input: ['./src/default.mjs', './src/initAll.mjs'],
+      output: {
+        entryFileNames: '[name].js'
+      }
+    }
   }
 }

.github/workflows/bundler-integrations/webpack.config.js

@@ -7,5 +7,12 @@ module.exports = {
     // Prevent minification so we can see what's going on in the built file
     minimize: false
   },
-  target: 'web'
+  target: 'web',
+  entry: {
+    default: './src/default.mjs',
+    initAll: './src/initAll.mjs'
+  },
+  output: {
+    filename: '[name].js'
+  }
 }

docs/contributing/tasks.md

@@ -104,7 +104,7 @@ After building the project with `npm run build` the Express.js review app can be
 
 After building the project with `npm run build`, you can verify that the `govuk-frontend` package will be consumed correctly by mainstream bundlers with `npm run <BUNDLER_NAME> --workspace @govuk-frontend/bundler-integrations` (where bundler name is one of `rollup`, `webpack` or `vite`).
 
-This will use the specified bundler to compile `.github/workflows/bundler-integrations/src/index.mjs`. That file only imports one components, which will let us verify that [tree shaking] works as intended. The build output (in `.github/workflows/bundler-integrations/dist/<BUNDLER_NAME>/`) should not contain the code of other components.
+This will use the specified bundler to compile both `.github/workflows/bundler-integrations/src/default.mjs` which is only importing one component, and `.github/workflows/bundler-integrations/src/initAll.mjs` which is importing and initialising all components via `initAll`. This helps us verify that [tree shaking] works as intended. The build output for both files is `.github/workflows/bundler-integrations/dist/<BUNDLER_NAME>/[name].js`. `default.js` should not contain the code of other components whilst `initAll.js` should contain the code for all the components.
 
 You can also run `npm run build:all --workspace @govuk-frontend/bundler-integrations` to run all three bundlers in one go.