[WIP] Use new js-dom-router and add dynamic import support

Author: QWp6t

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}

package.json

@@ -16,6 +16,7 @@
     "test": "run-s -c lint"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "browser-sync": "^2.26.5",
     "browser-sync-webpack-plugin": "2.0.1",
     "cross-env": "^5.2.0",
@@ -33,6 +34,7 @@
   "dependencies": {
     "bootstrap": "^4.3.1",
     "jquery": "^3.4.0",
+    "js-dom-router": "^1.0.0",
     "popper.js": "^1.15.0"
   }
 }

resources/assets/scripts/app.js

@@ -3,27 +3,28 @@
  */
 import 'jquery';
 import 'bootstrap';
+import { router } from 'js-dom-router';
 
 /**
- * Local Dependencies
+ * DOM-based routing
  */
-import Router from './util/Router';
-import common from './routes/common';
-import aboutUs from './routes/about';
-import { ready } from './utils';
+import about from './routes/about';
 
 /**
- * Populate the Router instance with DOM routes.
+ * Below is an example of a dynamic import; it will not be loaded until it's needed.
  *
- * common – Fired on all pages.
- * aboutUs – Fired on the About Us page, note the change from about-us to aboutUs (camelCase).
+ * See: {@link https://webpack.js.org/guides/code-splitting/#dynamic-imports | Dynamic Imports}
  */
-const routes = new Router({
-  common,
-  aboutUs,
-});
+const home = async () => import(/* webpackChunkName: "home-page" */ './routes/home');
 
 /**
- * Load Events
+ * Set up DOM router
+ *
+ * .on(<name of body class>, callback)
+ *
+ * See: {@link http://goo.gl/EUTi53 | Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish
  */
-ready(() => routes.loadEvents());
+router
+  .on('about-us', about)
+  .on('home', async (event) => (await home()).default(event))
+  .ready();

resources/assets/scripts/routes/about.js

@@ -1,14 +1,6 @@
 /**
  * About Us
- *
- * init – Fired on About Us page.
- * finalized – Fired on About Us page, after page specific JS is fired.
  */
-export default {
-  init() {
-    //
-  },
-  finalize() {
-    //
-  },
+export default () => {
+  //--
 };

resources/assets/scripts/routes/common.js

@@ -0,0 +1,6 @@
+/**
+ * Home
+ */
+export default () => {
+  //--
+};

resources/assets/scripts/routes/home.js

@@ -18,7 +18,13 @@ const src = path => `resources/assets/${path}`;
  */
 
 // Public Path
-mix.setPublicPath('./dist');
+// Public Path
+mix
+  .setPublicPath('./dist')
+  .setResourceRoot(`/app/themes/sage/${mix.config.publicPath}/`)
+  .webpackConfig({
+    output: { publicPath: mix.config.resourceRoot }
+  });
 
 // Browsersync
 mix.browserSync({