Skip to content

Commit

Permalink
Merge pull request #3726 from alphagov/module-default
Browse files Browse the repository at this point in the history
Default to ES modules with single Rollup config
  • Loading branch information
colinrotherham committed Jul 5, 2023
2 parents b7f5e9c + 754315c commit 6a8fb79
Show file tree
Hide file tree
Showing 30 changed files with 290 additions and 299 deletions.
5 changes: 3 additions & 2 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -264,8 +264,9 @@ jobs:
run: |
node --eval "console.log(require.resolve('govuk-frontend'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/package.json'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/i18n.js'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/dist/govuk-esm/i18n.mjs'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/components/accordion/accordion.bundle.js'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/components/accordion/accordion.bundle.mjs'))"${{ env.FLAGS }}
node --eval "console.log(require.resolve('govuk-frontend/dist/govuk/i18n.mjs'))"${{ env.FLAGS }}
regression:
name: Percy
Expand Down
4 changes: 1 addition & 3 deletions docs/contributing/tasks.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
- copy Nunjucks component template/macro files, including JSON configs
- copy GOV.UK Prototype Kit config files
- compile JavaScript to ECMAScript (ES) modules
- compile JavaScript to Universal Module Definition (UMD)
- compile JavaScript to Universal Module Definition (UMD) bundles
- compile Rollup build stats into `./shared/govuk-frontend-stats/dist`
- runs `npm run postbuild:package` (which will test the output is correct)

Expand Down Expand Up @@ -91,8 +91,6 @@ This task will:

This task will:

- check JavaScript code quality via ESLint (`npm run lint:js`) (using JavaScript Standard Style)
- compile JavaScript to Universal Module Definition (UMD) into `./packages/govuk-frontend-review/dist/javascripts`
- compile JavaScript documentation into `./packages/govuk-frontend-review/dist/docs/jsdoc`

## Review app only
Expand Down
12 changes: 10 additions & 2 deletions packages/govuk-frontend-review/browsersync.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,14 @@ module.exports = {

// Files to watch for auto reload
files: [
join(paths.app, 'dist/javascripts/**/*.mjs'),
join(paths.app, 'dist/stylesheets/**/*.css'),
join(paths.app, 'src/views/**/*.njk'),

packageTypeToPath('govuk-frontend', {
modulePath: 'govuk-frontend.min.js',
moduleRoot: paths.app
}),

packageTypeToPath('govuk-frontend', {
modulePath: '**/*.njk',
moduleRoot: paths.app
Expand All @@ -36,7 +41,10 @@ module.exports = {
serveStatic: [
{
route: '/javascripts',
dir: join(paths.app, 'dist/javascripts')
dir: packageTypeToPath('govuk-frontend', {
modulePath: '/',
moduleRoot: paths.app
})
},
{
route: '/stylesheets',
Expand Down
2 changes: 1 addition & 1 deletion packages/govuk-frontend-review/nodemon.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"../../shared/lib",
"../../shared/stats"
],
"ignore": ["./src/javascripts/**", "**/*.test.*"],
"ignore": ["**/*.test.*"],
"events": {
"restart": "browser-sync reload --config browsersync.config.js"
},
Expand Down
44 changes: 0 additions & 44 deletions packages/govuk-frontend-review/rollup.config.mjs

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const router = express.Router()
*/

router.use('/assets', express.static(packageTypeToPath('govuk-frontend', { modulePath: 'assets', moduleRoot: paths.app })))
router.use('/javascripts', express.static(join(paths.app, 'dist/javascripts')))
router.use('/javascripts', express.static(packageTypeToPath('govuk-frontend', { modulePath: '/', moduleRoot: paths.app })))
router.use('/stylesheets', express.static(join(paths.app, 'dist/stylesheets')))

export default router
1 change: 0 additions & 1 deletion packages/govuk-frontend-review/src/javascripts/all.mjs

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
{% endblock %}

{% block bodyEnd %}
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/all.bundle.min.mjs'
import { initAll } from '/javascripts/govuk-frontend.min.js'
const $scope = document.getElementById('scoped')
initAll({ scope: $scope })
</script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,9 @@

{% block bodyEnd %}
<!-- block:bodyEnd -->
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/all.bundle.min.mjs'
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
<!-- endblock:bodyEnd -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@

{% block bodyEnd %}
<!-- block:bodyEnd -->
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/all.bundle.min.mjs'
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
<!-- endblock:bodyEnd -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -937,9 +937,9 @@
{% endblock %}

{% block bodyEnd %}
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/all.bundle.min.mjs'
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll({
accordion: {
i18n: {
Expand Down
4 changes: 2 additions & 2 deletions packages/govuk-frontend-review/src/views/layouts/_generic.njk
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
{% set mainClasses = 'govuk-main-wrapper--auto-spacing' %}

{% block bodyEnd %}
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
<script type="module">
import { initAll } from '/javascripts/all.bundle.min.mjs'
import { initAll } from '/javascripts/govuk-frontend.min.js'
initAll()
</script>
{% endblock %}
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block head %}
{{ super() }}
<script type="importmap">
{ "imports": { "govuk-frontend": "/javascripts/all.bundle.min.mjs" } }
{ "imports": { "govuk-frontend": "/javascripts/govuk-frontend.min.js" } }
</script>
{% endblock %}

Expand All @@ -21,5 +21,5 @@
{% endblock %}

{% block bodyEnd %}
<script type="module" src="/javascripts/all.bundle.min.mjs"></script>
<script type="module" src="/javascripts/govuk-frontend.min.js"></script>
{% endblock %}
22 changes: 2 additions & 20 deletions packages/govuk-frontend-review/tasks/scripts.mjs
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
import { join } from 'path'

import { npm, scripts, task } from 'govuk-frontend-tasks'
import { npm } from 'govuk-frontend-tasks'
import gulp from 'gulp'

/**
* JavaScripts task (for watch)
* Compilation, documentation
* Documentation
*
* @type {import('govuk-frontend-tasks').TaskFunction}
*/
export const compile = (options) => gulp.series(
task.name('compile:js', () =>
scripts.compile('all.mjs', {
...options,

srcPath: join(options.srcPath, 'javascripts'),
destPath: join(options.destPath, 'javascripts'),
configPath: join(options.basePath, 'rollup.config.mjs'),

// Rename with `*.bundle.min.mjs` extension
filePath ({ dir, name }) {
return join(dir, `${name}.bundle.min.mjs`)
}
})
),

// Build JSDoc for /docs/javascript
npm.script('build:jsdoc', [], options)
)
12 changes: 1 addition & 11 deletions packages/govuk-frontend-review/tasks/watch.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -36,23 +36,13 @@ export const watch = (options) => gulp.parallel(
], styles(options))
),

/**
* JavaScripts lint watcher
*/
task.name('lint:js watch', () =>
gulp.watch([
`${slash(paths.app)}/src/javascripts/**/*.mjs`
], npm.script('lint:js:cli', [slash(join(options.workspace, '**/*.{cjs,js,md,mjs}'))]))
),

/**
* JavaScripts build watcher
*/
task.name('compile:js watch', () =>
gulp.watch([
`${slash(paths.root)}/typedoc.config.js`,
`${slash(paths.app)}/src/javascripts/**/*.mjs`,
`${slash(paths.package)}/dist/govuk-esm/**/*.mjs`
`${slash(paths.package)}/dist/govuk/**/*.mjs`
], scripts(options))
)
)
4 changes: 2 additions & 2 deletions packages/govuk-frontend/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ Some of the JavaScript included in GOV.UK Frontend improves the usability and
accessibility of the components. You should make sure that you are importing and
initialising Javascript in your application to ensure that all users can use it successfully.

You can include Javascript for all components either by copying the `all.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:
You can include Javascript for all components either by copying the `all.bundle.js` from `node_modules/govuk-frontend/dist/govuk/` into your application or referencing the file directly:

```html
<script type="module" src="<path-to-govuk-frontend-all-file>/all.js"></script>
<script type="module" src="<path-to-govuk-frontend-all-file>/all.bundle.js"></script>
```

Next you need to initialise the script by adding:
Expand Down
9 changes: 5 additions & 4 deletions packages/govuk-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "govuk-frontend",
"description": "GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.",
"version": "4.6.0",
"main": "dist/govuk/all.js",
"module": "dist/govuk-esm/all.mjs",
"main": "dist/govuk/all.bundle.js",
"module": "dist/govuk/all.mjs",
"sass": "dist/govuk/all.scss",
"files": [
"dist",
Expand All @@ -14,8 +14,9 @@
"exports": {
".": {
"sass": "./dist/govuk/all.scss",
"import": "./dist/govuk-esm/all.mjs",
"require": "./dist/govuk/all.js"
"import": "./dist/govuk/all.mjs",
"require": "./dist/govuk/all.bundle.js",
"default": "./dist/govuk/all.bundle.js"
},
"./*": "./*",
"./dist/": "./dist/",
Expand Down
35 changes: 0 additions & 35 deletions packages/govuk-frontend/rollup.esm.config.mjs

This file was deleted.

66 changes: 66 additions & 0 deletions packages/govuk-frontend/rollup.publish.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import replace from '@rollup/plugin-replace'
import { pkg } from 'govuk-frontend-config'
import { componentPathToModuleName } from 'govuk-frontend-lib/names'
import { defineConfig } from 'rollup'

/**
* Rollup config for npm publish
*/
export default defineConfig(({ i: input }) => ({
input,

/**
* Output options
*/
output: [
/**
* ECMAScript (ES) modules for Node.js or bundler `import`
*/
{
entryFileNames: '[name].mjs',
format: 'es',

// Separate modules, not bundled
preserveModules: true
},

/**
* ECMAScript (ES) module bundles for browser <script type="module">
* or using `import` for modern browsers and Node.js scripts
*/
{
format: 'es',

// Bundled modules
preserveModules: false
},

/**
* Universal Module Definition (UMD) bundle for browser <script>
* `window` globals and compatibility with CommonJS and AMD `require()`
*/
{
format: 'umd',

// Bundled modules
preserveModules: false,

// Components are given names (e.g window.GOVUKFrontend.Accordion)
amd: { id: componentPathToModuleName(input) },
name: componentPathToModuleName(input)
}
],

/**
* Input plugins
*/
plugins: [
replace({
include: '**/common/govuk-frontend-version.mjs',
preventAssignment: true,

// Add GOV.UK Frontend release version
development: pkg.version
})
]
}))
Loading

0 comments on commit 6a8fb79

Please sign in to comment.