Convert scripts to es6

assets/scripts/customizer.js

@@ -1,8 +1,5 @@
-(function($) {
+import $ from 'jquery';
-  // Site title
+
-  wp.customize('blogname', function(value) {
+wp.customize('blogname', (value) => {
-    value.bind(function(to) {
+  value.bind((to) => $('.brand').text(to))
-      $('.brand').text(to);
+});
-    });
-  });
-})(jQuery);

assets/scripts/main.js

@@ -1,5 +1,8 @@
 import $ from 'jquery';
 import Router from './util/router';
+import Common from './routes/Common';
+import Home from './routes/Home';
+import About from './routes/About';
 
 // Import Bootstrap
 import 'bootstrap/dist/js/umd/util.js';
@@ -16,34 +19,14 @@ import 'bootstrap/dist/js/umd/popover.js';
 
 // Use this variable to set up the common and page specific functions. If you
 // rename this variable, you will also need to rename the namespace below.
-var Sage = {
+const routes = {
   // All pages
-  'common': {
+  'common': Common,
-    init: function() {
-      // JavaScript to be fired on all pages
-    },
-    finalize: function() {
-      // JavaScript to be fired on all pages, after page specific JS is fired
-    }
-  },
   // Home page
-  'home': {
+  'home': Home,
-    init: function() {
-      // JavaScript to be fired on the home page
-    },
-    finalize: function() {
-      // JavaScript to be fired on the home page, after the init JS
-    }
-  },
   // About us page, note the change from about-us to about_us.
-  'about_us': {
+  'about_us': About
-    init: function() {
-      // JavaScript to be fired on the about us page
-    }
-  }
 };
 
 // Load Events
-$(document).ready(function() {
+$(document).ready(() => new Router(routes).loadEvents());
-  new Router(Sage).loadEvents();
-});

assets/scripts/routes/About.js

@@ -0,0 +1,5 @@
+export default {
+  init() {
+    // JavaScript to be fired on the about us page
+  }
+};

assets/scripts/routes/Common.js

@@ -0,0 +1,8 @@
+export default {
+  init() {
+    // JavaScript to be fired on all pages
+  },
+  finalize() {
+    // JavaScript to be fired on all pages, after page specific JS is fired
+  }
+};

assets/scripts/routes/Home.js

@@ -0,0 +1,8 @@
+export default {
+  init() {
+    // JavaScript to be fired on the home page
+  },
+  finalize() {
+    // JavaScript to be fired on the home page, after the init JS
+  }
+};

assets/scripts/util/router.js

@@ -11,18 +11,18 @@ import $ from 'jquery';
 // The routing fires all common scripts, followed by the page specific scripts.
 // Add additional events for more control over timing e.g. a finalize event
 export default class Router {
-  constructor(namespace) {
+  constructor(routes) {
-    this.namespace = namespace;
+    this.routes = routes;
   }
 
   fire(func, funcname, args) {
     funcname = (funcname === undefined) ? 'init' : funcname;
     let fire = func !== '';
-    fire = fire && this.namespace[func];
+    fire = fire && this.routes[func];
-    fire = fire && typeof this.namespace[func][funcname] === 'function';
+    fire = fire && typeof this.routes[func][funcname] === 'function';
 
     if (fire) {
-      this.namespace[func][funcname](args);
+      this.routes[func][funcname](args);
     }
   }