Replace ModularLoad with Barba

assets/scripts/app.js

@@ -1,7 +1,8 @@
 import modular from 'modujs';
 import * as modules from './modules';
 import globals from './globals';
-import { html } from './utils/environment';
+import { $html } from './utils/dom';
+import config from './config';
 
 const app = new modular({
     modules: modules
@@ -28,8 +29,8 @@ function init() {
 
     app.init(app);
 
-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    $html.classList.add(config.CSS_CLASS.LOADED);
+    $html.classList.add(config.CSS_CLASS.READY);
+    $html.classList.remove(config.CSS_CLASS.LOADING);
 }
 

assets/scripts/config.js

@@ -0,0 +1,15 @@
+const env = process.env.NODE_ENV
+
+export default config = Object.freeze({
+    // Environments
+    ENV: env,
+    IS_PROD: env === 'production',
+    IS_DEV: env === 'development',
+
+    // CSS class names
+    CSS_CLASS: {
+        LOADING: 'is-loading',
+        READY: 'is-ready',
+        LOADED: 'is-loaded',
+    },
+})

assets/scripts/modules/Load.js

@@ -1,22 +1,27 @@
 import { module } from 'modujs';
-import modularLoad from 'modularload';
+import barba from '@barba/core';
+import config from '../config'
 
 export default class extends module {
     constructor(m) {
         super(m);
     }
 
     init() {
-        const load = new modularLoad({
-            enterDelay: 0,
-            transitions: {
-                customTransition: {}
-            }
-        });
-
-        load.on('loaded', (transition, oldContainer, newContainer) => {
-            this.call('destroy', oldContainer, 'app');
-            this.call('update', newContainer, 'app');
+        barba.init({
+            debug: config.IS_DEV,
+            schema: {
+                prefix: 'data-load',
+            },
+            transitions: [{
+                name: 'default-transition',
+                leave: (data) => {
+                    this.call('destroy', data.current.container, 'app');
+                },
+                enter: (data) => {
+                    this.call('update', data.next.container, 'app');
+                }
+            }]
         });
     }
 }

assets/scripts/utils/dom.js

@@ -0,0 +1,4 @@
+const $html = document.documentElement;
+const $body = document.body;
+
+export { $html, $body };

assets/scripts/utils/visibility.js

@@ -1,6 +1,5 @@
 import { isFunction } from './is';
 import { arrayContains, findByKeyValue, removeFromArray } from './array';
-import { $document, $window, $html, $body } from './environment';
 
 const CALLBACKS = {
     hidden: [],
@@ -22,7 +21,7 @@ const PREFIX = 'v-';
 let UUID = 0;
 
 // Main event
-$document.on('visibilitychange', function(event) {
+document.addEventListener('visibilitychange', function(event) {
     if (document.hidden) {
         onDocumentChange('hidden');
     } else {

package.json

@@ -14,9 +14,9 @@
         "build": "node --experimental-json-modules --no-warnings build/build.js"
     },
     "dependencies": {
+        "@barba/core": "^2.9.7",
         "locomotive-scroll": "^4.1.4",
         "modujs": "^1.4.2",
-        "modularload": "^1.2.6",
         "normalize.css": "^8.0.1",
         "svg4everybody": "^2.1.9"
     },