Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix tree-shaking when importing govuk-frontend #4961

Merged
merged 10 commits into from
May 3, 2024
Merged

Fix tree-shaking when importing govuk-frontend #4961

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9deaf52
Mark GOV.UK Frontend as free of side effects
romaricpascal Apr 29, 2024
69e8362
Add bundler integrations script for Rollup
romaricpascal Apr 30, 2024
2b5444d
Add bundler integration for Webpack
romaricpascal Apr 30, 2024
462b57b
Add vite bundler integration script
romaricpascal Apr 30, 2024
37d73e8
Add GitHub workflow for checking integration with bundlers
romaricpascal Apr 30, 2024
f660509
Add clean script to bundler integrations workspace
romaricpascal Apr 30, 2024
80b0329
Add script to run all bundler integrations at once
romaricpascal Apr 30, 2024
604182a
Document npm tasks for bundler integrations
romaricpascal Apr 30, 2024
775a3a7
Amend bundle tests to also test against `initAll` importing
owenatgov May 1, 2024
9ed92a5
Add changelog entry
owenatgov May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions .github/workflows/bundler-integrations.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
name: Bundler integrations

on:
workflow_call:
workflow_dispatch:

jobs:
test-tree-shaking:
name: Test tree shaking
runs-on: ubuntu-latest

env:
PUPPETEER_SKIP_DOWNLOAD: true

strategy:
fail-fast: false

matrix:
bundler:
- rollup
- webpack
- vite

steps:
- name: Checkout
uses: actions/checkout@v4.1.4

- name: Restore dependencies
uses: ./.github/workflows/actions/install-node

- name: Build GOV.UK Frontend
uses: ./.github/workflows/actions/build

- name: Build with bundler
run: npm run ${{matrix.bundler}} -w @govuk-frontend/bundler-integrations

# Check output for modules that should not be included
- name: Check output
working-directory: ./.github/workflows/bundler-integrations
run: |
! grep "Accordion" dist/${{matrix.bundler}}/*.js
owenatgov marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 12 additions & 0 deletions .github/workflows/bundler-integrations/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite entry point</title>
</head>
<body>
<script type="module" src="./src/index.mjs"></script>
</body>
</html>

owenatgov marked this conversation as resolved.
Show resolved Hide resolved
21 changes: 21 additions & 0 deletions .github/workflows/bundler-integrations/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "@govuk-frontend/bundler-integrations",
"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",
"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\""
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.2.3",
"concurrently": "^8.2.2",
"del-cli": "^5.1.0",
"govuk-frontend": "*",
"rollup": "^4.17.2",
"vite": "^5.2.10",
"webpack": "^5.91.0"
}
}
6 changes: 6 additions & 0 deletions .github/workflows/bundler-integrations/rollup.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import resolve from '@rollup/plugin-node-resolve'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment Rollup needs a plugin to resolve package from node_modules.


/** @type {import('rollup').RollupOptions} */
export default {
plugins: [resolve()]
}
8 changes: 8 additions & 0 deletions .github/workflows/bundler-integrations/src/index.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Button } from 'govuk-frontend'

const $buttons = document.querySelectorAll('[data-module="govuk-button"]')

$buttons.forEach(($button) => {
/* eslint-disable-next-line no-new */
new Button($button)
})
10 changes: 10 additions & 0 deletions .github/workflows/bundler-integrations/vite.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/** @type {import('vite').UserConfig} */
export default {
build: {
// Align output with other bundlers to facilitate testing
outDir: 'dist/vite',
assetsDir: '.',
Comment on lines +7 to +8
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

comment By default, Vite would output in dist and the compiled JavaScript in dist/assets. This makes it match the dist/<BUNDLER_NAME> convention from the other bundlers.

// Prevent minification so we can see actual class/function names
minify: false
}
}
11 changes: 11 additions & 0 deletions .github/workflows/bundler-integrations/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/** @type {import('webpack').Configuration} */
module.exports = {
optimization: {
// Configure WebPack to drop exports that are not used from the code
// so we can disable Terser and still check what's being included
usedExports: true,
// Prevent minification so we can see what's going on in the built file
minimize: false
},
target: 'web'
}
8 changes: 8 additions & 0 deletions .github/workflows/tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,11 @@ jobs:
# Run existing "Stats comment" workflow
# (after only install has been cached)
uses: ./.github/workflows/stats-comment.yml

bundler-integrations:
name: Bundler integrations
needs: [install, build]

# Run existing "Bundler integrations" workflow
# (after install and build have been cached)
uses: ./.github/workflows/bundler-integrations.yml
10 changes: 10 additions & 0 deletions docs/contributing/tasks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,3 +99,13 @@ This task will:
## Review app only

After building the project with `npm run build` the Express.js review app can be started with `npm start --workspace @govuk-frontend/review`. This prevents the Gulp tasks triggered by `npm start` from running.

## Bundler integration

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.

You can also run `npm run build:all --workspace @govuk-frontend/bundler-integrations` to run all three bundlers in one go.

[tree shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking
Loading