fix(core): 🐛 Fix global hooks (before|afterEnter) on first load

Closes #393

packages/core/__e2e__/hooks.spec.js

@@ -1,11 +1,20 @@
 /* eslint-disable no-mixed-operators, cypress/no-unnecessary-waiting */
-const hooksDefault = [
+const appearHooks = [
+  'global:beforeEnter',
+  // 'global:before',
+  // 'before',
   'global:beforeAppear',
   'beforeAppear',
   'global:appear',
   'appear',
   'global:afterAppear',
   'afterAppear',
+  // 'global:after',
+  // 'after',
+  'global:afterEnter',
+];
+const hooksDefault = [
+  ...appearHooks,
   'global:before',
   'before',
   'global:beforeLeave',
@@ -24,12 +33,7 @@ const hooksDefault = [
   'after',
 ];
 const hooksSync = [
-  'global:beforeAppear',
-  'beforeAppear',
-  'global:appear',
-  'appear',
-  'global:afterAppear',
-  'afterAppear',
+  ...appearHooks,
   'global:before',
   'before',
   'global:beforeLeave',

packages/core/__web__/scripts/views.js

@@ -3,6 +3,31 @@ import { home, page } from './views/hooks.js';
 
 const { barba } = window;
 
+// const list = document.querySelector('[data-test="hooks-list"]');
+
+// /**
+//  * Append list item
+//  *
+//  * @param {*} str List item content
+//  * @param {string} prefix Prefix for global
+//  * @returns {void}
+//  */
+// function append(str, prefix = '') {
+//   const item = document.createElement('li');
+
+//   item.textContent = prefix + str;
+//   list.appendChild(item);
+// }
+
+// barba.hooks.beforeEnter(() => {
+//   console.info('global.beforeEnter');
+//   append('global.beforeEnter');
+// });
+// barba.hooks.afterEnter(() => {
+//   console.info('global.afterEnter');
+//   append('global.afterEnter');
+// });
+
 barba.init({
   debug: true,
   views: [home, page],

packages/core/src/core.ts

@@ -219,15 +219,15 @@ export class Core {
     this.plugins.forEach(plugin => plugin.init());
 
     // 8. Barba ready
-    // Set next + trigger for appear and `beforeEnter` view on page load.
+    // Set next + trigger for appear and `beforeEnter`/`afterEnter` view on page load.
     const readyData = this.data;
 
     readyData.trigger = 'barba';
     readyData.next = readyData.current;
     this.hooks.do('ready', readyData);
 
     // 9. Finally, do appear…
-    this.appear();
+    this.appear(readyData);
     // Clean data for first barba transition…
     this._resetData();
   }
@@ -301,20 +301,23 @@ export class Core {
    * If some registered "appear" transition,
    * get the "resolved" transition from the store and start it.
    */
-  public async appear(): Promise<void> {
+  public async appear(readyData: ITransitionData): Promise<void> {
+    await this.hooks.do('beforeEnter', readyData);
+
     // Check if appear transition
     if (this.transitions.hasAppear) {
       try {
-        const data = this._data;
-        const transition = this.transitions.get(data, {
+        const transition = this.transitions.get(readyData, {
           appear: true,
         }) as ITransitionAppear;
 
-        await this.transitions.doAppear({ transition, data });
+        await this.transitions.doAppear({ transition, data: readyData });
       } catch (error) {
         this.logger.error(error);
       }
     }
+
+    await this.hooks.do('afterEnter', readyData);
   }
 
   /**

packages/core/src/modules/Views.ts

@@ -51,9 +51,6 @@ export class Views {
     this.names.forEach(name => {
       hooks[name](this._createHook(name), this);
     });
-
-    hooks.ready(this._createHook('beforeEnter'), this);
-    hooks.ready(this._createHook('afterEnter'), this);
   }
 
   /**