Barba: View `afterEnter` hook on browser refresh is not triggered

[Kum0ri]

Hi there!
First of all, thanks alot for the great work. Using barba since V1 and loving it!

I'm experiencing something odd, when i try to hook into the "afterEnter" hook of a view it works like expected when navigating, but when the page refresh's, on startup, only the "beforeEnter" hook is fired.

Is this the expected behaviour?
If so, i'm not understanding quite well how i can startup my pages Functions, because if i use the beforeEnter hook when navigating whit pjax, we have both current and next container in the DOM at the same time causing alot of issues.

Thanks again for the great work.
Cheers,
Daniel

[xavierfoucrier]

Hi @Kum0ri,

This is probably a bug because it is working fine when using Barba to load the pages.
Here is a sample code to reproduce the issue:

import barba from '@barba/core';

barba.init({
  views: [{
    namespace: 'index',
    beforeEnter: () => {
      console.log('index:beforeEnter');
    },
    afterEnter: () => { // on browser refresh, this hook is not triggered
      console.log('index:afterEnter');
    }
  }, {
    namespace: 'playground',
    beforeEnter: () => {
      console.log('playground:beforeEnter');
    },
    afterEnter: () => { // on browser refresh, this hook is not triggered
      console.log('playground:afterEnter');
    }
  }]
});

@barba/core 2.3.9

[Liroo]

After checking the code, it seems it is a normal behavior.

On barba init, only appear hook is called and this, only from transitions and not from views.
https://github.com/barbajs/barba/blob/master/packages/core/src/core.ts#L229

In the View class, only beforeEnter is called on refresh.
https://github.com/barbajs/barba/blob/master/packages/core/src/modules/Views.ts#L55

I would like to investigate more in the next few days on this as I don't think it's a "wanted" behavior.

The current workaround is to use transitions instead views as :

barba.init({
        transitions: [{
            name: 'appear',
            namespace: ['about'],
            (before|after)appear: (data) => {}, // will execute only on refresh in namespace about
          },
        ],
        views: [{
             namespace: ['about'],
             (before|after)appear: (data) => {}, // will never execute on about (BUG)
        }],
      });

So just use transitions rather than views for appear.

EDIT: I checked and no, afterAppear does not even work in transitions
EDIT 2: In fact afterAppear is working only if you have an appear function defined

[xavierfoucrier]

Thanks for you feedback, waiting for @thierrymichel to confirm the behavior. :wink:

[MarcoPal]

Same issue here, for now I've solved it that way:

1: create ad object with the stuff you want to init afterEnter

const views = {
  "home"             : () => home.init(),
  "single-production": () => singleProduction.init()
};

2: create a simple function to init the view afterEnter

const initView = (namespace) => {
  if (!views[namespace]) return;
  views[namespace]();
};

1. Init the view on DOMContentLoaded and afterEnter

document.addEventListener("DOMContentLoaded", () => {

  const currentNamespace = document.querySelector('[data-barba-namespace]').dataset.barbaNamespace;

  initView(currentNamespace);

  barba.hooks.afterEnter(({next}) => {
    initView(next.namespace)
  });

  barba.init({...

[mverissimo]

Same problem here, in page refresh the function afterEnter from view it's not called.

[thierrymichel]

Fixed in @barba/core 2.3.15

[Techassi]

I'm using the newest version @barba/core 2.3.15 and my global barba.hooks.afterEnter hook still won't fire.

barba.hooks.afterEnter((data) => {
    console.log('??????????');
    initNavigationHandler();
});

...

barba.init({ ... });

Neither my log appears in the console nor the function gets triggered. Am I doing this wrong?

[antoine1000]

Agree, it would be very nice to have a hook that works on first page load, reload and after a transition.

[xavierfoucrier]

Hi @thierrymichel,

I can confirm that the latest version @barba/[email protected] fixed the bug when using afterEnter hook in views, like this: https://github.com/barbajs/barba/issues/393#issuecomment-493039316.

But when afterEnter hook is defined as a global hook, it won't fire on browser refresh :confused:

[Techassi]

Hi @xavierfoucrier,

yes indeed the behaviour when using afterEnter in views now works without any problem!

Global usage is still not possible. A current "workaround" (not pretty but works) is:

...

views: [{
        namespace: 'your-namespace',
        afterEnter(data) {
            if (data.current.url.href != data.next.url.href) {
                // do stuff when navigating to this view
            } else {
                // do stuff when directly accessed
            }
        }
    }]

...

Hopefully this will get fixed because the new v2 of barba works great and is a neat tool 👍

[thierrymichel]

Hi guys,

Thanks for reporting (and being patient).
beforeEnter and afterEnter should now work as expected 🤞.
Available for views AND globally… 💪 😄
They are triggered "around" the appear transition (if available).

[Techassi]

I can confirm the global afterEnter hook now works!

Thank you @thierrymichel for the quick fix. 👍

[antoine1000]

Thank you for the fix @thierrymichel ! However, I got a bug with the 2.3.16 version of Barba.

It seems that when you give the barba wrapper class to a <div> (instead of giving it to the <body> tag), barba classes are not fired/removed, and my page is completely blank (as .barba-enter = opacity: 0).

My barba layout looks like this:

<body>
  // ...
    <div data-barba="wrapper">
      <main data-barba="container" data-barba-namespace="home">
         ...
      </main>
    </div>
  // ...
</body>

Do you have any idea why this causes an issue?
Thanks a lot for your fixes!

[thierrymichel]

Are you using @barba/css?

[antoine1000]

Yes, in my JS:

barba.use(barbaCss);
barba.init({...});

and in my CSS:

.barba-leave-active,
.barba-enter-active {
  transition: opacity 100ms ease;
}

/* initial state */
.barba-leave {
  opacity: 1;
}

.barba-enter {
  opacity: 0;
}

/* ending state */
.barba-leave-to {
  opacity: 0;
}

.barba-enter-to {
  opacity: 1;
}

[thierrymichel]

@antoine1000 fixed (@barba/[email protected] + @barba/[email protected]).

CSS enter transition will not start on first page load (only appear).
leave and enter remain dedicated to page transitions.

[antoine1000]

Thank you @thierrymichel, it works like a charm now. I guess you can close the issue.

PS: Barba.js is awesome! :-)