Plugins
Overview
Hybridly provides a simple plugin mechanism that allows for globally hooking into its lifecycle events.
This is what powers the built-in progress indicator. This is the equivalent of Inertia's global events, except it provides a structured way to extend its functionalities.
Registering plugins
A plugin can be registered through the plugins
property of the initializeHybridly
function.
import { MyPlugin } from 'hybridly-plugin-something'
initializeHybridly({
plugins: [
MyPlugin()
],
})
Developing plugins
A plugin is a simple object with at least a name
property. For convenience, Hybridly exports a definePlugin
function that provides typings for plugins.
Aside from hooking into lifecycle events, plugins can detect when Hybridly is initialized through to the initialized
hook.
import { definePlugin } from 'hybridly'
export default function MyPlugin(options?: MyPluginOptions) {
return definePlugin({
name: 'hybridly:my-plugin',
initialized(context) {
console.log('Hybridly has been initialized')
},
// Other lifecycle hooks
})
}
export interface MyPluginOptions {
// ...
}
Plugin-specific hooks
In addition to the request lifecycle events, the following hooks can be registered in plugins. They may also be awaited if necessary.
export interface Hooks extends RequestHooks {
/**
/////////////////////// * Called when Hybridly's context is initialized.
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
///////////////////////
*/
initialized: (context: InternalRouterContext) => MaybePromise<any>
/**
* Called after Hybridly's initial load.
*/
ready: (context: InternalRouterContext) => MaybePromise<any>
/**
* Called when a back-forward navigation occurs.
*/
backForward: (state: any, context: InternalRouterContext) => MaybePromise<any>
/**
* Called when a component navigation is being made.
*/
navigating: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>
/**
* Called when a component has been navigated to.
*/
navigated: (options: InternalNavigationOptions, context: InternalRouterContext) => MaybePromise<any>
/**
* Called when a component has been navigated to and was mounted by the adapter.
*/
mounted: (options: InternalNavigationOptions & MountedHookOptions, context: InternalRouterContext) => MaybePromise<any>
}