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 { + public async appear(readyData: ITransitionData): Promise { + 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); } /**