Barba: afterEnter hook triggers wrong namespace

[Wouter125]

The problem

When using the views, the afterEnter hook fires on the previous page and not the page that I'm navigating to.

Description

Details

I'm navigating from work to index, and have an afterEnter hook on both of them. When entering index, the hook that get's called is the afterEnter on the work namespace.

Expected behaviour

Was expecting that the afterEnter hook would be called on the index namespace.

Actual behaviour

The afterEnter hook on the work namespace that I'm leaving is being called.

Code To Reproduce Issue [ Good To Have ]

barba.init({
    transitions: [{
        enter: (data) => {
            console.log("current namespace", data.current.namespace);
            console.log("next namespace", data.next.namespace);
        }
    }],

    views: [
        {
            namespace: 'sz-index',
            afterEnter(data) {
                console.log("sz-index");
            }
        },
        {
            namespace: 'sz-work',
            afterEnter(data) {
                console.log("sz-work");
            }
        }
    ]
})

Steps to reproduce issue [ Good To Have ]

Run the above code and the following will be printed to the console;

[Log] current namespace – "sz-work" (bundle.js, line 12311)
[Log] next namespace – "sz-index" (bundle.js, line 12311)
[Log] sz-work (bundle.js, line 12311)

---

Environment

• Barba version that exhibits the issue: 2.0.1-next.97+33c213b
• Build used:
  
  
  
  • [ ] module (esm/)
  
  
  • [x] browser (dist/)
  
  
  • [ ] main (lib/)
  
  
• Browser OS/version used: Safari Version 12.1 (14607.1.35.1)

[dwightjack]

Hi,

I'm experimenting with v2 and I still get this issue. both afterEnter and beforeEnter of the view I'm leaving get called instead of the one i"m entering into.

[thierrymichel]

Hi @dwightjack,

Can you please check your version ?
It should have been fixed in @next (2.1.1-next.77).

Thanks.

[dwightjack]

Hi, thanks for your reply.

sorry, right now I cannot check it. Anyway looking at the commit timeline could be I have an old version.

By the way, great job!

[dwightjack]

@thierrymichel I can confirm that with the latest version hooks work as expected. Also, I was trying to use the beforeAppear hook but it seems it's not fired.

By the way wouldn't it a good idea to trigger /enter/ hooks even for appearance when dedicated /appear/ hooks are not set? I think is is what Vue.js does as well.

edit: I tried to create a demo sandbox but it's failing to import the latest version (I guess it's a problem on CodeSandbox's side) so here is a demo with v2.1.0: https://codesandbox.io/embed/ppj87y685m

[thierrymichel]

Hi @dwightjack, thanks for your report!

Current expected behavior for views: beforeAppear and afterAppear are triggered only if you have an appear transition.

TBH, I'm not using views since a while…
Developing the 2.x, I was mainly focused on appear === onboarding animation.

Of course, this doesn't make sense for your use case.
I guess you want to init/destroy your views. During transitions but ALSO on the first load. Right?
And, in this context, beforeEnter seems the better choice!

My suggestion:

1. Remove beforeAppear and afterAppear for views. It's only related to transitions.
2. Trigger beforeEnter for views on the first load.

I think existing users will be comfortable with this. I just want to avoid confusion for newcomers…

Any thoughts on this?

[dwightjack]

@thierrymichel

Thanks for the explanation. I got your point. To me the dependency of view hooks and transition hooks wasn't that clear, so maybe adding it to the doc could help (is this dependency relevant also for enter/leave hooks?).

Yes, my goal is to init destroy views how can I trigger the beforeEnter hook on the first load? maybe from a global hook?

[thierrymichel]

@dwightjack Yes, you can implement some hacky solution but I think it's a common use case so it should be simple to use…

Please, can you share some code so I can put myself in your shoes?
I would to avoid extra methods (beforeAppear, init, …) leading to duplicate/unnecessary code

[dwightjack]

Ok. I will put something up in the next few days and share it on a new issue.

Thank you!

[OksanaRomaniv]

Had the same issue: "beforeEnter" hooks fires on wrong namespaces when using "@barba/core" from npm. Is the next.77 update included in npm version?

[dwightjack]

@OksanaRomaniv I don't think that the update is already available in the stable release.

Anyway you can install one of the release tagged in next. Right now the newest is 2.1.1-next.103 . Either update your package.json with that version or run: yarn add @barba/core@next (npm install @barba/core@next if you're using npm)

[OksanaRomaniv]

@dwightjack,

Can confirm, the @barba/core@next hooks fire as expected. And also the loading/performance looks much faster. Great work!

Thanks

[dwightjack]

Great! Glad to help.

Thanks for the kind words, but we have to thank the barba team for the big effort in bringing to us this shiny new version!

[thierrymichel]

🙏 But, no community, no support, no great tool... 😁