Add module name to the UMD export name

Adds the module name (e.g: Accordion) to the UMD export name.
For example: GOVUKFrontend becomes GOVUKFrontend.Accordion

If the file is all.js (which pulls in all component JS), fall back to the
original naming ("GOVUKFrontend") otherwise the modules are nested underneath
an `all`, e.g: GOVUKFrontend.all.initAll()

tasks/gulp/compile-assets.js

@@ -184,6 +184,19 @@ gulp.task('scss:compile', function (done) {
   done()
 })
 
+// Convert a string from dashed (e.g: character-count) to PascalCase (e.g: CharacterCount)
+function convertFileNameToModuleName (filename) {
+  // Make the first letter of the filename uppercase
+  const uppercase = filename[0].toUpperCase() + filename.slice(1).toLowerCase()
+
+  // Remove any dashes and make the first letter after each dash uppercase
+  const moduleName = uppercase.replace(/-([a-z])/gi, function (match, char, index, str) {
+    return char.toUpperCase()
+  })
+
+  return moduleName
+}
+
 // Compile js task for preview ----------
 // --------------------------------------
 gulp.task('js:compile', (done) => {
@@ -194,11 +207,15 @@ gulp.task('js:compile', (done) => {
   srcFiles.forEach(function (file) {
     const currentDirectory = path.dirname(file)
     const newDirectory = currentDirectory.replace('src/govuk', '')
+    const fileName = path.parse(file).name
+
+    // Convert the file name from dashed (e.g: character-count) to PascalCase (e.g: CharacterCount)
+    const moduleName = convertFileNameToModuleName(fileName)
 
     return gulp.src(file)
       .pipe(rollup({
         // Used to set the `window` global and UMD/AMD export name.
-        name: 'GOVUKFrontend',
+        name: fileName === 'all' ? 'GOVUKFrontend' : 'GOVUKFrontend.' + moduleName,
         // Legacy mode is required for IE8 support
         legacy: true,
         // UMD allows the published bundle to work in CommonJS and in the browser.