back

Life cycle

The life cycle is the internal mechanism that split the page display in a sequence of events. luge internal actions are bound to these events in order to make sure that they are triggered at the right moment and in the correct order.

You can attach your own functions to life cycle events and decide whether to postpone or not the execution of the current cycle.

Usage

luge.lifecycle.add('pageInit', (done) => {
  // Do you things here

  // Then call the done callback function
  done()
}, 10, 'load')

The attached function gets a done callback function as a parameter.

luge will wait for this callback to be called before moving to the next cycle event in the sequence. It allows you to block the execution of the current cycle until your own script is over (for instance if you want load resources or initialize other libraries before displaying a page).

You can chose to call this function before your code if you want it to run asynchronously, or after it if you want it to run synchronously.

Note that all the attached functions of a cycle event will be called at the same time, in the order defined by the position parameter.

Methods

add(eventName, callback, position, cycleName)

Attach a function to an event.

Parameter Type Description
eventName String A life cycle event name.
callback Function Function to call.
position Integer Execution order, the lower the sooner. (default 10)
cycleName String A life cycle name if you want to limit your function to a particular cycle. Leave empty to attach the function to all cycles. (default null)

remove(eventName, callback, cycleName)

Dettach a function from an event.

Parameter Type Description
eventName String A life cycle event name.
callback Function Function that was attached.
cycleName String The life cycle name that was used (default null)

Cycles

Four cycles are used:

  • load: when the first page is loaded.
  • transition: when navigating between two pages.
  • reload: when forcing reload between a page transition.
  • refresh: to manually refresh luge after an external page transition (for example with React).

Events

Each cycle calls its events in an ordered sequence.

Before and after events are also emitted during each life cycle event, without affecting the main cycle sequence.

luge.emitter.on('beforePageInit', myFirstCallback)
luge.emitter.on('afterPageLoad', myOtherCallback)

load

  1. siteInit
  2. pageInit
  3. siteLoad + pageLoad (simultaneously)
  4. siteIn
  5. pageIn
  6. reveal

transition

  1. pageFetch + pageOut (simultaneously)
  2. pageCreate
  3. pageKill
  4. pageInit
  5. pageLoad
  6. pageIn
  7. reveal

reload

  1. pageOut
  2. siteReload

refresh

  1. pageKill
  2. pageInit
  3. pageLoad
  4. pageIn
  5. reveal