Provide bundled JavaScript UMD export

package.json

@@ -18,12 +18,13 @@
     "x-govuk"
   ],
   "main": "x-govuk/all.js",
-  "sass": "x-govuk/all.scss",
+  "module": "x-govuk/all.mjs",
   "repository": {
     "type": "git",
     "url": "https://github.com/x-govuk/govuk-prototype-components.git"
   },
   "scripts": {
+    "prepublishOnly": "rollup --config",
     "prebuild": "rimraf public",
     "build": "eleventy --quiet",
     "predev": "rimraf public",
@@ -45,9 +46,12 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "ava": "^4.0.1",
     "c8": "^7.11.0",
     "nunjucks": "^3.2.3",
+    "rollup": "^2.78.0",
     "standard": "^17.0.0",
     "stylelint": "^14.6.1",
     "stylelint-config-gds": "^0.2.0"
@@ -57,7 +61,8 @@
   },
   "exports": {
     ".": {
-      "import": "./x-govuk/all.js",
+      "sass": "./x-govuk/all.scss",
+      "import": "./x-govuk/all.mjs",
       "require": "./x-govuk/all.js"
     },
     "./decorate": {

rollup.config.js

@@ -0,0 +1,17 @@
+import commonJs from '@rollup/plugin-commonjs'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
+
+export default [{
+  input: [
+    'x-govuk/all.mjs'
+  ],
+  output: {
+    dir: 'x-govuk',
+    format: 'umd',
+    name: 'GOVUKPrototypeComponents'
+  },
+  plugins: [
+    nodeResolve(),
+    commonJs()
+  ]
+}]

x-govuk/all.mjs

@@ -0,0 +1,34 @@
+import Autocomplete from './components/autocomplete/autocomplete.js'
+import Edge from './components/edge/edge.js'
+import WarnOnUnsavedChanges from './components/warn-on-unsaved-changes/warn-on-unsaved-changes.js'
+
+function initAll (options) {
+  // Set the options to an empty object by default if no options are passed.
+  options = typeof options !== 'undefined' ? options : {}
+
+  // Allow user to initialise components in only certain sections of the page
+  // Defaults to the entire document if nothing is set.
+  const scope = typeof options.scope !== 'undefined' ? options.scope : document
+
+  const $autocompletes = scope.querySelectorAll('[data-module="autocomplete"]')
+  $autocompletes.forEach(function ($autocomplete) {
+    new Autocomplete($autocomplete).init()
+  })
+
+  const $edges = scope.querySelectorAll('[data-module="edge"]')
+  $edges.forEach(function ($edge) {
+    new Edge($edge).init()
+  })
+
+  const $forms = scope.querySelectorAll('[data-module="warn-on-unsaved-changes"]')
+  $forms.forEach(function ($form) {
+    new WarnOnUnsavedChanges($form).init()
+  })
+}
+
+export {
+  initAll,
+  Autocomplete,
+  Edge,
+  WarnOnUnsavedChanges
+}