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
siteInit
pageInit
siteLoad
+pageLoad
(simultaneously)siteIn
pageIn
reveal
transition
pageFetch
+pageOut
(simultaneously)pageCreate
pageKill
pageInit
pageLoad
pageIn
reveal
reload
pageOut
siteReload
refresh
pageKill
pageInit
pageLoad
pageIn
reveal