From e9481664bd4daabd6ddfbf4765c01978ae82150b Mon Sep 17 00:00:00 2001
From: thierry <thmichel@gmail.com>
Date: Thu, 1 Aug 2019 17:06:29 +0200
Subject: [PATCH] fix(core): :bug: Fix global hooks (before|afterEnter) on
 first load

Closes #393
---
 packages/core/__e2e__/hooks.spec.js    | 18 +++++++++++-------
 packages/core/__web__/scripts/views.js | 25 +++++++++++++++++++++++++
 packages/core/src/core.ts              | 15 +++++++++------
 packages/core/src/modules/Views.ts     |  3 ---
 4 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/packages/core/__e2e__/hooks.spec.js b/packages/core/__e2e__/hooks.spec.js
index bd7f2a03..88558d82 100644
--- a/packages/core/__e2e__/hooks.spec.js
+++ b/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',
diff --git a/packages/core/__web__/scripts/views.js b/packages/core/__web__/scripts/views.js
index 26b737ae..47bde6d3 100644
--- a/packages/core/__web__/scripts/views.js
+++ b/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],
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
index 598806f7..8bed887b 100644
--- a/packages/core/src/core.ts
+++ b/packages/core/src/core.ts
@@ -219,7 +219,7 @@ 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';
@@ -227,7 +227,7 @@ export class Core {
     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);
   }
 
   /**
diff --git a/packages/core/src/modules/Views.ts b/packages/core/src/modules/Views.ts
index 69383243..37d7fa7b 100644
--- a/packages/core/src/modules/Views.ts
+++ b/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);
   }
 
   /**